update height of element after a resize - javascript

How can i know the height of an element after a resize event? I use the function .height() of jQuery and i have a timer of 500ms before use my resize function but the function .height() still return the height before the resize.
$(window).resize(function() {
window.clearTimeout(timerResize);
timerResize = setTimeout(recalculateAll, 1000);
});
function recalculateAll() {
console.log('resize');
setOpenClose('.auteurs .block');
}
function setOpenClose(target) {
$(target).each(function() {
$(this).data('height', $(this).height());
$(this).height($(this).height() - ($(this).find('p').height() + 45));
});
sameHeights(target);
}
function sameHeights(target, locus) {
if (locus === undefined) {
locus = target;
}
var heightMax = 1;
$(target).each(function() {
if ($(this).height() > heightMax) {
heightMax = $(this).height();
}
});
$(target).each(function() {
$(this).height(heightMax);
});
}
Hoping my question is understandable because of my approximate english, and the fact i'm new in development.

You should be able to call the retrieve the height of the element in the resize callback.
$(window).resize(function(){
var itemHeight = $('.item').height();
});
See https://jsfiddle.net/cvwf0pra/

Related

How to make two different functions work on window resize

I want to make a sticky banner, which becomes fixed at top when it is scrolled and unsticks at the end of the page. The document height is dependent upon images, that's why I use window load event. I have the following code:
function saleBanner() {
$(window).bind("load", function() {
// Make sale banner fixed-at-top
var s = $('.sale-container');
var pos = s.offset();
var maxTop = $(document).outerHeight() - 828 - s.outerHeight(); // 828 is the total height of site footer and sign up form
function fixedBanner() {
var currentTop = $(window).scrollTop();
if (currentTop >= pos.top && currentTop < maxTop) {
s.attr("style", ""); //kill absolute positioning
s.addClass('fixed-at-top'); //stick it
} else if (currentTop >= maxTop) {
s.removeClass('fixed-at-top'); //un-stick
s.css({bottom: 0}); //set sticker right above the footer
} else {
s.removeClass('fixed-at-top'); //top of page
}
}
$(window).scroll(fixedBanner);
});
}
saleBanner();
I want to make this function work on window resize as well. So I added the following code:
function resizeBanner() {
var viewportWidth = $(window).width();
if (viewportWidth > 767) {
saleBanner();
}
}
I have one more function resizeWindow for mobile menu, which I also need to work on window resize. So when I put this two functions together, they don't work (although they work on window resize separately):
$(window).resize(function(e) {
resizeWindow(e);
resizeBanner(e);
});
Where is my mistake? How can I make both functions work on window resize?
Update: Here is the whole code for resizeWindow function. It's rather long, but may be it would be helpful for the answer.
// Mobile menu
var MQM = 768;
var viewportWidth = $(window).width();
function navSlide() {
var headerHeight = $('.cd-header').height();
$(window).on('scroll', {previousTop: 0}, function () {
var currentTop = $(window).scrollTop();
//check if user is scrolling up
if (currentTop < this.previousTop ) {
//if scrolling up...
if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
$('.cd-header').addClass('is-visible');
} else {
$('.cd-header').removeClass('is-visible is-fixed');
}
} else {
//if scrolling down...
if(!$('.cd-header').hasClass('menu-is-open')) {
$('.cd-header').removeClass('is-visible');
}
if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
}
this.previousTop = currentTop;
});
}
// Primary navigation slide-in effect on load
if(viewportWidth < MQM) {
navSlide();
}
function addOverflow() {
$('html').addClass('overflow-hidden');
$('body').addClass('overflow-hidden');
}
function removeOverflow() {
$('html').removeClass('overflow-hidden');
$('body').removeClass('overflow-hidden');
}
function hideHeader() {
$('.cd-header').removeClass('is-fixed is-visible');
}
function hideMenu() {
$('.cd-header').removeClass('menu-is-open is-fixed is-visible');
$('.cd-menu-icon').removeClass('is-clicked');
}
function resizeWindow() {
var viewportWidth = $(window).width();
$(window).off('scroll'); // unbind scroll event
if (viewportWidth > 767) {
if ($('.cd-primary-nav').hasClass('is-visible')) {
if ($('.algolia__search-content').hasClass('algolia__search-content--active')) {
hideMenu();
$('.search-trigger').addClass('is-clicked');
$('.search-header').addClass('is-fixed');
} else {
hideMenu();
if (!$('.js-algolia__input').is(':focus')) {
$('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
removeOverflow();
});
$('.search-trigger').removeClass('is-clicked');
$('.search-header').removeClass('is-fixed');
} else {
$('.search-trigger').addClass('is-clicked');
$('.search-header').addClass('is-fixed');
}
}
} else {
hideHeader();
}
} else {
navSlide();
if ($('.cd-primary-nav').hasClass('is-visible')) {
$('.cd-header').addClass('menu-is-open');
$('.cd-menu-icon').addClass('is-clicked');
$('.search-trigger').removeClass('is-clicked');
$('.search-header').removeClass('is-fixed');
}
}
}

