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.
Related
I am trying to get the height of a div tag on window resizing but I get always the same height. The event resizing is triggered correctly.
var resizeNews = this.resizeNews = function() {
$('.top-news__pillar').each(function (index){
console.log($(this).outerHeight());
if($(this).outerHeight() > maxHeightPillar) maxHeightPillar = $(this).outerHeight();
});
/if I don't set the height below the height correctly change when resizing/
$('.top-news__pillar').each(function (index){
$(this).outerHeight(maxHeightPillar);
});
}
$(window).on('resize',resizeNews);
Try .outerHeight() instead of .height()
Try this code.
$(document).ready(function() {
$(window).resize(function() {
var bodyheight = $('.top-news__pillar').height();
console.log(bodyheight);
}).resize();
});
Yes, you will get always same height why because if you specify your top-news__pillar element height in fixed unit like px instead of responsive unit like `%.
Even if you resize also your element height will be same. If you mention the element height in % you can see the height change when you resize the window.
I need a function that sets the height of a div according to the size of the window when the page is loaded and when the page is resized.
Instead I have a function that only adds to the length of the div, only when the window is resized.
I am not good at javascript myself, and this is the very last thing I need before my webpage is completed, so any help would be greatly appreciated!
This is the page, and the div in question is the light gray infobox (containing text and a button) on the left: http://goodshitdesign.no/
This is the code for the function I currently have:
<script>
$(document).ready(function() {
$(window).on("resize", function() {
var bodyheight = $(document).height();
$(".infobox").height(bodyheight);
});
});
</script>
No need of using Javascript to set the dimensions relative to the viewport.
Use viewport percentage height
1/100th of the height of the viewport.
.infobox {
height: 100vh;
}
If you still want to use JS(I don't know why when using CSS will be better approach),
resize event binding is not required to be wrapped in ready
To get window height use $(window).height()
Use trigger to force execute event handler on page load
Code:
$(window).on("resize", function () {
$(".infobox").height($(window).height());
// ^^^^^^^^^
}).trigger('resize');
// ^^^^^^^^^^^^^^^^^
Have you considered using vh and vw CSS units instead of JavaScript?
.infobox { width: 100vh; height: 100vh; }
Support: http://caniuse.com/#feat=viewport-units
Details: http://snook.ca/archives/html_and_css/vm-vh-units
Docs: https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths
<script>
$(document).ready(function() {
$(".infobox").height($(window).height());
$(window).on("resize", function() {
$(".infobox").height($(window).height());
});
});
</script>
'resize' do not run when page is loaded. Therefore on page ready you just create a event handler for resizes that will occur in the future.
your script works as it is. in order to resize your div onload, simply call the .resize method without any parameters.
<script>
$(document).ready(function() {
$(window).on("resize", function() {
var bodyheight = $(document).height();
$(".infobox").height(bodyheight);
});
$(window).resize(); // THIS EMULATES THE RESIZE EVENT ONDOCUMENTREADY
});
</script>
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();
});
This question already has answers here:
Get the real width and height of an image with JavaScript? (in Safari/Chrome)
(30 answers)
Closed 9 years ago.
I am scaling images to fit within a div and I want to center them with letterboxes by using positions, but when I try to get the width of the element with .width() immediately after setting the height, .width() returns 0.
For example:
$(image).css("height", "100%");
console.log($(image).width());
This echoes 0 to the console, but if I call $(image).width() from the console sometime later, the correct value is given. How can I get the width of the <img> element immediately after I change it's height?
Edit:
So my code goes something like this:
$(window).load(function(){
cSCMH();
});
function cSCMH()
{
//Some other code
for(var i = 0; i < $("sc mh im img").length; i++)
{
var image = $("sc mh im img")[i];
//More code
$(image).css("height", "100%");
console.log($(image).width());
}
}
The console still receives 0
Edit 2:
Okay so I think I know what the root of the problem is. The images don't appear to load into the page until they are made visible on the screen (I have them in a tab div where the display is set to none onload).
Is there any way to force the images to load even though they are not visible?
I have confirmed this is the issue. The images are not loaded until the div's display is set to block. How can I make the images load in onpageload instead?
Try using the image's load event
function cSCMH() {
$("sc mh im img").load(function () {
var $img = $(this);
$img.css("height", "100%");
console.log($img.width());
}).filter(function () {
return this.complete;
}).trigger('load');
}
Since height() does not provide callback function, You can use animate() here:
$(image).animate({"height": '100%'}, function() {
console.log($(image).width());
})
Also, to make sure all the images are loaded properly, you can wrap your code inside $(window).load(function() { ... });
$(window).load(function() {
$(image).animate({"height": '100%'}, function() {
console.log($(image).width());
})
});
You need to wait for dom change.
$(image).css("height", "100%");
setTimeout(function() {
console.log($(image).width());
}, 0);
setting height in percentage wouldn't set it when you haven't set it's parent's div fixed height. So you can also try by using height 100% to your body like this:
html,body{height: 100%;}
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);
}