I am revealing a hidden nav on click. It is a div that is in fixed position at the top of a bootstrap template.
I want the nav to slide down after clicking whilst also adjusting the top margin of the lower page content. All this is working but I have an unwanted bouncing effect and the scroll bar is also moving slightly down each time the nav reveals itself.
HTML:
<!-- Member Site Sub Nav 2 -->
<div class="col-xs-12 member-sub-nav-b" id="memberSubNavB">
<ul>
<li>DESIGNATIONS</li>
<li>MEMBERSHIP PRICING SCHEDULE</li>
<li>LOCUMS</li>
<li>MEMBERSHIP TYPES</li>
<li>MEMBER REWARDS</li>
<li>ASSOCIATES & LIFE MEMBERS</li>
</ul>
</div>
</div>
<!-- Member Site Sub Nav 2 Ends -->
</div>
<!-- Section Begins -->
<section id="data" class="member-text row">
<div class="col-md-10 col-md-offset-1">
And the jQuery:
function subNavB(){
$('#mainLogo').click(function(){
$('#memberSubNavB').slideDown(200, 'linear');
$('.col-md-10').animate({'marginTop':'2.5em'}, 200, 'linear');
});
}
Related
I cannot make work a semanticui sticky menu when I set a visible sidebar. There is a JSFiddle explaining the issue. The top menu glitches and does not seem to follow the scroll.
<div class="example">
<div class="ui visible inverted left vertical sidebar menu" id="left-menu">
<a class="item">Option 1</a>
</div>
<div class="pusher">
<div class="ui sticky menu" id="top-menu">
<a class="item">Menu</a>
</div>
<div style="height:3000px; background-color:red;">
Example with ui sticky menu
</div>
</div>
</div>
<script>$(function(){ $('#top-menu').sticky(); });</script>
Do you know how to fix this?
I'm using below code to add nav bar to my mobile website. Here I have two icon on the left side of nav bar. But I want to position the Next icon to the Right Side such that Two icon will be on corner of left and Right Side.
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page">
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="a">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#one" data-icon="arrow-l" >Previous</a></li>
<li><a href="#two" data-icon="arrow-r" >Next</a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
Here is the picture, I'd like to get the output
For some Reason the code is not working , So here is the link for my demo snippet
Demo Snippets
You have to add some css fo this
.ui-block-b a .ui-btn-inner .ui-icon{
left: auto;
right: 5px;
}
Updated Codepen
I tried adding smooth scrolling to my website. After copying the javascript and jquery from this website: http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/ I added the tags for the smooth scrolling. The smooth scrolling works for everything except one button on the nav bar. This is the code:
<nav id="nav">
<div class="navbar">
<div class="brand">hbvhaf</div>
<ul>
<li><span>about</span></li>
<li><span>bvdsvudva</span></li>
<li><span>contact</span></li>
</ul>
</div><!-- navbar -->
</nav>
The one button that doesn't smooth scroll is the one that has a div class of "brand". The div is used to specifically style that button in css. Any ideas.
I know that this is a bit of a hack, but why don't you just add this to the top of the page:
<div name="top"></div>
And then change your code to:
<nav id="nav">
<div class="navbar">
<div class="brand">hbvhaf</div>
<ul>
<li><span>about</span></li>
<li><span>bvdsvudva</span></li>
<li><span>contact</span></li>
</ul>
</div><!-- navbar -->
</nav>
Edit for author, example of it working properly:
<div name="top">I am the top of the page.</div>
Go To Contact Form
<div style="height:200%"></div>
<div name="contact">contact</div>
Back to top
<div style="height:200%"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="smoothscroll.js"></script>
For some reason on my webpage, the javascript for a sticky navbar isn't running at all. Here is the jsfiddle. The navbar (in bright orange) runs across the top of the page - at the base of header. The script is set to make the navbar visible after the user scrolls past a point and then past a further point, it is meant to make it fixed to the top of the viewport with the help of .offset().top;.
I've tried out the exact same script in a similar implementation and it works. Would appreciate anyone's help pointing out the glitch.
the problem is the z-index in your html Layout
<header>
<div class="mainheader">
<img class="logo" src="images/logoinner.png">
<img class="detail1" src="images/detail1.png">
</div>
<div class="subheader"></div>
<div id="menu-wrapper">
<nav id="menu">
<div class="menu">
<ul class="menu">
<li>
<img class="logoflag" src="images/logoflag.png">
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="contentwrap">
.....
</div>
You only set the z-index of the menu wrapper div but the z-index of the header was still smaller than the z-index of your div class="contentwrap". So just increase the z-index of the header and it should work.
here is a fixed fiddle:
https://jsfiddle.net/uh6e88n3/6/
Is there a solution to have multiple sticky footers, one per section/div ?
Assume the following example:
<nav id="stickyHeaderMenu">
<!-- link_to section#one -->
<!-- link_to section#two -->
<!-- link_to section#three -->
</nav>
<section id="one">
<div class="content"> </div>
<nav id="footerNavOne"> </nav>
</section>
<section id="two">
<div class="content"> </div>
<nav id="footerNavTwo"> </nav>
</section>
<section id="three">
<div class="content"> </div>
<nav id="footerNavThree"> </nav>
</section>
The idea is to have one sticky header menu, and one sticky menu for the section in view at bottom of page. User scrolling down causes footer to change, depending on the section in view.
Note that sections are really tall, and take some scrolling to see all of it.
So when viewing section#one, nav#footerNavOne is the sticky footer. Once user reaches end of section#one, nav#footerNavOne sticks to it and goes up and out of page with it. Now section#two comes up, and nav#footerNavTwo becomes the new sticky footer.
update: I found the following, which looks pretty efficient: sticky-kit.js.
It sticks a div to the top of its parent. see this jsfiddle, showing it done on above example.
Is it possible to do the opposite: (stick the div to the bottom of parent) ?