How do I save active tab after page refresh javascript

How do I save active tab after page refresh javascript - javascript

I am trying to save to active tab state on page refresh. Currently, I have the following code, however, when I output to console the ui-state-active it gives me back -1 as the value. And it doesn't seem to even register my click() function, cause my console.log in the function never outputs. I believe I am doing something wrong here.
<script language="javascript" type="text/javascript">
$(".tabs").tabs();
var tabIndex = parseInt(localStorage.getItem('activeTab')) + 1;
console.log("local storage value parseInt: " + tabIndex);
if(tabIndex != null){
console.log("I am in the if statement: " + localStorage.getItem('activeTab'));
$('.tabs > ul > li:nth-child('+ (tabIndex) +')').find('a').click();
}
$(document).on("click", ".tab-links a", function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab.replace ( /[^\d.]/g, '' ));
var curTabIndex = (curTab.replace ( /[^\d.]/g, '' ) - 1);
localStorage.setItem('activeTab', curTabIndex);
});
</script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active" >
<?php include("tab_1.html"); ?>
</div>
<div id="tab2" class="tab" >
<?php include("tab_2.html"); ?>
</div>
<div id="tab3" class="tab" >
<?php include("tab_3.html"); ?>
</div>
<div id="tab4" class="tab active">
<?php include("tab_4.html"); ?>
</div>
<div id="tab5" class="tab active">
<?php include("tab_5.html"); ?>
</div>
<div id="tab6" class="tab active">
<?php include("tab_6.html") ?>
</div>
</div>
</div>

What I would recommend doing is inside your click handler, removing the 'active' class to begin with, then affixing it to the clicked element:
$('.tab-links a').click(function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $(this).parent()[0].id; // Or $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active"></div>
<div id="tab2" class="tab"></div>
<div id="tab3" class="tab"></div>
<div id="tab4" class="tab"></div>
<div id="tab5" class="tab"></div>
<div id="tab6" class="tab"></div>
</div>
</div>
Note that you should only ever have one 'active' class at any one time.
Also be aware that if you are adding your elements dynamically, you will need to hoist the scope and utilise event delegation. In this case, replace $('.tab-links a').click(function(e) {}) with $(document).on("click", ".tab-links a", function(e) {}):
$(document).on("click", ".tab-links a", function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $(this).parent()[0].id; // Or $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active"></div>
<div id="tab2" class="tab"></div>
<div id="tab3" class="tab"></div>
<div id="tab4" class="tab"></div>
<div id="tab5" class="tab"></div>
<div id="tab6" class="tab"></div>
</div>
</div>
Hope this helps! :)

Here you go with a solution https://jsfiddle.net/dhynozb5/2/
$("#tabs").tabs();
var currentTab = $('.ui-state-active a').index();
if(localStorage.getItem('activeTab') != null){
$('#tabs > ul > li:nth-child('+ (parseInt(localStorage.getItem('activeTab')) + 1) +')').find('a').click();
}
$('#tabs > ul > li > a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
localStorage.setItem('activeTab', curTabIndex);
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active" >
tab_1.html
</div>
<div id="tab2" class="tab" >
tab_2.html
</div>
<div id="tab3" class="tab" >
tab_3.html
</div>
<div id="tab4" class="tab active">
tab_4.html
</div>
<div id="tab5" class="tab active">
tab_5.html
</div>
<div id="tab6" class="tab active">
tab_6.html
</div>
</div>
</div>
Highlighting an active tab after page refresh I've used localStorage.
Hope this will help you.

Either move your entire <script></script> block below the html or do the following:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".tabs").tabs();
var currentTab = $('.ui-state-active a').index();
console.log("hi");
console.log("this is the currentTab value: " + currentTab);
$('.tablinks a').click(function(e) {
console.log("i am in here");
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
console.log(curTabIndex);
});
});
</script>

Related

How to show only 1 tab at page load

I have my page built up like a navigation bar and below that i have in-page tabs, which are showing different content, but i can't get it to show only one of them at load.
<div class="tabs">
<div class="row">
<div class="container">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified tab-links">
<li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
<li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>
and now i want the page to show "tab1" when it's loading the first time, how do i do that?
my JS:
<script>
jQuery(document).ready(function () {
jQuery('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tab' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});`enter code here`
});
</script>

