I belive my doubt is quite simple, but I'm not achieving the result I need.
I'm using BS4 to build a website.
I have a fixed-top navbar, using the class "fixed-top", but I don't know its actual height, and as the responsive goes on, it changes.
I want to calculate the height of the navbar via JQuery or JS then add the same height as PADDING-TOP on body, so it will be always aligned correctly.
It must happen on window load and resize.
What would be the correct way to do that?
Thanks!
$element.outerHeight() includes the vertical padding and borders in the height calculation.
$element.height() is the raw height of the element.
$(window).on("load resize", function (event) {
var $navbar = $(".my-navbar");
var $body = $("body");
$body.css("padding-top", $navbar.outerHeight());
});
$(function(){
$('body').css("padding-top", $(".fixed-top").height());
});
http://api.jquery.com/height/
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've been trying to figure out how this website made the following effect and I can't find the answer.
https://www.dezeynne.com/
It seems that while resizing the browser window, the main div resized also with it dynamically by changing the height.
I'm also bad in Math, so please help me to understand the idea behind this awesome effect.
It would be also nice to help me figure out how the parallax is working, I mean how can I change the position of the background in css/javascript while resizing the browser window.
$(document).ready(function() {
var $window = $(window);
var $welcomeElement = $(".welcome");
var defaultHeight = $welcomeElement
console.log($welcomeElement);
$window.resize(function() {
// I'm stuck here at math as you see
$welcomeElement.css("height", ($window.width() - $window.height()) -
$welcomeElement.innerHeight());
console.log("Resized!");
console.log($window.height());
});
});
Have you considered using viewport units?
Set the div to height:50vw;
#main {
background:#daa;
height:50vw;
color:#400;
font-size:10vw;
text-align:center;
line-height:50vw;
}
<div id="main">Hello</div
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)
I have horizontal layout and it has 5 inline divs. Is there a way in javascript to get the width of the users' viewport then apply it to the each content panel tags width, so it will be 100% in every content panel? I need it to be 100% of the viewport because there are parallax elements inside it
I have tried this css code below but the panels are just stacking on top of each other.
#contentPanel { width: 100%; float: left;}
I really don't know if the questions makes any sense, because I've been up for 16 hours searching and trying to work this out.
It's easy with JQuery:
var fullDiv = $("div");
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
$("body, html").width(3*viewportWidth);
fullDiv.width(viewportWidth);
fullDiv.height(viewportHeight);
Simple Demo.
You will want to update the divs when the browser is resized probably, currently it only works when it first loads. Read more about .resize().
There are some ready JavaScript (jQuery) splitters, but they require panels height to be set. The problem is, that my website doesn't support fixed height, it just can't. Other thing is that this container can change it's height dynamicly, so I'd like to this splitter to adjust to the panels height.
Is there a script or a way to avoid that?
My idea was to set container's height the bigger panel's height, like:
var lheight = $("#LeftPanel").height();
var rheight = $("#RightPanel").height();
if(lheight > rheight){
$("#container").css("height", lheight+"px");
} else {
$("#container").css("height", rheight+"px");
}
but this doesn't seems to be a nice way for me.
Do you have any suggestions?
You can pass a new value to .height(), like this:
var h = Math.max($("#LeftPanel").height(), $("#RightPanel").height());
$("#container").height(h);
In this case we're just using Math.max() to get the taller one, and setting the height to that.