I searched for this problem but couldn't find solution that works for me.
I'm trying to do four checkboxes, from which only three can be selected. And when fourth checkbox is selected there is a faded in message, which informs the user about the limit.
This is the part that fades in the text:
$('#warning').fadeIn('slow',function() {
$(this).stop().text("(You can't have more than 3 selected options)");
setTimeout(function() {
$("#warning").fadeOut(300);
}, 2500);
});
I couldn't do it with a delay, so I used setTimeout.
I can't understand why the first time the fourth checkbox is clicked, the message shows uo instantly. What am I doing wrong?
And also is there a way to do it with a delay instead of setTimer?
Here is a link to the whole code: http://jsfiddle.net/e5kns/
Try adding this to the start of the script:
$('#warning').text("(You can't have more than 3 selected options)");
$('#warning').show();
$('#warning').hide();
http://jsfiddle.net/e5kns/2/
Use fadeTo and set css opacity to 0... like this:
$('#warning').text("(You can't have more than 3 selected options)").css('opacity',0).stop().fadeTo('slow', 1).delay(2000).fadeTo('slow', 0);
Related
I have 7 options in my dropdown list.if I select one option it's display content of selected one along with others content so can any one tell me code
I think its because items works asynchronously. So you are must place setTimeout in click listener like that:
$('item').click = function() {
setTimeout(function(){
#('item').click();
}, 1);
}
In this situation I often use my favourite nodeJS
I have 4 carousels in total. But only 2 are visible at any one time. These 2 are also controlled by the same controls. Most of the functionality is working except for the second button not displaying the second pair of carousels:
http://jsfiddle.net/Stref/z6wyhfev/
I believe there is something wrong with:
$('.toggleCar').click(function(){
var CarWrapperName=$(this).attr('data-for');
$('.Car-toggle').hide();
$('#'+CarWrapperName).show();
});
//Hide All Toggles and Show Default
$('.Car-toggle').hide();
$('#Car-1').show();
$('#Floors-Words-Car').show();
Please find the solution at http://jsfiddle.net/z6wyhfev/2/
The javascript should be modified as follows.
Some changes are in html and css also.
$('.toggleCar').click(function(){
var CarWrapperName=$(this).attr('data-for');
$('.Car-toggle').hide();
$('#'+CarWrapperName).show();
if(CarWrapperName=="Car-1"){
$('#Floors-Words-Car').show();
$('#Space-Words-Car').hide();
}
else{
$('#Floors-Words-Car').hide();
$('#Space-Words-Car').show();
}
});
//Hide All Toggles and Show Default
$('.Car-toggle').hide();
$('#Car-1').show();
$('#Floors-Words-Car').show();
$('#Space-Words-Car').hide();
This question already has an answer here:
Jquery onclick change image - 3 Products holders
(1 answer)
Closed 9 years ago.
I would like to add another button so in total I have 3 buttons instead of 2. How can I do this ? I tried to add a product holder three but then if I click first button 1 and then button 3, both button have the same background image.
Preview: http://gyazo.com/6698586765626a57405f9232baaaf61f.gif
New code(Doesn't work):
$(document).ready(function(){$(".theImage img").click(function(){
var a=$(this).parent().attr("id")=="product-holder1"?"product-holder2"?"product-holder3":"product-holder1";
console.log(a);
$(this).fadeOut();
$("#"+a+" img").fadeIn();
});
});
I have 3 buttons, When they click on one of them it changes the image.. So if user clicks on button 1, it changes image. Is the now clicks the button 2 in case he want to select this one button 1 image goes back to normal.
Website: http://productsgiveaway.com/iphone5s/
I would appreciate some help.
Old code Javascript:
$(document).ready(function () {
$(".theImage img").click(function () {
var a = $(this).parent().attr("id") == "product-holder1" ? "product-holder2" : "product-holder1";
console.log(a);
$(this).fadeOut();
$("#" + a + " img").fadeIn()
})
})
Look at your console when you're clicking on the images. The product-holder# is all messed up. This is your problem. I do now understand why youre setting the variable a like that. Try just using this....
var a = $(this).parent().attr("id");
What youre doing above is the same as saying....
if(id==product-holder1)
a=product-holder2;
else
a=product-holder1;
So youre really reversing them around and thats your problem. Just use the id attribute to get the id of the parent.
EDIT:
Try putting this in for me. Im not positive it will work but I want to see what it does
$(document).ready(function(){
$(".theImage img").click(function(){
$(".theImage img").fadeIn(); //SPOT 1
$(this).fadeOut();
});
});
Glad to see it works. Heres whats happening... You set a background image to the continue picture and then put the select on top. So what you want to do is make sure that every select image is showing when you click it (SPOT 1) in code. Then you use the $(this) selector to get the image that you click and then just hide that. Which will then show the background image you have underneath. This will give you your desired effect. You were actually making it much more complicated than it had to be with pulling the ID's in.
I'm using JQuery Multiselect plugin from here: http://www.erichynds.com/blog/jquery-ui-multiselect-widget
When the list of options is long a scroll appears, but it doesn't scroll automatically to the selected option. It means that, after selecting the 50th option, if I want to select option 51st I have to search again all the way down.
Do you know how to solve this issue? I tried to use scrolltTop but no luck.
The code is really simple...
$(function(){
$("select").multiselect({multiple: false, selectedList: 1});
});
Here is a jsfiddle with this problem: http://jsfiddle.net/g5r92/1/
Thanks a lot in advance.
have a look at this, first attempt and it´s working fine
http://jsfiddle.net/g5r92/7/
$(function(){
$("select").multiselect({multiple: false, selectedList: 1});
$('.ui-multiselect').click(function(){
$('.ui-multiselect-checkboxes').animate({
scrollTop: $(".ui-multiselect-checkboxes .ui-state-active").offset().top
}, 2000);
});
});
you will only need to fit it to your needs, add some extra pixels to the offset and it will scroll the selected option in the middle instead of the very top
You are right, it works indeed. My problem was because I have more than one multiselect in the same page, so offset().top was always zero for any multiselect except the first one (and I hadn't noticed that it was not zero for the first one...). Solved with this:
$('.ui-multiselect-checkboxes').scrollTop($($('.ui-multiselect-checkboxes .ui-state-active')[index]).offset().top);
Where index is the index of multiselects in the page.
Thanks a lot!
I would suggest, to edit your "jQuery MultiSelect UI Widget 1.12" JS file,
to "auto-select" while opening the menu option.
on your file, search for: (always select first item)
this.labels.eq(0).trigger('mouseover').trigger('mouseenter').find('input').trigger('focus');
and change it to: (dynamic select):
var idxSelected = 0;
if (o.multiple == true){
// find first checked.
idxSelected = $container.find('input[type=checkbox]:checked:first').parent().parent().index();
}
else {
// find the one that checked
idxSelected = $container.find('.ui-state-active:first').parent().index();
}
idxSelected = idxSelected < 0 ? 0 : idxSelected ;
this.labels.eq(idxSelected).trigger('mouseover').trigger('mouseenter').find('input').trigger('focus');
tested on FF + CHROME + IE (on multiple + single list)
recently i'm working on a project to make an interactive directory map for a mall without using flash, because they need to access from mobile devices.
but i have issue with jquery , i'm using custom java commands with jquery map highlight. which i use to target my mapcoords.
Method is invoked when someone clicks either on the map or the list below, it'll highlight the map and it'll show the information on right side.
My problem is when somebody clickd another shop from the list or from the map it won't clear the previous highlighted block and the previous one keeps highlighting, it doesn't matter how many time you click.
what i need is to refine my code such that when somebody clicks the 2nd link it will automatically clear the previous one.
anybody can see my demo file under below link
http://www.pad10.com/testsities/directorymap/
i'll appreciate if somebody help me with this
The problem is you don't turn off the highlight for currently selected area when clicking on another.
Place this:
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
in your salhia.js, in the .mapclick click handler:
$('.mapclick').click(function(){
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
$('.mapclick').removeClass('selected');
$(this).addClass('selected');
var shop = '.shopdetails#' + $(this).attr('shop');
var htmlCode = $(shop).html();
$('.shopinfo').fadeOut(500, function(){
$('.shopinfo .shopdetails').html(htmlCode);
$('.shopinfo').fadeIn(500);
});
});
Changed a bit the code shown on previous answer so it is more generic:
// Init
$('.map').maphilight({
stroke: false,
});
// Reset all map
$('.selected').data('maphilight', {alwaysOn:false}).trigger('alwaysOn.maphilight');
$('area').click(function(){
// Reset all areas with class 'selected'
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
// Remove class selected
$('area').removeClass('selected');
// select and highlight this area
$(this).addClass('selected');
$(this).data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');
});