jQuery dynamically set incremented height to elements - javascript

What I want to achieve:
for each ul.container -> find the greatest li height -> add 25px to it -> apply that new height to all li within the container.
I need the calculation to happen also on window resize.
The problem:
While this works at page load, when resizing the browser window, the height keeps incrementing by 25px at every loop. I can't seem to figure out what I am doing wrong.
My code:
function listHeight() {
$("ul.container").each(function () {
var listHeight = 0;
var newHeight = 0;
$("li", this).each(function () {
newHeight = $(this).height();
if (newHeight > listHeight) {
listHeight = newHeight;
}
});
$("li", this).height(listHeight += 25);
});
}
listHeight();
$(window).resize(function () {
listHeight();
});
JSFiddle: http://jsfiddle.net/upsidown/VtypM/
Thanks in advance!

The height increases because you set the height in the first run. After that the height remains the "max hight" + 25 and adds additional 25 to it.
To prevent that just reset the height of the element to auto.
function listHeight() {
$("ul.container").each(function () {
var listHeight = 0;
var newHeight = 0;
$("li", this).each(function () {
var el = $(this);
el.css('height', 'auto');
newHeight = el.height();
if (newHeight > listHeight) {
listHeight = newHeight;
}
});
$("li", this).height(listHeight += 25);
});
}
listHeight();
$(window).resize(function () {
listHeight();
});
For better performance I suggest that you debounce/throttle the function call.

you need to add
$("li", this).height("auto");
after
var listHeight = 0;
var newHeight = 0;
view Demo

I think you need to look at this thread.
jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?
You need to call it at the end of the resize event.
Hope it helps!

You need to increment height only if newHeight > listHeight, I think.

Related

Resize image depending on window height

As per the title, I want to be able to reduce image size when window height becomes smaller.
It's working for reducing part but I want it to get the original height back when window height is greater than specified.
I know this part $('.model').height(); is wrong.
$(window).on('load resize', function() {
var h = $(window).height();
if (h < 850) {
$('.model').height(600);
} else {
$('.model').height();
}
});
You can try to store the height of .model in a variable and restore it like this:
var originalHeight = $('.model').height();
$(window).on('load resize', function() {
var h = $(window).height();
if (h < 850) {
$('.model').height(600);
} else {
$('.model').height(originalHeight);
}
});
try putting height back into (the default) "auto" when you want the original size back?
$(window).on('load resize', function() {
var h = $(window).height();
if (h < 850) {
$('.model').height(600);
} else {
$('.model').css("height","auto");
}
});

Problems positioning element based on browser width

I have a fixed position div that I want to have position left: 0 when the browser window is smaller than 1200px, but no left positioning when larger than 1200px. I'm using this code
var $window = $(window);
function checkWidth() {
var windowsize = $window.width();
document.write(windowsize);
if (windowsize < 1200) {
document.getElementById("DBCIbox").style.left = "0";
} else {50
document.getElementById("DBCIbox").style.left = "500px";
}
}
checkWidth();
$(window).resize(checkWidth);
but it doesnt seem to be doing anything. I'm setting the left=500px as simply a test to get the javascript working, then I'll worry about where I want to position it.
I've done some googleing and from what I can tell this should work, what am I missing?
If theres a way to clear the left positioning I'd like to know that as well.
var $window = $(window);
That line is cacheing that instance of window. You need to re-evaluate $(window) everytime you call this code to get updated width and height values
Updated code below
function checkWidth() {
var $window = $(window);
var windowsize = $window.width();
document.write(windowsize);
if (windowsize < 1200) {
document.getElementById("DBCIbox").style.left = "0";
} else {50
document.getElementById("DBCIbox").style.left = "500px";
}
}
checkWidth();
$(window).resize(checkWidth);
#Jnatalzia had it right, I needed to make a few tweaks, and the comments wouldn't let me post the code, but credit goes to #Jnatalzia for the answer.
function checkWidth() {
var $window = $(window);
var windowsize = $window.width();
var position;
if (windowsize < 1390) {
document.getElementById("DBCIbox").style.marginLeft = 0 + "px";
} else if (windowsize >= 1390) {
position = windowsize - 1060;
position = position / 2;
position = position - 175;
document.getElementById("DBCIbox").style.marginLeft = position + "px";
}
}
$("document").ready(function(){
$(window).load(function(){
checkWidth();
});
$(window).resize(function(){
checkWidth();
});
});

