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>
Related
I'm having a problem with this ""fixed"" bottom navbar.
It is realized with bulma v0.8.0 and it I want it to always be visible in the same way (with or without scrolling).
Below code of the bottom navbar:
<html lang="en" class="has-navbar-fixed-bottom">
[...]
<nav id="navbar-bottom" class="navbar is-fixed-bottom is-hidden-tablet" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<div class="columns flex-center">
<div class="column socialtext">Share</div>
[...]
</div>
</div>
</nav>
And the results is like:
When I try to scroll down, the navbar show "correctly".
I have tried with some js library but still does not work.
Could I have some tips about that?
Thanks,
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
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/
I am trying to develop my site with foundation dropdown. when i see reponsive size from pc browser it's working
(not 1st time:
click first time url will be ..../index.html#
again reload with this then it works. 2nd time it's working). when i load url in mobile and try to test it's not working.
Here is my code in header.html:
<div class="menuSet" style="background-image: url('img/image67.JPG');">
<nav class="top-bar row changedWmiddle" data-topbar style="background-image: url('img/image67.JPG');height:44px;">
<ul class="title-area setMenu">
<li class="name">
<h1> </h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon setMenu2">
<span>Menu</span>
</li>
</ul>
<div class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left row" style="width:98%;">
<li class="setMenu3" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image68.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image69.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image70.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image71.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image72.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image73.JPG"></li>
</ul>
</div>
</nav>
I included header.html in my index.html and linked script like.
at starting of the page:
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/modernizr.js"></script>
at bottom:(before tag)
<script src="js/foundation/foundation.js"></script>
<script src="js//foundation/foundation.topbar.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Here is the link of my url
http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website%28without_comment%29/index.html
Please help. Thanks in advance.
foundation.min.js includes all the foundation js.
You need to use either "foundation.min.js" or "foundation.js, foundation.topbar.js, etc".
Reference: http://foundation.zurb.com/docs/javascript.html
<script src="/js/foundation.min.js"></script>
<!-- or individually -->
<script src="/js/foundation.js"></script>
<script src="/js/foundation.alert.js"></script>
<!-- ... -->
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.tab.js"></script>
The trouble you're experiencing could be coming from having both js files loaded.
Try just having one set loaded.
I found the problem is with modernizr.js, to test it you can remove foundation will work as expected.
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) ?