I have a nice script which let 2 divs have equill height.
but after I resize my browser the height keeps the same while I need it to be responsive and refreshes.
Really have no idea how to do this.
$(document).ready(function() {
var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
$(".h-txt.left").height(height);
$(".h-img.right").height(height);
});
Do I need to add a "document on refresh / resize" function?
try this:
$(window).resize(function (e) {
$(".h-txt, .h-img").css("height", "auto");
var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
$(".h-txt.left").height(height);
$(".h-img.right").height(height);
});
$(window).trigger("resize");
First we're resetting height to "auto" to make sure we always get height of the higher of the two <div>s later on.
Then - we actually get the height of the bigger one, and force it onto both elements.
Whole cycle repeats each time the window is resized - our function is bound to the "resize" event of the window. ($(window).resize(...);)
Last line is just triggering it on the initial load of the page, so we won't have to actually resize the window to get it launched for the first time.
jsfiddle: http://jsfiddle.net/5z0ett7e/
Just put your code into a function, and call it with '.resize()'
var responsiveSize = function() {
var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
$(".h-txt.left").height(height);
$(".h-img.right").height(height);
}
// This will call it on page load
responsiveSize();
// This will call it on window resize
$(window).resize(function(){
responsiveSize();
});
Related
I want to get proper height of my div element, so in code i Use:
$(document).ready(function() {
var h = $('.myElement.active').outerHeight(true);
alert('height:'+h);
... // further more code to work with height
}
But this element contains lots of images and seems like I got my alert with height lower than it should be because images can't stretch size of that element so fast. If I request height after couple seconds it will fire alert with correct height.
Question: How to get height and run my code with checking is all images been loaded and transitions if there some is done?
Sincerely,
Vitaly.
$(document).ready gets triggered by the time the DOM tree was successfully built, similar to calling a script at the very end of the <body>. At that time, images might still be loading, which means the height cannot be calculated yet.
Once the whole document, including images, is loaded, window.onload will be triggered.
window.onload = function() {
var h = $('.myElement.active').outerHeight(true);
alert('height:'+h);
... // further more code to work with height
}
use window.onload this fires after images have been loaded
window.onload = function() {
var h = $('.myElement.active').outerHeight(true);
alert('height:'+h);
}
I want to get selected div width according to following algorithm:
If user resize browser then get div width according to resize browser div.
If user don't resize browser then get div width normally.
Here is my code
jQuery(document).ready(function($) {
if ($(window).resize) {
var width = $('#main_header .wrapper').width($(window).resize);
}
else {
var width = $('#main_header .wrapper').width;
}
});
My code don't work, Please, any one can help me solving this problem. Thanks
This little function will get the width of #main_header .wrapper and update it on resize:
$(function() {
var $wrapper = $('#main_header .wrapper');//the element we want to measure
var wrapperWidth = $wrapper.width();//get its width
$wrapper.text(wrapperWidth);//dunno what you want to do with wrapperWidth but here im setting it as the text of .wrapper just so you can see the value changing
//add resize listener
$(window).resize(function() {
wrapperWidth = $wrapper.width();//re-get the width
$wrapper.text(wrapperWidth);//update the text value
});
});
Here's a working demo: http://jsfiddle.net/5rZ4A/
Your use of if is the problem. Try this:
jQuery(document).ready(function($) {
$(window).resize(function() {
alert("$('#main_header .wrapper').width());
})
});
$(window).resize will always return true because resize is a jQuery function. This code instead watches window for a resize event and calls the inner function when it happens.
I didn’t fill in the inner function because I wasn’t clear on what you wanted to happen upon resize.
The code to make a div height equal to its width below:
$('div').height($('div').width());
However if you manually resize the browser window the height will not update - you need to refresh the page. Any idea how to correct it?
You need to bind your code on the window.onresize event :
window.onresize=function(){
$('div').height($('div').width());
};
The doc : http://www.w3schools.com/jsref/event_onresize.asp
First of all pardon me if this is a duplicate , but I have been trying solutions from other posts but none of them seems to work for me.
This is what I am trying to achieve:
I want to set the min-height and min-width of a div with the current width and height of the document. The Event should trigger on every resize of the document window.
This is what I have tried so far:
$(document).ready(function() {
function reset_demensions() {
doc_height = $(document).height();
doc_width = $(document).width();
$(".flicker-div").css("min-width", doc_width + "px");
$(".flicker-div").css("min-height", doc_height + "px");
alert("From - Function" + doc_width + "x" + doc_height);
}
reset_demensions();
$(window).resize(function() {
reset_demensions();
});
});
The problem I am facing:
First time when the window loads it shows me the correct width and height. But when I try to resize the window manually two problems are being noticed:
1> The function is called twice i.e. alert box
2> The captured height of the document doesn't change.
3> The captured width of the document keeps increasing rapidly , and the values are not garbage as it's static for every run.
Test Run OUTPUT:
On Load:
1349x626
On Resize:
1369x3130
1389x15650
I am sure I missed something here , might be something very silly. Kindly help me figure this out.
I think your mistake is that you are capturing the height of the DOCUMENT .. instead of the window.
You are changing the window size and expecting the document size to change.
change your code to check for $(window).height() and $(window).width()
First you don't need the + 'px';
When you reload your browser after refreshing. it should be working or?
A few days ago i had the same issue and recognized its because of the document.width/document.height.
Is it possible to calculate the same with window.width/window.height?
the function is called every step you resize your window but you can add a timeout, so it will be only once executed. --> timeout plugin http://benalman.com/projects/jquery-dotimeout-plugin/
Not sure if this will make a difference, but you don't need to have your function definitions nested in the onready function. It may be having some effect on the scope of the function/garbage collection etc? You can safely define the functions before the onready, as it won't be called until the document is ready. Also take out the alert from where it is. Doing that has caused me many a browser crash because of the speed that the event fires and it tries to fire an alert when you resize the window!
You might want to try $(window).width() too as that might explain your cumulative results as your document is getting bigger as you resize your div, especially if there is padding/margins involved somewhere.
I have two sections next to each other, the first with a flexible width image and the second with a series of elements. I want the second to adjust it's height to match the height of the image in the first. I managed to get some javascript working that looks at the height of the image and adjusts the height of second section. However, it only works on resize and I'm unable to get it to work on load as well. For an example, see my fiddle. You'll notice the height matching doesn't kick in until resize.
$(document).ready(function(){
function matchHeight() {
var newHeight = $("#slider").height();
$("#ctas").height(newHeight);
}
jQuery.event.add(window,"resize",matchHeight);
});
http://jsfiddle.net/sGNcc/2/
Just call "matchHeight" in your "ready" handler:
jQuery.event.add(window,"resize",matchHeight);
matchHeight();
Also that's kind-of a weird way to establish an event handler:
$(window).resize(matchHeight);
Call the matchHeight function onload:
$(document).ready(function(){
matchHeight();
});
function matchHeight() {
var newHeight = $("#slider").height();
$("#ctas").height(newHeight);
}