I'm using this code to resize a div on my page:
function sizeContent() {
var newHeight = ($("html").height() - $(".header").height() -3) + "px";
$(".content").height(newHeight);
}
I am triggering this using:
$(window).resize(sizeContent());
But I also call it inside
$(document).ready(sizeContent());
to set all the heights properly.
If i resize the browser window by dragging at its borders it works great.
But the initial call does not seem to have any effect. Putting an alert inside the sizeContent function I can see that it is being called at page ready, and is setting the right height, but nothing is changed on the page.
It's as if the browser does not recognize that it needs to redraw anything unless the window itself is changed.
Solved:
In the end it was not the javascript that was the problem, using div's with display:table and display:table-row was causing it. Removed these from the css and everything worked.
// If you put your code at the bottom of the page to avoid needing`$(document).ready`, it gets even simpler:
$(window).on('resize', function () {
var newheight = ($(window).height() - $('.header').height() - 3);
$(".content").css("height", newheight);
}).trigger('resize');
// Another way to do that same thing
$(document).ready(sizeContent);
$(window).on('resize', sizeContent);
function sizeContent() {
var newheight = ($(window).height() - $('.header').height() - 3);
$(".content").css("height", newheight);
}
// Another technique is to`.trigger()`one event inside the other:
$(window).on('resize', function () {
var newheight = ($(window).height() - $('.header').height() - 3);
$(".content").css("height", newheight);
});
$(document).ready(function () {
$(window).trigger('resize');
});
Replace
$(".content").css({height:newHeight}) //replace this
with
(".content").height(newHeight);
Use below code:
function sizeContent() {
var newHeight = ($(window).height() - $(".header").css('height')-3) ;
$(".content").css('height',newHeight);
}
Related
This is a bit of JavaScript (jQuery) I wrote that shrinks an element to be as high as possible while still keeping the entire page above the fold. The way it works is essentially "calculate the height difference between the document and the window, and make the element smaller by that much". (see below.)
This works fine as far as I can tell — except that unfortunately I still need IE7 support, and the behavior in that browser is kind of wonky. Specifically, calling my function seems to fire another resize event, causing a kind of feedback loop.
IE7 is apparently the only browser this happens in, and I haven't yet figured out why it happens. I've already tried making the target height smaller to make sure nothing goes out of bounds, but the result is the same.
What's the best way to make my code not fire the resize event in IE7?
function stretchToBottom($element) {
(window.onresize = function () {
// temporarily reset the element's height so $(document).height() yields the right value
$element.css({maxHeight: ''});
var heightDiff = $(document).height() - $(window).height();
if (heightDiff <= 0) {
return;
}
var initialHeight = $element[0].scrollHeight;
var minHeight = 200;
var targetHeight = initialHeight - heightDiff;
var height = Math.max(targetHeight, minHeight);
$element.css({maxHeight: height + 'px'});
})();
}
wrap your code with:
<!--[if !IE7]>-->
//NONE IE code comes here
<!--<![endif]-->
<!--[if IE7]>
//ONLY IE7 code comes here
<![endif]-->
more info here
I just discovered this question which describes the exact same problem I have. The top two answers offered a working solution: store the current window dimensions and process the event listener only when they have actually changed.
For the record, here's the working code I currently have. I changed the function name to be more accurate and moved the "add event listener" part to outside the function.
function shrinkToFit($element) {
$element.css({maxHeight: ''});
var heightDiff = $(document).height() - $(window).height();
if (heightDiff <= 0) {
return;
}
var initialHeight = $element[0].scrollHeight;
var minHeight = 200;
var targetHeight = initialHeight - heightDiff;
var height = Math.max(targetHeight, minHeight);
$element.css({maxHeight: height + 'px'});
}
var lastWindowWidth = $(window).width();
var lastWindowHeight = $(window).height();
$(window).on('resize', function () {
if (lastWindowWidth !== $(window).width() || lastWindowHeight !== $(window).height()) {
shrinkToFit($tableContainer);
lastWindowWidth = $(window).width();
lastWindowHeight = $(window).height();
}
});
I am using the responsive jcarousel plugin and I have a problem. Everything works fine responsive and nice when I load the web, but if I resize the browser window the carousel messes up.
I figured out I should be firing jcarousel reload method to make it recalculate the quantity of slides and their sizes. The problem is I cannot make the carousel reload. Please, see code below:
This is what makes my jcarousel responsive(this works fine):
var jcarousel = $('.jcarousel');
jcarousel.on('jcarousel:reload, jcarousel:create', function () {
console.log('reloading carousel');
var carousel = $(this),
width = carousel.innerWidth();
cantSlides = 1;
if (width >= 1600){
width = width / 4;
cantSlides = 4;
}else if (width >= 1200) {
width = width / 3;
cantSlides = 3;
}else if (width >= 800) {
width = width / 2;
cantSlides = 2;
}
carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
$('.jcarousel-control-prev')
.jcarouselControl({
target: '-='+cantSlides
});
$('.jcarousel-control-next')
.jcarouselControl({
target: '+='+cantSlides
});
})
And this is what is not working:
$(window).resize(function(){
$('.jcarousel').jcarousel('reload', {});
});
I placed a console.log inside the carousel reload,create function. It logs when I press F5 but it does not when I resize the browser window. Why is my reload event not firing?
Thanks!
I found where the mistake was!
jcarousel.on('jcarousel:reload, jcarousel:create', function () { was wrong, the correct syntax is this: jcarousel.on('jcarousel:reload jcarousel:create', function () {, with a space instead of a comma.
I am using this code to set the height of a section.
//Fixed Image Window Height
$(window).ready(setSizes);
function setSizes() {
var containerHeight = $("#about").height();
$("#about").height(containerHeight - 70);
}
$(window).resize(setSizes);
I had initially
$(window).load(setSize);
There seem to be conflicting things going on I believe. How can I write this saying do this when the window loads and also when it gets resized?
$(document).ready(function(){
setSizes();
});
function setSizes() {
var containerHeight = $("#about").height();
$("#about").height(containerHeight - 70);
}
Try this!
I wrote it like this and it seems to work. Not sure if it's bad practice or not, and I haven't really checked cross-browser, but it's functioning.
$(document).ready(function(){
setSizes();
});
$(window).resize(setSizes);
function setSizes() {
var containerHeight = $(window).height();
$("#about").height(containerHeight - 70);
}
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 have some Javascript using JQuery to give my main content's container a height if it is smaller than the browser's viewport. This is to ensure the footer is always at the bottom of the page. Wen I call it like this, it works:
$(document).ready(function() {
var windowHeight = $(window).height();
var contentHeight = windowHeight - 325;
if($("#content").height() <= contentHeight) {
alert(contentHeight);
$("#content").height(contentHeight+"px");
}
});
But I want to declare it as a function so I can use it on the page resize event, but when I do that, it doesn't work. Here is the code I am trying to use:
function pageSizer() {
var windowHeight = $(window).height();
var contentHeight = windowHeight - 325;
if($("#content").height() <= contentHeight) {
alert(contentHeight);
$("#content").height(contentHeight+"px");
}
}
$(document).ready(pageSizer());
$(window).resize(pageSizer());
Any ideas?
$(document).ready(pageSizer());
$(window).resize(pageSizer());
change to
$(document).ready(pageSizer);
$(window).resize(pageSizer);
You are invoking your functions instead of passing them as a reference which jQuery expects.