i am new in javascript. its working fine if we refresh the page but its not working when we resize the window.
$(window).load(function(){
equl_height();
});
$(window).resize(function(){
equl_height();
});
function equl_height () {
var highestBox = 0;
$('ul li').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$('ul li').height(highestBox);
}
window.addEventListener("resize", equl_heigh);
cheers!
Problem is in how you measure height of an li. use scrollHeight instead of height(). Check this fiddle.
Update your equl_height method with
function equl_height () {
console.log( "resizing" );
var highestBox = 0;
$('ul li').each(function(){
//var height = $(this).outerHeight();
var height = $(this)[0].scrollHeight;
if(height > highestBox){
highestBox = height;
}
});
$('ul li').outerHeight(highestBox);
}
Also, since resize event can be fired at a higher rate so try this throttling trick as well.
Related
I have the below Javascript that makes divs equal height. It works fine on initial pageload and sets the heights. But on resize it doesn't seem to fire. Any ideas why?
Here is a fiddle https://jsfiddle.net/caffeinehigh/ohrjLs7m/
$(window).resize(function() {
var highestBox = 0;
$('.casestudy-container .text').each(function(){
if($(this).outerHeight() > highestBox) {
highestBox = $(this).outerHeight();
}
});
$('.casestudy-container .text').outerHeight(highestBox);
}).resize();
I think you have an extra resize. The following seemed to work for me:
$(window).resize(function() {
var highestBox = 0;
$('.casestudy-container .text').each(function(){
if($(this).outerHeight() > highestBox) {
highestBox = $(this).outerHeight();
}
});
$('.casestudy-container .text').outerHeight(highestBox);
});
Fiddle here: https://jsfiddle.net/pvsb9kr8/1/
I'm looking for a way to take the width of the elements before an element in hover.
I tried with:
$('ul li').hover(function() {
$(this).prevAll().each(function() {
var margin = $(this).width();
});
$(this).css('margin-left', margin + 'px');
});
But the console say:
Uncaught ReferenceError: margin is not defined
Any solution?
Thanks
I'm looking for a way to take the width of the elements before an element in hover.
You need to initialize your var outside of loop and just add the values:
$('ul li').hover(function() {
var margin = 0;
$(this).prevAll().each(function() {
margin += $(this).width();
});
$(this).css('margin-left', margin + 'px');
});
Accessing margin variable outside of each function would be result in undefined. Store the variable out of the each function scope so that you can access it outside the scope:
$('ul li').hover(function() {
var margin;
$(this).prevAll().each(function() {
margin = $(this).width();
});
$(this).css('margin-left', margin + 'px');
});
But I can realize in the above case, you won't get list margin-left accordingly what you're trying to do. So, you may use like this:
$('ul li').hover(function() {
var $this = $(this);//'li'
$(this).prevAll().each(function() {
var margin = $(this).width();
$this.css('margin-left', margin + 'px');//margin on 'li'
});
});
You cannot use your margin variable outside of the scope where you define or set the value.
$('ul li').hover(function() {
var that = this;
$(that).prevAll().each(function() {
var margin = $(this).width();
$(this).css('margin-left', margin + 'px');
});
});
You need to define the margin inside the loop where the margin variable is defined. If a veriable is define in a function/loop then the 'scope' of this variable is the function/loop that it is contained in.
$('ul li').hover(function() {
$(this).prevAll().each(function() {
var margin = $(this).width();
$(this).css('margin-left', margin + 'px');
});
});
If you want to use margin outside the loop then you need to define it before like this:
$('ul li').hover(function() {
var margin = 0;
$(this).prevAll().each(function() {
margin = $(this).width();
});
$(this).css('margin-left', margin + 'px');
});
and for a full page scope, define before you do anything:
var margin = 0;
$('ul li').hover(function() {
$(this).prevAll().each(function() {
margin = $(this).width();
});
$(this).css('margin-left', margin + 'px');
});
//margin can also be used here now.
I think the first solution is what you are looking for in this instance but I have given the second in case you come across something similar again.
I have a procedure
<script type="text/javascript">
function rescaleStuff ( )
{
jQuery('.children-have-equal-height').each(function(){
var children = jQuery(this).children();
var numChildren = children.length;
if (numChildren > 1)
{
var firstChild = children.first();
var maxHeight = firstChild.height();
firstChild.siblings().each(function()
{
var thisHeight = jQuery(this).height();
if (thisHeight > maxHeight)
maxHeight = thisHeight;
});
children.height(maxHeight);
}
});
}
jQuery(window).load(function() {
rescaleStuff();
});
jQuery(window).resize(function()
{
rescaleStuff();
});
</script>
which is intended to make all children of elements with class children-have-equal-height have a height equal to that of the tallest child. Why is it only working on page load, and then the height of the child elements stays the same as it was on page load?
Try setting the height to 'auto' at the begining of rescaleStuff with this code:
jQuery('.children-have-equal-height').children().height('auto')
How to make this function add the class after scrolling 100vh?
Currently it adds the class after 850px.
$("document").ready(function($){
var nav = $('#verschwinden');
$(window).scroll(function () {
if ($(this).scrollTop() > 850) {
nav.addClass("doch");
} else {
nav.removeClass("doch");
}
});
});
100vh in jQuery is simple as $(window).height() while in pure JavaScript is window.innerHeight or a bit more longer.
jsFiddle demo
jQuery(function($) {
var $nav = $('#verschwinden');
var $win = $(window);
var winH = $win.height(); // Get the window height.
$win.on("scroll", function () {
if ($(this).scrollTop() > winH ) {
$nav.addClass("doch");
} else {
$nav.removeClass("doch");
}
}).on("resize", function(){ // If the user resizes the window
winH = $(this).height(); // you'll need the new height value
});
});
you can also make the if part a bit shorter by simply using:
$nav.toggleClass("doch", $(this).scrollTop() > winH );
demo
I have a little problem with a jQuery function. I need to add a margin to some element when the window.width is < 580px and i need to remove it when the window.width is larger. Here is the problem, the first part of the function work well, not the second.
var Wwidth= $(window).width();
if ( Wwidth < 582) {
$( window ).resize(function() {
var nWwidth=$( document ).width();
var marginL = (nWwidth - 292)/2;
$('.hub-item').css('margin-left',marginL +'px');
});
}
else {
$( window ).resize(function() {
$('.hub-item').css('margin-left','0px');
});
}
I have no mystakes in the console but the margin are not to 0.
Thanks u all!
EDIT :
Correct code :
$(window).resize(function() {
var Wwidth= $(this).width();
if (Wwidth < 582) {
var nWwidth=$( window ).width();
var marginL = (nWwidth - 292)/2;
$('.hub-item').css('margin-left',marginL +'px');
}
else {
$('.hub-item').css('margin-left','0px');
}
});
Thanks all!
You need to put your if statement within the $(window).resize() function, and recalculate Wwidth every time:
$(window).resize(function() {
var Wwidth = $(this).width();
if (Wwidth < 582) {
...
}
else {
...
}
});