jquery ignoring upper&lowercase in function - javascript

hello world i have an problem i am currently making experimental search boxes with divs for my homepage ..
now ive tried to ignore the upperand lowercase but nothing will going successfull so i will ask how i can get ignore the upper and lower case in my code:
$(window).load(function(){
function hide_divs(search) {
if(search === "") {
$("#sboxs > div").show();
} else {
$("#sboxs > div").hide(); // hide all divs
$('#sboxs > div[id*="'+search+'"]').show(); // show the ones that match
}
}
$(document).ready(function() {
$("#search_field").keyup(function() {
var search = $.trim(this.value);
hide_divs(search);
});
});
});
html:
<div id="jOhAnNeS">heres the content of(Johannes)</div>
<div id="michael">heres the content of(Michael)</div>
<div id="TOM">heres the content(Tom)</div>
<div id="JERry">heres the content(Jerry)</div>
<div id="kIM">heres the content(Kim)</div>
<div id="joschUA">heres the content(Joschua)</div>
<div id="katY">heres the content(Katy)</div>
</div>

try this function instead
function hide_divs(search) {
var divs = $("#sboxs > div");
var match = search.toLowerCase();
divs.each( function(i,elem) {
if ( elem.id.toLowerCase().indexOf(match) > -1 )
$(elem).show();
else
$(elem).hide();
});
}

Related

Css change on value change in input field. jQuery

