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();
Related
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.
This script is designed to map the location between two cubicles so that people in large office buildings can figure out where they need to go to get to that other person. I've almost got it...
I have two different dropdown menus I'm working with.
By default, the dots on the page display.
Each dot corresponds to a name on the dropdown list.
When you select the name under the first dropdown, the other dot will disappear, and then if you select the name under the other dropdown, the first one disappears.
What I want to happen is - When both names are selected from the dropdowns, then both dots are showing at the same time.
I can get one or the other, but not both.
Here's the JS I have to toggle between the two...
$('#mapMe').change(function() {
var selectedMeChoice = $('#mapMe option:selected').val();
if (selectedMeChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[mechoice = "'+selectedMeChoice+'"]').slideDown(1000);
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
}
});
$('#mapThem').change(function() {
var selectedThemChoice = $('#mapThem option:selected').val();
if (selectedThemChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[themchoice = "'+selectedThemChoice+'"]').slideDown(1000);
$('a.dot[themchoice != "'+selectedThemChoice+'"]').slideUp(1000);
}
});
I think it has something to do with the slideUp/slideDown function, but I can't figure it out...
There's a jsfiddle here.
You aren't distinguishing between "them" and "me" in any way, so you're hiding the other one which should be shown. Try something like this, to only hide the correct dots:
$(".me").removeClass("me");
$('a.dot[mechoice = "'+selectedMeChoice+'"]').addClass("me").slideDown(1000);
$("a.dot").not(".me, .them").slideUp(1000);
http://jsfiddle.net/XvHJS/10/
In this way you will hide only a previous "me" and not hide everything, including an active "them".
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
Is also removing those which have no memchoice at all, including those with themchoice.
I would suggest using different classes dotme and dotthem instead.
I am trying to accomplish what may be a simple task for you. I want it so everytime the user clicks one of the "patients" on the left hand bar, a drawer opens. That drawer will be loaded in a hidden div (display:none) on the page. Each div's id will be the last lastname of the patient. My included fiddle shows all of the same last name for demonstration purposes only, obviously.
But the problem is I don't know how to open a unique drawer for each patient. I guess I need to put a toggle on each patient's li somehow?
Also, if they click another patient in the listing, I would like the current open drawer to close, and open the one they just clicked. Also, if the close button is clicked, obviously close the drawer as well.
I got a single drawer to work with this:
$(".patient").toggle(function(){
$(this)
$('#drawer').slideDown("slow")
}, function(){
$(this)
$('#drawer').slideUp("slow")
});
But obviously that isn't going to work... :(
In the fiddle it is opening a standard "drawer" right now. but really I'd like the data for each named div be loaded in the same form. Please comment if you don't understand.
Here's the fiddle:
http://jsfiddle.net/3veht/1/
Add a data element to your HTML indicating an ID, let's say patient ID in this case:
<li class="patient green" data-patientId="1">Josh Doe<img src="img/next.png"><img class="imgfix" src="img/accept.png"></li>
<li class="patient red" data-patientId="2">John Adams<img src="img/next.png"><img class="imgfix" src="img/cancel.png"></li>
Then in your javascript when you load the data, you can use that ID to generate a page request. I also changed the toggle to a click and slid the previous one up before sliding the new one down. In the fiddle example:
$(".patient").click(function(){
var pat = $(this);
if ($("#drawer").is(":visible"))
$("#drawer").slideUp("fast", function () {
$('#drawer').slideDown("slow")
$("#drawer").load("/echo/js?js=" + pat.data("patientid"));
});
else
{
$('#drawer').slideDown("slow")
$("#drawer").load("/echo/js?js=" + pat.data("patientid"));
}
});
Updated fiddle: http://jsfiddle.net/3veht/6/
Check this fiddle updated....
changes made in code
var divud = $(this).text().split(' ')[1];
$('#drawer').slideDown("slow");
$('#'+divud).removeClass('hidden');
$('#'+divud).slideDown("slow");
JSFIDDLE
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);
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');
});