Background
HTML Page having navigation on left and body on right. In Navigation, five tabs are there. ul is being used and several li elements exists in each vertical tab. Each vertical tab has search box to filter the data.
1) HTML Code
<h3>First</h3>
<div>
<input type="text" id="Searchtab1" />
<ul id="Firstul">
<li>Germany</li>
<li>France</li>
<li>Sydney</li>
</ul>
</div>
Script code
$("#Searchtab1").on("keyup click input", function () {
if (this.value.length > 0) {
$("#Firstul li").hide().filter(function () {
return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)== 0;
}).show();
}
else {
$("#Firstul li").show();
}
Similarly there are five vertical navigation tab has similar code. Now the problem is there is one requirement to have one global search box on top of these searches i.e. One search box on top of HTML which will filter all navigation tabs. User can further filter on individual tabs. Basic filter is working fine when i search again on individual navigation it lists all elements again. Basically the global search takes precedence followed by local search, it should be able to handle case when user changes anything on Globalsearch/local search, it should change by considering the both search options(global first)
This is what i have tried
FiddleLink
Can someone suggest how to correct this.
Try this:
Add class (alluls) for all ul elems (or use some jquery selector to select them) and:
$("#Searchtab1").on("keyup input", function () {
if (this.value.length > 0) {
$(".alluls").each(function(){
$(this).children().hide().filter(function () {
return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)== 0;
}).show();
});
}
else {
$(".alluls li").show();
}
Edit: removed click event
http://jsfiddle.net/EchoSin/p5jxB/6/
Have you tried something like this JSFIDDLE?
Link: https://jsfiddle.net/umaar/t82gZ/
HTML
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" />
<span id="filter-count"></span>
</fieldset>
</form>
<nav>
<ul>
<li>Jim James</li>
<li>Hello Bye</li>
<li>Wassup Food</li>
<li>Contact Us</li>
<li>Bleep bloop</li>
<li>jQuery HTML</li>
<li>CSS HTML AJAX</li>
<li>HTML5 Net Set</li>
<li>Node Easy</li>
<li>Listing Bloop</li>
<li>Contact HTML5</li>
<li>CSS3 Ajax</li>
<li>ET</li>
</ul>
</nav>}
JavaScript
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$("nav ul li").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of Comments = "+count);
});
});
Granted this isn't your exact answer, made for just you! But I created that fiddle and maybe it can help you! If you want a different fiddle see the above answer! (EchoSin's)
$("#Searchtab1").on("keyup input", function () {
if (this.value.length > 0) {
$(".alluls").each(function(){
$(this).children().hide().filter(function () {
return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)== 0;
}).show();
});
}
else {
$(".alluls li").show();
}
https://jsfiddle.net/EchoSin/p5jxB/6/
Related
I tried to set data-active attribute of <li> element to Y "Yes", or N "No" according to the active checkbox states either checked or unchecked respectively.
My sample code is like this:
$(document).ready(function() {
$('body').on('change','#active',function(){
li = $(this).parent();
if($(this).attr('checked')=='true') {
$(this).attr('checked','false');
li.attr('data-active','N');
} else {
li.attr('data-active','Y');
$(this).attr('checked','true');
}
console.log(li.data('active'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ol class="example">
<li data-active="N">Option2 (Active <input id="active" type="checkbox">)</li>
</ol>
From my code above, the event handler on #active matched only in else clause, regardless to whatever the checkbox state is.
Understanding that there are plenty of similar questions to mine, however I tried them but none solves my problem.
How can I do to toggle data-active to "yes" or "no" according to checkbox state? Thanks.
You should use .data and .prop instead of .attr
Hope it helps!
$(document).ready(function() {
$('body').on('change','#active',function(){
li = $(this).parent();
if ($(this).prop('checked')) {
li.data('active','Y');
} else {
li.data('active','N');
}
console.log(li.data('active'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ol class="example">
<li data-active="N">Option2 (Active <input id="active" type="checkbox">)</li>
</ol>
I have created an input section for users to write their own work. I have multiple divs to the side of this and I'd like to change the divs from a left and right arrow that can be clicked.
$(document).ready(function() {
$('.menubody:nth-child(1)').show('slow');
$('.menubody:nth-child(1)').hide('slow');
$('.fa-caret-right').on({
click: function() {
var i = $('.menubody:visible').index();
var len = $('.menubody').length;
var next;
if (i >= 0) {
if (i == len - 1) {
next = $('.menubody:eq(0)');
} else {
next = $('.menubody:eq(' + (i + 1) + ')');
}
$('.menubody:visible').hide();
$(next).show();
}
}
});
});
EDIT:
I have a working example (see fiddle) that changes and changes the content when 'right' is pressed.
How do I make it so the 'left' div moves the content to previous? And add more than one content area to change?
For an example layout of the usage (not jQuery working), please see here.
Use jQuery's .prev() and .next(). If they return a collection of zero length, use .last() and .first() instead to cycle through your content (not sure that you needed this).
$(function() {
$('.tabs-container div').not(':first-child').hide();
$('#tabs li a').click(function() {
var $clickedLink = $(this),
$visible = $('.tabs-container div:visible');
$visible.each(function(){
var $this = $(this),
$parentContainer = $this.parents('.tabs-container').eq(0),
$toShow;
if( $clickedLink.is('.prev') ){
$toShow = $this.prev('div').length ? $this.prev('div') : $('div', $parentContainer).last();
} else {
$toShow = $this.next('div').length ? $this.next('div') : $('div', $parentContainer).first();
}
$this.hide();
$toShow.show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="tabs">
<li>Left Arrrow
</li>
<li>Right Arrow
</li>
</ul>
<div class="tabs-container">
<div id="content1">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2">Content for link 2. Should display only when Link 2 is clicked.</div>
<div id="content3">Content for link 3. Should display only when Link 3 is clicked.</div>
<div id="content4">Content for link 4. Should display only when Link 4 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div class="tabs-container">
<div id="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>More unrelated text</p>
<div class="tabs-container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
I think you should use the nth-child() jQuery selector here. Simply increment the value of n every time the button right is clicked and decrease the value of n every time the left arrow is clicked.
$('#left-arrow').on('click', function(){
var i++;
$('main-div:nth-child(i-1)').hide();
$('main-div:nth-child(i)').show();
})
Here's a link to read more : W3 Schools :nth-child() selector
Sorry for not entering the code I have worked on. I am explaining my doubt clearly this time. I have a tree made of nested ul and li tags. the tree node names are obtained from database. I need to filter the tree based on the name I enter in a text box. While showing the filtered tree item, if it the filtered item is a parent node, child nodes should also be listed(eventhough they don't match the text entered in texbox.)
I have refered this link: Filter multiple <ul> lists with jQuery
This link helped me to filter out a tree node by entering its name in textbox.
But its childnodes are not visible.Please help me. Please find my code below:
function func(){
alert("Onclick function parent node...");}
function func1(){
alert("Onclick function child node...");}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('input[type="text"]').keyup(function(){
var filter = jQuery(this).val();
jQuery("ul li").each(function () {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).hide();
} else {
jQuery(this).show();
jQuery(this).children().show();
}
});
});
});
</script>
</head>
<body>
<input type="text" />
<ul class="mainlayer" id="category1">
<li class="layer1">item1
<ul>
<li class="layer2">hju11</li>
<li class="layer2"><a>kiu12</a></li>
</ul>
</li>
<li class="layer1"><a>item2</a></li>
<li class="layer1"><a> item3</a></li>
</ul>
</body>
</html>
Thanks in advance.
Try something like this:
function func(){
alert("Onclick function parent node...");}
function func1(){
alert("Onclick function child node...");}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style>
.hide{
display:none;
}
</style>
<script>
$(document).ready(function() {
$('input[type="text"]').keyup(function(){
var filter = jQuery(this).val();
jQuery(".menu ul > li").removeClass("hide");
jQuery(".menu ul > li").removeClass("show");
jQuery(".menu ul > li").each(function () {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0 && !jQuery(this).hasClass('show')) {
jQuery(this).addClass('hide');
} else {
jQuery(this).addClass('show');
jQuery(this).find(' ul > li').addClass('show');
}
});
});
});
</script>
</head>
<body>
<input type="text" />
<div class="menu">
<ul class="mainlayer" id="category1">
<li class="layer1">item1
<ul>
<li class="layer2">hju11</li>
<li class="layer2"><a>kiu12</a></li>
</ul>
</li>
<li class="layer1"><a>item2</a></li>
<li class="layer1"><a> item3</a></li>
</ul>
</div>
</body>
</html>
UPDATE
updated snippet, where you can change .menu class for whatever you need
You can use following jQuery
$(document).ready(function()
{
$('input[type="text"]').keyup(function()
{
var filter = jQuery(this).val();
jQuery("ul li.layer1").each(function()
{
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0)
{
jQuery(this).hide();
}
else
{
jQuery(this).show();
jQuery(this).children().show();
var found = false;
jQuery(this).find("li.layer2").each(function(i,obj)
{
if ($(obj).text().search(new RegExp(filter, "i")) < 0)
{
$(obj).hide();
jQuery(obj).closest('.layer1').show();
}
else
{
$(obj).show();
found = true;
}
});
if(found==false)
{
jQuery(this).find("li.layer2").show();
}
}
});
});
});
Well I have got a lot of help from so many developers.. Thank you all for the support and useful answers.. Please find the one among them which I felt much easier...
Instead of checking it like this,
jQuery("ul li").each(function () {}
Check it as:
jQuery(".mainlayer>li").each(function () {}
So that child nodes are visible and associated functions shall work...
Once again Thank you all for the useful answers.. Happy coding!
I have the following question:
I have a couple of checkboxes (at the moment 11) and what I want to do now is "building" a list dynamically, depending on the value of the checkboxes, so having something like this:
A user comes, ticks a checkbox and one li is appearing, when he ticks the next one, the next li is appearing, when he ticks the next one, again one li is appearing and so on (when he unticks one of them, the li should disappear again). I'm quite sure this can work with JS, but I have no idea how to realize it.
What I have is a <ul> and all the checkboxes defined with
<input type="checkbox" name="check_phone" id="check_phone"/>
<label for="check_phone"><span></span>Phone Number</label>
(Every checkbox has it's individual name)
What I think is going to be the biggest problem is creating the list-points dynamically, but I really hope somebody knows how to do this.
What I already thought about is just having 11 list-points in my list, all set to display:none and then just setting them to display:block when a checkbox is checked, but this will propably not work because I'm using a plugin to resort the list after this, and having 11 list-points, but just 2 visible or anything like that won't work.
Thanks for your help!
Here is a very quick demo, each time a checkbox is changed it creates all checked list items.
$(document).ready(function(){
$('.item').on('change', function() {
var $list = $('ul#checked').empty();
$('.item:checked').each(function(index, item) {
var itemName = $(item).prop('name');
var text = $('label[for='+itemName+']').text()
$('<li></li>')
.text(text)
.appendTo($list)
;
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="item" name="check_phone" id="check_phone"/>
<label for="check_phone"><span></span>Phone Number</label>
<ul id="checked">
</ul>
$("[name^='check_']").click(function(){
$("li."+ this.name).toggle( this.checked );
});
#check_list li{ display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="check_phone"/>Phone Number</label>
<label><input type="checkbox" name="check_mobile"/>Mobile Number</label>
<ul id="check_list">
<li class="check_phone">PHONE LI</li>
<li class="check_mobile">MOBILE LI</li>
</ul>
I think this will do it. You just have to set the names of the list items to be the same as their corresponding checkboxes' names.
$("input:checkbox").click(function() {
var current = $(this),
linkedListCorrespondingElement = $('#list-id > li[' + current.attr('name') + ']');
if (current.is(":checked")) {
linkedListCorrespondingElement.show();
} else {
linkedListCorrespondingElement.hide();
}
});
I am trying to style div and ul to function like . However, I have a problem that:
1) I only want to toggle the ul that I click and hide the other ul. So I wonder if jquery support some function such as 'not click'?
2) I want to hide all the ul when the mouse is click outside. I did some research, and see other people use mouseup or click on body. But I am not quiet sure how it works.
$(document).ready(function() {
$('.hide').each(function() {
$(this).hide();
});
$('.select').click(function() {
var id = '#' + $(this).attr('id');
var sub = id + '_sub';
$(sub).slideToggle();
});
$('body').mouseup(function() {
if($(this).length == 0) {
$(this).hide();
}
});
});
div.select {
display: inline-block;
margin: 10px;
padding: 20px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="1" class="select">
<div class="main">
<span>1</span>
</div>
<div>
<ul id="1_sub" class="hide">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div id="2" class="select">
<div class="main">
<span>1</span>
</div>
<div>
<ul id="2_sub" class="hide">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div id="3" class="select">
<div class="main">
<span>1</span>
</div>
<div>
<ul id="3_sub" class="hide">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</body>
here you go: DEMO
$(document).ready(function() {
$('.hide').hide(); //hide in the beginning
$('.select').click(function() {
$('.hide').slideUp(200); //hide all the divs
$(this).find('.hide').slideDown(200); //show the one that is clicked
});
$(document).click(function(e){
if(!$('.select').is(e.target) || !$('.select').has(e.target)){ // check if the click is inside a div or outside
$('.hide').slideUp(200); // if it is outside then hide all of them
}
});
});
you can define your notClick() function as below:
$.fn.notClicked= function(clickPosition){
if (!$(this).is(clickPosition.target) && $(this).has(clickPosition.target).length === 0){
return true;
}
else{
return false;
}
};
and then use it as:
$(document).click(function(e){
alert($('.select').notClick(e)); // will return true if it is not clicked, and false if clicked
});
You need to hide other ul whenever some one clicks on .select div.
Here is a working fiddle: http://jsfiddle.net/0mgbsa0b/1/
$(document).ready(function() {
$('.hide').each(function() {
$(this).hide();
});
$('.select').click(function() {
$('.hide').each(function() {
$(this).hide();
});
var id = '#' + $(this).attr('id');
var sub = id + '_sub';
$(sub).slideToggle();
});
$('body').mouseup(function() {
if($(this).length == 0) {
$(this).hide();
}
});
});
I'm interested in two concerns you raised, so i will be trying to share some ideas on them:
1）So I wonder if jquery support some function such as 'not click'?
personally, to quesiton1
i think there is no jQuery event method called .noclick()
PPL often use addClass & removeClass to log whether an element got clicked and after marking the element with class="active" , using jQuery selector to select ".active" or using jQuery ":not" selector to select elements that are not marked ".active" ( indirectly finding out those unclicked.)
3.You might also need to count in click propagation issues. meaning sometimes you click a children container and triggered click event towards all its parent inside.
fiddle link: `http://jsfiddle.net/hahatey/ctp5jngf/2/`
In the above case , if you clicked child box in red, will by default alert1, alert2 if
you didn't apply a e.stopPropagation() to the click event;
2) I want to hide all the ul when the mouse is click outside. I did some research, and see other people use mouseup or click on body. But I am not quiet sure how it works.
for question 2:
could be many many ways to do it, you can try blur() //lose focus event trigger.
like what you mentioned mouseout, mouseup, add click event listener to outer area all will work for it as long as u can use method in answer1. i see other ppl have posted many answers already as it can be done in many ways.