this is work fine..any idea about how to display "no result found"..
Here my code http://jsfiddle.net/UI_Designer/8p426fog/4/
$(".my-textbox").keyup(function() {
var val = $(this).val().toLowerCase()
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide()
} else {
$(this).show();
}
});
});
Thank You..
More elegant and the simplest way it to add extra variable and add <div class="no-results" style="display:none">no results found</div> into DOM, and then toggle visibility of the block jsFiddle
var $block = $('.no-results');
$(".my-textbox").keyup(function() {
var val = $(this).val();
var isMatch = false;
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide();
} else {
isMatch = true;
$(this).show();
}
});
$block.toggle(!isMatch);
});
Use the below code for no result found.
$(".my-textbox").keyup(function() {
var val = $(this).val();
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide();
$(".personsMenu").html("<ul><li><label> NO RESULT FOUND!</label></li></ul>");
}
else {
$(this).show();
}
});
});
Hope this fullfill your requirement.
Related
I am trying to display multiple child elements in jQuery but only the first child element gets displayed. I can force the browser to show all of them through Inspect and changing the css display from none to block. Can anyone help me find the problem in my code.I use Radio buttons, this is the code :
<script type="text/javascript">
$(document).ready(function () {
$('##radioButtonListSectionId input[type="radio"]
[checked="checked"]').each(function () {
ShowRadioButtonListDependentField(this, false);
});
});
$('##radioButtonListSectionId input[type="radio"]').change(function
() {
var result = $(this).val();
$('##uniqueID-hidden').val(result);
ShowRadioButtonListDependentField(this, false);
});
function ShowRadioButtonListDependentField(element, show) {
debugger;
var fieldKey = $(element).val(), children;
var currentId = element.attributes["currentid"].value;
if (currentId != 0) {
if ($('.main-dialogbox.modal.fade.in').length > 0)
children = $('.modal-body .control-group[parentid=' +
currentId + ']');
else if ($('.idea-task.open').length > 0)
children = $('.idea-task .control-group[parentid=' +
currentId + ']');
else
children = $('.control-group[parentid=' + currentId +
']');
if ($(element).is(":checked") && $(element).is(":visible"))
show = true;
else
show = false;
children.hide();
children.each(function () {
var keys =
this.attributes["parentOptionKey"].value.split("</br>");
var haschildren = this.attributes["haschildren"].value;
for (var i = 0; i < keys.length; i++) {
if (keys[i] == fieldKey) {
if (show) {
$(this).show();
show = false;
$(this.getElementsByClassName("ishidden")).val("False");
} else {
$(this).hide();
$(this.getElementsByClassName("ishidden")).val("True");
if (haschildren.toLowerCase() == "true") {
ShowCheckListDependentField(this,
false);
}
}
}
else {
$(this.getElementsByClassName("ishidden")).val("True");
}
}
});
}
}
</script>
I'm looking for the way to translate this block of code from jQuery to pure javascript. Is it possible?
jQuery(".menu2").each(function(){
$menu = jQuery(this);
$menu.find("li").unbind('mouseenter mouseleave').filter(".deeper").children("span.separator").addClass("parent");
$menu.find("li.deeper>a.parent, li.deeper>span.separator").unbind('click').bind('click', function(e) {
e.preventDefault();
jQuery(this).parent("li").children("ul").animate({height: 'toggle'}, 300, "jswing");
});
$menu.find("li a.parent > span.linker").click(function(){
if((typeof jQuery(this).parent().attr("href") != 'undefined') && jQuery(this).parent().attr("href") != "#"){
jQuery(this).parent().unbind('click');
myLink = jQuery(this).parent().attr("href");
window.location.href = myLink;
}
});
}
Thanks!
Of course it's possible. Whether it's a good idea or not is debatable, but here...
[].forEach.call(document.querySelectorAll(".menu2"),function(menu){
[].forEach.call(menu.getElementsByTagName("li"),function(li) {
li.__events = li.__events || {};
if( li.__events.mouseenter) {
li.removeEventListener('mouseenter',li.__events.mouseenter);
delete li.__events.mouseenter;
}
if( li.__events.mouseleave) {
li.removeEventListener('mouseleave',li.__events.mouseleave);
delete li.__events.mouseleave;
}
if( li.className.match(/\bdeeper\b/)) {
[].forEach.call(li.querySelectorAll("span.separator"),function(span) {
if( !span.className.match(/\bparent\b/)) span.className += " match";
});
}
});
[].forEach.call(menu.querySelectorAll("li.deeper>a.parent, li.deeper>span.separator"),function(elem) {
elem.__events = elem.__events || {};
if( elem.__events.click) {
elem.removeEventListener('click',elem.__events.click);
delete elem.__events.click;
}
elem.addEventListener('click',elem.__events.click = function(e) {
[].forEach.call(this.parentNode.getElementsByTagName('ul'),function(ul) {
if( ul.style.height == "auto") ul.style.height = "0px";
else ul.style.height = "auto";
// TODO: Implement animation here
});
return false;
},false);
});
[].forEach.call(menu.querySelectorAll("li a.parent>span.linker"),function(elem) {
elem.__events = elem.__events || {};
if( elem.__events.click) {
elem.removeEventListener('click',elem.__events.click);
delete elem.__events.click;
}
elem.addEventListener('click',elem.__events.click = function(e) {
if( this.parentNode.getAttribute("href") != "#") {
window.location.href = this.parentNode.href;
}
return false;
},false);
});
});
... I think it's fairly obvious why people use jQuery. Of course, I would have my own toolbox to make a lot of this code easier to manage ;)
my problem with load event is that when I test the page it doesn't work(don't hide the preloader image),but when I put the function in the .ready(), the function works(it hides).
here is the code:
JAVASCRIPT:
$(document).load(function(){
$("#loaderHolder").hide("fast");
});
$(document).ready(function(){
$('#slider').cycle();
$('.sf-menu').superfish({
autoArrows: false
});
$('.scroll').slimScroll({
height: '590px',
wheelStep:5,
size:'15px',
width:'590px',
position: 'left',
railColor:'#c5c5c5',
color:'#a2a1a1',
railVisible:true,
alwaysVisible:true,
distance: '565px'
});
$('.scroll').css('width','550px');
$('.gallery').colorbox();
$('#gallery img').hover(function(){ $(this).fadeTo(500, 0.3)}, function(){$(this).stop().fadeTo(500, 1)})
$("#home-link").click(function(){
if ($(".active").length == 0)
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
}
});
$("#about-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#about");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#about").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#about");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
$("#starters-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#starters");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#starters").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#starters");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
$("#gallery-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#gallery");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#gallery").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#gallery");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
$("#contacts-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#contacts");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#contacts").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#contacts");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
});
Try $(window).load() not $(document).load()
$(window).load(function () {
// run code
});
Try:
$(window).load
instead of
$(document).load
I think that $.load is method that actualy performs an AJAX request on given url (first parameter). If you want to do something on the document.load event you have to use $(document).ready()
I am working on a memory matching game. I have some code that checks if two images that the user clicked on have the same source and removes the images if they do have the same source.
(function compareClicked() {
var lastclicked = "";
$("img").click(function() {
var path = $(this).attr("src");
if( lastclicked == path) {
$('img').hide(1000, function () {
$(this).remove();
});
}
else {
if( lastclicked != "") alert("Not a match");
}
lastclicked = path;
});
})();
However, as you can see, when they have the same source, it removes all of the images on the page - even if the user did not click any them. How can I change it so it only removes the two images that the user clicked on?
var lastclicked = "";
$("img").click(function() {
var path = $(this).attr("src"); // or this.src
if (lastclicked == path) {
$(this).hide(1000, function() {
// remove image with same src as lastClicked
$('img[src="' + lastclicked + '"]').remove();
});
} else {
if (lastclicked != "") alert("Not a match");
}
lastclicked = path;
});
DEMO
How about something like
var lastEl = null;
$(document).ready(function(){
$('img').each(function(index){
$(this).attr('id','img-' + index);
});
$('img').click(function(){
if( lastEl ) {
if( ($(this).attr('src') == lastEl.attr('src')) && ($(this).attr('id') != lastEl.attr('id')) ) {
$(this).remove();
lastEl.remove();
}
lastEl = null;
} else {
lastEl = $(this);
}
});
});
Haven't tested that, but it's got to be pretty close
EDIT: Updated code in line with conversation below. JS fiddle here http://jsfiddle.net/joevallender/pc3Qa/3/
EDIT again: JS fiddle link should be correct now
If you got multiple time (more than twice) the same Src, I really suggest that you tag your clicked images to know which one should be hidden.
As mentionned you could use attr or special class for this purpose.
$(document).ready(function() {
$('.watermark').focus(function() {
if (this.className == 'watermark')
{
this.className = '';
this.value = '';
}
});
$('.watermark').blur(function() {
if (this.value == '')
{
this.className = 'watermark';
this.value = 'Type here';
}
});
});
I have this block of code that works perfectly except that it is not dynamic. I was wondering if there was an elegant way to reset the value to the original dynamically. I was thinking that maybe if you defined the original text in its ID or some other sort of attribute you could reset it that way.. or maybe you could use variables or arrays or tuples. What does SO think is the best way of doing it?
How about storing the value into some other attribute of the input?
$(document).ready(function() {
$('.watermark').focus(function() {
if (this.className == 'watermark')
{
this.className = '';
this.title = this.value;
this.value = '';
}
});
$('.watermark').blur(function() {
if (this.value == '')
{
this.className = 'watermark';
this.value = this.title;
}
});
});
In this scenario i prefer to use html5(placeholder attrinute) with javascript fall back.
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
$(document).ready(function() {
if (!supports_input_placeholder())
{
$('input').each(function(){
$(this).val($(this).attr('placeholder'))
});
$('input').focus(function() {
if (this.className == 'watermark')
{
this.className = '';
this.value = '';
}
});
$('input').blur(function() {
if (this.value == '')
{
this.className = 'watermark';
this.value = $(this).attr('placeholder');
}
});
}
});
This script will detect if native placeholder is available if not it will take text from placeholder attribute and simulate it.
You can just store it in a variable if it's scoped to each element:
$(function() {
$('.watermark').each(function() {
var lead = $(this).val();
$(this).focus(function() {
if ($(this).val() == lead) $(this).val('');
}).blur(function() {
if ($(this).val() == '') $(this).val(lead);
});
});
});