Using JQuery:
$(document).ready(function () {
$(".tab-pane").removeClass('active');
$("#tab1").addClass('active');
});
If you tab HTML is like this
<div class="tabs-container">
<div class="tab-content">
<div id="tab1" class="tab-pane">
<div class="wrapper wrapper-content animated fadeInDown">
</div>
</div>
<div id="previewTemplate" class="tab-pane">
<div class="wrapper wrapper-content animated fadeInDown">
</div>
</div>
</div>

try this:
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
e.preventDefault();
// Show/Hide Tabs
var parentLi = $(this).parent();
jQuery('.tabs .tab-links li').not(parentLi).hide();
// Change/remove current tab to active
//jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
<div class="row">
<div class="container">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified tab-links">
<li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
<li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>

Bootstrap Wizard next tab on image click and capture value

I have a form with Twitter Bootstrap Wizard and I have several images that when I select one, I must store locally the value and go to the next tab (o._nextTab).
When I click the image it should go to the next tab, but currently is not working.
This is the idea:
(function($) {
"use strict";
var sdm = function() {
var o = this;
$(document).ready(function() {
o.initialize();
});
};
var p = sdm.prototype;
p.initialize = function() {
this._initChartWizard();
};
//Chart Wizard form
p._initChartWizard = function () {
var o = this;
$('#chartwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $('#chartwizard'));
o._nextTab(o);
}
});
$('#chartwizard').bootstrapWizard({ 'nextSelector': '.chartOption' });
}
p._handleTabShow = function (tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({ width: percent + '%' });
$('.form-wizard-horizontal').find('.progress').css({ 'width': percentWidth });
}
p._nextTab = function(wizard) {
$('.nextT').click(function(){
wizard('next');
});
}
window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):
There will be several images, I want to click on the image and go to the next tab, or at least select the image and then when I click next get the value.
I'm using pyjade to create the templates so if theres any idea there or using javascript it will be welcome.
<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><span class="step">1</span><span class="title">Chart Type</span>
</li>
<li><span class="step">2</span><span class="title">Data Source</span>
</li>
<li><span class="step">3</span><span class="title">Data</span>
</li>
<li><span class="step">4</span><span class="title">Chart Options</span>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body chartOption nexT"><img src="static/assets/img/business-bars-graphic.png" class="img-responsive"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><img src="static/assets/img/business-chart.png" class="img-responsive"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><img src="static/assets/img/business-financial-chart (1).png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane"><br/><br/>
<p>Tab 2</p>
</div>
<div id="tab3" class="tab-pane"><br/><br/>
<p>Tab 3</p>
</div>
<div id="tab4" class="tab-pane"><br/><br/>
<p>Tab 4</p>
</div>
</div>
<div class="pager wizard">
<li class="previous first">First
</li>
<li class="previous">Previous
</li>
<li class="next last">Last
</li>
<li class="next">Next
</li>
</div>
</form>
</div>

I have added onclick="seltab(this); to each image, which on click goes to respective tab and also captures what is clicked.
(function($) {
"use strict";
var sdm = function() {
var o = this;
$(document).ready(function() {
o.initialize();
});
};
var p = sdm.prototype;
p.initialize = function() {
this._initChartWizard();
};
//Chart Wizard form
p._initChartWizard = function() {
var o = this;
$('#chartwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $('#chartwizard'));
o._nextTab(o);
}
});
$('#chartwizard').bootstrapWizard({
'nextSelector': '.chartOption'
});
}
p._handleTabShow = function(tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({
width: percent + '%'
});
$('.form-wizard-horizontal').find('.progress').css({
'width': percentWidth
});
}
p._nextTab = function(wizard) {
$('.nextT').click(function() {
wizard('next');
});
}
window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):
function seltab(obj) {
var elem = obj.getAttribute('datahref')
var click_img = obj.firstChild.getAttribute('src')
var justifiedElems = document.getElementsByClassName('nav-justified')[0].getElementsByTagName("li");
for (var i = 0; i < justifiedElems.length; i++) {
if (justifiedElems[i].firstChild.getAttribute('href') == '#' + elem) {
justifiedElems[i].firstChild.click()
}
}
console.log("You Clicked " + click_img + " " + elem)
}
<link rel="stylesheet" href="//vinceg.github.io/twitter-bootstrap-wizard/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="//vinceg.github.io/twitter-bootstrap-wizard/prettify.css">
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/bootstrap/js/bootstrap.min.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/prettify.js"></script>
<form role="form" id="chartwizard" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><span class="step"></span><span class="title">Chart Type</span>
</li>
<li><span class="step"></span><span class="title">Data Source</span>
</li>
<li><span class="step"></span><span class="title">Data</span>
</li>
<li><span class="step"></span><span class="title">Chart Options</span>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body chartOption nexT">
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane">
<div align="center">
tab2
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
</div>
<div id="tab3" class="tab-pane">
<div align="center">
tab3
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
</div>
<div id="tab4" class="tab-pane">
<div align="center">
tab4
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
</div>
</div>
<div class="pager wizard">
<li class="previous first">First
</li>
<li class="previous">Previous
</li>
<li class="next last">Last
</li>
<li class="next">Next
</li>
</div>
</form>
Here I assume three image corresponds to three tabs