jQuery resize function with css height

I'm trying to set a height to a div that it's parent have. I've tried and when I use console.log() it's actually working. But the height doesn't set without a refresh.....
This is my function
// Set Hight
function fixingHeight() {
function setHeight() {
var windowWidth = window.innerWidth;
var latestPostsWrapperHeight = $('#latestPosts').height();
var tabPane = $('#latestPosts').find('.tab-pane');
var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
var popularPostsWrapperHeight = $('#popularPosts').height();
var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
if(windowWidth > 767) {
$.each(tabPane, function() {
$(this).height(latestPostsWrapperHeight - 70);
});
$.each(tabPaneLists, function() {
$(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
});
$.each(profileWrapper, function() {
$(this).outerHeight(popularPostsWrapperHeight);
});
}
//console.log(windowWidth);
}setHeight();
$(window).resize(function() {
setHeight();
});
}fixingHeight();
To handle window resize event, call the function $(window).resize outside of the function setHeight()
to call setHeight() on first load, use the jquery handler $(document).ready
This is the final code :
function setHeight() {
var windowWidth = window.innerWidth;
var latestPostsWrapperHeight = $('#latestPosts').height();
var tabPane = $('#latestPosts').find('.tab-pane');
var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
var popularPostsWrapperHeight = $('#popularPosts').height();
var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
if(windowWidth > 767) {
$.each(tabPane, function() {
$(this).height(latestPostsWrapperHeight - 70);
});
$.each(tabPaneLists, function() {
$(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
});
$.each(profileWrapper, function() {
$(this).outerHeight(popularPostsWrapperHeight);
});
}
console.log(windowWidth);
}
$(document).ready(function() {
setHeight();
});
$(window).resize(function() {
setHeight();
});
remove the function wrapper fixingHeight(), 'setHeight()' is enough
$(window).resize dont't run because it is in a function so this is not working without calling the function wrapper, so get it outside of the function.
as # joram say, you can call $(document).ready when your document finish loading, so is ready.
$(document).ready(function() {
setHeight();
});
$(window).resize(function() {
setHeight();
});
function setHeight() {
var windowWidth = window.innerWidth;
console.log(windowWidth);
var latestPostsWrapperHeight = $('#latestPosts').height();
var tabPane = $('#latestPosts').find('.tab-pane');
var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
var popularPostsWrapperHeight = $('#popularPosts').height();
var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
if(windowWidth > 767) {
$.each(tabPane, function() {
$(this).height(latestPostsWrapperHeight - 70);
});
$.each(tabPaneLists, function() {
$(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
});
$.each(profileWrapper, function() {
$(this).outerHeight(popularPostsWrapperHeight);
});
}
}

Slide Toggle After Page Resize Bugging - jQuery

I have created a collapsible navigation which works fine on page load, but on the resizing of the window it seems to get trippy and slides up and down a number of times (can be just twice, or can go on for up to ten times).
(function ($) {
$.fn.myfunction = function () {
$(".navi-btn").hide();
$(".navigation").show();
};
})(jQuery);
(function ($) {
$.fn.mysecondfunction = function () {
$(".navi-btn").show();
$(".navigation").hide();
$(".navi-btn").click(function () {
$(".navigation").slideToggle();
});
$("li").click(function () {
$(".navigation").slideToggle();
});
$("#width").text("too small");
};
})(jQuery);
$(document).ready(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
$(window).resize(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
});
});
Here is a "working" demo jsfiddle
I have written the script myself, so I am sure there is an easy fix, I just don't seem to know what I have done.
I was thinking perhaps after a resize, would reloading the function be a good workaround, and if so how can this effect be achieved?
You are adding the click event while resizing the window. This will bind the same function multiple times to the click event. So the best option would be to bind the event only once which could be done on ready event. In this link I limited this binding in resize event itself by adding a class to the navi-btn and checking that.
$(".navi-btn").not(".binded").addClass("binded").click(function () {
$(".navigation").slideToggle();
});
Hope this gives you an idea.
Thanks,
Jothi
I had a quick test and found that removing the resive condition and putting it into it's own function seemd to fix the issue
From
$(document).ready(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
$(window).resize(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
});
});
to
$(document).ready(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
});
$(window).resize(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
});

