I'm trying to implement a sidebar to my Twitter Bootstrap 3 application. When I click a button, a fixed positioned nav nav-pills nav-stacked appears on the left side of my page. And I gave z-index:1000, so it appears on top of my content.
Fiddle: http://jsfiddle.net/mavent/8YtDS/14/
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header"> <a class="navbar-brand navbar-left" href="/" title="">
MyBrand
</a>
</div>
</nav>
<div class="col-md-3" id="mysidebar" style=" top: 0;bottom:0; left: 10px;
position: fixed; height: 100%; background-color: #faff18;
opacity: 0.9; overflow: hidden; z-index:1000; margin: 0; padding: 0; display:none;">
<div style="position: relative; top: 60px; background-color: #7d1c80; opacity: 0.9;">
<ul class="nav nav-pills nav-stacked">
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
</ul>
</div>
</div>
<div class="row" style="background-color: #aaa;">
<div class="col-md-offset-3">
<button> </button>
<button id="mybutton" type="button" class="btn btn-info">Click me to toggle</button>
</div>
</div>
But I need different behaviour, when sidebar appears my page will be pushed to right side. Check this page and click top left button. How can I get this behaviour with css/js ?
http://jpanelmenu.com/
A general practice would be to add a class to either the <body> tag or a main wrapper called something like navopened on the button click.
Once the class is added, you then can target any element using the class, and move your 'entire' page with either positioning: position:relative; right: -[nav width]px
or transforms: transform: translate([nav width]px)
Transforms have better performance, but less browser support.
CSS Example:
/* before, without body class added */
body #outsidewrapper{
position:relative;
right:0px;
}
/* after, when the click event adds the class to the body */
body.navopened #outsidewrapper{
position:right:-300px;
}
Now, it's important to note that you shouldn't be moving the body tag itself, as it has potential to hide your nav. I would move an outer wrapper instead.
I can see two ways to accomplish this.
Replace position: fixed with float: left.
a. See http://jsfiddle.net/kdcTc/
b. Without bootstrap http://jsfiddle.net/5kPNd/
Moving the sidebar to the top, makes the top navbar shift to the right as well. This does not work with bootstrap. It seems, there is some condition in the bootstrap navbar classes, which prevents the shift.
The class navbar-fixed-top seems to pin the top navbar. Removing it allows the brand navbar to shift, but has other side effects too.
Move the main panel and the navbar to the right, using a margin-left
See http://jsfiddle.net/7eEaB/2/
Okay, so I did a few play arounds, one with my code and one with your code.
edited your one...
http://jsfiddle.net/8YtDS/15/
My one (button placement is pore, but you get the picture)
http://jsfiddle.net/e6JnT/1/
My one can toggle it in and out...
The main part's is having a wrapper around the part's you want to move around... which would be your code in your case, and then you just move that or resize that accordingly.
I did slide it left but you can do it with size so you don't miss anything.
So into the code.
$("#mybutton").click(function () {
$("#wrapper").animate({
left: '200px'
});
$("#mysidebar").animate({
left: '0px'
});
});
So I use the animate function in jQuery as it's the most versatile function to move an element around and making it look nice.
and all I'm doing is sliding the element to the left to 200px to make room for the menu, and the slide the element with an id of 'myslidebar' to '0px' to make it able to been seen.
Edit: http://jsfiddle.net/8YtDS/18/
Try this...
http://jsfiddle.net/8YtDS/17/
HTML
<div id="wrapper">
<div id="menu-panel">
<ul class="nav nav-pills nav-stacked">
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
</ul>
</div>
<div id="content">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand navbar-left" href="/" title="">
MyBrand
</a>
</div>
</nav>
<button id="mybutton" class="btn btn-primary">Click me</button>
</div>
</div>
CSS
#wrapper{
position: relative;
height: 100%;
background: #F90;
}
#menu-panel{
width: 100px;
position: absolute;
left: -100px;
top: 0;
height: 100%;
}
#wrapper.open{
margin-left: 100px;
}
Javscript
$("#mybutton").click(function () {
$("#wrapper").toggleClass("open");
});
Just a note from experience: avoid using jQuery animate to 'smooth' the slide. On certain browsers it was very jittery for me. CSS transforms should be used if possible, as I believe they are handled by GPU, jQuery as a fail safe (see Modernizr).
Hope that was of some help!
Thanks
Phil
Related
I'm learning bootstrap and I'd like my custom horizontal navbar to stick at the top of the page once it reaches it (like this).
I have tried to add an affix class to my CSS as well as a piece of JS code, but that does not work. What is the issue?
See https://jsfiddle.net/bs7bdpmh/
html
<div id="nav" class="container-fluid">
<nav class="navbar-classic">
<li>Who are we?
<ul class="dropdown">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>Services Services Services
</li>
<li>Products Products Products
</li>
</nav>
CSS
#nav.affix {
position: fixed;
top: 0;
width: 100%;
height: 70px;
background: #fff;
z-index:10;
}
JS
$('#nav').affix({
offset: {
top: $('header').height()
}
});
You mean something like this ?
See this fiddle
JS :
$(window).scroll(function(){
scrollTop = $(window).scrollTop();
if(scrollTop > 50){
$('#nav').addClass('affix');
}else{
$('#nav').removeClass('affix');
}
});
Of course, it's not perfect, I let you adapt the CSS code and HTML structure ;)
If you are using normal bootstrap the solution is easy
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active">Basic Topnav</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
and if you want to change the navbar when you scroll to the bottum just use something like:
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() == $(document).height())
{
$('#nav').addClass('affix');
}
});
Here is a pen. I also have a live version.
I created a responsive nav with dropdowns, and everything works perfectly. I was working on making it sticky, as in after you scroll past a certain point, it becomes fixed to the top.
It works fine, except when you resize the page until the responsive hamburger menu shows up and click on it. The page then jumps to the top.
Here's my code for the sticky.
$(window).scroll(function () {
if ($(window).scrollTop() >= $("header").height() + 30) {
$(".sticky").addClass("fixed");
$(".content").addClass("margin");
} else {
$(".sticky").removeClass("fixed");
$(".content").removeClass("margin");
}
});
And here's my css where the hamburger lives.
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #efefef;
height: 70px;
width: 70px;
}
And here is the code for the navbar.
<section class="navigation sticky">
<div class="nav-container">
<div class="brand">
Primitive
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
</ul>
</nav>
</div>
</section>
Nothing has a fixed height outside of the sticky class.
Thanks!
Here is the fixed code.
<section class="navigation sticky">
<div class="nav-container">
<div class="brand">
Primitive
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
</ul>
</nav>
</div>
</section>
To prevent an action happening on click toggle, add href="#!" to the a tag. Now the screen no longer jumps to the top when I click on the hamburger nav.
I am trying to position charts on a page. Here is screenshot for you to have a look.
I want it so that only one element (chart) is visible at a time. I know margin and padding stuff. But i do not think that will work for all resolutions.
What you suggest?
How about this:
FIDDLE
<ul>
<li id="one">onetwothree</li>
<li id="two">onetwothree</li>
<li id="three">onetwothree</li>
</ul>
(Relevant) CSS
li
{
width: 100vw; /* 100% of viewport width */
height: 100vh; /* 100% of viewport height*/
}
Another way is to use jQuery tabs.
For this FIDDLE I copied the code directly from jQuery UI site and modified it.
HTML
<div class='charts'>
<ul>
<li>Daily Use</li>
<li>Monthly Use</li>
<li>Annual Use</li>
</ul>
<div id="tabs-1">
<div class='chart1'>This is your daily use of electricity</div>
</div>
<div id="tabs-2">
<div class='chart2'>This is your monthly use of electricity</div>
</div>
<div id="tabs-3">
<div class='chart3'>This is your annual use of electricity</div>
</div>
</div>
You can use the display property (references are available in MDN and W3C) to make one of the charts invisible when you show the other. For example:
CSS
.visible {
display: block;
}
.invisible {
display: none;
}
HTML
<div class="visible">This text is visible.</div>
<div class="invisible">But this one isn't.</div>
<div class="invisible">Neither is this one.</div>
<div class="visible">But this is. :)</div>
Take a look in the demo JSFiddle.
I am trying to put a layout together with jquery-ui-layout and can't overcome the height problem.
Here's the HTML code:
<body>
<div id="wrapper">
<div id="header">
<a class="logo" href="/">
<img src="/media/bdo.png" width="154" height="38"/>
</a>
<ul class="top-menu">
<li>report fill out</li>
<li>browse reports</li>
</ul>
<div class="user">
hi there
</div>
</div>
<div id="content">
<div class="ui-layout-west" id="consultants">west</div>
<div class="ui-layout-center" id="contacts">center</div>
<div class="ui-layout-east" id="details">east</div>
</div>
</div>
<div id="footer">
<ul class="links">
<li>help</li>
<li>report an issue</li>
</ul>
</div>
</body>
There is styles.css I use for all the pages (it's rather large to past into here).
The javascript I use for this is rather simple, too:
<script type="text/javascript">
$(document).ready(function(){
myLayout = $("#content").layout({
applyDefaultStyles: true
});
myLayout.sizePane('west',500);
});
</script>
But the output is that all three panels are so short as per the screenshot below. How can I fix the height of the layout to fit the whole page and go all the way down to the footer?
The layout manager will use the size of the container to determine it's layout logic. In this case you have not specified any height for the content div <div id="content">...</div>. Just as a quick example change your css like so:
#content {
float: left;
clear: both;
width: 100%;
height: 500px;
padding: 10px 0 20px;
}
If you want to have the content fill the space between your header and footer you should use two layouts one for north (header), centre (content), south (footer) and again in your content you apply a second layout for your west, centre, east panels.
I have the following menu:
<div id="menuItem">Item1</div>
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
Animated like this:
$('#menuItem').mouseenter(function() {
$('#subMenu').slideDown(400);
}).mouseleave(function() {
$('#subMenu').hide(400);
});
Unfortunately, as the mouse leave the submenu, the submenu dissapears. How do I make the submenu only disapears when the mouse leave the menuitem OR the submenu list ? I would like to be able to hover the mouse on the submenu. Notice that there is a gap bewteen the two menus.
jsFiddle here
make the sub-menu actually "inside" the menu-item you are attaching the event to, this way the in/out event only happen when the user actually leaves the menu area
like this:
css
#menuItem {
cursor: pointer;
width: 100px;
}
#menuItem .title {
background-color: orange;
}
#subMenu {
background-color: grey;
margin-top: 5px;
cursor: pointer;
display:none;
width: 80px;
}
html
<div id="menuItem">
<div class="title">Item1</div>
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
</div>
js
$('#menuItem').mouseenter(function() {
$('#subMenu').slideDown(400);
}).mouseleave(function() {
$('#subMenu').hide(400);
});
friendly note:
you might want to use some form of .stop(true, true) prior to animating the menu, or else moving a cursor back and forth rapidly over the menu will cause the animations to "stack" and it will just feel strange to the user. see discussion here: Where to put clearQueue in jQuery code
so it would look like this:
$('#menuItem').hover(function() {
$('#subMenu').stop(true, true).slideDown(200);
}, function() {
$('#subMenu').stop(true, true).slideUp(200);
});
Try this:
<div id="menuItem">Item1
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
</div>
This works in my browser (firefox)
Assuming you wanted to keep the exact same html structure, you could use the following code:
$('#menuItem').mouseenter(function() {
$('#subMenu').slideDown(400);
}).next('#subMenu').mouseleave(function() {
$('#subMenu').hide(400);
});
Notice that I've told jQuery to hide the #subMenu only when the mouse has left the #subMenu.
It is always good to have the Menu and Sub Menu inside the same container so you don't need to have a separate mouse handler when navigating sub menu.
DEMO
HTML:
<div id="subMenu">
<div id="menuItem">Item1</div>
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
JS:
$('#subMenu').mouseenter(function() {
$('#subMenu ul').slideDown(400);
isInsideSubMenu = true;
}).mouseleave(function() {
$('#subMenu ul').hide(400);
});
CSS:
#subMenu ul { display:none;}
Alternatively if you don't want to have the submenu inside menuitem (which could mess with your CSS, you can wrap everything in a parent div like:
HTML:
<div id="all">
<div id="menuItem">Item1</div>
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
</div>
jQuery:
$('#all').mouseenter(function() {
$('#subMenu').slideDown(400);
}).mouseleave(function() {
$('#subMenu').hide(400);
});