My function below, loads correctly on initial load and sets the div height to match the height of the video. However when I resize the window the element #top-content looses its height.
jQuery(window).resize(function () {
var vidHeight = jQuery('video').height();
jQuery('#top-content').css({
'height': vidHeight + 'px'
});
var vidPicHeight = jQuery('.video-element').height();
jQuery('#top-content').css({
'height': vidPicHeight + 'px'
});
console.log(vidHeight);
}).trigger('resize');
I have a console log running and it the variable vidHeightis changing as the window resizes, it is just not updating the style.
Try this
var vidHeight = jQuery('video').height();
jQuery('#top-content').css('height', vidHeight);
Related
I have a function that resizes divs depending on how high (in pixels) other divs with the same class are:
<script type="text/javascript">
function resizeTheDivs(tag){
// first get the tags to adjust
var $tags = $('.' + tag);
var $new_height = 0;
// find out which one is largest
$('.' + tag).each(function(){
$(this).height() > $new_height ? $new_height = $(this).height() : null;
});
// make all others that height
$tags.height($new_height);
// I console.log($new_height) here sometimes
}
// resize divs on document load
$(document).ready(function(){
resizeTheDivs('the-class');
});
// resize divs on window resize
$(window).resize(function () {
resizeTheDivs('the-class');
});
</script>
The divs resize correctly on page load, but when console.log($new_height) fires from the window resize function, the $new_height is not changed.
Context: There are 3 divs (floated left, so next to each other with 33% width) that contain text in p tags. So when I resize the browser width, the text gets 'longer', but the javascript function isn't picking up the new heights of the divs.
Any ideas?
You need to reset the height to auto before measuring it, or else it will always return the fixed value you set in $(document).ready:
function resizeTheDivs(tag){
// first get the tags to adjust
var $tags = $('.' + tag);
var $new_height = 0;
// find out which one is largest
$('.' + tag).each(function(){
$(this).removeAttr('style');
$(this).height() > $new_height ? $new_height = $(this).height() : null;
});
// make all others that height
$tags.height($new_height);
// I console.log($new_height) here sometimes
}
I was wondering how I could constantly get the current browser's height and width. Right now, I am using jQuery and have something like this:
var height = window.innerHeight;
var width = window.innerWidth;
This does initially work as it gets the screen when the page is loaded up. However, when the user changes the screen width/height manually, I can't seem to get the current dimensions and the page starts faulting with errors. How should I be checking the dimensions at all times? I've tried googling the answer but I can't seem to find anything applicable, though I'm sure many others have had the same issue (I don't think I'm searching up the right keywords!). Please let me know what I can do!! Thanks!
Use a window.onresize function as well as a window.onload handler to update the width and height variables.
(Resizeable Demo)
var width,height;
window.onresize = window.onload = function() {
width = this.innerWidth;
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
}
Using jQuery objects it would look like this.
(Resizeable Demo)
var width,height;
$(window).on('load resize', function() {
width = this.innerWidth; // `this` points to the DOM object, not the jQuery object
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try this:
$(window).on("resize",function(){
console.log($(this).height() + " " + $(this).width());
});
fiddle
Try this
var width = window.outerWidth;
var height = window.outerHeight;
To resize the current window, use
window.resizeTo(width, height);
You can trigger the resize function using:
$( window ).resize(function() {
//....
});
Hope it helps you
You can use this to detect a change in screen size:
$(window).resize(function() {
height = window.innerHeight;
width = window.innerWidth;
//other code you wish to run on screen size change;
});
This assumes that height and width were declared in a scope that the function has access to. Otherwise make sure to place var before each variable.
I am trying to replicate the left nav at this website: http://www.kahuna-webstudio.fr/.
As you can see when you scroll down about 200 pixels the left nav appears. I almost have it with one problem: I am currently animating the height and width of my div at the same time. What I want to do is set the height of the left nav div to the document height, and then when you scroll down exactly 296 pixels the width will grow to 150 pixels. Hope that makes sense.
So my question is: how can I set the height of this div to the document height, and then a second step would be to animate the width.
This is the line I am currently using:
$("#slidebottom").stop().animate({height:docheight +"px", width:newwidthgrow + "px"},'fast');
What I want to work, but is not working is:
slidebottomHeight = docheight;
$("#slidebottom").stop().animate({width:newwidthgrow + "px"},'slow');
Here is my current code:
$(window).scroll(function(){
var wintop = $(window).scrollTop();
var docheight = $(document).height();
var winheight = $(window).height();
var newwidthgrow = 150;
var smallheight = 0;
var smallwidth = 0;
var slidebottomHeight = $("slidebottom").height();
if((wintop > 296)) {
$("#slidebottom").stop().animate({height:docheight +"px", width:newwidthgrow + "px"},'fast');
}
if((wintop < 296))
{
$("#slidebottom").stop().animate({height:smallheight +"px", width:smallwidth + "px"}, 'fast');
}
});
If I understood correctly, you want to execute two action in sequence. If that is the case, you can use the callback for .animate. This callback is executed when the animation complete. Hence you can:
set the height
wait for the height to be set
fire the callback
Which in code becomes something like:
$("#slidebottom").stop().animate({width:newwidthgrow + "px"},'slow', function(){
$("#slidebottom").animate({
width:newwidthgrow + "px"
});
});
You can read more about the callback and .animate here.
$("#slidebottom").stop().animate({
height:docheight +"px"
},'fast',function(){
// This is a callback function. It will be called when the animation
// has finished executing.
$("#slidebottom").stop().animate({
width:newwidthgrow + "px"
});
});
function scrollContent(){
var div = $('#scrolling-content'),
ul = $('ul.image'),
// unordered list's left margin
ulPadding = 0;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
}
This is how I scroll my image list. The problem is that #scrolling-content element's size is dynamic. It changes on window resize. Here;
$(window).resize(function() {
$("#scrolling-content").css("width",$(window).width() + "px");
$("#scrolling-content").css("height",($(window).height()-400) + "px");
});
So it has to recalculate the left value when user changes windows size. How sould I change script to do that? Recalling scrollContent() function with window.resize function is a noob solution I guess. And it creates conflict for IE.
You could set the width on resize and make your function call the variable like so. This method turns your function into a js object and the window update resets the width var inside that object. Course now you call the function like this: scrollContent.scroll();
var scrollContent = {
width: 0,
scroll:function(){
var div = $('#scrolling-content'),
ul = $('ul.image'),
// unordered list's left margin
ulPadding = 0;
//Get menu width
scrollContent.width = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var left = (e.pageX - div.offset().left) * (ulWidth-scrollContent.width) / scrollContent.width;
div.scrollLeft(left);
});
}
};
$(window).resize(function() {
$("#scrolling-content").css("width",$(window).width() + "px");
$("#scrolling-content").css("height",($(window).height()-400) + "px");
scrollContent.width = $(window).width();
});
You can also just declare a standard js var and use that to keep things simple. I just prefer working with js objects to eliminate possible var interference.
At my website, I try to accomplish (with javascript) that the footer height changes if the page height is larger then a specific value (907 pixels, the body height). It also needs to change if the page height changes (so if the viewer changes his client height).
I use jQuery to get the page height, but I need it's continuously checked, and not only when the page loads.
This is the snippet I use:
$(document).ready(function(){
var windowheight = $(window).height();
if(windowheight >= "907") {
var extrafooterheight = windowheight - 907;
$('#footer').height(40 + extrafooterheight);
$('body').height(907 + extrafooterheight);
}
});
Thanks for your help.
I suggest attaching to the resize event of the window using jQuery:
$(document).ready(function(){
$(window).resize(function() {
var windowheight = $(window).height();
if(windowheight >= "907") {
var extrafooterheight = windowheight - 907;
$('#footer').height(40 + extrafooterheight);
$('body').height(907 + extrafooterheight);
}
});
});
Take a look at the jQuery resize() docs.