Resize function only works on page load - javascript

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/

Related

Disable Javascript Parallax Effect on Mobile

Can anyone tell me how to disable my parallax effect on mobile? Thank you for your help in advance!
Here is my code:
$(document).scroll(function() {
var y = $(document).scrollTop(), header = $(".page-nav"); if(y >= 528)
{ header.css({position: "fixed", "top" : "0", "left" : "0"}); } else
{header.css("position", "relative"); } });
function EasyPeasyParallax() {
scrollPos = $(this).scrollTop();
$('.landing-page-hero').css({
'background-position' : '50% ' + (-scrollPos/4)+"px"
});
$('.hero-content').css({
'margin-top': (scrollPos/4)+"px",
'opacity': 1-(scrollPos/250)
});
}
$(document).ready(function(){
$(window).scroll(function() {
EasyPeasyParallax();
});
});
I'd recommend making use of window.matchMedia():
$(document).ready(function(){
var mq = window.matchMedia("(min-width: 600px)"); // Your desired breakpoint
if (mq.matches) {
$(window).scroll(function() {
EasyPeasyParallax(); // Only parallax on devices at least 600px wide
}
});
});
Hope this helps! :)
Grab the viewport width on load. Inside a scroll handler, check to make sure that the width is above mobile, and only call your EasyPeasyParallax() method if the width is greater than 768 (or whatever your breakpoint for mobile is).
var $vpwidth = $( window ).width();
$( window ).scroll(function() {
if ($vpwidth >= 768){
EasyPeasyParallax();
}
});

same height of multiple li in javascript

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.

How to toggle class after 100vh scroll

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

dynamic margin based on jQuery window.width()

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 {
...
}
});

Scroll div until top of footer

i've been looking for this for a couple of days but still no joy!
I would like to have a div scroll in a fixed position until it gets to the top of the footer.
Here is a fiddle of what i have so far: http://jsfiddle.net/danieljoseph/uk4mC/
I'm using this JQuery code but this uses pixels to determine when the div stops. I would like to use the top of the footer as the stop point:
$(document).scroll(function() {
var scrollVal = $(document).scrollTop();
$('#floating-container').css('top',scrollVal+'px');
if (scrollVal < 50) {
$('#floating-container').css('top','50px');
}
if (scrollVal > 2347) {
$('#floating-container').css('top','2347px');
}
});
The issue is that i am using a CMS and the client will be adding text to the page so the second value will change depending on what they add.
I hope i've been clear enough! please let me know if you require more details.
Thanks,
You have to check in the scroll event if the bottom edge of your div is lower than the footer. If it is, place the div at the position of the footer minus the height of the div.
$(function(){
var container = $('#floating-container');
var minTop = $('header').outerHeight();
var maxTop = $('footer').offset().top - container.outerHeight();
$(document).scroll(function() {
var scrollVal = $(document).scrollTop();
container.css('top', scrollVal);
if (scrollVal < minTop) {
container.css('top', minTop);
}
if (container.offset().top > maxTop ) {
container.css('top', maxTop );
}
});
});
Fiddle
And, a much shorter variant of the script above:
$(function(){
var container = $('#floating-container');
var minTop = $('header').outerHeight();
var maxTop = $('footer').offset().top - container.outerHeight();
$(document).scroll(function() {
container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
});
});
Short version fiddle.
Just read the position of the footers top when you load the page:
http://jsfiddle.net/uk4mC/1/
var footerTop = $('#text-block').position().top;
and then use that as a trigger:
if (scrollVal < footerTop) { }

Categories