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(); });
Related
I face a problem with ajax on onclick function.
In html
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
In javascript
$(document).on('click', 'li', function() {
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});
$(document).on('click', 'li', function() {
$('#keyword').val($(this).text());
$('#keystatus').fadeOut();
});
Here when any li is clicked then those are fadeout and send same text value in text field. I need to identify whose li is clicked 'boo' or 'foo' and send the particular value in text field.
please help me out..
You can use .closest to find the colsest parent and then use .attr("class") to get the class name like
$("li").click(function(){
console.log($(this).closest("div").attr("class"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
Below is the code example you can put to get the class name for list item which is clicked
$(document).on('click','li',function(){
alert($(this).parent().parent().prop('class'));
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});
$(document).on('click','li',function(){
alert($(this).parent().parent().prop('class'));
$('#keyword').val($(this).text());
$('#keystatus').fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
Try this in both the functions:
$(document).on('click','li',function(){
$(this).parent().parent().prop('class');
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});
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 want to remove the option from the auto completion input drop down select list.
Unable to get the option value until unless i click on input drop down list. Once I click on the input field the options are auto populating, But i dont know how to get the option here.
The input field before click on it:
<div class="field-group">
<label for="add-reminders-role-picker">Project Role</label>
<div class="aui-ss" id="add-reminders-role-picker-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="add-reminders-role-picker-field">
<div class="aui-list" id="add-reminders-role-picker-suggestions" tabindex="-1"></div>
<span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span></div>
<select class="aui-field-select select aui-ss-select" name="roleName" id="add-reminders-role-picker" multiple="multiple" style="display: none;">
<option value=""></option>
</select>
</div>
After click on input field:
<div class="field-group">
<label for="add-reminders-role-picker">Project Role</label>
<div class="aui-ss" id="add-reminders-role-picker-single-select" data-query="">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="add-reminders-role-picker-field">
<div class="ajs-layer-placeholder">
<div class="ajs-layer box-shadow" style="width: 248px; position: fixed; left: 153.667px; top: 399.167px; max-height: 171.833px; display: none;">
<div class="aui-list" id="add-reminders-role-picker-suggestions" tabindex="-1" style="display: block;">
<div class="aui-list-scroll" tabindex="-1">
<h5>Project role</h5>
<ul class="aui-list-section aui-last" id="project-role">
<li class="aui-list-item aui-list-item-li-administrators active">
<a class="aui-list-item-link" href="#" title="Administrators">Administrators</a>
</li>
<li class="aui-list-item aui-list-item-li-developers">
<a class="aui-list-item-link" href="#" title="Developers">Developers</a>
</li>
<li class="aui-list-item aui-list-item-li-event-watchers">
<a class="aui-list-item-link" href="#" title="Event Watchers">Event Watchers</a>
</li>
<li class="aui-list-item aui-list-item-li-privilege-users">
<a class="aui-list-item-link" href="#" title="Privilege Users">Privilege Users</a>
</li>
<li class="aui-list-item aui-list-item-li-users">
<a class="aui-list-item-link" href="#" title="Users">Users</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<span class="icon aui-ss-icon drop-menu noloading"><span>More</span></span></div>
<select class="aui-field-select select aui-ss-select" name="roleName" id="add-reminders-role-picker" multiple="multiple" style="display: none;">
<option value=""></option>
</select>
</div>
Here I want to remove the "Users" option from the 'li' in the second code snippet. Please help me regarding this.
Try:
$('#aui-list-item-li-users').remove();
this code will remove the 'li' with the class = aui-list-item-li-users
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/
I have this code I am trying to implement that calls a function
<body>
<nav id="menu">
<div id="app">
<ul class="List">
<li><span>Enter Number below</span></li>
<div id="coachid">
<input type="text" name="coachid" id="textbox1" value="22984">
</div>
<li><span>Fitness Programs</span>
<ul id="programs">
<li class="Label"> </li>
<li><span>10-Minute Trainer</span>
<ul id="10min">
<li class="Label"> </li>
<li><span>Base</span>
<ul id="10minBase">
<li class="Label"> </li>
<label for="basic">Text Input:</label>
<input type="hidden" name="basic" id="basic" value="10MinTrainer"/>
<button id="getWebSite">Open Website</button><br/>
</ul>
</li>
<li><span>Deluxe</span>
<ul id="10min">
<li class="Label"> </li>
<input type="hidden" name="basic1" id="basic1" value="TMT"/>
<button id="getWebSite">Open Website</button><br/>
</ul>
</li>
<li><span>Deluxe</span>
<ul id="Deluxe">
<li class="Label"> </li><input type="hidden" name="basic3" id="basic3" value="TMTUpgrade"/>
<button id="getWebSite">Open Website</button><br/>
<ul>
</li>
</ul>
</li>
</li>
<ul>
</li>
</ul>
</div>
</nav>
</body>
and here is the function
$(function() {
$('#getWebSite').unbind().click(function(){
goUrl = 'http://www.example.com/' + $("#basic").val() + '?referringRepId=' + $("#textbox1").val();
window.location = goUrl;
});
});
I am trying to call the function multiple times throughout the code to redirect the button to a site based on info held within the html. Is this possible?
You need to name your function, apply a class to those elements that should have the click handler, and create the click function:
<button class="myClass">
$(function () {
function doSomething() {
goUrl = 'http://www.example.com/'
+ $("#basic").val()
+ '?referringRepId='
+ $("#textbox1").val();
window.location = goUrl;
}
$('.myClass').unbind().click(function () {
doSomething();
});
});