Question

i have this div in my DOM

<div class="span4 minus65" id="divChange">

I have given it an id so that i can select it with jquery hopefully

What i want to do is change the div to

<div class="span12" id="changeBack">

when the screen size gets below 600px for example (I have set the id=changeback as im guessing ill need to revert it back?) Im learning jquery so would appreciate some pointers on what to do here to make this happen or is there a way to use CSS media queries? (None than i can think of though)

Any help appreciated

Answer 1

Something like this should work. You should take a look at CSS 3 Media Queries as they might help you in accomplishing your task without involving JavaScript.

$(window).resize(function(){
    if($(window).width() < 600 && $("#changeBack").length == 0){
        $("#divChange").attr("id", "changeBack");
    }
    else{
        $("#changeBack").attr("id", "divChange");
    }
});