How do I show step description on the progress bar? - javascript

I currently have this, a bootstrap progress bar:
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="8" style="width: 20%;">
Step 1 of 8
</div>
</div>
The I have some tabs and each time one is active, i run this:
jQuery('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var step = jQuery(e.target).data('step');
var percent = (parseInt(step) / 8) * 100;
jQuery('.progress-bar').css({width: percent + '%'});
jQuery('.progress-bar').text("Step " + step + " di 8");
});
That's fine and it works but how about having the description of each step on top?
UPDATE
This is a jsFiddle
Something along those lines

Here's a way of doing this with flexbox, nice and simple:
jQuery('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
var step = jQuery(e.target).data('step');
var percent = (parseInt(step) / 8) * 100;
jQuery('.progress-bar').css({
width: percent + '%'
});
jQuery('.progress-bar').text("Step " + step + " di 8");
});
#wiz_menu {
display: flex;
flex-direction: row;
}
#wiz_menu li {
width: 100%;
float: none;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="8" style="width: 20%;">
Step 1 of 8
</div>
</div>
<ul id="wiz_menu" class="nav nav-tabs">
<li class="active">Your Details</li>
<li>Bank Details</li>
<li>Another step</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
<li>Step 8</li>
</ul>

Just added some code to your jsfiddle, hope this helps. You have to amend it as per your requirement.
var maxProgressBarWidth = 0;
jQuery('.nav li').each(function() {
maxProgressBarWidth += jQuery(this).outerWidth();
});
jQuery('.progress').width(maxProgressBarWidth);
jQuery('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var step = jQuery(e.target).data('step');
var percent = (parseInt(step) / 8) * 100;
jQuery('.tab-desc').removeClass('active').filter('[data-step=' + step + ']').addClass('active');
jQuery('.progress-bar').css({width: percent + '%'});
jQuery('.progress-bar').text("Step " + step + " di 8");
});
.tab-desc {
display: none;
}
.tab-desc.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="8" style="width: 20%;">
Step 1 of 8
</div>
</div>
<ul id="wiz_menu" class="nav nav-tabs">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
<li>Step 8</li>
</ul>
<div class="tab-desc active" data-step="1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="2">
ecessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="3">
Lorem ipsum dolor sit amet, consectetur Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo!
</div>
<div class="tab-desc" data-step="6">
Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="7">
Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="8">
Lorem ipsum dolor sit amet, consectetur
</div>
EDIT: You can move the markup (html) above the steps tab list and amend/style it as per your screenshot.
Update js to calculate the width of the tabs and set it to progress div

Related

show drop menu outside the sidebar that has a scroll, but still in the same position as the anchor

