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.
Related
Basically I am going with an application style site for mobile view and they wanted a button on the bottom to flip through the pages in order while the nav at the top allows you to flip through them in any order. I want to change the bottom button to link to the following page depending on which one it is on. so I want the button to change links when specific buttons are focused. I tried many different things and can not seem to make it work. Please do your magic.
if(document.getElementById("abt").hasFocus()) {
document.getElementById("golink").href = "#work";
}
I don't believe focus is what you're looking for as focus can be fleeting to track outside of form objects.
I've mocked up a possible solution to help aid you to what you're looking for.
Here is a link to the JSFiddle:
EDIT - Updated Fiddle: https://jsfiddle.net/t0uwff4t/
Javascript in the fiddle:
// Array of sections.
var sections = [
'#first',
'#second',
'#third',
'#fourth',
'#fifth'
]
// Get the last value in the array.
var lastArrayValue = sections[sections.length - 1];
// Button pointer
var btn = document.querySelector('#button');
// On click of the button, do work.
btn.onclick = function() {
// Get the current href.
var href = btn.getAttribute('href');
// Ternary operator setting the index to zero if the user is on the last index of array.
// Else set the index to the next array value.
var index = (href === lastArrayValue) ? 0 : sections.indexOf(href) + 1;
// Set the href attribute.
btn.setAttribute('href', sections[index]);
}
NOTE: While this example works, this is only a mockup - meaning that it doesn't account for rapid button clicking by the user to 'flip pages'.
Good luck and I hope this helps you to your goal.
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();
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');
});