The following will save the selections made (and advance to the next tab). Selections are stored in an object by tab index.
It saves the element ID of elements that have the class saveAndMoveNext. This class is also what triggers the "save this and move to the next tab".
When running it is best to click on the "Full Page" link. I'm not familiar with pyjade, but I have tried to keep it as close to how it was written in the question:
// shim to execute code as written
var p = {};
var chosenSelections = {}; // stores each selection by tab #
//Chart Wizard form
p._initChartWizard = function() {
var o = this;
var $chartwizard = $('#chartwizard'); // cache
$chartwizard.bootstrapWizard({
onTabShow: function(tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $chartwizard);
}
});
// set up selection saving and moving to next tab
$('#chartwizard').find(".saveAndMoveNext").click(function() {
o._saveAndChangeTab($chartwizard, this)
});
}
p._handleTabShow = function(tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({
width: percent + '%'
});
$('.form-wizard-horizontal').find('.progress').css({
'width': percentWidth
});
}
p._saveAndChangeTab = function(wizard, el) {
var currentTab = wizard.bootstrapWizard('currentIndex');
chosenSelections[currentTab] = el.id;
console.log("Selection saved by tab index:",chosenSelections);
wizard.bootstrapWizard('next'); // move to next tab
}
//window.boostbox = window.boostbox || {};
//window.boostbox.sdm = new sdm;
//}(jQuery)); // pass in (jQuery):
// A shim to execute code as written
$(document).ready(function() {
p._initChartWizard();
});
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://vinceg.github.io/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><span class="step">1</span><span class="title">Chart Type</span>
</li>
<li><span class="step">2</span><span class="title">Data Source</span>
</li>
<li><span class="step">3</span><span class="title">Data</span>
</li>
<li><span class="step">4</span><span class="title">Chart Options</span>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<a href="javascript:void(0);"><img id="image1" class="saveAndMoveNext" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWFmZGQyMTE5YSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1YWZkZDIxMTlhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQzLjUiIHk9Ijc0LjgiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
class="img-responsive" /></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<a href="javascript:void(0);"><img id="image2" class="saveAndMoveNext" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWFmZGQyMTE5YSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1YWZkZDIxMTlhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQzLjUiIHk9Ijc0LjgiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
class="img-responsive" /></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<a href="javascript:void(0);"><img id="image3" class="saveAndMoveNext" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWFmZGQyMTE5YSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1YWZkZDIxMTlhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQzLjUiIHk9Ijc0LjgiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
class="img-responsive" /></a>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane">
<br/>
<br/>
<p>Tab 2</p>
</div>
<div id="tab3" class="tab-pane">
<br/>
<br/>
<p>Tab 3</p>
</div>
<div id="tab4" class="tab-pane">
<br/>
<br/>
<p>Tab 4</p>
</div>
</div>
<div class="pager wizard">
<li class="previous first">First
</li>
<li class="previous">Previous
</li>
<li class="next last">Last
</li>
<li class="next">Next
</li>
</div>
</form>
</div>

