Have been looking around for a solution/plugin that handles. navigation, menu highlighting and hash change (both on scroll and menu click) but can't really find one. I have this markup of sections for a one page site and i want to implement the bow mentioned in a nice way.
so basically
- change hash on scroll and menu click (menu also needs highlighting). Both on scroll and when clicked.
EDIT: exactly like this but i need the hash to change on scroll as well.
http://callmenick.com/2013/04/22/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation/
html
<nav id="main-nav">
<ul>
<li>
product
</li>
<li>
process
</li>
<li>
testimonials
</li>
<li>
contact
</li>
</ul>
</nav>
<section class="main-section" id="product">
</section>
<section class="main-section" id="process">
</section>
<section class="main-section" id="testimonials">
</section>
<section class="main-section" id="contact">
</section>
You can update your URI by calling history.pushState('/myPage#MyNewURI')
That won't reload the page, just change the URI.
Related
I want to be able to have a centralized menu like CSS files where you change it at the source and all the files change but for lists. I'm trying to add a new link to the menu without having to go to each file on the website to add to the copy and pasted list that we have.
<nav id="menu">
<div class="inner">
<h2>Menu</h2>
<ul class="links">
<li>Home</li>
<li>Sponsors</li>
<ul class="links">
<li>Sponsor Application</li>
</ul>
<li>Media</li>
<ul class="links">
<li>2019 Season</li>
<li>2018 Season</li>
<li>2017 Season</li>
<li>View More Seasons</li>
</ul>
</div>
</nav>
being able to add a html to the list and it changes for every part you go to.
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
Context: I have created a top-bar menu using Foundation 6 (following the docs), with it displayed horizontally on large screens, and as a responsive vertical menu on medium and down. There is one item with children which is displayed as a dropdown on large screens, and as a drilldown menu on medium screens and below.
I created the site using the Zurb 'Yeti Launch' app, so as far as I can tell, I have all js libraries included.
Issue: Nothing happens when either the dropdown parent or any of the child items are clicked. Any help getting to the bottom of this is much appreciated!
My markdown for the menu is as follows:
<div class="top-bar" id="main-menu">
<div class="row">
<div class="large-12 columns">
<div class="top-bar-left">
<ul class="menu vertical large-horizontal" data-responsive-menu="drilldown large-dropdown">
<li>Home</li>
<li>What's On</li>
<li>Listen Again</li>
<li>Community</li>
<li>
About
<ul class="menu vertical">
<li>Presenters</li>
<li>Volunteers</li>
<li>The Board</li>
</ul>
</li>
<li>Get Involved</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
Did you added the init code?
$(document).foundation();
The CodePen example with the same HTML as you provided worked.
http://codepen.io/shoaibik/pen/PNravB
Update:
It look likes you can called Foundation JS and jQuery second time in app.js file, Please remove once instance and confirm again.
I have a page with a horizontal navigation on top and above that is a header img. I'm using fullPage.js as my layout and by default navbar is always on top. I want my header img to appear only on the first section and be hidden everywhere else. I was thinking about a solution in jQuery which would be if I'm on every section but first header margin-top would be [header_img_height] and when I get to section one it would return to margin-top:0px.
My header markup right now:
<header>
<div id="header_banner">
</div>
<ul id="nav_cont">
<li data-menuanchor="section1">
<a id="home_hover" href="#section1">Home</a>
</li>
<li data-menuanchor="section2">
<a id="about_hover" href="#section2/1">About</a>
</li>
<li data-menuanchor="section3">
<a id="gallery_hover" href="#section3">Gallery</a>
</li>
<li data-menuanchor="section4">
<a id="literature_hover" href="#section4">Literature</a>
</li>
<li data-menuanchor="section5">
<a id="contact_hover" href="#section5">Contact</a>
</li>
</ul>
</header>
<div id="fullpage">
<div class="section" id="Home">
<div class="container"></div>
</div>
.
.
.
other sections
This is what I want to end up with:
I would recommend you to do it with CSS directly.
Check out this video tutorial in which you can see how to use the class added to the body element to fire your own CSS changes.
Otherwise, you can also do it using callbacks such as afterLoad or onLeave. You have an example of it available in the fullpage.js files.
You even have an example of how to use them in this Apple demo also available in the files to download.
Would this help? On the first section it adds the class fixed-header to your nav, and on the other sections it will disappear
$(function(){
$(window).scroll(function(){
var section1 = $('#home').offset().top;
var section2 = $('#section2').offset().top;
if($(this).scrollTop()>=section1){
$('#nav_cont').addClass('fixed-header');
}
if($(this).scrollTop()>=section2){
$('#nav_cont').removeClass('fixed-header');
}
});
});
I have the following jsfiddle. I'm trying to get the right hand side div to slide to where the left div is when a user clicks on any of the example links, i can't figure out how to do this as im fairly new to CSS3 transitions and jquery. Could someone help guide me in the right direction. I've had a look at jQuery animate too but find it a little confusing.
The transition should work in IE10+, anything below it's fine if it doesnt have a transition
http://jsfiddle.net/AV22p/
Below is the structure of my HTML
<section id="modalwindow">
<div id="foodlist">
<div class="links">
<h1>Div 1</h1>
<ul>
<li>Example1 </li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
<li>Example5</li>
<li>Example6</li>
<li>Example7</li>
<li>Example8</li>
</ul>
</div>
</div>
</section>
<section id="modalwindow">
<div id="food_details">
<div class="details">
<h1>Recipe</h1>
<ul>
<li>test </li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</section>
Not sure if this is what you want since the description is quite vague. But you might be able to convert this to your needs.
divWidth checks for the with of the section. On click of a link the section containing #food_details gets moved the (negative)width of #modalwindow to the LEFT.
$('.links ul li a').click(function(){
var divWidth = '-'+$('#modalwindow').width();
$('#food_details').parent().animate({left: divWidth});
});
http://jsfiddle.net/AV22p/3/
Also note that your first example link has a different/invalid markup than the rest.