I have four jquery sliders in a page with these scripts:
$(document).ready(function(){
$("#information").click(function(){
$("#information_show").slideToggle("medium");
});
});
$(document).ready(function(){
$("#menu").click(function(){
$("#menu_slide").slideToggle("medium");
});
});
$(document).ready(function(){
$("#books").click(function(){
$("#books_toggle").slideToggle("medium");
});
});
$(document).ready(function(){
$("#content").click(function(){
$("#content_div").slideToggle("medium");
});
});
So for example when I click on the div #information the #information_toggle is visible. I wounder if there is any way to make the sliders only show one at once.
Example: When click on #books, the #books_toogle show. Now when click on #menu the #menu_slide shows, at the same time the #menu_slide shows #books_toggle toogle/close automatic. So only one hidden div will show at once.
It would help to see your html, but it is easy to do this in an ugly way:
$("#information").click(function(){
$("#information_show").slideToggle();
$("menu_slide, books_toggle, content_div").slideUp();
});
However, a much prettier way to do this would be with classes:
$(".slider").on('click', function () {
var $assocDiv = $(".slider_show").eq($(this).index));
$assocDiv.slideToggle();
$(".slider_show").not($assocDiv).slideUp();
});
Regardless, you only need one $(document).ready, which can just be written as $(, and 'medium' is already the default animation speed.
Though it should be posted on CodeReview(imho), here's what you can do:
$(document).ready(function () {
var last, last2;
$("#information").click(function () {
$("#information_show").slideToggle("medium");
if (last != '#information_show' && last != last2) $(last).slideToggle("medium");
last2 = last;
last = '#information_show';
});
$("#menu").click(function () {
$("#menu_slide").slideToggle("medium");
if (last != '#menu_slide' && last != last2) $(last).slideToggle("medium");
last2 = last;
last = '#menu_slide';
});
$("#books").click(function () {
$("#books_toggle").slideToggle("medium");
if (last != '#books_toggle' && last != last2) $(last).slideToggle("medium");
last2 = last;
last = '#books_toggle';
});
$("#content").click(function () {
$("#content_div").slideToggle("medium");
if (last != '#content_div' && last != last2) $(last).slideToggle("medium");
last2 = last;
last = '#content_div';
});
});
Related
I have this little piece of code that filters through a list of results and hides the divs that don't match. I am writing this for a PhoneGap iOS application. It works fine on Android, but on iOS for some reason it hides the entire search field as well after typing a few characters, not just the results.
Any idea why? I've stripped it down to almost only the HTML code and jQuery and it's still happening. I tried commenting out the $(this).hide(); part and it stops hiding the search field, so I assume somehow that's the culprit, but I can't figure out why or how to fix this. Been at it for 10 hours straight. Any ideas? Maybe I can target the results some other way?
$('#box_search').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis == "") {
$('#listing-results > .listing_container').show();
} else {
$('#listing-results > .listing_container').each(function() {
var text = ($(this).find('.listing_results_text_name').text() + $(this).find('.listing_results_text_name').data("alt")).toLowerCase();
if (text.indexOf(valThis) >= 0) {
$(this).show();
} else {
$(this).hide();
}
});
};
});
obviously I cant see the html but sometimes it helps to clean the code and just change the logic slightly
var box_search = function(e){
var myIndex = $(this).val();
val = (!myIndex || myIndex==='')?false:myIndex;
if(!myIndex){
$('#listing-results > .listing_container').show();
return;
}
//
$('#listing-results > .listing_container').each(function() {
var text = $(this).find('.listing_results_text_name').text() +
$(this).find('.listing_results_text_name').data("alt")
text = (!text || text==='')?false:text;
text = text.toLowerCase();
if(text.indexOf(myIndex.toLowerCase()) >= 0){
$(this).show();
return;
}
$(this).hide();
});
} //end of function
$('.box_search').keyup(box_search);
I want to have a sequential list display, where initially all the lis except the first one are hidden, and when the user clicks a button, the lis appear by groups of 3. Eventually I would like to hide the button when the list gets to the end.
The code is something like this, but it shows only one per click, every third - but I want to show also the in-between elements until the third
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
jQuery("#allevents").on('click', function(e){
e.preventDefault();
i+=3;
jQuery(".event-holder").eq(i).fadeIn();
if ( i == numbofelem ) { jQuery(this).hide(); }
});
Probably the .eq(i) is not the function I need, but couldn't find the correct one...
You can use :hidden with use of .each() loop:
jQuery("#allevents").on('click', function(e){
e.preventDefault();
jQuery(".event-holder:hidden").each(function(i){
if(i <= 2){
jQuery(this).fadeIn();
}
});
});
Working fiddle
If you have just three you could use :
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
var li = jQuery(".event-holder");
jQuery("#allevents").on('click', function(e){
e.preventDefault();
li.eq(i+1).fadeIn();
li.eq(i+2).fadeIn();
li.eq(i+3).fadeIn();
i+=3;
if ( i == numbofelem ) { jQuery(this).hide(); }
});
If you have several lis to show you could use a loop, e.g :
var step = 10; //Define it outside of the event
for(var j=0;j<step;j++){
li.eq(i+j).fadeIn();
}
i+=step;
Hope this helps.
You eq(i) needs to be looped.
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
jQuery("#allevents").on('click', function(e){
e.preventDefault();
//i+=3;
//jQuery(".event-holder").eq(i).fadeIn();//You are showing only the third element. Loop this
//Something like this
for(var j=i;j<i+3;j++){
jQuery(".event-holder").eq(i).fadeIn();
if ( i == numbofelem ) { jQuery(this).hide(); }
}
i = j;
});
An alternative approach would be to buffer all the items, and keep adding them until empty:
var holders = $('.event-holder').hide();
$("#allevents").click( function(e){
e.preventDefault();
holders = holders.not(holders.slice(0, 3).fadeIn());
if(holders.length === 0) $(this).hide();
});
Fiddle
I have 2 select drop down menus. I want to to add a class once a option has been selected from both menus.
$('#size').change(function(){
if ($(this).val() > 0 ) {
$('#pizza').addClass('pizzaImage');
}
});
$('#crust').change(function(){
if ($(this).val() > 0 ) {
$('#pizza').addClass('pizzaImage');
}
});
This is my code so far, it works when I select an option from one. Basically I want to put these together I just don't know the syntax to do so. I also tried this but no results.
var size = $('#size')
var crust = $('#crust')
function image () {
if ((crust).val > 0 && (size).val > 0) {
$('#pizza').addClass('pizzaImage');
}
}
var $selects = $('#size, #crust');
$selects.change(function(){
var bothSelected = this.value && $selects.not(this).val();
$("#pizza").toggleClass("pizzaImage", bothSelected);
});
I would start by adding a common class between the two, to make it easier to bind the function to both select elements at the same time. Maybe something like pizzaOptions. Then, you could do something like this:
$(".pizzaOptions").on("change", function(){
var sizeSelected = $("#size").val() !== "";
var crustSelected = $("#crust").val() !== "";
if(sizeSelected && crustSelected){
$('#pizza').addClass('pizzaImage');
}
});
I have a form spread across multiple divs that are being displayed on and off using jQuery. I would like to disable the next and previous buttons on the first and last div when they are visible.
This sounded like an easy task based on the little that I do know about jQuery but it is proving to be more difficult than I imagined given my current code.
Here are my current next and previous button functions
var sel = "div[data-type='form']";
var current = $(sel).get(0);
$(sel).not(current).hide();
$("#next").click(function () {
if ($(form).valid()) {
current = $(current).next(sel);
$(current).show();
$(sel).not(current).hide();
}
});
$("#prev").click(function () {
current = $(current).prev(sel);
$(current).show();
$(sel).not(current).hide();
});
and here is a fiddle of what is happening at the moment http://jsfiddle.net/GZ9H8/6/
This works (Note: I removed the validation for testing purposes).
$("#next").click(function () {
if (true) {
current = $(current).next(sel);
$(current).show();
$(sel).not(current).hide();
if (!$(current).next(sel).get(0)){
$(this).hide();
}
if ($(current).prev(sel).get(0)){
$("#prev").show();
}
}
});
$("#prev").click(function () {
current = $(current).prev(sel);
$(current).show();
$(sel).not(current).hide();
if ($(current).next(sel).get(0)){
$("#next").show();
}
if (!$(current).prev(sel).get(0)){
$(this).hide();
}
});
Note that the previous button should probably be hidden from the start. Also, you can disable instead of hide if you want.
This may be useful:
$("#next").click(function () {
if ($(form).valid()) {
current = $(current).next(sel);
$(current).show();
$(sel).not(current).hide();
// Last element's index is equal to length - 1
$(this).attr('disabled', current.index(sel) == $(sel).length - 1);
// First element's index is equal to 0
$("#prev").attr('disabled', current.index(sel) == 0);
}
});
$("#prev").click(function () {
current = $(current).prev(sel);
$(current).show();
$(sel).not(current).hide();
// Last element's index is equal to length - 1
$("#next").attr('disabled', current.index(sel) == $(sel).length - 1);
// First element's index is equal to 0
$(this).attr('disabled', current.index(sel) == 0);
});
Regards
I have made this jsFiddle for searching/filtering the div content which I am getting from an XML response. But I have done it for one text box alone. Any one can help me in implementing for next three?
For example:
If I am typing pd001 it shows the first 2 rows and if I type paste it should reach and filter from the current visible list, not from the whole list.
Kindly help me out on this.
If I'm not wrong then you must be trying to do is that If I search 2 rows based on pd001 and put paste in the next textbox then it should filter only those 2 rows not the entire grid. And the same functionality for all the other textboxes. In fact you need dependencies b/w textboxes.
Try this:
$(".productid").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text0) != -1
}).parent().show();
$(".product:visible").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text1) != -1;
}).parent().show();
$(".quantity:visible").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text2) != -1;
}).parent().show();
$(".amount:visible").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text3) != -1;
}).parent().show();
Demo: http://jsfiddle.net/fbC6w/4/
You are filtering only one column to, it may help you
$("#searchone , #searchtwo ,#searchthree ,#searchfour").bind("keyup", function() {
var map = {
'.productid': $("#searchone").val().toLowerCase(),
'.product': $("#searchtwo").val().toLowerCase(),
'.quantity': $("#searchthree").val().toLowerCase(),
'.amount': $("#searchfour").val().toLowerCase()
};
$('div.new').each(function() {
$(this).hide();
});
$('div.new').each(function() {
var parent_div = this;
$.each(map, function(key, value) {
$(parent_div).find(key).filter(function() {
if ($(this).text().toLowerCase().indexOf(value.toString()) != -1 && value != '') {
$(parent_div).show();
}
});
});
});
});