Question

I’m fairly new to jQuery and css, and I’m designing a small website mostly for self-educational purpose.

The layout is fairly basic, one main column and one side column. But for smaller displays or tablets, I wanted to take advantage of the @media screen queries to detach the side column and stack it under the main column. And, so far so good, it worked.

Then, I added some widgets into that side column, mostly iframe elements – no troubles.

That’s when I ran into something weird. In order to keep the side column’s height manageable, I decided for one widget to display 2 divs (each embedding an iframe) alternatively at the push of a button when that column is narrow. But when it’s stacked under the main, it becomes wider and I wanted to show both iframe side by side, and hide the selecting button.

The weird part is, it seems to work until you use the button to switch visibility between iframes. If you resize the window after a couple of switches, the widget doesn’t display divs side by side anymore as it should per css direction. Reloading the css doesn’t help. I tried to understand it, and it’s like jQuery creates another context for the elements that supersedes the @media screen directives.

Any hint at what I’m doing wrong would be much greatly appreciated.

Cheers,

Manuel

You can view the site live here : example site

The relevant (and certainly faulty) jQuery code :

$(document).ready(function() {
$('button', '#sindex').button();
$('button', '#curmet').button();

$("#curmet").bind('click', function(){
$("#sindex").show();
$("#curmet").hide();
$('.stockexindex').css('display', 'none');
$('.stockexcurmet').css('display', 'inline-block');
});

$("#sindex").bind('click', function(){
$("#sindex").hide();
$("#curmet").show();
$('.stockexcurmet').css('display', 'none');
$('.stockexindex').css('display', 'inline-block');
});

});

Answer 1

By using jQuery’s .css() you override the stylesheet, because inline styles are designed to do that. Instead, add some CSS class name declarations that do the same thing, then add/remove the class names of the elements using jQuery. This way you are still within the @media domain.