Using w3css with a pinned navbar (ie enclosed in a with class w3-top) how can I know the height of the navbar (which will vary with screen size) so I can leave this much space at the top of my non-pinned content so the navbar doesn't overwrite content?
My best solution so far is to duplicate the navbar in javascript and insert that at the top of the page without the w3-top class so that there is a hidden element which is always the same size at the top of the page.
...
<div id="pinned_nav" class="w3-top">
<ul class="w3-navbar w3-light-grey w3-border">
<li>
...
<script type="text/javascript">
//Duplicate the nav without pinning it to the top - this means that the other content will adjust to height of pinned nav
var nav = document.getElementById("pinned_nav");
var nav_copy = nav.cloneNode(true);
nav_copy.classList.remove("w3-top");
nav.parentElement.insertBefore(nav_copy, nav);
</script>
...
Since this seemed less error prone than just copy and pasting the HTML block.
But it's still rather clunky and I just wondered if there was a simpler way I was missing.
Other questions like this one which are not w3css specific suggest using a fixed margin to skip a pinned toolbar but I can't see how to determine this margin height with a responsive navbar.
You could use a Javascript script to get the height and append it however you want to use it.
function getHeight() {
var nav = document.getElementById("pinned_nav");
var nav_height = nav.offsetHeight; //append this var where you need to.
alert(nav_height);
};
window.onload = getHeight();
window.onresize = getHeight(); //edit, added for if you resize the page
#pinned_nav {
height: 100px;
/*as example */
background-color: red;
}
<div id="pinned_nav" class="w3-top"></div>
EDT
Added resize event subscription.
Related
In Firefox especially, I've run into an issue I can't figure out how to fix.
On the following page, when scrolling down the page jumps several times - mainly on smaller screens where the page doesn't have its full size displayed. You can replicate this issue by making your browser smaller than the page so you have to scroll.
It's on this page: http://www.nucanoe.com/frontier-accessories/
If I disable the position:fixed on the navigation selector, it fixes the issue - but we need the navigation to be sticky. Is there a solution to fix this? I'm thinking we may need to use jQuery somehow.
Thanks in advance!
After seeing you asking for help on another answer, I will try and explain more clearly for you.
The Problem
Your problem is when you add position:fixed to the navigation bar, it removes it from its place and sticks it at the top of the page. This is why the rest of your content jumps up - because the navigation bar is not where it was anymore.
How To Fix
You can get around this by wrapping your navigation element in a new div - let's call it nav-wrapper - and set its height to the same as your navigation element. These are known as placeholder elements. This new wrapper and your original navigation bar must always be the same height for the 'jump' to disappear.
<div class="nav-wrapper" style="height:80px;"> <-- add this
<div class="your-original-nav" style="height:80px"></div>
</div> <!-- add this
Now, when you set the navigation bar to fixed and it disappears to the top, the new wrapper we created with the same height keeps the page's content the same. When the fixed class has been removed, it sits back in the wrapper again, without pushing the content down.
A Suggestion
From what I can see on your site, there will be a big gap where the navigation bar was until the new fixed navigation reaches that point and covers it. What you want, is a little jQuery to figure out where to make the navigation fixed and where to hide it. I'll explain:
// cache the element
var $navBar = $('.your-original-nav');
// find original navigation bar position
var navPos = $navBar.offset().top;
// on scroll
$(window).scroll(function() {
// get scroll position from top of the page
var scrollPos = $(this).scrollTop();
// check if scroll position is >= the nav position
if (scrollPos >= navPos) {
$navBar.addClass('fixed');
} else {
$navBar.removeClass('fixed');
}
});
You may want to add further functionality to this example, as it is very, very basic. You would probably want to recalculate the offsets on window resize as one addition.
A Demo
This is a little demo which might help you - I was bored and feeling helpful :)
Made it this way now: Added an element before the nav:
<div class="nav-placeholder"></div>
And the jquery:
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>150){
$(".nav-placeholder").height($(".nav").outerHeight());
} else {
$(".nav-placeholder").height(0);
}
});
</script>
When I scroll down to 150 the placeholder gets the height of the nav, when i scroll up again I set it's height to 0.
Here is a fiddle: https://jsfiddle.net/herrfischerhamburg/562wu62y/
You need to have a placeholder when your nav goes from relative to fixed.
Therefore you need to make a new div.
jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());
jQuery(".nav").wrapInner('<div class="nav-inner"></div>');
Remember to change ".nav", "nav-inner" and "nav-placeholder" to your desire.
For a fully functional sticky nav, check my website: http://www.swegre.se/
I solved the problem differently so on firefox as you can see in logs it scroll up itself so to stop this scrolling I made simple statement
$(document).ready(function () {
var header = $('#left-menu');
var offset = header.offset().top;
var up = true;
$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll + ' ' + offset )
if (scroll >= offset) {
header.addClass('sidebar-sticky');
if (up){
$(window).scrollTop(offset);
up=false;
}
} else {
up=true;
header.removeClass('sidebar-sticky');
}
});
});
that solution work for me when I can't specify height of div's I use.
I'm building a dynamic menu system for Composite C1 using Bootstrap 3.3.1 popovers. The dynamic content is working fine, but I can't seem to get the popover width to re-size correctly.
I can set an absolute size with .popover-menu-markup .popover{ width: whatever}, but I want the width to be based on the content. If I set width: auto, the popover is based on the popover-title, not the popover-content.
Any ideas?
EDIT
Sorry, the JSFiddle is here: http://jsfiddle.net/rebeccamarye/x075bm6x/2/
The example shows a single paragraph as the content, but in the actual page there's a bunch of divs with {display: inline-block}, but I think this shows the problem...the popover needs to expand to slightly less than the width of the page.
UPDATE:
http://jsfiddle.net/x075bm6x/7/
JQ
$('.popover-markup>.trigger').on('shown.bs.popover',function(e){
var $link =$(this);
var winW=$(window).width();
var poL=$link.offset().left+$link.width();
var newW=winW-poL-60;
var poId=$link.attr('aria-describedby');
var $po=$('#'+poId);
console.log(poId+': '+winW+' L: '+poL+' > '+newW);
//$po.width(newW);
$po.find('.popover-content').width(newW)
});
CSS:
.popover{width:auto!important; max-width: none}
Is there an elegant way to set breakpoints, of sorts, on height of containers.
Example:
Say you have a div and a min-height is set at say 100px. As soon as the content gets too much it doesn't just grow, but grows by another 100px and when the content eventually gets to the bottom of the 200px extend the height by another 100px.
Has anyone do anything like this before?
I don't think this is possible only using CSS, but you can use javascript:
html:
<div id='div'>hello</div>
javascript:
var div = document.getElementById('div');
var height = 0;
div.style.height = height + "px";
while(div.scrollHeight > div.clientHeight){
height += 50;
div.style.height = height+"px";
}
http://jsfiddle.net/fa7d0/JkT7R/
I found your question very interesting so i took the grow bit literally and created a fiddle where content changes is handled and the containing div is increased either in width or height by a defined threshold.
Fiddle: http://jsfiddle.net/Tvswj/1/
The main idea is that you'll only have to listen for DOM changes and then run a jQuery function as such:
// Trigger the resize function on content change
$(myDiv).bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function () {
$(this).breakpointResize(threshold);
});
If you find it useful, please go ahead and use it and modify as you want.
Credits for DOM events: How to alert ,when div content changes using jquery
You can use container style height: auto ! Important; and min-height: 100px; width: 100%;
I have a side bar that contains two divs. The first div may or may not have content, depending on what else is done on the page. The second div contains a long list of things and has a limited height, so scrolling is possible. I want to have the sidebar be as tall as the page, and I want the list container in the sidebar to be as tall as the sidebar minus the height of the header (which will change while using the page). I don't care about limiting the size of the header. The biggest is will get isn't anything significant.
Right now I'm just setting the height of the list container to be some number that is won't go over a maximized window height if the header div as as much content as it can, but this leaves an empty space at the bottom when the header is empty, and still doesn't work very well if the window is resized.
The layout is similar to this.
Is there a css solution to what I'm looking for, or will I have to use javascript and get window height/set div heights in pixels? I'm fine with either, it just seemed like there should be a CSS way to accomplish it.
If you're not opposed to using a little jQuery, here's a little code snippet that should help you equalize the height of the two divs, no matter which has more content. You can change it to your liking too.
var leftHeight = $(".left").height();
var rightHeight = $(".right").height();
var maxHeight = 0;
var div = "";
if (leftHeight >= rightHeight)
{
maxHeight = leftHeight;
div = ".right";
}
else
{
maxHeight = rightHeight;
div = ".left";
}
$(div).each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(div).height(maxHeight);
and credit where credit is due, this is an edit of a code snipped found at css-tricks.com
is this what you want?
http://jsfiddle.net/YWNyr/
CSS tips:
If you use 'absolute' positioning, width,height,left,top, etc... is relative to the first ancestor that has a "position" property other than "static", or the body if nothing is there.
for static menus, it is common to use 'position:fixed' as it will simplify scrolling issues
When using jquery its easier(and faster) to toggle a class than to change the DOM since that requires redrawing of the elements by the browser
-edit: for refreshing the sidebar size some javascript is necessary:
$('#headerAdd , #headerRemove').click( function()
{$('#sideContainer').height($(window).height()-$("#header").height());
} );
Try setting the height of your list container to 100%, and your overflow to scroll:
#listContainer {
height: 100%;
overflow: scroll;
}
This will keep the list in a scrollpane that reaches to the bottom of the page, no matter how large the header grows or shrinks.
Here's the scenario:
I have an asp.net webpage which displays dynamic data in a gridview.
I'm using a master page to display the header and footer of the page, and this gridview is being displayed inside a div in the contentplaceholder.
The Problem:
What I want is that the size of the page that is displayed remains constant for a user and must be equal to the size of their browser's available display area and the content being visible by scrolling the div.
Sort of like the header and footer remain at the same position and the content inside it is scrollable.
I really don't know how to achieve this.
Any help on the matter is highly appreciated.
Thanks.
Try some jQuery:
function changeHeight(){
var winHeight = $(window).height();
var heightOfHeaderAndFooter = 200px; // change this to what you need
$('#myDiv').height($(window).height() - heightOfHeaderAndFooter);
}
$(window).resize(function() { // changes height with browser window
changeHeight();
});
$(document).ready(function() { // changes height on load of the page
changeHeight();
});
What you want is for your div to use width:auto and to dynamically change the height of it to always keep the footer at the bottom of the page. Also, make sure your div has overflow-y:scroll
Code snippet:
divMain.style.height --> height of div in pixel containing GridView. This div tag also has style setting of style="overflow-y:auto;"
document.documentElement.clientHeight --> height of the working/client area for your display.
document.getElementById("divMain").offsetTop --> height of content prior to divMain.
25 --> this is the height of my additional footer.
The pixel result is the height available for your divMain.
divMain.style.height = (document.documentElement.clientHeight - document.getElementById("divMain").offsetTop - 25) + "px";
Hope this helps.