There are two problems in your code.
The class name nexT in <div class="box-body chartOption nexT"> should be nextT as you write this in your js: $('.nextT').click(function(){
The wizard is not a function, so you can't call it like wizard('next');. You can take advantage of its nextSelector(recommended) or write $(".next:not(.last)").click(); instead.
After fixing these problems, your code should be like this:
<body>
<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><span class="step">1</span><span class="title">Chart Type</span>
</li>
<li><span class="step">2</span><span class="title">Data Source</span>
</li>
<li><span class="step">3</span><span class="title">Data</span>
</li>
<li><span class="step">4</span><span class="title">Chart Options</span>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body chartOption nexTT">
<img src="img/head.png" class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<img src="img/head.png" class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<img src="img/head.png" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane"><br/><br/>
<p>Tab 2</p>
</div>
<div id="tab3" class="tab-pane"><br/><br/>
<p>Tab 3</p>
</div>
<div id="tab4" class="tab-pane"><br/><br/>
<p>Tab 4</p>
</div>
</div>
<div class="pager wizard">
<li class="previous first">First
</li>
<li class="previous">Previous
</li>
<li class="next last">Last
</li>
<li class="next">Next
</li>
</div>
</form>
</div>
<script>
(function ($) {
"use strict";
var sdm = function () {
var o = this;
$(document).ready(function () {
o.initialize();
});
};
var p = sdm.prototype;
p.initialize = function () {
this._initChartWizard();
};
//Chart Wizard form
p._initChartWizard = function () {
var o = this;
$('#chartwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $('#chartwizard'));
console.log(this);
o._nextTab(o);
}
});
$('#chartwizard').bootstrapWizard({
'nextSelector': '.chartOption'
});
}
p._handleTabShow = function (tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({
width: percent + '%'
});
$('.form-wizard-horizontal').find('.progress').css({
'width': percentWidth
});
}
p._nextTab = function (wizard) {
$('.nexTT').click(function () {
$(".next:not(.last)").click();
});
}
window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):
</script>
</body>
Refer to http://vinceg.github.io/twitter-bootstrap-wizard/

(function($) {
"use strict";
var sdm = function() {
var o = this;
$(document).ready(function() {
o.initialize();
});
};
var p = sdm.prototype;
p.initialize = function() {
this._initChartWizard();
};
//Chart Wizard form
p._initChartWizard = function () {
var o = this;
$('#chartwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $('#chartwizard'));
o._nextTab(o);
}
});
$('#chartwizard').bootstrapWizard({ 'nextSelector': '.chartOption' });
$('img').on('click', function() {
var step = $(this).attr('data-step');
$('#chartwizard').bootstrapWizard('show', step);
});
}
p._handleTabShow = function (tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({ width: percent + '%' });
$('.form-wizard-horizontal').find('.progress').css({ 'width': percentWidth });
}
p._nextTab = function(wizard) {
$('.nextT').click(function(){
wizard('next');
});
}
window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><span class="step">1</span><span class="title">Chart Type</span>
</li>
<li><span class="step">2</span><span class="title">Data Source</span>
</li>
<li><span class="step">3</span><span class="title">Data</span>
</li>
<li><span class="step">4</span><span class="title">Chart Options</span>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body chartOption nexT"><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=1&w=50&h=50" class="img-responsive" data-step="1"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=2&w=51&h=50" class="img-responsive" data-step="2"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=3&w=52&h=50" class="img-responsive" data-step="3"/>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane"><br/><br/>
<p>Tab 2</p>
</div>
<div id="tab3" class="tab-pane"><br/><br/>
<p>Tab 3</p>
</div>
<div id="tab4" class="tab-pane"><br/><br/>
<p>Tab 4</p>
</div>
</div>
<div class="pager wizard">
<li class="previous first">First
</li>
<li class="previous">Previous
</li>
<li class="next last">Last
</li>
<li class="next">Next
</li>
</div>
</form>
</div>
You may simply find the index of the image on click using $(this).index() and then call the $('#wizard').bootstrapWizard('show', index);
For more flexibility, you may add a data-step atribute to the img and specify the step you want to go to. For example <img src="image-source" data-step="2" />. Then on click get the value of this attribute and pass it to this call $('#rootwizard').bootstrapWizard('show', value);
You can do this by attaching a click handler to the images when you initialize the wizard
p._initChartWizard = function() {
var o = this;
var $chartwizard = $('#chartwizard'); // cache
$chartwizard.bootstrapWizard({
onTabShow: function(tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $chartwizard);
}
});
// set up selection saving and moving to next tab
$('#chartwizard').find(".saveAndMoveNext").click(function() {
o._saveAndChangeTab($chartwizard, this)
});
$('img').on('click', function() {
var step = $(this).attr('data-step');
$chartwizard.bootstrapWizard('show', step);
});
}
Alternatively, you may get the wizards current index on click and show the next one
$('img').on('click', function(){
var index = $('#chartwizard').bootstrapWizard('currentIndex'),
totalTabs = $('#chartwizard').bootstrapWizard('navigationLength');
if(index === (totalTabs - 1)) {
index = 0;
} else {
index += 1;
}
$('#chartwizard').bootstrapWizard('show', index);
});
OR simply call next on wizard
$('img').on('click', function(){
$('#chartwizard').bootstrapWizard('next');
})

