JQuery media queries: conditional function on specific device width (works with resizing too)
I have a grid layout. I need some columns (less necessary - like Twitter updates) to be "HIDDEN" at lower resolutions and "SHOWN" when clicking on its title.
Here's what I have so far:
Html
<div id="wrapper">
<div class="toggle">
<h2>Heading</h2>
This content is visible always
</div>
<div class="toggle-small">
<h2 class="toggle-small-heading">Heading</h2>
<div class="toggle-small-content">
This content is hidden on max-width 600px. You can reveal it by clicking the heading.
</div>
</div>
<div class="toggle-small">
<h2 class="toggle-small-heading">Heading</h2>
<div class="toggle-small-content">
This content is hidden on max-width 600px. You can reveal it by clicking the heading.
</div>
</div>
</div>
JQuery
// D E F I N E T H E F U N C T I O N
function ToggleSmall () {
// CONDITIONALS
// Clickable heading
var ToggleSmallVar = $('#wrapper').find('.toggle-small-heading');
// Content to toggle
var ToggleSmallCol = $('#wrapper').find('.toggle-small-content');
// FUNCTION
// Content to toggle - hide it to be shown on click
$(ToggleSmallCol).addClass('none');
// Toggle function
$(ToggleSmallVar).click(function () {
// Find col to toggle
var ToggleSmallColTarget = $(this).closest('.toggle-small-section').find('.toggle-small-col');
// Toggle the DIV
$(ToggleSmallColTarget).slideToggle('slow');
});
}
// C A L L T H E F U N C T I O N
$(document).ready(function () {
if ($(window).width() < 681) {
ToggleSmall();
}
});
It works running at boot time, but I try to make it "react" to change the window size: follow ToggleSmall () function with a resolution of less than 681 and a stop on the big ones.
I tried to bind the function to a "resize" event (like jQuery as media queries on resize ) but for some reason the "toggle" takes 3-4x times (document is "ready" multiple times?).
I found some other solutions - mostly for defining a variable, but nothing has worked so far. I'm also a jQuery beginner, so maybe I missed something. :) Any ideas?
source to share
It has been suggested to use an event-listener "timer" to regulate javascript behavior and handling
COPY-PASTED from Kurt Howard Example :
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$(function() {
var pause = 100;
// will only process code within delay(function() { ... }) every 100ms.
$(window).resize(function() {
delay(function() {
var width = $(window).width();
if( width >= 768 && width <= 959 ) {
// code for tablet view
} else if( width >= 480 && width <= 767 ) {
// code for mobile landscape
} else if( width <= 479 ) {
// code for mobile portrait
}
}, pause );
});
$(window).resize();
});
source to share
If you use this function $(window).resize(function() {});
, you don't need to embed it inside document.ready. I would try to manipulate the CSS instead, because when it shrinks you won't be able to see the animation in the hidden part.
This is js.
$(window).resize(function() {
var pageWidth = $(window).width();
if( $(window).width()< 681){
//call my function
//myfunction();
$('#styleSmaller').attr('href','../css/siteSMALLER.css');
}
});
And then you have a link in <head>
<link type="text/css" rel="stylesheet" href="" id="styleSmaller"/>
source to share