get variable comprehensive to other function

I have the following:
if ($firstBG.hasClass("inview")) {
$(window).resize(function () {
var height = $(window).height();
var getfactor1 = 680 / 697;
var posval1 = height * getfactor1;
console.log(posval1);
});
$firstBG.css({
'backgroundPosition': posval1)
});
}
But it does not get the value of posval1 in the background function. What am I doing wrong? I want to get the value of posval1 in the if inview and on resize function!
Thanks.
You will need to set the css property from the resize handler. If you want to initialize it, you just could trigger it:
if($firstBG.hasClass("inview")){
$(window).resize(function() {
var height = $(window).height();
var getfactor1 = 680/697;
var posval1 = height*getfactor1;
console.log(posval1);
$firstBG.css({'backgroundPosition': posval1)});
}).resize();

Jquery height() set using imagesloaded

I'm trying to set the position of a menu beneath a slider that is dynamically generating the height, so I've used imagesloaded to load my jquery last and all is well in every browser except safari where it retrieves the height of the slider set in the back-end and not the height of the image which is dynamically generated depending on page size. this is only occurring in safari....
Here is the javascript to position the menu:
$.browser.safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
if ($.browser.safari) {
$(window).load(function () {
var $container = $('.ls-wp-fullwidth-container');
$container.imagesLoaded(function () {
var height = $(".ls-wp-fullwidth-container").height() - 50;
$(".menu_wrap").css('top', height);
});
});
} else {
$(window).load(function () {
var $container = $('.ls-wp-fullwidth-container');
$container.imagesLoaded(function () {
var height = $(".ls-wp-fullwidth-helper").height();
$(".menu_wrap").css('top', height);
});
});
}
$(window).resize(function () {
var height = $(".ls-wp-fullwidth-container").height() + 40;
$(".menu_wrap").css('top', height);
});
The slider that is being used is anything slider I'm using a themeforest theme named cleanspace and running wordpress 3.5.1.
I've tried using $(window).bind("load",function(){ to load the jquery last and $.browser.safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
if ($.browser.safari) {
to detect the browser which works fine on pc but fails on mac, so I'm left with the first code pasted here and await any help with baited breath.
NOTE: the if statement here is un-needed if safari would load my jQuery after the slider images...
I have found a work around I'm guessing it's not the best anwser and would be happy to hear better suggestions, basically I've placed a timer on the function to load like so:
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
$(window).load(function() {
setTimeout(function(){
var $container = $('.ls-wp-fullwidth-helper');
$container.imagesLoaded( function() {
var height = $(".ls-wp-fullwidth-helper").height() ;
$(".menu_wrap").css('top', height);
});
}, 2000);
});
}
else {
$(window).load(function() {
var $container = $('.ls-wp-fullwidth-helper');
$container.imagesLoaded( function() {
var height = $(".ls-wp-fullwidth-helper").height();
$(".menu_wrap").css('top', height);
});
});
}
$(window).resize(function(){
var height = $(".ls-wp-fullwidth-helper").height() + 40;
$(".menu_wrap").css('top', height);
});

jQuery - How to know if window is resizing in width/height or both?

I have a little problem with window resizing using jQuery's function .resize(). I would like to know which dimension is getting bigger/smaller - width or height. I need this because if I just put two conditions - if width is for 50px bigger than div and if height is for 50px bigger than div,
// (pseudocode)
if width = div.width + 50px
width = something
if height = div.height + 50px
height = something
then is working on just one condition and I can resize only width or height.
How could I know which dimension is changing in size or if both are?
By saving last window size values in variables.
var h = $(window).height(), w = $(window).width();
$(window).resize(function(){
var nh = $(window).height(), nw = $(window).width();
// compare the corresponding variables.
h = nh; w = nw; // update h and w;
});
Save the previous size and compare with it, everytime the size changes.
For ex:
var prevW = -1, prevH = -1;
$(document).ready(function() {
// ... other stuff you might have inside .ready()
prevW = $(window).width();
prevH = $(window).height();
});
$(window).resize(function() {
var widthChanged = false, heightChanged = false;
if($(window).width() != prevW) {
widthChanged = true;
}
if($(window).height() != prevH) {
heightChanged = true;
}
// your stuff
prevW = $(window).width();
prevH = $(window).height();
});
Demo: http://jsfiddle.net/44aNW/

Categories

Resources