scroll to top using href id

I want to scroll the div to top position.I have problem with get the href value.now 'a' returns undefined in console.log(a);
function myFunction()
{
var a=$(this).attr('href');
console.log(a);
$('html, body').animate({scrollTop: $('#'+a).offset().top-40}, 500);
}
#consulting,#segments,#partner,#insights{min-height:100vh;}
.secMenu{position:fixed;
}
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions</li>
<li class="test2">Segments</li>
<li class="test3">Our Partners</li>
<li class="test4">Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>

I've made an alternative to what you used, but it does the same thing. I removed the function you used and used jQuery instead. Hope my answer works for you:
$('.nav li a').on('click', function(e) {
e.preventDefault();
var a = $(this).attr('href');
$('html, body').animate({
scrollTop: $(a).offset().top
}, 500);
});
#consulting,
#segments,
#partner,
#insights {
min-height: 100vh;
}
.secMenu {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions
</li>
<li class="test2">Segments
</li>
<li class="test3">Our Partners
</li>
<li class="test4">Perspectives
</li>
</ul>
</div>
</div>
<!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>
To see it in action you can hit the Run code snippet button above or you can see a fiddle here.

Because this is bind to the global object by default (in browser it's window).
You can try pass this to myFunction() like this: myFunction(this). And in myFunction definition: function myFunction(target) {...}, target now refers to the anchor element.

jquery toggle only one item

i try to add jQuery script that will toggle my footer columns, my problem is how I can make to stop toggling all items. Now when someone click on H4 tags all H4 tags are toggle together.
HTML:
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>About Us</li>
<li>Customer Service</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns</li>
<li>Secure Shopping</li>
<li>International Shipping</li>
</ul>
</div>
</div>
</div>
</div>
</div>
jQuery SCRIPT
jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
jQuery('.footer h4').on("click", function(){
if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle(); }
else {
jQuery(this).find('span').addClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle();
}
});

You could also try the following code:
jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
jQuery('.footer-cols h4').on("click", function(){
if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parent().next().slideToggle();
}
else {
jQuery(this).find('span').addClass('opened').parent().next().slideToggle();
}
});
The problem with your selector is that with
parents('.footer-cols')
You basically select
<div class="row footer-cols"></div>
element on top. Thus
find('.footer-cols-content')
selects all child elements in it resulting all of them to slideToggle()

on the click handler change .parents('.footer-cols') for .parents('.col-sm-4')

