Can I use JQuery with inline html? If so how?

1 Views

I learned html and css a week ago. I completed my first project only to find that a div tag I used was not resizing to mobile formats. I have done some research and it seems the answer may reside with JQuery or .JS. I am working within a contained environment, WordPress.com, and I don’t know Java Script yet, but I am familiar with if then statements from studying logic for years.

So I effectively have two problems:

Read More
  1. Can I use JQuery with inline html: no css?
  2. How do I do it?

I know I am way off here. I am in the process of going through a .JS tutorial on codeacademy, but I am not finished.

Just thought I would try for advice here. I may not even be in the ballpark!

Here is my div tag and here is what I attempted: 

<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>



  $(window).resize(function() {

      if ($(this).width() < 951) {

        $('.divIWantedToHide').hide(<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>);

      } else {

        $('.divIWantedToHide').show(<div style="width:450px;height:5px;background-color:#FFFFFF;"></div>);

        }

    });
Post Views: 1

Related posts

Leave a Reply

5 comments

  1. Javascript is kind of over-kill for this kind of thing.

    I would suggest using CSS media queries.

    Paste this in and it should work just fine 🙂

    <style>

#YourDiv{
height:5px;
background-color:#FFFFFF;
}

@media only screen and (min-width:951px){
#YourDiv{width:950px;}
}

@media only screen and (max-width:950px){
#YourDiv{width:450px;}
}

</style>


<div id="YourDiv"></div>

    Instead of having your style defined in the div tag, your div now has a unique name (an id) that can be styled separately. This is incredibly useful, and most would argue necessary, once you start building more complicated pages. The @media tags do basically the same thing as your if statements, where min-width:951px will set the style when your window is AT LEAST 951px and max-width:950px sets the style when your window is AT MOST 950px. The rest of the styles that don’t change are set above ONE time because they are the same regardless of window size.

    And now, just for fun I’ll show you how to do it in pure Javascript as well:

    http://jsfiddle.net/AfKU9/1/ (test it out by changing the preview window size)

    <script>

var myDiv = document.getElementById("myDiv");

window.onresize = function(){
var w = window.innerWidth;
    if (w > 600){
        myDiv.setAttribute("style",'position:absolute;height:50px;background-color:#CCC;width:400px;' )
    }
    else{
        myDiv.setAttribute("style", 'position:absolute;height:50px;background-color:#333;width:100px;' )
    }
}

</script>

  2. $(‘.divIWantedToHide’).hide() will hide the div !!

    In order to apply css to this div you need to use css: 

       $('.divIWantedToHide').css('width':'950px','height':'5px','background-color':'#FFFFFF');

    If you want to append any div and apply css to it then use append/html

        $('.divIWantedToHide').append('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');

    or 

        $('.divIWantedToHide').html('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');

  4. If you want to resize or apply another style to some elements adapted to the device screen size, yout can just use the @media css property.

    #your_div_id {
    width: 950px;
    /* ... */
}
@media (max-width: 38em) {
    #your_div_id {
        display:none;
    }
}

  5. You are trying to hide a div with class ‘.divIWantedToHide’. But your div does not have any class.

    So you should add to your div the class:

    <div class="divIWantedToHide" style="width:950px;height:5px;background-color:#FFFFFF;">  </div>

    And then, you can show and hide it like here:

    $(".divIWantedToHide").hide()
$(".divIWantedToHide").show()