Remove div if list has less than three elements

Remove div if list has less than three elements - javascript

How can I remove div.count if the ul.elements has less than three li?
The html:
<ul class="list">
<li class="element level-1">
<div class="top">
<div class="content">dsssd</div>
<div class="count"></div>
<ul class="elements">
<li class="element level-2">
<div class="parent">
<div class="content">assd</div>
<ul class="elements">
<li class="element level-3">
<div id="dssd">
<div class="content">dssd</div>
</div>
</li>
<li class="element level-3">
<div id="fddd">
<div class="content">gfddg</div>
</div>
</li>
<li class="element level-3">
<div id="fdff">
<div class="content">ddee</div>
</div>
</li>
<li class="element level-3">
<div id="gfgggf">
<div class="content">hghg</div>
</div>
</li>
</ul>
</div>
</li>
<li class="element level-2">
<div id="gfgf" class="parent">
<div class="content">eeer</div>
</div>
</li>
</ul>
</div>
</li>
<li class="element level-1">
<div id="hjjh" class="top">
<div class="content">hjhj</div>
<div class="count"></div>
<ul class="elements">
<li class="element level-2">
<div id="yuyuu" class="parent">
<div class="content">uyyu</div>
<ul class="elements">
<li class="element level-3">
<div id="trtrrt">
<div class="content">trtrtr</div>
</div>
</li>
</ul>
</div>
</li>
<li class="element level-2">
<div id="opop" class="parent">
<div class="content">opop</div>
</div>
</li>
<li class="element level-2">
<div id="kjkj" class="parent">
<div class="content">kjkj</div>
</div>
</li>
</ul>
</div>
</li>
<li class="element level-1">
<div id="qwwq" class="top">
<div class="content">qwqw</div>
<div class="count"></div>
<ul class="elements">
<li class="element level-2">
<div id="ytty" class="parent">
<div class="content">tyty</div>
<ul class="elements">
<li class="element level-3">
<div id="ghghgh">
<div class="content">jhhj</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
the script:
$('.list .count').text(function() {
var length = $(this).closest('.count')
.next('.elements')
.find('.element')
.length
;
if (length > 2) {
return length;
}
});
css:
.elements {
clear: both;
}
.level-1 {
margin-bottom: 10px;
}
.count {
background-color: pink; float: left; padding: 5px;
}
fiddle

$('div.count').find('ul.elements').filter(function() {
return $(this).children('li').length < 3;
})
.end().remove();
EDIT
The following should work with the updated markup:
$('div.count').each(function() {
var that = $(this),
upUL = that.next('ul.elements');
upUL.add( upUL.find('ul.elements') ).filter(function() {
return $(this).children('li').length < 3;
}).length === 0 || that.remove();
});
JS FIDDLE DEMO

Just add $(this).remove() to remove div in else part in your exisiting text() function like this:
if (length > 2) {
return length;
}
else {
$(this).remove(); // less than 3 remove it
}
UPDATED FIDDLE
or add another if:
if (length < 3) {
$(this).remove();
}

Alternative to selected answer: rather than removing the "count" entirely (in case you are live-updating the contents of those lists with JavaScript later,) why not just hide it? Then you can display it again if the length situation changes.
This seemed to work:
$('.list .count').text(function() {
var length = $(this)
.closest('.count')
.next('.elements')
.find('.element')
.length;
if (length > 2) {
return length;
} else {
$(this).closest('.count').hide();
}
});
http://jsfiddle.net/qxD7W/

Related

How do I save active tab after page refresh 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>

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');
})

Jquery Show div with matching class

I'm trying to display a div when an item with a class name the same as the hidden div's id is clicked.
The problem is when I click it reveals all of them instead of the particular one I'm clicking on.
This is my code so far:
$("#mixers").on("click", ".clear-tile", function() {
$("#mixers li").each(function() {
$('#' + $(this).attr('class')).removeClass('display-hide');
});
});
.display-hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="mixers">
<li class="one"><span class="clear-tile">Show One</span></li>
<li class="two"><span class="clear-tile">Show Two</span></li>
<li class="three"><span class="clear-tile">Show Three</span></li>
</ul>
<div id="one" class="display-hide"><p>I'm One</p></div>
<div id="two" class="display-hide"><p>I'm Two</p></div>
<div id="three" class="display-hide"><p>I'm Three</p></div>