var footerEmail = $('footer#footer input.email');
var footerEmailLength = footerEmail.val().length;
var footerEmailCaptcha = $("footer#footer .captcha-hide");
footerEmail.focus( function() {
footerEmailCaptcha.css("display","block");
});
footerEmail.blur( function() {
if(footerEmailLength > 0) {
footerEmailCaptcha.css("display","block");
}
else if (footerEmailLength == 0) {
footerEmailCaptcha.css("display","none");
}
});
.captcha-hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<footer id="footer">
<input class='email'>
<div class="captcha-hide">Testing</div>
</footer>
I want to make sure that onblur works when I enter something inside the text (input) field.
First if condition inside the blur function is not working since it is taking the value as '0' which will be initially. When I enter something and click outside of the input field then the css should be display:block
Please guide me how I can proceed further. I am new to jQuery/Javascript. Googling around to learn stuff.
you have to give the var footerEmailLength = footerEmail.val().length; inside blur function.
The blur function should be like this:
footerEmail.blur( function() {
var footerEmailLength = footerEmail.val().length;
if(footerEmailLength > 0) {
footerEmailCaptcha.css("display","block");
}
else if (footerEmailLength == 0) {
footerEmailCaptcha.css("display","none");
}
And if you use class as selector then change the footerEmail.val().length
to footerEmail[0].val().length.
The running code
var footerEmail = $('.email');
var footerEmailCaptcha = $(".captcha-hide");
footerEmail.focus( function() {
footerEmailCaptcha.css("display","block");
});
footerEmail.blur( function() {
var footerEmailLength = footerEmail[0].val().length;
if(footerEmailLength > 0) {
footerEmailCaptcha.css("display","block");
}
else if (footerEmailLength == 0) {
footerEmailCaptcha.css("display","none");
}
});
.captcha-hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer id="footer">
<input class='email'>
<div class="captcha-hide">Testing</div>
</footer>

How to show the inside div(replacable) if I scrolled to the leftmost

Attached is the Plunker Demo.I need to show Div-2 in place of Div-1, after user scrolled the Div-1 to the leftmost..can any one help me out?..
HTML
<div id="div-1" class="scrollable-div">
<div class="div-inside">Div 1:After scrolling this I should get Div-2 inplace of Div-1</div>
</div>
<div id="div-2" class="scrollable-div">
<div class="div-inside">Div 2:After scrolling this I should show "End-treatment"</div>
</div>
jQuery
jQuery(function ($) {
$('#div-2').hide();
$('#div-1').on('scroll', function () {
if($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
$('#div-2').show();
} else if($(this).scrollLeft() === 0) {
$('#other-message').show();
// Remove this part if you don't want your messages hidden again
} else {
$('#end-treatment').hide();
$('#other-message').hide();
}
})
$('#div-2').on('scroll', function () {
if($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
$('#end-treatment').show();
} else if($(this).scrollLeft() === 0) {
$('#other-message').show();
// Remove this part if you don't want your messages hidden again
} else {
$('#end-treatment').hide();
$('#other-message').hide();
}
})
});
Here is the Updated Plunker Demo with answer given in above comment
jQuery(function ($)
{
$('#div-2').hide();
$('#div-1').on('scroll', function () {
if($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth)
{
$('#div-2').show(1000);
$('#div-1').hide();
}
})

Searching throught data-value on keyup

So, I while I type I need to show elements with certain text that is equals data-value="certain text". I've tried several ways, but nothing seems to work.
Here is what I have so far.
$(".search").keyup(function () {
var filter = $(this).val(), count = 0;
$(".element-holder .element").each(function () {
var current = $('.element').attr('data-name');
if ($(".element[data-name='" + current + "']").text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
} else {
$(this).show();
count++;
}
});
});
This is what I need help with ;l
#Edit
HTml here
<div class="element-holder ">
<div class="element" data-name='Adam' id='1'>
</div>
<div class="element" data-name='Eva' id='32'>
</div>
<div class="element" data-name='Sara' id='412'>
</div>
</div>
Please try below
$(".search").keyup(function () {
var filter = $(this).val(), count = 0;
$(".element-holder .element").each(function () {
var current = $('.element').attr('data-name');
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
} else {
$(this).show();
count++;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="search"/>
<div class="element-holder ">
<div class="element" data-name='Adam' id='1'>How to Format
</div>
<div class="element" data-name='Eva' id='32'>How to Edit
</div>
<div class="element" data-name='Sara' id='412'>Searching throught data-value on keyup
</div>
</div>
Lot of mistakes in your html .
spelling mistakes of element class used.
You did not show the search input html.
Different data attribute name.
If you are using each and make use of $(this) to select current element
Checkout my below demo
$(".search").keyup(function () {
var entered = $(this).val();
$(".elemnet").each(function () {
var text = $(this).html();
if(entered !="")
{
if(text.indexOf(entered) > -1)
{
$(this).show();
}else
{
$(this).hide();
}
}else{
$(".elemnet").hide();
}
});
});
Working Demo
Demo using data attribute
Searching through the entire DOM on each keyup is going to cause a huge performance drop. Cache your results
Throttle your keyup event to only fire the filter when the user pauses typing
Re use your regular expression instead of re creating it multiple times inside your loop
```
// Cache your elements before hand
var namedElements = $(".element-holder .element");
// inside your throttled keyup event handler
// Check for empty strings
var filter = (this.value || "").trim(),
regex = new RegExp(filter, 'i');
var toShow = namedElements.filter(function(index, element) {
var dataName = element.data("name");
return regex.test(dataName);
});
toShow.show();
var toHide = namedElements.filter(function(index, element) {
var dataName = element.data("name");
return !regex.test(dataName);
});
toHide.hide();
```

Javascript Keyup Search of Child Div Value

I have a list of tasks that I would like to create a search function for. I have managed to have it so that as soon as you start typing, the list responds and hides all incorrect results. However I am still unable to show the correct result.
Codes are below
UPDATED WITH CORRECT SOLUTION
HTML
<input type="text" id="search" placeholder="Player Search" />
<div id="todo">
<div class="task">Task 1</div>
<div class="task">Task 2</div>
<div class="task">Task 3</div>
</div>
Javascript
var $div = $("#todo")
var result;
$("#search").keyup(function() {
var val = $.trim(this.value).toUpperCase();
if (val === "")
$(".task").show()
else {
$(".task").hide()
result = $("#todo .task").filter(function() { //Updated to match child of id todo
return -1 != $(this).text().toUpperCase().indexOf(val)
}).show()
console.log(result)
$(".task").eq(result).show();
}
})
As I have only started learning javascript, I would appreciate if you could explain my errors, and a laymen step-by-step explanation of the answer/process.
As a bonus, if you could also explain how one would troubleshoot a javascript problem like this to find the underlying problem, that would be appreciated.
var $div = $("#todo")
var result;
$("#search").keyup(function() {
var val = $.trim(this.value).toUpperCase();
if (val === "")
$div.show()
else {
$(".task").hide()
result = $("#todo .task").filter(function() { //Updated to match child of id todo
return -1 != $(this).text().toUpperCase().indexOf(val)
}).index()//get the index of the div that has match
console.log(result)
result != -1 ? $(".task").eq(result).show() : $(".task").hide()//show or hide div depending on matching index
}
})
DEMO
Always remember ID should always be unique in same context.
Use class to target multiple elements.
function SearchContactInGroup(Strtext) {
$('#userchat_grouping .name').each(function () {
if ($(this).text().toLowerCase().indexOf(Strtext.toLowerCase())>= 0) {
$(this).closest('li').show('slow');
}
else {
$(this).closest('li').hide('slow');
}
});
// $('#dvLoading').hide();
}
$(window).load(function () {
$('#txtsearch').keyup(function () {
SearchContactInGroup($(this).val());
});});

slideUp not working on valid jQuery-Object

I've the following javascript/jquery-snippet:
var msg = (function() {
var active = null;
var toggleBox = function(parent) {
if (active != null) {
if (active.next().length) {
active.slideUp("fast", function() {
active = active.next();
active.slideDown("fast");
});
} else hideBox();
} else {
parent.show();
active = $(".myBox");
active.slideDown("fast");
}
}
var hideBox = function() {
if (active != null) {
active.slideUp("fast"); // doesn't work :(
// hide parent, too... but it's not necessary here...
}
}
return {
toggleBox : toggleBox,
hideBox : hideBox
}
})();
and the following few html-tags:
<div onclick="msg.toggleBox($('#parent'))">Show</div>
<div id="parent" style="display: none;">
<div class="myBox" style="display: none;">
Message 1
<div onclick="msg.toggleBox($('#parent'))">Next</div>
<div onclick="msg.hideBox()">Hide</div>
</div>
<div class="myBox" style="display: none;">
Message 2
<div onclick="msg.hideBox()">Hide</div>
</div>
</div>
Now... when I click on my "Show", the first box will be shown and I'm able to close/hide the box. By clicking "Next", the second box will be shown. The Problem is, that I'm unable to hide the second box. When I try to use alert(active.html()) I always get the correct html-code of the active object. I can also call hide() and the second box will be hidden, but simply no slideUp()... why? I'm getting a valid jQuery-Object.
Try
var msg = (function() {
var active = null;
var toggleBox = function(parent) {
if (active != null) {
if (active.next().length) {
active.slideUp("fast", function() {
active = active.next();
active.slideDown("fast");
});
} else
hideBox();
} else {
parent.show();
active = $(".myBox").first(); //minor tweak here, if there is no active item activate the first myBox
active.slideDown("fast");
}
}
var hideBox = function() {
if (active != null) {
active.slideUp("fast"); // doesn't work :(
// hide parent, too... but it's not necessary here...
}
}
return {
toggleBox : toggleBox,
hideBox : hideBox
}
})();
Demo: Fiddle

Categories

Resources