jquery-collagePlus icon indicating copy to clipboard operation
jquery-collagePlus copied to clipboard

Window Resize set heigth new?

Open Messa1 opened this issue 11 years ago • 2 comments

Is it possible to set the targetheight new after resize of the window? I try this.

  // All images need to be loaded for this plugin to work so
    // we end up waiting for the whole window to load in this example
    $(window).load(function () {
        $(document).ready(function(){

        collage();


        });
    });     

    var size = "150"

    // Here we apply the actual CollagePlus plugin

    function checkWidth() {
            var windowSize = $(window).width();

            if (windowSize < 480) {
                var size = "120";
            }
            else if (windowSize < 720) {
                var size = "120";
            }
            else if (windowSize < 1160 ) {
                var size = "120";
            }
            else {
                var size = "150";
            }
            console.log(size);
        };

        // Execute on load
        checkWidth();
        // Bind event listener
        $(window).resize(checkWidth);   

        $(window).resize(collage);   


    function collage() {
        $('.Collage').removeWhitespace().collagePlus(
            {
                'fadeSpeed'     : 'fast',
                'targetHeight'  : size,
                'direction'     : 'vertical'
            }
        );
    };

Messa1 avatar Sep 29 '14 14:09 Messa1

this: setTimeout(collage, 50);should already start collage(). perhaps it doesn't work because you have collage() twice. try to remove the collage() after console.log(size). I don't know, perhaps it is necessary to pass size to the collage() function and then use the variable in the collage() function for setting the height. something like collage(size). (?)

ps: and then, also use it in the function, something like:

function collage(size) { ..

haheute avatar Sep 29 '14 18:09 haheute

seems to work like this

function collage(size){
    console.log(size);
    $('.Collage').removeWhitespace().collagePlus({
        'targetHeight': size,
        'allowPartialLastRow' : true
    });
};

// This is just for the case that the browser window is resized
var resizeTimer = null;
var windowSize = $(window).width();
$(window).bind('resize', function() {
    if($(window).width() != windowSize){
            if (windowSize < 1160 ) {
                var size = 120;
            }
            else {
                var size = 250;
            }
    //console.log(size);

    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(collage(size), 250);
    windowSize = $(window).width();
    }
});

haheute avatar Sep 29 '14 18:09 haheute