Dont iterate over them with each, that will show them all
Use parent() to traverse up to the li with the class identifier
$("#mixers").on("click", ".clear-tile", function() {
$('#' + $(this).parent('li').attr('class')).removeClass('display-hide');
});
.display-hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="mixers">
<li class="one"><span class="clear-tile">Show One</span>
</li>
<li class="two"><span class="clear-tile">Show Two</span>
</li>
<li class="three"><span class="clear-tile">Show Three</span>
</li>
</ul>
<div id="one" class="display-hide">
<p>I'm One</p>
</div>
<div id="two" class="display-hide">
<p>I'm Two</p>
</div>
<div id="three" class="display-hide">
<p>I'm Three</p>
</div>

You need to use:
$("#mixers").on("click", ".clear-tile", function() {
$('#' + $(this).parent().attr('class'))
.toggleClass('display-hide')
.siblings('div')
.addClass('display-hide');
});
Working Demo

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();
});

Count elements in repeating lists with jQuery

I have managaged to count the total replies for one grandparent comment. The problem is that I have repeating markup and would like to count and display the replies for every grandparent comment. Here is what I have, also available as a fiddle:
<ol class="commentlist">
<li class="comment byuser comment-author-admin even thread-even depth-1" id="li-comment-677">
<div id="comment-677" class="grandparent">
<div class="comment-inner">comment-677
<div class="reply-info">
<div class="reply-has">has</div>
<div class="reply-count"></div>
<div class="reply-text">replies:</div>
</div>
</div>
<ul class="children">
<li class="comment byuser comment-author-admin odd alt depth-2" id="li-comment-678">
<div id="comment-678" class="parent">
<div class="comment-inner">comment-678</div>
<ul class="children">
<li class="comment byuser comment-author-admin even depth-3" id="li-comment-680">
<div id="comment-680">
<div class="comment-inner">comment-680</div>
</div>
</li>
<li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-686">
<div id="comment-686">
<div class="comment-inner">comment-686</div>
</div>
</li>
<li class="comment byuser comment-author-admin even depth-3" id="li-comment-688">
<div id="comment-688">
<div class="comment-inner">comment-688</div>
</div>
</li>
<li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-689">
<div id="comment-689">
<div class="comment-inner">comment-689</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="comment byuser comment-author-admin odd alt thread-odd thread-alt depth-1" id="li-comment-679">
<div id="comment-679" class="grandparent">
<div class="comment-inner">comment-679
<div class="reply-info">
<div class="reply-has">has</div>
<div class="reply-count"></div>
<div class="reply-text">replies:</div>
</div>
</div>
<ul class="children">
<li class="comment byuser comment-author-admin even depth-2" id="li-comment-682">
<div id="comment-682" class="parent">
<div class="comment-inner">comment-682</div>
</div>
</li>
<li class="comment byuser comment-author-admin odd alt depth-2" id="li-comment-690">
<div id="comment-690" class="parent">
<div class="comment-inner">comment-690</div>
</div>
</li>
<li class="comment byuser comment-author-admin even depth-3" id="li-comment-691">
<div id="comment-691">
<div class="comment-inner">comment-691</div>
</div>
</li>
</ul>
</div>
</li>
</ol>
The javascript:
var count = $("#li-comment-677 > .grandparent > .children > li").length
var count2 = $("#li-comment-677 > .grandparent > .children > .depth-2 > .parent > .children > li").length
var count3 = +count + +count2;
$('.reply-count').text(count3);

Try this dynamic logic,
$(".grandparent").each(function(ind, val){
var nTotalComment = $(val).find(".children .comment-inner").length;
$(val).find(".reply-count").html(nTotalComment);
});
Check this jsfiddle

You should iterate through the collection. You can use the text callback function which is executed once for each element in the collection. text method calls the each method behind the scenes, so it also implicitly iterates through the collection.
$('.commentlist .reply-count').text(function() {
return $(this).closest('.comment-inner')
.next('.children')
.find('.comment')
.length;
});
http://jsfiddle.net/tzLz6/

We Keep Coding

JavaScript is the programming language of the Web.

Remove div if list has less than three elements - javascript

Just add $(this).remove() to remove div in else part in your exisiting text() function like this: if (length > 2) { return length; } else { $(this).remove(); // less than 3 remove it } UPDATED FIDDLE or add another if: if (length < 3) { $(this).remove(); }

Related

How do I save active tab after page refresh javascript

Bootstrap Wizard next tab on image click and capture value

Jquery Show div with matching class

jquery toggle only one item

Count elements in repeating lists with jQuery

Categories

Resources