I have step form with 3 steps. I want to get index of <li> in stepinstallment when <label> inside it selected to check:
If the first step is selected, it will change background color of circle class.
If the second and third step is selected without first step, it will display error message.
I've tried many ways on SO and write myself but it doesn't work.
This is my code
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment">
<ul>
<li id="step-one" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
JS
var sCircle = $('.steps ul li');
$('.step label').on('click', function(){
var $this = $(this),
sCircleIndex = parseInt(sCircle.index()),
sCircleChild = sCircle.children('div'),
currParent = $this.parents('ul').index();
console.log(currParent);
});
Above JS code always return 0. Hope anyone can figure me out this case. Thanks in advance.
Try using .closest()
$(".stepinstallment label").on("click", function() {
console.log($(this).closest("li").index())
});
$('.stepinstallment label').on('click', function(){
console.log($(this).closest("li").index())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment">
<ul>
<li id="step-one">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
I hope this example will help you out !!!
$("ul#wizard li").click(function () {
var index = $("ul#wizard li").index(this);
if(index!=0)
alert("error ")
else
alert("index is: " + index)
});
<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<p>Some random tag</p>
</ul>
$('.step label') will not return any elements, since there is no html matching the css selector
I can't see the .steps and .step class in your html.
with your html, I guess this code will work
$('.stepinstallment').on('click', 'label', function (e) {
var $this = $(this);
var li = $this.parents('li');
console.log(li.index());
});
the steps of the code:
get the label element
get the li element contain the label
get the index
There is no click on label... it is empty. You can bind click on checkbox, the find the index of li and base on it color the same index of LI in your circle UL:
var sCircle = $('.steps ul li');
$('input[type=radio]').on('click', function(){
var liIndex=$(this).parents('li').index();
if(liIndex>0){
alert('error')
}
else{
$('ul.clearfix>li:eq('+liIndex+')').css('background-color','red')
}
});
JSFIDDLE
$(document).ready(function(){
var sCircle = $('.steps ul li');
$('.step label').on('click', function () {
var currentLi = $(this).parents('li')[0];
currentLiIndex = -1;
sCircle.each(function (index) {
if (sCircle[index] == currentLi) {
currentLiIndex = index;
}
});
console.log(currentLiIndex);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment steps">
<ul>
<li id="step-one">
<h2>Choose your document</h2>
<div class="step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two">
<h2>Choose your document</h2>
<div class=" step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three">
<h2>Choose your document</h2>
<div class="step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
This is what you need to do.
$('.step-content label').on('click', function(){
var clickedId = $(this).parents('li').index();
if(clickedId == 0) {
$('.circle').css('background-color','yellow');
} else {
alert('error');
}
});
Working example in jsfiddle https://jsfiddle.net/1uxus551/
Related
I have few div which is collapsed.
On click of div of each element it display the collapsed content. On second click only on the same div it toggle class 'is-collapsed' and hide the element content. What i need to do is to be able to close displayed content also when i click on one of the other div or somewhere outside.
Not sure about the exact java script but take the part that is working for the toggle class.
This is the code :
/* collapse */
$('.filter-collapse .box-heading').live('click', function() {
$(this).closest('.box').toggleClass('is-collapsed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters-collapse">
<div class="box sf-option sf-list sf-option-13 sf-multi is-collapsed">
<div class="box-heading">Sizes</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[13]" value="49"><span class="sf-name">S (2)</span> </label></li>
<li><label><input type="checkbox" name="option[13]" value="50"><span class="sf-name">M (1)</span> </label></li>
</ul>
</div>
</div>
<div class="box sf-option sf-list sf-option-14 sf-multi is-collapsed">
<div class="box-heading">Color</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[14]" value="55"><span class="sf-name">White (2)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="54"><span class="sf-name">Red (1)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="53"><span class="sf-name">Black (1)</span> </label></li>
</ul>
</div>
</div>
</div>
I suggest to use another event handler on the document, which adds the is-collapsed class to all collapsable elements - ignoring the box itself, if one was clicked.
/* collapse */
$(document).on("click", function(e) {
// add collapsed to all boxes, besides a box itself was clicked.
var currentTargetBox = $(e.target).closest('.filters-collapse .box');
$('.filters-collapse .box').not(currentTargetBox).addClass('is-collapsed');
});
$(document).on("click", '.filters-collapse .box-heading', function(e) {
// toggle is-collapsed
$(this).closest('.box').toggleClass('is-collapsed');
});
.box.is-collapsed .box-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters-collapse">
<div class="box sf-option sf-list sf-option-13 sf-multi is-collapsed">
<div class="box-heading">Sizes</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[13]" value="49"><span class="sf-name">S (2)</span> </label></li>
<li><label><input type="checkbox" name="option[13]" value="50"><span class="sf-name">M (1)</span> </label></li>
</ul>
</div>
</div>
<div class="box sf-option sf-list sf-option-14 sf-multi is-collapsed">
<div class="box-heading">Color</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[14]" value="55"><span class="sf-name">White (2)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="54"><span class="sf-name">Red (1)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="53"><span class="sf-name">Black (1)</span> </label></li>
</ul>
</div>
</div>
</div>
I use iCheck http://icheck.fronteed.com/ on my project
but it block my js code. Here is the code:
1) list of checkboxes
<div class="list_box">
<dl>
<dt><span>FORM-FACTOR</span></dt>
<dd>
<ul>
<li><label><input class="chk_all" type="checkbox" name="cateChk_0_all" value="all" checked="">Select All</label></li>
<li class=""><label><input type="checkbox" value="AAA" name="cateChk_0_arr" checked="" >AAA</label></li>
<li class=""><label><input type="checkbox" value="BBB" name="cateChk_0_arr" checked="" >BBB</label></li>
<li class=""><label class=""><input type="checkbox" value="CCC" name="cateChk_0_arr" checked="" >CCC</label></li>
</ul>
</dd>
</dl>
<dl>
<dt><span>TYPES</span></dt>
<dd>
<ul>
<li><label><input class="chk_all" type="checkbox" name="cateChk_1_all" value="t_all" checked="">Select All</label></li>
<li class=""><label><input type="checkbox" value="type_1" name="cateChk_1_arr" checked="" >type_1</label></li>
<li class=""><label><input type="checkbox" value="type_2" name="cateChk_1_arr" checked="" >type_2</label></li>
<li class=""><label class=""><input type="checkbox" value="type_3" name="cateChk_0_arr" checked="" >type_3</label></li>
</ul>
</dd>
</dl>
<div class="btn_search"> Search</div>
</div>
2) and list of products:
<ul class="thumb_list">
<li class="thumb_1 flower" data-category="AAA TYPE_1 ">
<a href="www.link_1.com">
<div class="txt_box">
<div class="p_info">
<span class="p_number"> Product#1 </span>
<span class="title1">Product#1 description </span>
</div>
</div>
</a>
</li>
<li class="thumb_2 flower" data-category="BBB TYPE_2 ">
<a href="www.link_2.com">
<div class="txt_box">
<div class="p_info">
<span class="p_number"> Product#2 </span>
<span class="title1">Product#2 description </span>
</div>
</div>
</a>
</li>
<li class="thumb_3 flower" data-category="CCC TYPE_3 ">
<a href="www.link_3.com">
<div class="txt_box">
<div class="p_info">
<span class="p_number"> Product#3 </span>
<span class="title1">Product#3 description </span>
</div>
</div>
</a>
</li>
</ul>
This script works without iChek.js, but not works with.
<script>
var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on('change', function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];}
selectedFilters[this.name].push(this.value);});
var $filteredResults = $('.flower');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;}
});
return matched;
});
});
$('.flower').hide().filter($filteredResults).show();
});
</script>
So I need to show only checked products by FORM-FACTOR or TYPES filtering (using cklick the button "Search")
Could you help me please to work it using iCheck?
Can't seem to get it working trying to get slide function for next and prev slider does work without swipe of course. I am using swipeJs but with no success. here is the js...
$(document).ready(function(){
Slider = $('.slide-container').Swipe().data('Swipe');
$('.next').on('click', Slider.next);
$('.prev').on('click', Slider.prev);
});
and the html ...
<ul class="slides family animated">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slideM">
<div id="company-title" class="animated pulse"><h2>title</h2></div></br>
<p class="animated bounceInLeft">content.</p>
<p class="box animated four flipInX boxGreen">content</p>
</div>
<div class="nav">
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slideM">
<div id="family">
<p class="add-anim-up">content</p> </div></div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
</ul>
I have one drop-down with ul and li tag. It is working on click. I'm trying to open drop-down on mouse hover not a click. How can i achieve this.
<div class="ms-parent form-control">
<button type="button">
<span class="placeholder">Choose Anyone</span>
</button>
<div class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
The output is like normal html select drop-down. But i am looking to open dropdown on mouse hover event.
$(document).ready(function(){
$('#btnToChoose').hover(
function () {
$('#content').show();
},
function () {
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ms-parent form-control">
<button type="button" name="btnToChoose" id="btnToChoose">
<span class="placeholder">Choose Anyone</span>
</button>
<div id='content' class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
Change Design as per your convenience.
$('#btnToChoose')
.on('mouseenter', function () { $('#content').show(); })
.on('mouseleave', function () { $('#content').hide(); });
I need a small help from all of you .
I have a list in which multiple div is present. Each list has 3 divs inside it where the first div of every list is an image. I need to fade in fade out the first div of each list.
Below is my code.
<input type="radio" id="control1" name="controls" checked="checked"/>
<label for="control1"></label>
<input type="radio" id="control2" name="controls"/>
<label for="control2"></label>
<input type="radio" id="control3" name="controls"/>
<label for="control3"></label>
<input type="radio" id="control4" name="controls"/>
<label for="control4"></label>
<input type="radio" id="control5" name="controls"/>
<label for="control5"></label>
<div class="sliderinner">
<ul>
<li>
<div id ="image1">
<div class="description">
<div class="description-text">
<h2>Slideshow Title 3</h2>
</div>
</div>
</div>
</li>
<li >
<div id ="image2">
<div class="description">
<div class="description-text">
<h2>Laddak</h2>
</div>
</div>
</div>
</li>
<li>
<div id ="image3">
<div class="description">
<div class="description-text">
<h2>Hangouts</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image4">
<div class="description">
<div class="description-text">
<h2>Birds</h2>
</div>
</div>
</div>
</li>
<li >
<div id="image5">
<div class="description">
<div class="description-text">
<h2>Taj Mahal</h2>
</div>
</div>
</div>
</li>
</ul>
</div>
</div><!--slider-->
<edit>
animation + delay increased for each boxes : http://codepen.io/gc-nomade/pen/qAjod/
</edit>
here is an example :
div {
animation: fdio 1s infinite;
background:gray;
}
#keyframes fdio {
50% {opacity:0;}
}
for : <div> text </div>
DEMO
do not forget to add vendor-prefix or use a script to add them automaticly
<ul>
<li>
<div id="image1" class="abc">
<div class="description">
<div class="description-text">
<h2>Slideshow Title 3</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image2" class="abc">
<div class="description">
<div class="description-text">
<h2>Laddak</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image3" class="abc">
<div class="description">
<div class="description-text">
<h2>Hangouts</h2>
</div>
</div>
</div>
</li>
</ul>
setInterval(function(){ $(".abc").fadeToggle("slow");},4000);
http://jsfiddle.net/x73z9/2/
you can use like this :
li div:first-child {
//put css code here
}