I’ve done a lot of research and have not gone anywhere.
I am trying to find a way to dynamically re-size a div when a sliding menu is expanded from the left side of the screen.
Ideally the sliding menu will resize the div's width as the menu expands.
Any suggestions would be great?
Here is a link to your solution:
http://jsbin.com/inayeg/2/edit
If you don't want to expand the menu on hover, but on click for example, you will have to use javascript.
For that, simply add a button with, eg id '#mybutton', then add this javascript:
var expandBt = document.getElementById('mybutton');
var menu = document.getElementById('menu');
expandBt.onclick(function() {
menu.style.width = '15%'; // expand menu
});
// record a counter for clicking collapse/expand, or place another button to collapse.
Note: you can of course replace percentages with pixels. Just don't float the #main div, because otherwise it will adapt its width to min-width and not max-width.
Related
I want to implement a full page width mega menu inside a responsive "container" div.
Bootply example
I want to use a responsive container, but have the menu reach out to the edges of the window. I.e. it needs to expand outside of the parent element and not being limited by the container.
I've tried to use Yamm!3, but it seems to do the same thing as my example, which doesn't work. I know this whole thing kinda breaks the laws of CSS, but I was thinking that there might be some clever work around out there...
I found the answer. I needed to add position static to the dropdown and the next parent div. And then move down the dropdown-menu to make it appear below the menu.
Working example
you just add more style below:
.dropdown, .dropup{position:static}
I have a set of bootstrap nav-tabs and inside these tabs are nice long information sections. Problem is that our team does not want to have all this information on such a long tab so we have made the tabs container element have an overflow: scroll property. This works great but now we are stuck with an impossibly long inline scroll section and it would take a good 30-40 mouse scrolls to get to the bottom. This will lose us site traffic.
I know that the definition of being a fixed position is being fixed relative to the browser window but I am in need of a way to use bootstrap scrollspy nav-list menu inside of the parent div and not have it able to transverse outside of that div. So we need it the same way that the class="fixed-to-top" attribute works so that is a functionable nav menu but no matter what we try it seems that the fixed positioning always reverts back to being relative to the broswer.
Is it possible to do what we are trying to do?
The code below is not a complete implementation, but I hope it gives you an idea of how it could be done. I.e. change the position property if the fixed div goes outside of its parent/container.
var $nlm = $('#navListMenu');
$(window).bind('scroll', function(){
if($nlm.offset().top < $nlm.parent().offset().top)
$nlm.css({ position:'absolute', top:0 });
else
$nlm.css({ position:'fixed'});
}
I have a top menu bar that is in position fixed and contains some text. When the screen is resized smaller it compresses and it's height increases to fit the text.
I have a div below the top menu bar that contains my website content, moved down using padding-top.
When the top menu bar resizes the top of the article gets covered by the height change of the top menu bar.
#topmenubar{position:fixed;width:100%;text-align:center;word-wrap:normal;}
#content {padding-top:40px;}
What is the best way around this so the resized top menu bar does not cover my content?
The Top menu bar has to always be visible at the top of the screen, so I guess how can I make the padding-top get bigger with the screen width getting smaller or another solution?
Pure JavaScript solution (no jQuery required):
window.onresize = function() {
document.getElementById("content").style.paddingTop = document.getElementById("topmenubar").offsetHeight;
};
jquery
$(window).resize(function(){
var h = $("#topmenubar").height();
$("#content").css("padding-top",h+"px");
});
You can get around this by removing width 100% to some fixed pixel width so that top menubar will not resize,
or at some extent by min-width property.
Here is my html work. http://jsfiddle.net/awaises/remqf/4/
I want to push the fixed div box to bottom of the screen. But it is overlapping on the left navigation and last items of the navigation getting hide behind the green box. Can we fix the green box as per following design? But we have to make sure that green box must be at the bottom of the screen even window’s resolution is small or large.
Design layout URL
http://www.thewebmakerz.com/screen.jpg
Does this .left-col{ height:500px;} fix your problem?
See this fiddle.
Three key tips:
Put "left-footer" in a different parent then your menu content (called "left-col-top").
"left-col-top" should be transparent, "position:fixed", with "z-index:1" and a min-height that is taller than your menu.
"left-footer" should be "position:absolute."
Looking at screen 1.1, if there is 11th list in yellow box, it will definitely go behind green box. (Also consider toolbars / menu bars in browsers). You may have to use something like "More Links >" in case height of screen is less.
Screen 1.2 and onwards:
If jQuery is an option, you can use scrollTop function.
Initially, let the green-box be fixed with position:fixed and some margin negative from bottom.
Then, when user scrolls to a particular amount (as seen in screen 1.2) try following jQuery code:
var yellowBoxHeight = $("div.yellow-box").height();
$document.scroll(function() {
if ($document.scrollTop() >= yellowBoxHeight - 100) {
// If user has scrolled some amount, eg. 100 pixels of yellow box is still visible
// make the green box animate & let it come upwards
} else {
// put the green-box back with some negative margin into the bottom
}
});
When using name="object" and then having the page scroll to that object using a href="#object" id it possible to adjust where the page lands. Rather than the top of the window, a few pixels down. I have a fixed navigation bar that when scrolling, the content goes behind so the nav bar is always visible. So when I use a href="#object" part of it is cut off because it is behind the nav bar.
Any fixes? Thank you.
Change the top padding and margin styling on the element with the named anchor. For example, if your header is 100 pixels tall, give your named anchor a margin-top of -100px and a padding-top of 100px.
See this jsFiddle example.
In this example, the link will bring the bolded text ('Vestibulum ante ipsum') 100px from the top of the page.
And if you want to set these properties (like mentioned from j08691) via a css selector, put this JS into your html, then you're able to give every anchor a class for it, if attribute-selectors don't work (older browsers):
function findAnchors(){
anker = document.anchors;
for(i=0; i<anker.length; i++ ){
anker[i].className = "anchor";
}
}
window.onload = findAnchors();
You can do this with jQuery.localScroll by setting an offset in the plugin configuration.
Here, have a fiddle.