0

I added this script to my website, in order to dinamically change color of text, based on background image.

I'm currently executing call to it on ready() with the following documented code:

$(document).ready(){
  BackgroundCheck.init({
    targets: '.target',
    images: '.thumbnails'
  });
});

and script, practically add a specific css class to objects with class "thumbnails"

My problem is that I don't want that this code is executed when width of the window is lower than 768px, either during loading of page, or resizing window under this value.

I thought about this code:

$(document).ready(){
   if(window.width() > 768 )
   {
      BackgroundCheck.init({
        targets: '.target',
        images: '.thumbnails'
      });
   }
});

but it is fired only at first loading.... instead I need that this script has no effect in ANY case under 768px of window width, and HAS effect in ANY case over 768px.

Please, how can I do that? Thank you.

3 Answers 3

4

Is this what you want?

window.resize only fires when you indead resize the window so... you need to manually fire the script when you load the page.

The best way to do this is to wrap your code in a small function and fire that once (see below) then attach the resize event to the same function and voila.

http://jsfiddle.net/NKLd5/2/

// same as doc.ready, i prefer this over $(document).ready
$(function() {
    // variables ftw!
    var win = $(window);
    
    // fire it once on document.ready
    resizeHandler();
    
    // Fires on every resize   
    win.resize(resizeHandler);
    
    function resizeHandler() {
        if (win.width() >= 768) {
            BackgroundCheck.init({
                // etc
            });
        }
    }
});

if you only want to fire the script once, you can set a boolean that is set to true when the script fires for the first time.

Then in the resize handler

    var fired = false;
    ...

    function resizeHandler() {
        if (win.width() >= 768 && !fired) {
            fired = true;
            ...

MediaQueries

If you are only going to use the js for adding classes you should really use mediaqueries, unless you are doing some complex things.

/* applies this css to all elements with the .targets and .thumnails classes */
/* Everything below 768px */
@media all and (max-width: 767px) {
    .targets {
        background: blue;
    }
    .thumbnails {
        background: blue;
    }
}
/* everything > 768px */
@media all and (min-width: 768px) {
    .targets {
        background: red;
    }
    .thumbnails {
        background: red;
    }
}
4
  • mhmmmm I don't know why but.... executing your fiddle, I have ant "test" in firebug console log..... in any window width Apr 10, 2014 at 19:02
  • @LucaDetomi Updated the fiddle: jsfiddle.net/NKLd5/2 You should see text appearing if you resize the output window. Apr 10, 2014 at 19:03
  • @LucaDetomi if your end game is manipulating css you should really use MediaQueries (updated the answer to reflect) they are much more efficient. Apr 10, 2014 at 19:13
  • No no... I don't have to manipulate css. As you can see, that script add css class that override defualt style. I simply want that this plugin has any kind of effect below 768px (either on Ready, and on Resize). Thank you. Apr 11, 2014 at 6:58
0

Throw this in as well:

$( window ).resize(function() {
  if(window.width() > 768 )
   {
      BackgroundCheck.init({
        targets: '.target',
        images: '.thumbnails'
      });
   }
   else{
      //You probably want to do something here...
   }
});
2
  • But I need that effect of first fire (for example adding of css classes in desktop breakpoint) would be "reset" under 768px ( = removed) and then re-applied, when I resize again over 768. In addiction, your code is added to mine? So I have to replicate function call, on ready() and on resize()? Apr 10, 2014 at 18:42
  • You will need to bind to both events, so yes, you will. You could break out the duplicate code into a separate function both handlers would call, but the code is so trivial that I wouldn't bother. Rick Lancee has a very succint example of doing that. Apr 10, 2014 at 18:47
0

You can go with

$(window).resize(function() {
    if($(window).width() > 768 ) {
        // DO SOMETHING HERE
        alert();
    }
});
$(document).ready(function() {
   if($(window).width() > 768 ) {
        // DO SOMETHING HERE
        alert();
    } 
});

http://jsfiddle.net/aD69D/

1
  • You should wrap all your code in document.ready, what if you are manipulating the dom when you resize the browser but the document is not ready yet? Apr 10, 2014 at 18:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.