Javascript/JQuery Execution order - javascript

I have multiple instances of a div ".gallery" and I want to pick up the id of the div the particular instance of .gallery is sitting in on click. This would then populate a variable that I can use to make the image only change in that div's gallery. Problem is that the page seems to try to do the image swap, then changes the variable, so the image doesn't change on the first click, and-worse-the first time you click on a different gallery it changes the image of the last gallery you interacted with. Currently there is a javascript alert that I have pop up every time you click a div that reports the div you clicked. I have the page in its current state here if you want to play around with it. www.ryanscasey.com/redesign
The straight javascript is as follows:
$(document).ready(function() {
var clickedDiv;
$('.gallery').click(function() {
clickedDiv = $(this).parent().parent().attr("id");
$('#' + clickedDiv + ' .thumbs img').click(function() {
$('#' + clickedDiv + ' .largeImage').html($(this).attr('alt'));
});
alert(clickedDiv);
});
});

I think this is what you want. It doesn't sound like you need to bind more than one click event. The way you had it, it would bind a click event any time a .gallery item was clicked. If this doesn't work, let me know, and we'll try to work from there.
$(document).ready(function() {
$('.gallery .thumbs img').click(function() {
var $this = $(this),
$gallery = $this.closest('.gallery'),
$large = $gallery.find('.largeImage');
$large.html($this.attr('alt'));
});
});
EDIT: I took a look at your site and I have adjusted my code. You want to bind the click event to the thumbnail not the entire gallery.

Related

Jquery function add/remove class from div on button hover

I have this jquery script that I got some help with in creating in order to add/remove an "active" class to a div when hovering over a button.
Below a CodePen of what I have put together:
CodePen Link: https://codepen.io/dustin-keeslar/pen/dapLWM
It works well, however what I'm trying to change is to have whatever button was last hovered on, to keep the "active" class on the content. So that the content only changes when a different button is hovered over.
jQuery(document).ready(function() {
jQuery(".toggle-button").hover(function() {
var target = jQuery(this).data("target");
if (jQuery(this).hasClass("expand")) {
jQuery(this).toggleClass("expand");
jQuery("#" + target).removeClass("active");
} else {
jQuery(".toggle-button").removeClass("expand");
jQuery(".hidden-content").removeClass("active");
jQuery(this).toggleClass('expand');
jQuery("#" + target).toggleClass("active");
}
});
});
This will find a button that has data-target=content1" for example, and when it is hovered over it will toggle an "active" class to a div with the ID "content1". The problem is that when you are no longer hovering, everything disappears. I need the most recent hovered button to keep the "active" class on the content. But I also need the content to change dynamically when the next button is hovered over.
Then fix it to use mouseenter, and move your remove code to the top to remove your classes before adding them back to the element that's been entered. I don't understand exactly what you're trying to do here, but using mouseenter it should be something like:
jQuery(document).ready(function() {
jQuery(".toggle-button").mouseenter(function() {
jQuery(".toggle-button").removeClass("expand");
// jQuery(".hidden-content").removeClass("active");
$(".active").removeClass("active");
var target = jQuery(this).data("target");
jQuery("#" + target).addClass("active");
if (jQuery(this).hasClass("expand")) {
jQuery(this).removeClass("expand");
jQuery("#" + target).removeClass("active");
}
});
});
All you are missing is a check, to ensure the current item matches the target:
jQuery(this).attr('id') == target
Codepen here: https://codepen.io/anon/pen/VgKOPy

click events in JavaScript

