I have an image (question mark image) inside a div like so
HTML
<div id="other">
<img id="clickQues" class="quesMark" src="ques" />
</div>
I want this ques mark image to be replaced by two new clickable images (a tick, and a cross) when I click on it. I am using jQuery to achieve this. I am able to replace the images successfully. However, I am unable to click on the new tick, cross icons.
My jQuery
$('#clickQues').click(function(){
$('.quesMark').hide();
$('#other').append("<img src='tick.png' id='tickIcon'>");
$('#other').append("<img src='cross.png' id='crossIcon'>");
});
$('#tickIcon').click(function(){
//hide the other cross icon
//do something
});
$('#crossIcon').click(function(){
//hide the other tick icon
//do something
});
Heres the fiddle
What am I doing wrong?
Since the elements are added dynamically, you need to use event delegation
$('#other').on('click', '#tickIcon', function(){
//hide the other cross icon
//do something
});
$('#other').on('click', '#crossIcon', function(){
//hide the other tick icon
//do something
});
Demo: Fiddle
Try this : Event Delegation
$('body').on('click','#tickIcon',function(){
//hide the other cross icon
//do something
});
$('body').on('click','#crossIcon',function(){
//hide the other tick icon
//do something
});
$('#clickQues').click(function () {
$('.quesMark').hide();
$('#other').append("<img id='tickIcon' src='http://www.pcdr.gr/moodle/theme/themza_moo_05/pix/i/tick_green_big.gif'>");
$('#other').append("<img id='crossIcon' src='http://www.iconshock.com/img_jpg/VECTORNIGHT/general/jpg/16/cross_icon.jpg'>");
});
$('#other').on("click",'#tickIcon',function () {
$('#crossIcon').hide();
});
$('#other').on("click",'#crossIcon',function () {
//hide the other tick icon
//do something
$('#tickIcon').hide();
});
see demo
$('#clickQues').click(function(){
$('.quesMark').hide();
$('#other').append("<img class='right' src='tick.png' id='tickIcon'>");
$('#other').append("<img class='close' src='cross.png' id='crossIcon'>");
});
$('.right').click(function () {
$('.close').hide();
});
$('.close').click(function () {
$('.right').hide();
});
Not tested but i think this will help you certainly regards....:)
Related
I can fade a div in with a click but how do I use the same click to toggle that div, i.e. fade the div in on click and then fade the div out on second click.
I'd like navbar-toggle to be clicked once to open overlay and clicked again to fade out overlay.
<script>
$(document).ready(function(e) {
$('.navbar-toggle').click(function(e){
$('.overlay, .popup').fadeIn('slow');
});
$('.navbar-toggle').click(function(e){
$('.overlay, .popup').fadeIn('slow');
});
});
</script>
You can do it a couple of ways:
Solution 1:
Use toggle()
$('.navbar-toggle').click(function(e){
$('.overlay, .popup').toggle('fast');
});
JSFiddle Demo
Solution 2:
Use fadeToggle()
$('.navbar-toggle').click(function(e){
$('.overlay, .popup').fadeToggle(300);
});
JSFiddle Demo
Solution 3:
Have a hidden class and check to see if it exists
Just use toggle and bind your element to one event handler:
$('.navbar-toggle').click(function(e){
$('.overlay, .popup').toggle('slow');
});
it also could be used like this,
by checking the current status of the element
$('.navbar-toggle').click(function(e){
if($('.overlay, .popup').css('display')=='none')
{
$(".overlay, .popup").fadeIn();
}
else
{
$(".overlay, .popup").fadeOut();
}
});
Or by removing curly braces due to being in single line like this
$('.navbar-toggle').click(function(e){
if($('.overlay, .popup').css('display')=='none')
$(".overlay, .popup").fadeIn();
else
$(".overlay, .popup").fadeOut();
});
Check out the fiddle : JSFiddle
Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?
You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.
Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)
I am trying to hide a div whenever I will hover over it and show another one in the same place.. And when I take the mouse out of that.. the previous div will be shown and this div will be hidden...
$(document).ready(function(){
$('#hover_tutor').hover(
function () {
$('#hover_tutor').hide();
$('#hover_tutor_hidden').show();
},
function () {
$('#hover_tutor').show();
$('#hover_tutor_hidden').hide();
}
);
});
<div id="hover_tutor">Blah</div>
<div id="hover_tutor_hidden" style="display:none;">Bleh</div>
But on hovering the hover_tutor... something is happening.. It's jumping up and down.. I don't know what's wrong...
You need to use .mouseenter event for #hover_tutor div and .mouseleave for #hover_tutor_hidden div:
$('#hover_tutor').mouseenter(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').mouseleave(function () {
$('#hover_tutor').show();
$(this).hide();
}
).mouseleave();//trigger mouseleave to hide second div in beginning
Working Demo
You can also use toggle method instent of hide/show on hover event
<div id="hover_tutor" style="display: block;">Blah</div>
<div id="hover_tutor_hidden" style="display: none;">Bleh</div>
$('#hover_tutor').hover(
function () {
$('#hover_tutor').toggle();
$('#hover_tutor_hidden').toggle();
});
Working demo
http://jsfiddle.net/ivyansh9897/8jgjvkqk/
try this,
$('#hover_tutor').hover(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').hover(function () {
$('#hover_tutor').show();
$(this).hide();
}
));
If you do have the flexibility to modify your html little bit using class attribute there's a better way. Use .toggle() to alter the state of your element on both mouseover and mouseleave.
HTML :
<div id="hover_tutor" class="hello">Blah</div>
<div id="hover_tutor_hidden" class="hello" style="display:none;">Bleh</div>
jQuery :
$(".hello").on("mouseover mouseleave", function(){
$("#hover_tutor").toggle();
$("#hover_tutor_hidden").toggle();
});
jsFiddle
I have this code in html:
<div class="sub-status">
<p class="subscribed"><i class="icon-check"></i> Subscribed</p>
</div>
On hover, I want that to be changed to:
<div class="sub-status">
<p class="unsubscribe"><i>X</i> Unsubscribe</p>
</div>
And, I have this code in jQuery:
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
});
$('.sub-status').mouseleave(function() {
$('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
The first function is working great. When I mouseover that div, it is changed to what I want, but the mouseleave is not working. I want that when I put my mouse out of that div, its data will return to like it was before. I can't get this working. Any help would be appreciated.
Thanks.
Change
$('this')...
to
$(this)...
And you can use hover() instead of using two separate functions:
$('.sub-status').hover(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
Updated
Your fiddle isn't working since you are updating the entire content of the hovered element - update just the text in <p> should work.
$('.sub-status').hover(function() {
$(this).children('p')
.removeClass()
.addClass('unsubscribed')
.html("<i>X</i> Unsubscribe");
},function() {
$(this).children('p')
.removeClass()
.addClass('subscribed')
.html("<i class='icon-check'></i> Subscribed");
});
Working fiddle
Here, try this. Working demo: http://jsfiddle.net/XrYj4/3/
$(document).ready(function() {
$('.sub-status').on("mouseenter", function() {
$(this).find("p").prop("class", "unsubscribed").html("<i>X</i> Unsubscribe");
}).on("mouseleave", function() {
$(this).find("p").prop("class", "subscribed").html("<i class='icon-check'></i> Subscribed");
});
});
Try to use a hover function:
$(".sub-status").hover(
function () {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},
function () {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
}
);
http://api.jquery.com/hover/
Change 'this' to simply this. Also consider chaining, shown below, this helps users with weaker devices load stuff faster.
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
}).mouseleave(function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?
I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/
I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});
It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle
As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});