manipulate when inview.js is firing

i would like to know how i can manipulate the inview.js script that the moment when its fired is not at first pixels in viewport, and the last when the element is going out but rather for example 50pixels later or earlier.
the script of inview.js is
(function ($) {
function getViewportHeight() {
var height = window.innerHeight; // Safari, Opera
var mode = document.compatMode;
if ( (mode || !$.support.boxModel) ) { // IE, Gecko
height = (mode == 'CSS1Compat') ?
document.documentElement.clientHeight : // Standards
document.body.clientHeight; // Quirks
}
return height;
}
$(window).scroll(function () {
var vpH = getViewportHeight(),
scrolltop = (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop),
elems = [];
// naughty, but this is how it knows which elements to check for
$.each($.cache, function () {
if (this.events && this.events.inview) {
elems.push(this.handle.elem);
}
});
if (elems.length) {
$(elems).each(function () {
var $el = $(this),
top = $el.offset().top,
height = $el.height(),
inview = $el.data('inview') || false;
if (scrolltop > (top + height) || scrolltop + vpH < top) {
if (inview) {
$el.data('inview', false);
$el.trigger('inview', [ false ]);
}
} else if (scrolltop < (top + height)) {
if (!inview) {
$el.data('inview', true);
$el.trigger('inview', [ true ]);
}
}
});
}
});
// kick the event to pick up any elements already in view.
// note however, this only works if the plugin is included after the elements are bound to 'inview'
$(function () {
$(window).scroll();
});
})(jQuery);
all credits go to here
my attemp was to add a value to offset top top = $el.offset().top + 50, which works! but how can i change the value for the bottom up?
thanks ted
I'd recommend using http://imakewebthings.com/jquery-waypoints/
Which you can call like so to achieve your desired effect at 10% from the bottom:
$('.flyIn').waypoint(function() {
$(this).removeClass('hidden');
$(this).addClass('animated fadeInUp');
}, { offset: '90%' });

Browser resize as a function listener to animate other elements

So, I've got a function animateSection() that animates two elements, #awards and #twitter.
I want to make it so that if a user resizes the browser
function animateSection() {
var $checker = $(window).width(),
$twitter = $('#jstwitter'),
$awards = $('#awards');
var distance = 20,
duration = 500;
if($checker > 1140) {
$twitter.fadeIn(duration, function() {
$awards.fadeIn(duration);
});
}
else {
$(window).resize(function(){
// here is where I run into trouble...
if($checker > 1140) {
$twitter.animate({left: distance}, duration);
$awards.animate({right: distance}, duration);
}
});
}
}
When you're first run the function you're storing $(window).width() in a local variable, $checker, then on resize you're checking that variable. It's not going to change! Try replacing:
if ($checker > 1140) {
with:
if ($(window).width() > 1140) {

Categories