I'm building a list of images dynamically. What I want to happen is when a user clicks the close text (inside my DIV element) the code will delete that particular image (list element). The code below does that the FIRST time the DIV is selected. After that it seems to ignore my div event listener and jump straight into the jquery on click function.
function removeItem(){
var test = document.querySelector('li > div').addEventListener('click', function(){
$(document).on('click', 'li', function () {
var photoId = (this.id);
$("#"+photoId).remove();
});
});
How can I make it so it will ALWAYS run when the DIV is selected instead of just the first time?
I'm new to learning about JavaScript so any help is appreciated!
When the user clicks on the DIV, you're not removing anything, you're just adding a new click listener on all LIs that removes that LI. Then the user needs to click again to trigger the second handler. It should simply be:
$(document).on('click', 'li > div', function() {
$(this).parent().remove();
});
BTW, there's no point in writing
var photoId = (this.id);
$("#"+photoId).remove();
It's simply $(this).remove(). Why go searching for an ID when you already have a reference to the element itself?

Exclude a radiobutton from .click() of div

I am trying to make and area on my page selectable, but inside there is a radiobutton which i dont want to be part of the selectable area. I have it setup at the moment to allow the user select the area but this also includes the radiobutton:
$(document).ready(function () {
jQuery(document).on('click', 'label[title^="id_"]', function(e) {
$(this).addClass('hide');
var current = "s_" + $(this).attr('title');
$("label[title='" + current + "']").removeClass('hide');
});
});
This basic idea of the code at the moment is hide the selected div and show another. What i want is to exclude the radiobuttons inside this div from the click event.
I tried this: but it prevents clicking of the radiobuttons
if ($(e.target).is('input[type="radio"]')) {
e.preventDefault();
return;
}
As said by Jon in comments(and also my personal answer)
Your code should be:
if ($(e.target).is('input[type="radio"]')) {
return;
}
Put that in opening of the function body of the click event handler.
The return call, will terminate the function so it wont progress further.

create attributes of buttons dynamically depending on div class

i have a big problem which is driving me crazy:
i have a scrolling page with lots of divs and each has a different id, one below the other and no gap between them.
at the bottom of the viewport are 4 fixed buttons which all have a click function:
$("#button1").click(function() {
$('#firstdiv').css("background-image", "url(bg1.jpg)");
$("#button2").click(function() {
$('#firstdiv').css("background-image", "url(bg2.jpg)");
$("#button3").click(function() {
$('#firstdiv').css("background-image", "url(bg3.jpg)");
$("#button4").click(function() {
$('#firstdiv').css("background-image", "url(bg4.jpg)");
as you can see the buttons are for changing the background image of the current div.
when im scrolling down and the next div comes in it, fires an event. in this event i want to change the function of each button with different attributes for example
$("#button1_2").click(function() {
$('#seconddiv').css("background-image", "url(bg5.jpg)");
and so on..
the function is the same, but it works for the second div and another bg-images...
could someone please give me an approach to do this dynamically that i dont have to make like 25 click functions for all the divs?
Change your buttons so that they look something like this (the attributes are the important things):
<button class="image-button" data-image="bg1.jpg">Text</button>
And then you could apply your event handler to all of them at once:
$(".image-button").click(function() {
var url = 'url(' + $(this).data('image') + ')';
$('#firstdiv').css('background-image', url);
});
you can do something like that:
<span class="btn" data-num="1">button1</span>
<span class="btn" data-num="2">button2</span>
jquery :
$(".btn").click(function(){
$('#firstdiv').css("background-image", "url(bg"+$(this).attr("data-num")+".jpg)");
})

How do I trigger a mouseenter (or any mouse) event on list items within a div with a z-index?

Every time I click on the list items only the z-index layer gets the mouse event. CSS has no trouble detecting the mouse hovering over the list item but I need jquery to display an image after retrieving the background-image from the list item's css.
For your convenience, I recreated it at jsFiddle: http://jsfiddle.net/VaDb6/
I've also tried this:
jQuery hover problem due to z-index
But this just made everything else clickable in the back, which is exactly what
I don't want and the reason why I made the div with a z-index.
I've also tried giving each child a z-index but still no response from the list items.
I will greatly appreciate any suggestions or guidance. Thanks in advance!
This has nothing to do with the z-index, what is happening is that the events are binded when your page loads, and the freshly inserted divs don't have events attached to them. Here's how to fix it:
$('div.gallery_shots li').on('click', function () {
// take the ancestor's html
var html = $(this).parent().parent().next().html();
$('div#layerZ').html(html + '<div id="debug"></div>').show();
});
$('div#layerZ').on('click', function () {
$('div#debug').append('layerZ...');
});
$('div#layerZ')
.on("click", "li", function(e) {
e.stopPropagation();
alert('li clicked');
})
.on("mouseenter", "li", function(e) {
e.stopPropagation();
//$('div#layerZ div.gallery_pictures li.current').removeClass('current');
//$(this).addClass('current');
//var url = $(this).css('background-image');
//url = url.replace('url(', '').replace('-thumb', '').replace(')', '');
//$('div#layerZ div.large_gallery').html('<img src="'+url+'"></img>');
$('div#debug').append('mouseenter event success!!!<br />');
});
With $('div#layerZ').on("click", "li", function(e) {...} you're telling the parent to listen on clicks done specifically on li. Since #layerZ exists at load time there's no problem binding the event.​
http://jsfiddle.net/LbqUC/

Categories