jQuery media queries: Conditional function on certain device width (working on resize as well)

Question

I have a fluid grid layout. I need some of the columns (less necessary - like Twitter updates) to be "HIDDEN" on smaller resolutions and "SHOWN" on click to its heading.

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 on load, but I try to make it work "responsively" on window resize as well: Execute ToggleSmall() function on resolutions smaller than 681 and stop it on bigger ones.

I tried to bind the function on "resize" event (e.g. jQuery as Media Queries on resize), but for some reason "the toggling" executes 3-4x times (document is "ready" multiple times?).

I've found some other sollutions - mainly to define a variable - but none worked so far. I am also a jQuery novice, so maybe I missed something. :) Any ideas?

resize isn't a one time event, it fires many times. Each time it fires you are adding a new click handler without canceling the previous one. Should have conditionals in your code to see if it has already been run — charlietfl
– charlietfl, Commented Feb 12, 2013 at 1:04

Milche Patern · Accepted Answer · 2013-06-21 15:31:09Z

It has been suggested to use a 'timer' event-listener like to regulate the behavior and processing of javascript

COPY-PASTED from Curt 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();
});

Reno Dimitrova · Accepted Answer · 2013-02-13 14:06:38Z

3

If you're using this function $(window).resize(function() {}); you don't need to put it inside of document.ready. What I'd do is try to manipulate the CSS instead, because anyway when it shrinks you can't really see animation on the hidden part.

This is the 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 your link in the <head>

        <link type="text/css" rel="stylesheet" href="" id="styleSmaller"/>

edited Feb 13, 2013 at 14:06

answered Feb 12, 2013 at 0:42

Reno Dimitrova

1921 silver badge10 bronze badges

Collectives™ on Stack Overflow

jQuery media queries: Conditional function on certain device width (working on resize as well)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related