I have not been able to find an answer that works for me on SO.
Basically I have a div with an image that has fixed positioning. It is responsive and will shrink or grow to whatever the screen size is.
What I want to do is get the height anytime the screen size changes and input it as a positioning value for another div so that it there is no overlapping (due to the fixed positioning).
I can get the height initially but it never changes after the first value when the screen is being resized.
quick demo up here: link
look in console to see height being returned. notice that it doesn't change when browser is resized.
JS
$(function(){
var explore = $('#explore').height();
console.log(explore);
$( window ).on("resize", function() {
console.log(explore);
});
});
I've also tried .css("height") but that didn't fix the issue.
*note the div does not have fixed positioning on this example since it would make the layout more confusing
You are not modifying explore:
Change it as follows:
$(function(){
var explore = $('#explore').css("height");
console.log(explore);
$( window ).on("resize", function() {
explore = $('#explore').css("height");
console.log(explore);
});
});
You need to add a resize listener to the window like so:
function repositionDivOnResize() {
// this is where you'll dynamically reposition your element
}
$(window).on("resize", repositionDivOnResize)
Related
Bit of a jquery / javascript noob question here. I have a subnav element that I am sticking to the bottom of my primary nav once someone hits a certain scroll point. To do that, I'm offsetting the subnav element by the height of the main nav element, as shown below.
$(function() {
$('.sticky-nav').stickybits({
useStickyClasses: true,
stickyBitStickyOffset: $('.navbar-fixed-top').outerHeight(),
});
});
The problem that I'm running into is '.navbar-fixed-top' has a different height at mobile / tablet and desktop sizes (the height changes at 992px) and the offset gets messed up if someone resizes the screen (i.e., if they start at desktop, and then resize to mobile / tablet, there's too much space above the subnav because the main nav was taller in desktop).
My question is, how can I update the code above to dynamically update the outerHeight when the height of the .navbar-fixed-top element changes?
I tried the code below, inspired by the answer to this question: Resize element width on window resize jquery, but it's not working
$(function() {
var topNavHeight = $('.navbar-fixed-top').outerHeight();
$(window).on('resize', function(event) {
var topNavHeight = $('.navbar-fixed-top').outerHeight();
});
$('.sticky-nav').stickybits({
useStickyClasses: true,
stickyBitStickyOffset: topNavHeight,
});
});
Thanks!
I think this will work:
$(function() {
let stickything;
function set_sticky() {
if (stickything) {
stickything.cleanup();
}
stickything = $('.sticky-nav').stickybits({
useStickyClasses: true,
stickyBitStickyOffset: $('.navbar-fixed-top').outerHeight(),
});
}
$(window).on('resize', set_sticky);
set_sticky();
});
Just changing a variable isn't enough, you have to tell stickbits to update. There doesn't seem be a way to update the offset so this just reinitializes it.
I'm making a 2 block web page, 1 needs to be resizable using the resizable() function of jquery. when one is resized, the second block needs to change its width as well.
I use the following jquery code :
$(document).ready(function(){
$(window).bind('resize', function(){
var left_width = $(".left").width();
var right_width = $(".middle").width() - left_width;
$(".right").width(right_width);
});
$(".left").resizable();
});
the problem is, for some reason $(window).width() keeps changing and i cant assign the width to the right block correctly
Example
the problem
this is what comes up in the console when i log $(window).width() ,
sometimes its 1166 , sometime 1183.
The scroll bar is being displayed for a fraction of a second while resizing, slightly reducing the size of your window.
This seems to sometimes clash with when you calculate the new width of the second area, which reduces the width slightly.
Use Jquery .css.
$(document).ready(function(){
$(window).bind('resize', function(){
var left_width = $(".left").width();
var right_width = $(".middle").width() - left_width;
console.log(right_width);
console.log(left_width);
console.log('window ' + $(".middle").width());
$(".right").css("width",right_width+"px");
});
$(".left").resizable();
});
[EDIT] I misunderstood the problem but the difference is about right scroll of browser
The window size changing is due to the scrollbar appearing on the right of the browser window as $(window).width() calculates the size of the viewing area. My recommendation would be to change the overflow of the body to hidden whilst you are resizing the object. It seems to work on your Fiddle at least.
I am using jQuery to resize an element when the window is resized using:
$(window).resize(function() {
topHeight = $("#top").height();
height = $(window).height() - 210;
$("#container").height(height);
$("#g").height(height-25);
});
With the topHeight getting the most recent height of the top bar since it can rearrange.
My problem is that I can't figure out a way to resize the #container when the #top changes height. I've tried using $("#topRow").resize(function() { }), but it seems as though that doesn't work with elements.
You have to catch every event when #top's height changes.
If it happens when you resize the window, then you should bind your logic to window.resize, so your code in the question should work.
If there are other events when #top changes its height, then you should bind the logic there too.
Update: in the comments you mentioned that there is a multiple selection field, which can make the #topRow element change its height, so that is an event, which you can add your logic to.
Note: there is another option. You create a setInterval which periodically checks the size of #topRow and resises the #container if necessary, but I personally don't recommend this solution.
I'm trying to get height from adjustable div because I'd like to add overflow style into css when height value will be greater than a set value. When you resize window height of this the div change. I'll explain this with some pictures:
The main problem is how to get it dynamically? I mean,when you resize your own window etc.?
In case you are able to use jQuery, I would suggest using the window.onresize method and compute the height of the div.
$(document).ready(function()
{
$(window).on("resize", function()
{
$("#myDiv").text("My height is " + $("#myDiv").height());
});
});
Take a look at this fiddle I created for you: http://jsfiddle.net/9ftGe/
I hope this is what you wanted.
I think you're looking for monitoring the browser variables...
window.innerHeight
window.innerWidth
Whenever you check/call these variables you should get the exact window inner size and take it from there.
NB: These variables (constants to us) are case sensitive.
How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.
I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.
I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.