Reputation: 1
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
Reputation: 359
as mentioned by @roasted in the comments
$(document).ready(function(){ $(this).MscreenAdjust(myArray); })
$(window).resize(function(){ $(this).MscreenAdjust(myArray); })
Upvotes: 0