I'm trying to achieve a simple hover effect. When a user hovers an image (a view filled with images), it should show an extra div. No problem there.
But when I want to do the opposite thing, hide the same div when the user leaves the area of the div, it doesn't work: the div won't go away when leaving the div area (which should be done by default when using the hover, no?).
This is the code I use:
$(document).ready(function () {
$('.views-field-field-photo-fid').out(function () {
showDiv($(this), $('.views-field-title'));
});
$('.views-field-field-photo-fid').out(function () {
hideDiv($(this), $('.views-field-title'));
});
});
function showDiv(sender, object) {
$(object).show();
}
function hideDiv(sender, object) {
$(object).hide();
}
So far, I've tried .mouseenter, .mouseleave, .hover, .out, but nothing works to hide the div after leaving the div area.
UPDATE
I found the solution, more or less:
$(document).ready(function() {
$('#uicarousel-news-preview-block-2 .views-field-field-photo-fid').hover(
function() { $(this).find('.views-field-title').show(); },
function() { $(this).find('.views-field-title').hide(); }
)
});
But since there are a lot of .views-field-title, it's hiding/showing them too. So I figured to use the find, but no solution there.
Any ideas?
There is no jQuery function called out, I am not sure whether you are using a plugin or not. Anyway, this how a correct hover declaration should look like:
<script style="text/javascript">
$(document).ready(function() {
$('.views-field-field-photo-fid').hover(
function() {
showDiv($(this), $('.views-field-title'));
},
function() {
hideDiv($(this), $('.views-field-title'));
});
});
function showDiv(sender, object) {
$(object).show();
}
function hideDiv(sender, object) {
$(object).hide();
}
</script>
I suggest that you take a look at the jQuery.hover documentation.
Related
I have one script that shows a tooltip on click and the other script shows a menu after a certain point in the page.
If the menu doesn't load, then I can click on the buttons to show the tooltips just fine. But when the menu does show up, the tooltips script doesn't show anymore.
<script>
$(document).ready(function() {
$('#left-tooltip').click(function() {
$('#lollefttooltip').toggle();
});
});
$(document).ready(function() {
$('#right-tooltip').click(function() {
$('.right-tooltip').toggle();
});
});
</script>
<script>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 650) {
$("#nav-block:hidden").css('visibility', 'visible');
$("#nav-block:hidden").fadeIn('650');
$("#nav-wrap:hidden").css('visibility', 'visible');
$("#nav-wrap:hidden").fadeIn('650');
$("#header-wrap:hidden").css('visibility', 'visible');
$("#header-wrap:hidden").fadeIn('650');
} else {
$("#nav-block:visible").fadeOut("650");
$("#nav-wrap:visible").fadeOut("650");
$("#header-wrap:visible").fadeOut("650");
}
});
});
</script>
Thanks in advance for the help!
update: Here is all the code I have for this. http://jsfiddle.net/parachutepenny/82J6G/11/
I'm sorry in advance for any beginner errors that I may have all over the place. I'm still learning how to code.
This doesn't answer your question, but there are some great opportunities to optimize here. Aside from best practice, they may also sort out the bugginess. Something like:
$(document).ready(function() { // combine doc.ready
var win = window, // store window as a variable
$bod = $('body');
$('#left-tooltip').click(function() {
$('#lollefttooltip').toggle();
});
$('#right-tooltip').click(function() {
$('.right-tooltip').toggle();
});
$(win).scroll(function() {
if (win.scrollY > 650) { // use scrollY from window variable so you're not retrieving from the DOM
$bod.addClass('navVisible'); // use classes on body to trigger CSS transitions on the children
} else {
$bod.removeClass('navHidden');
}
});
});
Put your multiple click function into single ready function.It may cause readability problem.
Follow this link.
Multiple document.ready() function
Part of the page I'm developing requires a $(window).resize event to be added to a div when a user clicks a button, in order to toggle between resizing it with the window and leaving it fixed at its original size:
function startResize() {
$(window).resize(function() {
$("#content").width(newWidth);
$("#content").height(newHeight);
});
}
What I can't work out is how to "turn off" this event when the button is clicked again, so that the content stops resizing.
function endResize() {
// Code to end $(window).resize function
$("#content").width(originalWidth);
$("#content").height(originalHeight);
}
Any help with this would be greatly appreciated.
function endResize() {
$(window).off("resize");
$("#content").width(originalWidth);
$("#content").height(originalHeight);
}
Note that this is extremely obtrusive and might break other code.
This is better way:
function resizer() {
$("#content").width(newWidth);
$("#content").height(newHeight);
}
function startResize() {
$(window).resize(resizer);
}
function endResize() {
$(window).off("resize", resizer);
}
function startResize() {
$(window).on("resize.mymethod",(function() {
$("#content").width(newWidth);
$("#content").height(newHeight);
}));
}
function endResize() {
$(window).off("resize.mymethod");
}
using a namespace on the query method will allow to to turn off the resize event for you method only.
This script is for a text box to fadeIn onClick then fadeOut onClick. It works the first time. But, the second time you do it, the $.noop() variable doesn't work. Here's the link of the site I just started working on. If you click on the "music","bio", or "links" tabs twice you will see what I'm talking about. Here's the jQuery:
$(document).ready(function() {
$('#music-box').hide();
$('#links-top-music').click(function() {
$('#music-box').fadeIn(1000);
$.noop();
$('#links-top-music').click(function() {
$('#music-box').fadeOut(750);
});
});
});
Try this.
$(document).ready(function() {
$('#music-box').hide();
$('#links-top-music').click(function(evt) {
if ($('#music-box:visible').length) {
$('#music-box').fadeOut(750);
}
else {
$('#music-box').fadeIn(1000);
}
evt.preventDefault();
});
});
Demo here: http://jsfiddle.net/naveen/pfT5E/
Based on your updated comment:
$(document).ready(function() {
var buttonStatus = false;
$('#music-box').hide();
$('#links-top-music').click(function() {
if(buttonStatus) {
$('#music-box').fadeOut(750);
} else {
$('#music-box').fadeIn(1000);
}
buttonStatus = !buttonStatus;
});
});
This will toggle between visible and invisible.
I have a slideshow which runs automatically and you can skip to an image by clicking on a button.
It works fine if you click one of the buttons when the image is static, but if you click while the fade functions are running it will run the functions twice which creates some kind of loop which eventually grinds the browser to a stand still!
I know I need to add some kind of "isRunning" flag, but I don't know where.
Here's a link to a jsfiddle - http://jsfiddle.net/N6F55/8/
And code also below...
javascript:
$(document).ready(function() {
var images=new Array();
var locationToRevealCount=6;
var nextimage=2;
var t;
var doubleclick;
addIcons();
function addIcons() {
while (locationToRevealCount>0) {
$("#extraImageButtons").append('<img class="galleryButtons" src="http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png" alt="'+locationToRevealCount+'" />');
images[locationToRevealCount]='http://www.tombrennand.net/'+locationToRevealCount+'a.jpg';
locationToRevealCount--;
};
$('.homeLeadContent').prepend('<img class="backgroundImage" src="http://www.tombrennand.net/1a.jpg" />');
$("#extraImageButtons img.galleryButtons[alt*='1']").attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
runSlides();
}
function runSlides() {
clearTimeout(t);
t = setTimeout(doSlideshow,3000);
}
function doSlideshow() {
if($('.backgroundImage').length!=0)
$('.backgroundImage').fadeOut(500,function() {
$('.backgroundImage').remove();
slideshowFadeIn();
});
else
slideshowFadeIn();
}
function slideshowFadeIn() {
if(nextimage>=images.length)
nextimage=1;
$("#extraImageButtons img.galleryButtons").attr("src","http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png");
$("#extraImageButtons img.galleryButtons[alt*='"+nextimage+"']").attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
$('.homeLeadContent').prepend($('<img class="backgroundImage" src="'+images[nextimage]+'" style="display:none;">').fadeIn(500,function() {
nextimage++;
runSlides();
}));
}
$("#extraImageButtons img.galleryButtons").live('click', function() {
nextimage=$(this).attr("alt");
$("#extraImageButtons img.galleryButtons").attr("src","http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png");
$(this).attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
clearTimeout(t);
doSlideshow();
});
});
html:
<div class="homeLeadContent" style="width:965px;">
</div>
<div id="extraImageButtons"></div>
Two changes make it work better for me:
Down in the "extra image buttons" handler, you call "clearInterval()" but that should be changed to "clearTimeout()".
I added another call to "clearTimeout(t)" in the "runSlides()" function right before it sets up another timeout.
Clicking on the big "CLICK ME" button might still do weird things.
edit — well here is my fork of the original jsfiddle and I think it's doing the right thing. In addition to calling "clearTimeout()" properly, I also changed the code in "doSlideshow()" so that it empties out the content <div> before adding another image.
I'm trying to create function that will do this same thing for 3 different classes. The only problem is that every time when I hove over any of the divs it affect all the others instead just one.
Could anyone advice me please how can I make it work separately for each class on hover stage:
$(document).ready(function() {
$(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
$(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
}, function () {
$(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
});
});
Thank you for your help in advance.
Dom
If the divs have only one kind of subclass each, then it's pretty simple:
$(document).ready(function() {
$(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
$(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
}, function () {
$(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
});
});
If they have multiple subclasses, you'll have to first check which class the current div belongs to and build the selector based on it.