I am building a theme selector for maps and want to reflect the currently selected theme.
The code seems to work but never returns the value of the "li" item, it always returns "s-thumbs" for whatever "li" item I click on. I tried using the .closest() method but to no avail.
I'm following this article.
<script language="javascript">
$("ul.s-thumbs").live("click", function(event) {
$("#theme_title").text(
$(this).closest("ul.s-thumbs li").attr("class")
);
});
</script>
<div id="theme">You have selected the <div id="theme_title"></div> Theme</div>
<div class="container_16" id="themebg">
<!--<div class="grid_1"> <a href="" "img" src="/styles/image/leftarrow.png" id="leftarrow" alt=""/></div>-->
<div class="grid_16 slider-wrapper">
<ul class="s-thumbs">
<li class="Default"> <img src="/styles/image/thumbs/default.png" alt="" />Default</li>
<li class="Hatchery"> <img src="/styles/image/thumbs/hatchery.png" alt="" />Hatchery</li>
</ul>
</div>
$("ul.s-thumbs").on("click", "li", function() {
var myText = $(this).attr("class");
alert( myText );
$("#theme_title").text( myText );
});
Demo jsFiddle
Use the .on() metod: http://api.jquery.com/on/ adding the specific element after the event (click)
This is a new replacement for the (today) deprecated .live() method.
$('ul.s-thumbs li').on('click', function(){
var getClass = $(this).attr('class');
$("#theme_title").text(getClass);
});
Demo link: http://jsfiddle.net/ChaseWest/w2tCE/4/
$("ul.s-thumbs").on("click", "a", function(event) {
var txt = $(this).closest("ul.s-thumbs li").attr("class");
$("#theme_title").text(txt);
});
NOTE live() has been deprecated.
Add the event handler to the li instead of the ul. I also used on which is the preferred method in Jquery 1.7+
$("ul.s-thumbs li").on("click", function(event) {
$("#theme-title").html(
$(this).attr("class")
);
});
Demo: http://jsfiddle.net/euSye/1/
<script language="javascript">
$(document).ready(function() {
$(".s-thumbs").on("click", "a", function(e) {
$("#theme_title").text( $(e.target).parent("li").attr("class") );
});
});
</script>
Related
So, I've been trying to create a function in jQuery where when you hover over an element, it toggles an img, and when you exit the element, the img gets toggled again. The only issue is that this all happens after a $(document).on slector. I've tried using $(document).off().on but it's not working. Here's my code:
$(document).on('mouseover', '.addressLink', function() {
var redirectSelector = $(this).children().last();
redirectSelector.toggle('fast');
$(this).mouseleave(
function() {
redirectSelector.toggle('fast');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>
Click For Location <img src='download.png' class='redirect display'>
</a>
</div>
This function works the first time, but then the img toggles and toggles again and again, doing it one more time for every mouseover! The event fires once, then twice, then three times, and so on. Thank you for your answers.
I made example for you.
$(document).on('mouseover mouseleave', '.addressLink', function(e) {
var $img = $(this).find('img');
if(e.type === 'mouseover') {
$img.stop(true, true).slideDown('fast');
}else {
$img.stop(true, true).slideUp('fast');
}
});
.addressLink img {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>Click For Location<img src='https://via.placeholder.com/150X30' class='redirect display'></a></p>
</div>
$(document).on('mouseenter mouseleave', '.addressLink', function() {
var redirectSelector = $(this).children().last();
redirectSelector.toggle('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>
Click For Location <img src='download.png' class='redirect display'>
</a>
</div>
I would suggest using a single delegate for the mouseenter and leave, since all you are doing is toggling a class. This avoids the duplicate binding issue. There is still a little flakyness with the toggle due to the element moving and the mouse may accidentally leave the target while it is redrawing, but that's an issue with styling or such that can be addresses as a secondary issue.
Try this :
$('.addressLink').hover(function(){
var redirectSelector = $(this).children().last();
redirectSelector.show('fast');
}, function(){
var redirectSelector = $(this).children().last();
redirectSelector.hide('fast');
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>
Click For Location <img src='download.png' class='redirect display'>
</a>
</div>
I'm using jQuery's toggle() function to create a pull-down menu, but I will add many sub-menus in this project.
I need to click the a.sub_open to toggle the div.submenu.
https://jsfiddle.net/mr6b4k53/
JS code:
$(document).ready(function(){
$( ".sub_open" ).click(function() {
$(".sub_menu").next.toggle("blind", 0, 500);
});
});
Any suggestions?
Edit1:
I have tried using next() but still the issue exists. Can you please suggest a way to achieve this?
next is a function, but you have used as a field or property. Call it also via $(this)
$(document).ready(function(){
$( ".sub_open" ).click(function() {
$(this).next().toggle("blind", 0, 500);
});
});
Use this and next() like below:-
$(document).ready(function(){
$( ".sub_open" ).click(function() {
$(this).next(".sub_menu").toggle("blind", 0, 500);
});
});
.sub_menu{
background:#232323;
color:#fff;
height:200px;
width:200px;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li>
<a class="sub_open">aaa</a>
<div class="sub_menu"><p>text the sub_menu</p></div>
</li>
<li>bbb</li>
<li>
<a class="sub_open">ccc</a>
<div class="sub_menu"><p>text the sub_menu</p></div>
</li>
<li>ddd</li>
<li>eee</li>
</ul>
</div>
Working fiddle also:-https://jsfiddle.net/xhtw28wb/
NOTE:- make sure that jQuery library is added before your script code.
.next() is a chainable function, use it like so:
$(".sub_menu").next().toggle("blind", 0, 500);
I have this structure
<div class="container">
<a> <img /> </a>
<div id="actions"></div>
<ul id="add-to"> </ul>
</div>
and I'm using a script like this
<script>
jQuery(function() {
jQuery("#actions, #add-to").hover(function(){
jQuery(this).prev('a').addClass('opacity');
}, function() {
jQuery(this).prev('a').removeClass('opacity');
});
});
</script>
it does work when hover on the actions element id, but not with the #add-to.
Can you help me with this?
thanks
prev() only select immediate previous element, a is not immediately previous to#add-to. In this case you can use siblings() or prevAll() . while using prevAll() use first() to get closest one
<script>
jQuery(function() {
jQuery("#actions, #add-to").hover(function(){
jQuery(this).siblings('a').addClass('opacity');
}, function() {
jQuery(this).siblings('a').removeClass('opacity');
});
});
</script>
or
<script>
jQuery(function() {
jQuery("#actions, #add-to").hover(function(){
jQuery(this).prevAll('a').first().addClass('opacity');
}, function() {
jQuery(this).prevAll('a').first().removeClass('opacity');
});
});
</script>
Followed by the HTML DOM:
<div class="opt">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
When i click on the .opt it would show the .panel content, but then i need to trigger another event to hide the .panel when clicking outside of the .opt element.
jQuery:
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
$this.blur(function(){
$this.find('.panel').fadeOut();
alert('i am from blur');
});
});
Here is a demo JsFiddle
But the blur() method is not executing, what i am doing wrong here technically?
You can try a click event on body instead of blur. Take a look at
https://jsfiddle.net/y0wsfpvb/7/
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
});
$('body').click(function (e){
if( $(e.target).closest(".opt").length > 0 == false) {
$('.panel').fadeOut();
alert('fake blur');
}
});
This works if you define de tabindex property for the div...
Try:
HTML
<div class="opt" tabindex="3">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
JS
$('.opt').click(function(){
$(this).find('.panel').fadeIn();
$(this).blur(function(){
$(this).find('.panel').fadeOut();
alert('i am from blur');
});
});
You could bind the fade out action to the body's on click handler, and then add:
event.stopPropagation();
to your opt class click handler to achieve this.
Here is an example on codepen
<div class="row">
<img src="images/image.png" width="30" height="30" alt=""/>
View
</div>
$(".row").not(".row a").click(function(){
// irrelevant
})
I can't figure out why this isn't working. I don't want to call the function when "View" is clicked.
Is this ,what you were looking for?
$(".row").on('click',':not(a)', function(){
});
Adds 'click' event listener on all child elements of '.row', except 'a' elements.
Use this:
$(".row").click(function(){
});
$('.row a').click(function(e){
e.stopPropagation(); //this cancel the other events
});