I made a little script to change the height of a group of li-elements to the one with the most content.
The code works fine, but it should also work by resizing the browser width.
I need to know why it doesn't reload by changing the browser width ?
Here is my Code :
//changes slider hight to the hight of the li with the most content
function heightChange() {
var max = -1;
$(".feedback li").each(function() {
var h = $(this).height();
max = h > max ? h : max;
});
$(".feedback li").css("height", max);
};
// start by open site
heightChange();
// load function by resizing of the browser window
$(window).bind("resize", function(){
heightChange();
});
You need to reset your height before setting it again. Demo
$(window).on("resize", function(){
$(".feedback li").css("height", "auto");
heightChange();
});
Otherwise will height() just return the specified value;
Also, .on() is the preferred way to bind and event, as of jQuery 1.7
Related
Hello guys I'm trying to change height of my element dynamically.
These are my variables.
var windowWidth = 1440;
var currentWidth = $(window).width();
var elementHeight = $('#line4').height();
Now what I want is when difference between window width and current width is lower then 6 I want to change height of my element. I want to do this every time when (windowWidth - currentWidth)<6. So every time when window resizes and it's lower then 6 I want to change height of element by minus 14px. This is what I've tried.
$( window ).bind("resize", function(){
if((windowWidth - currentWidth)<6) {
$("#line4").css('height', elementHeight-14);
}
});
It does not work and I don't know what I'm missing. Also follow up question can I change other CSS properties this way. For this particular problem I will also need to change css top property in the same way, because I have some div with absolute position.
You need to measure the current width of the window on every resize event, since it's changing too.
var windowWidth = 1440;
var currentWidth = $(window).width();
var elementHeight = $('#line4').height();
$( window ).bind("resize", function(){
currentWidth = $(window).width()
if((windowWidth - currentWidth)<6) {
$("#line4").css('height', elementHeight-14);
}
});
You need to get windowWidth each time resize event called
And you should add debounce into resize event for better performance.
I often do like this, maybe you can search any better way:
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// Run code here, resizing has "stopped"
currentWidth = $(window).width()
if((windowWidth - currentWidth)<6) {
$("#line4").css('height', elementHeight-14);
}
}, 250);
});
and I created this to test, you can try it. Btw i increase from 6 to 600 to check easier :D
https://codepen.io/huytran0605/pen/NgBEVO
I have this code from website
jQuery refresh page on browser resize
Works fine but its too sensitive on mobile devices.
So i shoud add some margin of error.
How tu use this code when difference in browser width is more than 100px
if browser width is smaller and larger
//refresh page on browser resize
$(window).bind('resize', function(e)
{
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function()
{
this.location.reload(false); /* false to get page from cache */
}, 200);
});
I'm assuming that by "when difference in browser width is more than 100px" means you're attempting to detect that the window has changed in size by more than 100px. To do this you'll need to store the original width of the window and compare against that:
var originalWidth = $(window).width();
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
if (Math.abs($(window).width() - originalWidth) > 100) {
this.location.reload(false); /* false to get page from cache */
}
}, 200);
});
(This seems an odd requirement, however: refreshing the page on window resize is far from ideal UX. You may find it better to use CSS breakpoints, or scripting if necessary, to modify the page in place rather than the brute-force approach of reloading the whole thing.)
Store
var currentWidth = $( window ).width() to a temporary variable.
After resizing, check the difference
( currentWidth - $(window).width() ) > 100
let currentWidth = $(window).width();
$(window).on('resize', function(){
if(($(window).width() - currentWidth ) > 100 || (currentWidth - $(window).width()) > 100 ) {
currentWidth = $(this).width();
location.reload();
}
});
It is hard to explain… so I opened a Fiddle:
http://jsfiddle.net/qga046f3/
Goal: My goal is to get three divs of the same height. So I detect all the heights and choose the biggest one and apply this height to the other div-containers.
If the user resizes the browser-window the heights of the divs should be re-adjust. But jQuery gives me always the same height from first time. Why?
This is my jQuery code:
var adjustheights = function(){
heights = [];
$('.element').each(function(i){
heights.push($(this).outerHeight());
});
var maxHeight = Math.max.apply(Math, heights);
$('.element').css('height', maxHeight);
$('.maxheight').html(maxHeight);
}
adjustheights();
$(window).resize(function(){
adjustheights();
});
You need to reset (remove) the height of each element before adding the new one. jQuery adds an inline style when you set a height via CSS, so you need to remove it and add it again with the new value: (http://jsfiddle.net/qga046f3/4/)
var adjustheights = function(){
heights = [];
$('.element').each(function(i){
// Reset height first
$(this).removeAttr('style');
heights.push($(this).outerHeight());
});
var maxHeight = Math.max.apply(Math, heights);
$('.element').css('height', maxHeight);
$('.maxheight').html(maxHeight);
console.log(heights);
}
adjustheights();
$(window).resize(function(){
adjustheights();
});
I'm not sure how to use the order of the window events load and resize on jQuery to make it work when resizing. The first function is used to get the total width except the scrollbar width, because the CSS is using the device width, but the JS is using the document width.
The second function adds a style when the total screen width is between 768px and 1024px, and it should work when I load the page at any screen, after resizing, etc. I'm doing a lot of tests and I think the problem is about the window events order.
For being more specific about the problems, it doesn't remove the style when I load the page at 900px and I expand it to > 1024px! Or by the contrary, it doesn't add the style when I load the page at 1300px and I shorten the width to 900px.
I think it's 'cause of the load and resize events order, but I'm not totally sure. Or maybe I'm not doing the correct declaration of the variable into the resize.
The code:
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
$(document).ready(function(){
var vpwidth=$(window).width();
$(window).on('resize', function(){
var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;
if(vpwidth >= 768 && vpwidth <= 1024) {
$('.contentleft, .contentright').css('width', changeWidth + 'px');
} else {
$('.contentleft, .contentright').removeAttr('style');
}
}).resize();
});
I believe the issue is that you're not re-calculating the vpwidth on resize, So the value you got when the page was loaded will be used every time window is resized.
try
$(document).ready(function(){
$(window).on('resize', function(){
var vpwidth=$(window).width(); // get the new value after resize
var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;
if(vpwidth >= 768 && vpwidth <= 1024) {
$('.contentleft, .contentright').css('width', changeWidth + 'px');
} else {
$('.contentleft, .contentright').removeAttr('style');
}
}).resize();
});
The issue is because you are not recalculating the width (vpwidth) on resize function.
It is initialized and set on page load itself and hence doesn't change when the window is resized causing the style to not be added or removed.
You need to re-assign the value to the variable from within the resize function.
$(window).on('resize', function(){
var vpwidth=$(window).width();
}
Demo Fiddle
I've been working on a scroll to top function for my website, and that part of it works fine. My problem is however that I have a fixed div that is overlapping my footer when it hits the bottom of the page.
Here is the function that I have working.
$(document).scroll(function (e) {
if (document.body.scrollTop >= 800) {
$('#beamUp').show(1000);
} else {
$('#beamUp').hide(1000);
return false;
}
});
Is there somehow I could detect when I hit that part of the page and stop the div from moving past that.Help is much appreciated!
jsFiddle: http://jsfiddle.net/zazvorniki/RTDpw/
Just get the height of the page, minus the height of the div in question, as well as the footer... make sure the top is never greater than that value... you'll also need an onresize event handler re-evaluate that value.
looking at your jsfiddle... here are my edits
In your scroll listener, I am checking for the position of the page, and adjusting the bottom position of the floater appropriately. I also set the initial display:none, so you don't need to call .hide() in your initial script. In addition, resizing the window has the effect of scrolling for your use, so I changed the listener for both events.
$(document).on('scroll resize', function (e) {
var viewHeight = $(window).height();
var viewTop = $(window).scrollTop();
var footerTop = $("footer").offset().top;
var baseline = (viewHeight + viewTop) - footerTop;
var bu = $("#beamUp").css({bottom: (baseline < 0 ? 0 : baseline) + 'px'});
if (viewTop >= 50) {
bu.show(1000);
} else {
bu.hide(1000);
}
});