You will need to add content to the span to give the user something to click
This one changes the plus/minus and hides other content
$(function() {
$(".footer-cols").find("h4").on("click", function() {
var $content = $(this).parent().find(".footer-cols-content");
var $span = $(this).find("span");
if ($span.length==0) $(this).append('<span class="toggle" />');
$(".footer-cols-content").not($content).hide();
$content.slideToggle();
$span.text($span.text() == "-" ? "+" : "-");
});
});
To add the span on the fly:
if ($span.length==0) {
$span=$('<span class="toggle" />');
$(this).append($span);
}
$(function() {
$(".footer-cols").find("h4").on("click", function() {
var $content = $(this).parent().find(".footer-cols-content");
var $span = $(this).find("span");
if ($span.length==0) {
$span=$('<span class="toggle" />');
$(this).append($span);
}
$(".footer-cols-content").not($content).hide();
$content.slideToggle();
$span.text($span.text() == "-" ? "+" : "-");
});
});
.footer-cols-content {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information </h4>
<div class="footer-cols-content">
<ul>
<li>About Us
</li>
<li>Customer Service
</li>
<li>Privacy Policy
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us <span class="toggle">+</span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns
</li>
<li>Secure Shopping
</li>
<li>International Shipping
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

I am not sure why are you appending span class but If I am not worng only slide toggle should do the work that you intend to do.
jQuery('.footer-cols h4').on("click", function(){
$(this).find('span').toggleClass('opened').end().next().slideToggle();
});
jQuery('.footer-cols h4').on("click", function(){
$(this).find('span').toggleClass('opened').end().next().slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>About Us</li>
<li>Customer Service</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns</li>
<li>Secure Shopping</li>
<li>International Shipping</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The above code will work only when the footer-cols-content div is always next to h4. To avoid as such you can use parent().
jQuery('.footer h4').on("click", function(){
$(this).parent().find('footer-cols-content').slideToggle();
});

trying to implement a 'next' button using twitter bootstrap-tabs.js

I'm using Twitter's bootstrap and have implemented basic tabs for some help screens using bootstrap-tabs.js. I was surprised that I couldn't find any documentation on how to create a 'next' button. I'd like to create a separate 'next' button to loop through all tabs(e.g: $('#next_tour'), below). Any ideas on how to implement the javascript for this?
aside/comment: I also noticed that fragment identifiers aren't added to the url with the bootstrap solution - which might be nice to have, too. (for that feature it's making me consider this: http://flowplayer.org/tools/demos/tabs/ajax-history.html instead, but I'm undecided right now.)
<div class="span11 columns">
<div class="row">
<div id="my-tab-content" class="tab-content">
<div class="active tab-pane" id="home">
<p>Raw denim</p>
</div>
<div class="tab-pane" id="sensors">
<p>Food truck.</p>
</div>
<div class="tab-pane" id="encouragment">
<p>Banksy.</p>
</div>
<div class="tab-pane" id="teammates">
<p>biodiesel.</p>
</div>
<div class="tab-pane" id="privacy">
<p>mollit.</p>
</div>
</div>
</div>
</div>
<div class="span1 columns offset11">
<div class="row">
<a id="next_tour" class="button_blue" href="">Next</a>
</div>
</div>

Here's what I came up with, you can alter the only two selectors (a[data-toggle="tab"], ._tabs_navigation) to specify which buttons switch which tabs if you have more than one set:
$(document).ready(function() {
var tabIndex;
var tabs = $('a[data-toggle="tab"]');
tabs.on('shown', function(e) {
tabIndex = $(e.target).closest('li').index();
}).eq(0).trigger('shown');
$('._tabs_navigation').on('click', 'a', function() {
var index = tabIndex + ($(this).index() ? 1 : -1);
if (index >= 0 && index < tabs.length) {
tabs.eq(index).tab('show');
}
return false;
});
})
Markup for buttons, only the class _tabs_navigation is important:
<div class="btn-toolbar clearfix">
<div class="btn-group pull-left _tabs_navigation" data-toggle="buttons-radio">
<a class="btn btn-small btn-info" href="#">
<i class="icon-arrow-left icon-white"></i>
</a>
<a class="btn btn-small btn-info" href="#">
<i class="icon-arrow-right icon-white"></i>
</a>
</div>
</div>
Working example:
http://jsfiddle.net/gEn8f/2/

My variant for Bootstrap 3.0 (only Next):
<ul class="nav nav-tabs" id="myTab">
<li class="active">Base tab</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="base">
<p>This is content of Tab 1</p>
Next →
</div>
<div class="tab-pane fade" id="tab2">
<p>This is content of Tab 2</p>
Next →
</div>
<div class="tab-pane fade" id="tab3">
<p>This is content of Tab 3</p>
</div>
</div>
<script>
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
tabNext = function(e) {
var nextTab = $(e).attr('href');
$('#myTab a[href="' + nextTab + '"]').tab('show');
}
})
</script>

the answer is here
http://twitter.github.com/bootstrap/javascript.html#tabs
but try the below code
<ul id="myTab" class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<p>This is content of Tab 1</p>
</div>
<div class="tab-pane fade" id="tab2">
<p>This is content of Tab 2</p>
</div>
<div class="tab-pane fade" id="tab3">
<p>This is content of Tab 3</p>
</div>
<div class="tab-pane fade" id="tab4">
<p>This is content of Tab 4</p>
</div>
</div>
<div>
‹ Prev
Next ›
</div>
<script>
var myTab, myTabsActive, tabNext, tabPrev;
$(function() {
myTabs = $('#myTab li').length;
myTabsActive = 0; //or yours active tab
tabNext = function() {
var index = myTabsActive + 1;
index = index >= myTabs ? 0 : index;
$('#myTab li:eq(' + index + ') a').tab('show');
myTabsActive = index;
}
tabPrev = function() {
var index = myTabsActive - 1;
index = index < 0 ? myTabs - 1 : index;
$('#myTab li:eq(' + index + ') a').tab('show');
myTabsActive = index;
}
});
</script>

We Keep Coding

JavaScript is the programming language of the Web.

How do I save active tab after page refresh javascript - javascript

Related

How to show only 1 tab at page load

Bootstrap Wizard next tab on image click and capture value

scroll to top using href id

jquery toggle only one item

trying to implement a 'next' button using twitter bootstrap-tabs.js

Categories

Resources