smbdelse
smbdelse

Reputation: 1

JQuery elements adjusting script

I have recently worked out some script to adjust parameters of some site elements to the window size. It shows no errors, but doesn't change anything. Strange is, that in all places in the script arrays are read as I wanted, so I think it's not the case. In the other hand when I used similar code but without arrays it worked perfectly, bot looked ugly.

jQuery.fn.extend({
    MscreenAdjust: function (x,a,b,c,d) {
        var windowWidth = $(window).width();
        if (windowWidth > 1500) {
            $(this).css(x, a);
        }
        else if (windowWidth > 1050) {
            $(this).css(x, b)
        }
        else if (windowWidth > 800) {
            $(this).css(x, c)
        }
        else {
            $(this).css(x, d)
        }
    }
});

$(document).ready(function() {
    $(".center").MscreenAdjust("width", 1390, 980, 780, 300);
    $("#content").MscreenAdjust("margin-right", "10%", 0, 0, 0);
    $("#menu_bar li").MscreenAdjust("width", "auto", "auto", "auto", "100%");
});
$(window).resize(function() {
    $(".center").MscreenAdjust("width", 1390, 980, 780, 300);
    $("#content").MscreenAdjust("margin-right", "10%", 0, 0, 0);
    $("#menu_bar li").MscreenAdjust("width", "auto", "auto", "auto", "100%");
});

So, here is the current code:

jQuery.fn.extend({
    MscreenAdjust: function (toAdjust) {

        toAdjust.forEach(function (elem) {

            var windowWidth = $(window).width();
            var ItemtoAdjust = elem;

            if (windowWidth > 1500) {
                $(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[2]);
            }
            else if (windowWidth > 1050) {
                $(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[3]);
            }
            else if (windowWidth > 800) {
                $(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[4]);
            }
            else {
                $(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[5]);
            }
        });

    }
});
var myArray = [
    [".center","width", 1390, 980, 780, 300],
    ["#content","margin-right", "10%", 0, 0, 0],
    ["#menu_bar li","width", "auto", "auto", "auto", "100%"]
];

$(document).ready().MscreenAdjust(myArray);
$(window).resize().MscreenAdjust(myArray);

EDIT:

I changed function from jQuery specific to regular one, and all problems gone away. Here is the code:

    function MscreenAdjust(toAdjust) {

        toAdjust.forEach(function (elem) {

            var windowWidth = $(window).width();
            var ItemtoAdjust = elem;

            if (windowWidth > 1500) {
                $(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[2]);
            }
            else if (windowWidth > 1050) {
                $(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[3]);
            }
            else if (windowWidth > 800) {
                $(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[4]);
            }
            else {
                $(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[5]);
            }
        });
    }

var myArray = [
    /* TARGET       PROPERTY        >1500       >1050       >800        =< 800 */
    [".center",     "width",        "1390px",   "980px",    "780px",    "300px"],
    ["#content",    "margin-right", "10%",      0,          0,          0],
    ["#menu_bar li","width",        "auto",     "auto",     "auto",     "100%"]
];

$(document).ready(function() {
    MscreenAdjust(myArray);
});
$(window).resize(function() {
    MscreenAdjust(myArray);
});

Upvotes: 0

Views: 73

Answers (1)

Fikri Marhan
Fikri Marhan

Reputation: 359

as mentioned by @roasted in the comments

$(document).ready(function(){ $(this).MscreenAdjust(myArray); })
$(window).resize(function(){ $(this).MscreenAdjust(myArray); })

Upvotes: 0

Related Questions