CODEWITHSUNDEEP
javascriptjqueryresizemedia-queries
lovis91
lovis91

Reputation: 2171

onresize load function just once

I'm trying to use both media queries and JS. So i need to use the resize function for 4 case. For each case I need to delete pictures, so i have to delete them in a dynamic way on resize. I have 4 range : 1800+ - 1024 || 1024 - 640 || 640-320 || 320- The problem is that the function is launched and relaunched even if the resolution is in the range. So i want to detect when the function is launch the first time and stop it then. Here what i done :

$(window).on('resize', function() {

  // Mosaic > 1024px
  var screenW = $(window).width();
  if (screenW > 1024) {
    var size = true;
    ....
  }
  if (screenW < 1024 && screenW > 640) {
    ...
  }
  ...
}

I don't know how to stop the resize when size = true is detected..

EDIT : Thanks all ! I now have this code 

function checkSize()
{
    var container = jQuery('#test');
    var screenW = jQuery(window).width();
    console.log(screenW);

    if (screenW > 1800 && current != 1800)
    {
        container.empty();
        jQuery('div#test').append("1800+\n") ;
        console.log('1800');
        current = 1800;
    }
    else if (screenW < 1024 && current != 1024)
    {
        container.empty();
        jQuery('div#test').append("1024+\n") ;
        console.log('1024');
        current = 1024;
    }
    else if (screenW < 640 && current != 640)
    {
        container.empty();
        jQuery('div#test').append("640+\n") ;
        console.log('640');
        current = 640;
    }
    else if (screenW <= 320 && current != 320)
    {
        container.empty();
        jQuery('div#test').append("320+\n") ;
        console.log('320');
        current = 320;
    }

}

And i'm not far to have what i want bug it's nt working very well. For example the screenW <=320 don't seems to work. This this fiddle..

Upvotes: 0

Views: 155

Answers (1)

Pierre Granger
Pierre Granger

Reputation: 2012

EDIT You need to execute it once on load and then on each resize, but only if you change range. Here is a code sample :

HTML :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
    div#test {
        white-space:pre ;
    }
    div#minis {
        font-size:0 ;
    }
</style>
<div id="minis">
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
</div>
<div id="test"></div>

Javascript :

var current = null ;

function checkSize()
{
    var screenW = jQuery(window).width() ;

    if ( screenW > 1800 && current != 1800 )
    {
        // Do what you need to do for 1800+
        jQuery('div#test').append("1800+\n") ;
        showImages(10) ;
        current = 1800 ;
    }
    else if ( screenW > 1024 && screenW <= 1800 && current != 1024 )
    {
        jQuery('div#test').append("1024/1800\n") ;
        showImages(8) ;
        current = 1024 ;
    }
    else if ( screenW > 640 && screenW <= 1024 && current != 640 )
    {
        jQuery('div#test').append("640/1024\n") ;
        showImages(6) ;
        current = 640 ;
    }
    else if ( screenW > 320 && screenW <= 640 && current != 320 )
    {
        jQuery('div#test').append("320/640\n") ;
        showImages(4) ;
        current = 320 ;
    }
    else if ( screenW <= 320 && current != 0 )
    {
        jQuery('div#test').append("320-\n") ;
        showImages(2) ;
        current = 0 ;
    }
}

function showImages(number)
{
    var i = 1 ;
    jQuery('div#minis img').each(function(){
        if ( i > number ) jQuery(this).fadeOut() ;
        else jQuery(this).fadeIn() ;
        i++ ;
    }) ;
}

jQuery(window).resize(checkSize) ;
jQuery(document).ready(checkSize) ;

Take a look at the fiddle to see if it's working like you want to : http://jsfiddle.net/HCc6E/2/

Previous answer --------- If you really want it to be exceuted only one time, you can try jQuery(window).off('resize') instead of var size = true. But i don't understand why you cannot just use media queries in your case : can you show a little bit more of your code or a fiddle ?

Upvotes: 1

Related Questions