Like facebook, when hover over the image of the friend it shows drop menu out side the left sidebar of friends,
I gave the drop menu position absolute with respective to the app itself (position: relative), but the problem is when scrolling down the menu appear below its anchor tag, how can I fix it ?
here is the sample of the code that I have,
can I implement this with pure css or I need JS ?
.App {
position: relative;
}
nav {
overflow: auto;
max-height: 700vh;
}
.dropMenu {
position: absolute;
}
<div className="App">
<nav>
<ul>
<li>
<a onClick={this.showDropMenu}> ... </a>
</li>
<div className="dropMenu"></div>
</ul>
</nav>
</div>
Use position: sticky;
.App{
position: sticky;
}
nav {
overflow: auto;
max-height: 700vh;
}
.dropMenu {
position: absolute;
}
This is the simplest way you can do it using only CSS. You may have to implement other behaviors if you want to have a fully functional dropdown-menu.
$(".nav li").on("mousemove", evt => {
const li = $(evt.target);
const dropdown = $(evt.target).find('.dropdown-menu');
let liTop = li.offset().top;
liTop = liTop < 0 ? liTop * -1 : liTop;
dropdown.css('top', liTop + li.height());
})
ul {
list-style: none;
overflow-y: auto;
height: 100px;
width: 400px;
}
ul li {
margin: 20px 0;
}
ul li:hover .dropdown-menu {
display: block;
}
ul li .dropdown-menu {
position: absolute;
display: none;
width: 300px;
background-color: #fff;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
<li>
Lorem 1
<div class="dropdown-menu">
Lorem 1 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 2
<div class="dropdown-menu">
Lorem 2 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 3
<div class="dropdown-menu">
Lorem 3 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 4
<div class="dropdown-menu">
Lorem 4 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 5
<div class="dropdown-menu">
Lorem 5 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
</ul>

How to make sections under multiscroll.js divs?

I am using multiscroll.js example file.
<body>
<ul id="menu">
<li data-menuanchor="first">First slide</li>
<li data-menuanchor="second">Second slide</li>
<li data-menuanchor="third">Third slide</li>
</ul>
<div id="myContainer">
<div class="ms-left">
<div class="ms-section" id="left1">
<h1>Left 1</h1>
</div>
<div class="ms-section" id="left2">
<h1>Left 2 </h1>
</div>
<div class="ms-section" id="left3">
<h1>Left 3</h1>
</div>
</div>
<div class="ms-right">
<div class="ms-section" id="right1">
<h1>Right 1</h1>
</div>
<div class="ms-section" id="right2">
<h1>Right 2</h1>
</div>
<div class="ms-section" id="right3">
<h1>Right 3</h1>
</div>
</div>
</div>
</body>
</html>
What I want is to add few more divs under this #mycontainer div. like this
<div class="bar" id="foo">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus id
possimus, nostrum mollitia dolores neque amet esse commodi facilis
temporibus quisquam molestiae eligendi non ullam vitae et repellendus repellat velit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae voluptatum officia sint, omnis quibusdam labore. Illo, consequuntur aliquid saepe voluptates, nulla accusantium aspernatur in voluptatem minima a magnam nemo explicabo.
</div>
Is it possible to make a website in which multiscroll is limited to one specific div only. After that div is scrolled website behave like a normal website.
I had the same need and I figured out with the use of the afterLoad() callback
afterLoad: function(index){
if(index == '3'){
$('html, body').delay(1000).css('overflow', 'auto');
} else {
$('html, body').delay(1000).css('overflow', 'hidden');
}
}
Be sure to have this parameter normalScrollElements correctly setup like your div below the multiscroll

When user scrolls down page, space between nav and dropdown menu due to position: fixed

Problem
I have a dropdown menu that appears when the hamburger icon is clicked. The hamburger icon appears when the browser is less than 1300px in width. But due to position: fixed the dropdown menu does not appear to move together with the nav as one element when the user scrolls down the page. And as a result, there appears to be a gap between the two elements and you see the text between them.
My work-around has been on scroll to hide the dropdown navigation if its open. However, I don't know if this is the best method as this may cause issues on mobile. I feel a better approach might be changing the structure of the HTML in some way or by using position: relative
Objective
When I scroll down the page I want the nav and its dropdown menu to move up together
CodePen: https://codepen.io/onlyandrewn/pen/JNpdde
index.html
<nav id="top">
<div class="nav__title">
<h1>School Guide</h1>
</div>
<div class="nav__wrapper">
<div class="nav__list--wrapper">
<div class="nav__hamburger">
<i class="fa fa-bars" aria-hidden="true"></i>
<ul class="test">
<li>About</li>
<li class="item-schools">Schools</li>
<ul class="inner-text inner-school">
<li><i class="fa fa-caret-right" aria-hidden="true"></i> Elementary</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> Middle</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> High</li>
</ul>
<li>Districts</li>
<li>MAP Scores</li>
<ul class="inner-text">
<li><i class="fa fa-caret-right" aria-hidden="true"></i> By school</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> By district</li>
</ul>
</ul>
</div>
<ul class="nav__list">
<li class="nav__item item--about">About</li>
<li class="nav__item item--schools">Schools
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="nav__dropdown dropdown--schools">
<div class="triangle triangle-schools"></div>
<li>Elementary</li>
<li>Middle</li>
<li>High</li>
</ul>
</li>
<li class="nav__item item--districts">Districts</li>
<li class="nav__item item--map">MAP Scores
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="nav__dropdown dropdown--districts">
<div class="triangle triangle-map"></div>
<li>By school</li>
<li>By district</li>
</ul>
</li>
</ul>
</div>
<div class="nav__social">
<div class="nav__icons">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</div>
</div>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
scripts.js
if ($(window).width() < 1300) {
$(".fa-bars").on("click", function(){
$(".test").slideToggle();
if ($(".test").hasClass("is-open")) {
$(".test").removeClass("is-open");
} else {
$(".test").addClass("is-open");
}
});
}
$(window).on("resize", function(){
if ($(".test").hasClass("is-open")) {
$(".test").removeClass("is-open");
$(".test").hide();
}
$(".fa-bars").unbind("click");
if ($(window).width() < 1300) {
$(".fa-bars").on("click", function(){
$(".test").slideToggle();
});
}
});
$(window).on("scroll", function(){
if ($(".test").hasClass("is-open")) {
$(".test").removeClass("is-open");
$(".test").hide();
}
});
Sorry I might be missing something but base on codepen adding
position: fixed;
top: 0;
to nav is really all you need. So adding that on the media query also should solve your need
I'm not sure if you're trying to prevent the menu from scrolling with the page, or get the navbar to remain fixed to the top, but both can be accomplished by using position.
To attach the navbar to the top of the page, use position: fixed and add some padding to the top of your main content area (enough to account for the height of the navbar).
To keep the mobile menu from scrolling with the page, change its position to relative or static, see what works from those.
if I understand correctly, whenever on the smaller screens you need to be able to scroll to see the content. Nav is going up so does the navigation from the hamburger.
just change your class test from position fixed to absolute.
The fix:
Change
position: fixed
to
position: absolute
Why:
Both will take the element out of flow, which will have the desired effect of having a size and placement relative to its nearest positioned ancestor rather than it's immediate non-positioned container. While absolute does just that, fixed will also keep the element in the exact same spot on the window, as if it was taped to your computer screen. This is why it was getting stuck.
I moved the unordered list with the class of test to outside of the nav
I removed the position: fixed on the dropdown menu
index.html
<nav id="top">
<div class="nav__title">
<h1>School Guide</h1>
</div>
<div class="nav__wrapper">
<div class="nav__list--wrapper">
<div class="nav__hamburger">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<ul class="nav__list">
<li class="nav__item item--about">About</li>
<li class="nav__item item--schools">Schools
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="nav__dropdown dropdown--schools">
<div class="triangle triangle-schools"></div>
<li>Elementary</li>
<li>Middle</li>
<li>High</li>
</ul>
</li>
<li class="nav__item item--districts">Districts</li>
<li class="nav__item item--map">MAP Scores
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="nav__dropdown dropdown--districts">
<div class="triangle triangle-map"></div>
<li>By school</li>
<li>By district</li>
</ul>
</li>
</ul>
</div>
<div class="nav__social">
<div class="nav__icons">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</div>
</div>
</nav>
<ul class="test">
<li>About</li>
<li class="item-schools">Schools</li>
<ul class="inner-text inner-school">
<li><i class="fa fa-caret-right" aria-hidden="true"></i> Elementary</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> Middle</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> High</li>
</ul>
<li>Districts</li>
<li>MAP Scores</li>
<ul class="inner-text">
<li><i class="fa fa-caret-right" aria-hidden="true"></i> By school</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> By district</li>
</ul>
</ul>
style.css
.test {
font-weight: 400;
width: 100%;
padding: 0;
background: #c62828;
z-index: 99;
box-shadow: 0 5px 5px #f4c6c6;
display: none;
margin: 0;
}

How to responsive bootstrap tab

I'm trying to develop myself just on bootstrap and I wonder that how to create boostrap tab to responsive without plugin and I found a few plugin for tab to responsive but I want to learn how can I make it without plugin?
for example as image (it can be like this)
.myTab{
margin:70px;
width:700px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="myTab">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo asperiores, architecto sunt ex dignissimos nihil eaque voluptate, iure iusto porro, rem animi odio, amet consequatur saepe nam accusamus perspiciatis deserunt?</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<h2>Profile</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam possimus neque suscipit omnis dolore at consequuntur commodi itaque dignissimos quibusdam consectetur officia earum laborum accusantium, corporis quaerat ullam modi repellendus.</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<h2>Messages</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi inventore dignissimos nisi quisquam sit commodi, laboriosam perspiciatis omnis praesentium voluptate illum magni! Quo, odio itaque recusandae quam veniam tempore cupiditate.</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<h2>Settings</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quam illo magni itaque fugit quo aperiam minus officia a, cumque, error, quidem voluptates cupiditate asperiores dolorum necessitatibus commodi culpa dicta.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Don't give any width allow bootstrap to set it or use media queries in css. Alternatively use bootstrap grid like col-lg-12 or something which fits. you can also use .container class which sets the width to 800px and is responsive too.
What about taking the float left off of the tab items for the size you want to change it
#media screen and (max-width: 767px) {
.nav-tabs>li {
float: none;
}
}
I created this one here code https://jsfiddle.net/zrss7hor/2/ each time you resize your browser the tabs will adapt it

How do i show a specific slide in Flexslider when someone clicked on sub nav item using jQuery?

I'm trying to get a specific Flexslider Slide to show when a sub-menu-item is clicked.
I have added data-attributes for which slider and which slide that should be active which i will receive with jQuery (at least that was my plan):
<div id="main-nav" class="">
<ul>
<li class="item1">
Whatever
<ul id="sub-nav1">
<li>Action</li>
<li>Another</li>
<li>Something</li>
</ul>
</li>
<li>
Whatever1
<ul id="sub-nav2">
<li>Action</li>
<li>Another</li>
<li>Something</li>
</ul>
</li>
<li>
Whatever2
<ul id="sub-nav3">
<li>Action</li>
<li>Another</li>
<li>Something</li>
</ul>
</li>
</ul>
Let's say this is my first flexislider:
<div class="flexslider" id="flexslider1">
<ul class="slides">
<li>
<h3>Flexslider slide 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora provident velit quidem veniam temporibus, ipsa molestias rem dicta rerum et eveniet consequuntur nobis aliquid sed corporis exercitationem iusto impedit dolorem.</p>
</li>
<li>
<h3>Flexslider slide 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque natus vel aliquid omnis iusto ullam rerum commodi, quia ex illo libero odit laborum delectus sapiente pariatur sequi adipisci incidunt deleniti!</p>
</li>
<li>
<h3>Flexslider slide 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, repudiandae qui vitae nesciunt culpa aperiam amet beatae laborum excepturi eos, quos ex illum distinctio quo. Fugiat ut ullam, sapiente sed.</p>
</li>
</ul>
</div>
All of the Flexsliders are initiated in the head:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
And this is my jQuery code for trying to manipulate the sliders based on which sub-menu-item they've clicked on:
$('#sub-nav li a').on('click', function(event) {
event.preventDefault(event);
var $sliderNo = $(this).attr('data-slider');
var $slide = $(this).attr('data-slide');
var $slider = "#flexslider" + $sliderNo;
$($slider).flexslider($slide);
});
What i had to do was.
$('#sub-nav li a').on('click', function(event) {
event.preventDefault(event);
//Use data instead of attr
var $sliderNo = $(this).data('slider');
var $slider = "#flexslider" + $sliderNo;
var $slide = $(this).data('slide');
$($slider).flexslider($slide); // This won't run! - Why?
});

Categories