Develop Reference

jQuery dynamically set incremented height to elements

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.

Dynamic height based on viewport height

I have the following code which resizes the height of a targeted element
but it only works with resize event, not when the page is loaded.
What could be the flaw here that doesn't set the height dynamically with the page load?
I'd also like to know how I can make the iterated codes into a modular structure in
this scenario.
$(window).resize(function() {
var viewportHeight = $(window).height();
var search = $(#something).outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
});
$(function () {
var viewportHeight = $(window).height();
var search = $("#something").outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
});

How about something like this:
var resizeGrid = function() {
var viewportHeight = $(window).height();
var search = $("#something").outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
};
$(window).resize(function() {
resizeGrid();
});
$(document).ready(function () {
$(window).trigger("resize");
});

Use document.ready:
$( document ).ready(function() {
var viewportHeight = $(window).height();
var search = $("#something").outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
});

dynamic css using jquery width() and on() method

$(document).on(".wrapper-parallax", function(){
var height = $(window).width() / 8;
$(this).css("margin-top",height);
}
this code seem doesn't run in 'real time', I want the result (margin-top's value) to change along I resizing the window.

You need to write a window resize handler
$(window).resize(function () {
var height = $(window).width() / 8; //may be height() here instead of width()
$(".wrapper-parallax").css("margin-top", height);
}).resize()

You are missing trailing px
Try:
$(document).on(".wrapper-parallax", function(){
var height = $(window).width() / 8;
$(this).css("margin-top",height+"px");
}

Try this:
$(window).resize(function(){
var height = $(this).height() / 8;
$('.wrapper-parallax').css("margin-top", height + 'px');
}

get value of window resize function and take it in another function

following situation:
var height = $(window).height();
$(window).resize(function() {
var getfactor1 = 680 / 697
var posval1 = height*getfactor1
});
and in another function i have the following:
if($firstBG.hasClass("inview")){
$firstBG.css({'backgroundPosition': newPos(0, windowHeight, pos, posval1, 0.3)});
}
how can i get the value of posval1 in the window.resize() function into the firstBG.css everytime the user scales the browser window.
thank you!!

Or you could try to pass it trough a function:
var height = $(window).height();
$(window).resize(function() {
var getfactor1 = 680 / 697
var posval1 = height*getfactor1
myFunction(posval1);
});
function myFunction(posval1){
if($firstBG.hasClass("inview")){
$firstBG.css({'backgroundPosition': newPos(0, windowHeight, pos, posval1, 0.3)});
}
}

Or, easier, why don't you declare posval1 outside the windows resize function?
var height = $(window).height(),
posval1;
$(window).resize(function() {
var getfactor1 = 680 / 697;
posval1 = height*getfactor1;
});
if($firstBG.hasClass("inview")){
$firstBG.css({'backgroundPosition': newPos(0, windowHeight, pos, posval1, 0.3)});
}

why you don't put the $firstBG.css() into the window.resize()?

The resize event happens every time the user resizes the window. If you want to change something, it must be done from the handler for that event, otherwise the values will not update. But generally, if you have the posval1 variable in a higher scope than the resize event handler, you can access it from other places too, but as I said, the other parts of the code will not execute again unless in the event handler.
Scope example:
var posval1;
$(window).on('resize', function() {
posval1 = height * (680 / 697);
});
// somewhere else
console.log(posval1);
The value of posval1 is most likely to be undefined at the time the execution reaches console.log() however, because the window was not resized yet. What you could do is just outsource the CSS update to another function, and call it from the event handler as well as once at the start.
var windowHeight, pos, posval1; // etc
var updateBg = function () {
if($firstBG.hasClass("inview")){
$firstBG.css({'backgroundPosition': newPos(0, windowHeight, pos, posval1, 0.3)});
}
};
updateBg(); // once
$(window).on('resize', function () {
// calculate posval1
updateBg(); // every time on resize
});

function newPos(x, windowHeight, pos, adjuster, inertia){
return x + "% " + (-((windowHeight + pos) - adjuster) * inertia) + "px";
}
function Move(){
var pos = $window.scrollTop();
if($firstBG.hasClass("inview")){
var getfactor1 = 680/697;
var posval1 = height*getfactor1;
console.log(posval1);
$firstBG.css({'backgroundPosition': newPos(0, windowHeight, pos, posval1, 0.3)});
}
if($secondBG.hasClass("inview")){
var getfactor2 = 1255/697;
var posval2 = height*getfactor2;
....... and so on

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/