Question

I have set up this codepen to best explain what I am trying to do.

http://codepen.io/cfed/full/pfvwr

I am using a media query to hide the content area of the forth div and fix the div to the bottom of the parent container when the browser is less than 1300px. I am them using jquery to toggle the visibilty of this div. This part is working okay.

What I am trying to achieve from here is the following –

• The div is always displayed when the browser is greater than 1300px. I.e If someone minimises the browser, toggles the visibility and then returns to the a wider view it should return to the original position. Currently it can return in a minimised state.
• The jquery function only works when the browser is less that 1300px. Therefore clicking the link when the browser is greater than 1300px does nothing.

Any help pointing me towards the right approach would be much appreciated.

Answer 1

Here you go: http://codepen.io/anon/full/dcBsg

To show the content area when the browser window is more than 1300 pixels wide, you just need to add an event listener to $(window).resize that shows the content area if it’s not visible (your media query is overridden when slideToggle changes the element’s CSS).

Preventing the content area from being hidden in the first place when the browser is more than 1300 pixels wide is as simple as checking the width of the window, and doing nothing if it’s too wide.