Generate a navigation from sections and slides with js - javascript

I use fullpage.js and want to build navigation automatically when I ad a section or a slide. Therefore I need the id from the sections. Which I have in the script below. But I also need a data-anchor nested in the slide div's inside each section.
**Goal: the html structure is driven by fullpage.js. al working fine. But now I want to automatically generate a submenu for the slides. Therefor I need the id from the section. (which is done) And the value from the data-anchor to put into the href. so the href src needs to be =section0/about and section0/history. when I add a slide in the section it should automatically put a link in the nav. **
Anyone?
HTML
<div id="fullpage">
<div id="section0"></div>
<div id="section1">
<div class="slide" data-anchor="about"></div>
<div class="slide" data-anchor="history"></div>
</div>
<div id="section2"></div>
<div id="section3"></div>
</div>
JS
$( document ).ready(function() {
var sections = $('#fullpage > div').map(function(){
return '#' + this.id;
}).get();
});
RESULT MENU
<ul id="subnav" class="innernav">
<li class="subnav">About</li>
<li class="subnav">History</li>
</ul>
Edit
Does my explanation make any sense?

Related

Side menu with links to parts in Iframes

I've created a webpage that has the following structure:
Main html that uses a side menu;
Secondary html that has the information that I want to show in the main html.
I want to achieve the following. Let's say that the secondary html has a section named intro. I want to link that section to a menu item. So when I press the corresponding button, I want to show in my main html the secondary html starting at the #intro section.
This is my sidebar nav in the main html
<div id="main">
<div class="wrapper">
<!-- LEFT SIDEBAR NAV-->
<aside id="left-sidebar-nav">
<ul id="slide-out" class="side-nav leftside-navigation">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-blue active"><i class="mdi-action-view-carousel"></i> Field</a>
<div class="collapsible-body">
<ul>
<li class="active">Intro
</li>
</ul>
</div>
</li>
</ul>
</li>
</aside>
</div>
This is the section in the 2nd html.
<div class="divider"></div>
<div class="section" id="intro">
<li style="list-style: disc">
some text.
</li>
</div>
</div>
When I press the Intro button in the left side nav, I want to open in my main html the 2nd one at the Intro section.
The reason I want to load the 2nd html in my main one is that It uses different css styles and It ruins my formatting if I merge them.
Any solution?
Thank you!
It can be easily achieved with jQuery:
Here's my suggestion:
Step 1
First of all, make sure you have those sections in your secondary.html file:
<div id="intro">Intro section</div>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
An, in main.html, make sure you have an element with id=content. This will be your placeholder. Like this:
<div id="content"></div>
Step 2
Modify your anchors:
point href to a dummy url (#).
add a class so we can catch this with jQuery. I named here btn-load-section.
add data- attributes so we can add some useful data to each anchor, to grab it later. I added here data-url and data-section.
Like this:
<li>Intro
<li>Section 1
<li>Section 2
<li>Section 3
Step 3
At the end of our <body> section (in main.html), you can add this code:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
/*
Executes the script inside the anonymous function
only when the page is loaded
*/
$(document).ready(function() {
/*
select all anchors with 'btn-load-section' class (class = dot before)
and bind a click event
*/
$("a.btn-load-section").on("click", function(e) {
e.preventDefault(); //this cancel the original event: the browser stops here
var url = $(this).data('url'); //get the data-url attribute from the anchor
var section = $(this).data('section'); //get the data-section attribute from the anchor
var contentDiv = $("#content"); //select the div with the ID=content (id = hash before). This will be our target div.
/*
executes the jQuery .load function
It will load the url and search for the correspondent section (load page fragment)
e.g. will call load with "secondary.html #intro" (#intro is our fragment on the secondary.html page).
*/
contentDiv.load(url + " #" + section);
});
});
</script>
As I don't know how familiar you're with jQuery, I added some comments.
The first script tag loads jQuery from a CDN.
You can read more about the jQuery's .load function here. But basically it allows to load page fragments:
The .load() method, unlike $.get(), allows us to specify a portion of
the remote document to be inserted. This is achieved with a special
syntax for the url parameter. If one or more space characters are
included in the string, the portion of the string following the first
space is assumed to be a jQuery selector that determines the content
to be loaded.
This is just a possible approach. Hope it helps!

jQuery up one level and .find()

I'm learning jquery and i have this little issue with selectors.
This is my DOM structure:
<li>
<header class="title">
<span>Text</span>
My trigger
</header>
<div id="work-1">
<div class="description">
<p>some shit about the work</p>
</div>
<div class="carousel">
<img/>
<img/>
<img/>
...
</div>
</div>
</li>
ok. Its a simple list with a lot of links with my works. every item has its description and some pictures that goes on a carousel.
when I click on the link, i want to create a variable in jquery that get the carousel. I write this but it doesnt work:
$('a').click(function(e){
var href = $(e.target).attr('href');
// this is to make my div#work toggle from display:none to block.
var carousel = $(href).find('.carousel');
// this is the wrong code. I cant reach the carousel from there.
});
Thanks for help!
This should work:
$('a').click(function(e){
var carousel = this.parents('li').find('.carousel');
});
Inside the click handler, "this" refers to the A-element which was clicked. Find the LI-element which is the parent of the A element which was clicked and then search for the carousel which is a child element of that LI element.
use this instead, carousel its a diferent element
$('.carousel')
You have to go back (with .parent()) twice or use .parents until it finds the li tag.
$('a').click(function(){
var href = $(this).attr('href'),
li = $(this).parents('li'),
carousel = li.find(href).find('.carousel');
console.log(carousel);
carousel.css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<header class="title">
<span>Text</span>
My trigger
</header>
<div id="work-1">
<div class="description">
<p>some shit about the work</p>
</div>
<div class="carousel">
<img/>
<img/>
<img/>
</div>
</div>
</li>
</ul>
by the way, your script works for me as well:
https://jsfiddle.net/rozgwq8e/
but you could use $(this) instead of e.target.

Changing contents of multiple divs depending on scroll position

I have 5 sections on my site, and a fixed div with 2 divs inside that I want the contents to change depending what section is scrolled over/in view.
I found this jsFiddle which is like what I want to achieve but not quite, and I can't work out how to make it work for me.
Here is the JS code used in that jsFiddle which I assuming a few modifications should be all it takes:
$(window).load(function () {
$(window).on("scroll resize", function () {
var pos = $('#date').offset();
$('.post').each(function () {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
$('#date').html($(this).find('.description').text()); //or any other way you want to get the date
return; //break the loop
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
})
Here is a few snippets of HTML from my site:
The sections:
<section id="space">
</section>
<section id="sky">
</section>
<section id="home">
</section>
<section id="about">
</section>
<section id="involved">
</section>
And the 2 divs:
<div id="caption1" class="nivo-html-caption">
<h1><strong>Test Test Headline home</strong></h1><em></em>
<div class="headline"><p>Home1 Home1 Home1</p></div>
</div>
<div id="caption2" class="nivo-html-caption">
<h1><strong>Test Test Headline 2 home</strong></h1> <em></em>
<div class="headline"><p>Home2 Home2 Home2</p></div>
</div>
So to summarise, when scrolling over the home section the text between the "h1" and "p" tags in the div "caption1" and the text between the "h1" and "p" tags in the div "caption2" will be unique to the "home" section but if for instance scrolling over the space section the text will change and be unique to the space section.
Thanks in advance!
In the script of the fiddle, you will see this line:
$('#date').html($(this).find('.description').text());
Change it to:
$('#date').html($(this).find('.description').html());
This will clone the whole content you provide and not just the text in it.
Then you will need to provide a description in every section you have in HTML, and adapt the selectors in the script to your html structure, if needed.
In your case, you need to populate two divs, but this isn't really a big difference:
JS:
$('#caption1').html($(this).find('.description1').html());
$('#caption2').html($(this).find('.description2').html());
HTML
<section id="home">
content
<div class="description1">content for caption1</div>
<div class="description2">content for caption2</div>
</section>
Don't use <p>-Elements as content holder. It won't work if they hold other HTML-elements. Just use a <div> instead.
Here's an example: Fiddle
It might be easier to apply this to all sections with varying caption lengths if you use a single class name for all captions within a section a structure like
<section id="home">
content
<div class="captions">
<div class="nivo-html-caption">content for caption1</div>
<div class="nivo-html-caption">content for caption2</div>
</div>
</section>
and then apply the content to the side container by
$('#side-panel').html($(this).find('.captions').html());

YUI menu change page content not whole page

I have divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?
The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>
This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/

how can I collapse a specific part of an accordion styled on page load

I have got links from several pages linking to a specific page where my accordion grid is. And on page load I want the target part of the accordion grid to collapse automatically for the user.
Take for example: Page A and Page B. Page A is where the user is coming from to view something on Page B. Page B has an accordion with 4 (e.g 1,2,3 & 4) parts. If the user click on link 2 from Page A to Page B, the number 2 part of the accordion should collapse for the user to see.
Find below the codes:
HTML:
<div id="accord_bar">
<ul id="accordion">
<li>Number 1 Header
<ul id="recent"><li>Number 1</li></ul>
</li>
<li>Number 2 Header
<ul id="recent"><li>Number 2</li></ul>
</li>
<li>Number 3 Header
<ul id="recent"><li>Number 3</li></ul>
</li>
<li>Number 4 Header
<ul id="recent"><li>Number 4</li></ul>
</li></ul></div>
Javascipt in the HEAD tag:
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion(
{active: "a.default", header: "a.heading"}
);
});
Linked accordion Jquery file:
<script type="text/javascript" src="js/jquery-ui-accordion.js"></script>
I really need to fix this asap and I will be very grateful if anyone can help...
You can built your own simple accorion with jQuery, no need ui.
For collapsing a specific part of an accordion with eq() method with this simple accordion structure.
Here is jsFiddle with hover trigger.
jQuery:
$('.content').slideUp(100);
$('.content').eq(1).slideDown(600);
//for collapsing second part of an accordion
$('.panel').hover(function() {//open
var takeID = $(this).attr('id');//takes id from clicked ele
$('.content').stop(false,true).slideUp(600);
//used stop for prevent conflict
$('#'+takeID+'C').stop(false,true).slideDown(600);
///show's hovered ele's id macthed div
});​
html:
<div class="panel" id="panel1">panel1</div>
<div class="content" id="panel1C">content1</div>
<div class="panel" id="panel2">panel2</div>
<div class="content" id="panel2C">content2</div>
<div class="panel" id="panel3">panel3</div>
<div class="content" id="panel3C">content3</div>
----------
Here is jsFiddle with click trigger and close button.
jQuery:
$('.content').slideUp(100);
$('.content').eq(1).slideDown(600);
//for collapsing second part of an accordion
$('.panel').click(function() {//open
var takeID = $(this).attr('id');//takes id from clicked ele
$('#'+takeID+'C').slideDown(600);//show's clicked ele's id macthed div
});
$('span').click(function() {//close
var takeID = $(this).attr('id').replace('Close','');//strip close from id
$('#'+takeID+'C').slideUp(600);//hide clicked close button's panel
});​
html:
<div class="panel" id="panel1">panel1</div>
<div class="content" id="panel1C">content1<span id="panel1Close">X</span></div>
<div class="panel" id="panel2">panel2</div>
<div class="content" id="panel2C">content2<span id="panel2Close">X</span></div>
<div class="panel" id="panel3">panel3</div>
<div class="content" id="panel3C">content3<span id="panel3Close">X</span></div>
Note: I've answered accordion related this answer before:
collapse and expand tabs jquery / simple accordion

Categories