Hovering over <a> and displaying images based on value - javascript

I am currently displaying pictures when an tag is hover over. I have been able to workout the main problem of displaying the picture. The problem is that it has a glitch when hovering occurs quickly. Is there away to avoid that? Also how can i set a default image to display when page is loaded? JSFIDDLE
HTML
<div id="links">
Cheeseburger »
Tacos »
Salads »
Bread Sticks »
Dessert »
</div>
Jquery
$("div#links > a").hover(
function(){
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
var ID = $(this).data("content");
$("div#images").children("img#" + ID).hide();
}
);​
Glitch

The problem is that it has a glitch when hovering occurs quickly. Is
there away to avoid that?
This is not a glitch. fadeIn is using animation. As you are hovering over the links faster than the animations complete your experiencing that "glitch".
To ensure you are not clashing with the previous running animation you have to stop any current and any queued animation.
Replace
$("div#images").children("img#" + ID).fadeIn("slow");
with
$("div#images").children("img#" + ID).stop(true, true).fadeIn("slow");
DEMO - Clearing the animation queue before starting the next one
how can i set a default image to display when page is loaded?
I added the code to show a default image as well. To prevent any odd visuals when hovering over a menu item the first time when using a default image. The code checks if we are showing a default image and if we are it will further check if the image for the current menu is the default image.
If it is, it won't hide it as it is showing it anyway but if it is not, it will ide the default image before fading in the new one.
Hope this makes sense, see the full code and DEMO below.
// Indicates if default image is shown
var showingDefaultImage = true;
var $images = $("div#images");
var $defaultImage = $images.children("img#tacos");
// Display a default image
$defaultImage.show();
$("div#links > a").hover(
function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
if (showingDefaultImage) {
showingDefaultImage = false;
if (!$image.is($defaultImage)) {
$defaultImage.hide();
}
}
$image.stop(true, true).fadeIn("slow");
}, function() {
$images.children().hide();
});​
DEMO - Showing a default image
The code in the above DEMO is also a little more optimized by caching the selectors.
would it be possible to leave up the most recent image from the last
hovered tag ?(instead of hiding the image and leaving a blank)
If I understood you correctly you don't want to hide the image when you leave menu with your mouse but instead want to leave the image of the menu you last hovered over visible.
To do that you remove the second function of the hover and as it is no longer needed you can now attach the mouseenter event instead.
var $images = $("div#images");
var $currentImage = $images.children("img#tacos");
$currentImage .show();
$("div#links > a").mouseenter(function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
if (!$image.is($currentImage)) {
$currentImage.hide();
}
$currentImage = $image;
$image.stop(true, true).fadeIn("slow");
});
DEMO - Fading in images on mouseenter and leaving last image visible
The above code includes caching of selectors for optimisation and the logic to ensure no "flickering" occurs when the new hovered menu item is the same as the last one which was hovered.

See http://jsfiddle.net/7Wp9z/7/
As François Wahl said, use stop to stop the animations. But instead of using data-content and IDs, I think that you could use index:
HTML:
<div id="links">
Cheeseburger »
Tacos »
Salads »
Bread Sticks »
Dessert »
</div>
<div id="images">
<img src="http://media.smashingmagazine.com/wp-content/uploads/images/brand-ux/cb.jpg">
<img src="http://adventuresoflittlemiss.files.wordpress.com/2012/07/tacos.jpg">
<img src="http://www.growingappetite.com/wp-content/uploads/2011/05/chicken-salad1.jpg">
<img src="http://afflictor.com/wp-content/uploads/2010/10/breadsticks1.jpg">
<img src="http://1.bp.blogspot.com/-IaURSrV70LI/T4YzPubl9EI/AAAAAAAAGSg/AEdd-eLuJUk/s1600/Cooking+Weekly.jpg">
</div>
JavaScript:
$("div#links > a").hover(
function(){
$("#images>img")
.hide()
.stop(true,true)
.eq($(this).index()).fadeIn("slow");
},
function() {
$("#images>img").hide();
}
);

Have you tried not specifying which children should hide on the mouse-out portion?
$("div#links > a").hover(
function(){
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
$("div#images").children().hide();
}
);​

The glitch probably occurs because the image isn't loaded yet, you should look up some preloading technique. You will always have to wait for the relevant images to be loaded though before you can show them.
But you could enhance the user experience by either indicating that the images are getting loaded or by simply not activating the hovering effect until the images are loaded.
I'd probably go with the last case since I'm lazy but thats just me.
A simple preloading technique is to declare several id's with different background images and then changing the id dynamically using javascript and thus showing the image.
$("#id-of-element").attr('id','preloaded-bg-div');

Related

Showing a div when an image in a slider is active

I am working with a plugin image slider and am attempting to show specific text that will be associated with image. For instance, image 1 will show paragraph 1, image 2 will show paragraph 2, etc.
I was going to upload a snippet showing what I am doing, but the plugin code was too much. Therefore, here is a jsfiddle link that shows what I am doing. The main code in question is at the bottom of the javascript and the text that I want to show is at the bottom of the html. This code:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('#slide-1');
var activeSlide = $('.slide--active') == true;
if(court == activeSlide) {
court.show();
console.log('It is working');
}
});
I have the text set at display: none; on page load and then when the specific image is displaying (I believe I narrowed this down to the class .slide--active), that text set to show().
Does anyone see what I am doing wrong?
This is because you are not targeting the right active class when each slide takes turn to slide in, I have amended your code below:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('.slide');
var activeSlideClassName = 'slide--active';
setInterval(function(){
if(court.hasClass(activeSlideClassName)){
console.log('It is working');
}
}, 1000);
});
Also your slide will need to have a callback function to capture the event whenever the new slide comes in. In this case I have used setInterval() to monitor the DOM, it isn't the best solution but you get the idea....
Working code here
you can check it $('.ma5slider').on('ma5.activeSlide') same as below :
jsfiddle

Image presentation using an accordion menu

I have a menu like this:
<ul class="leve1">
<li>
<div class="some">
image1
image2
image3
...
</div>
</li>
...
</ul>
and I also have a div in another location in my html
<div id="dest"></div>
I want to click in the link and make the image appear in the div. I've tried some codelines like
$(document).ready(function () {
$("div.some a").click(function (event) {
event.preventDefault();
$("div#dest").html($("<img>").attr("src", this.href).fadeIn(1000));
});
});
but it doesn't do anything. The div remains blank.
I've searched these forums but couldn't find an adequate answer.
Update
I also have some javascript to make the above menu a colapsing one. Can these intructions (hide, show and toggle - a bunch of them!) be colliding with this code???
Your calling fadeIn right after adding the image : what if the image takes too much time to load ? It gets displayed in the middle of the fade or after the fade is over : jsfiddle.net/Xt5La/
You can use a load handler on images, see this fiddle : jsfiddle.net/UNqJh/.
var img = new Image();
img.onload = loaded;
img.src = url;
function loaded() { // load handler }
On a sidenote it could also help to see if image is actually loaded.
But simpler is, what does your console say ? Is the image added to the DOM ?

Stuck: hide/show divs with next button, redirect last div

Here's what I have so far, which allows the user to click an image to open a new window and go to a location. When that click occurs, the image in the parent window is replaced with the next div.
Example: http://jsfiddle.net/rzTHw/
Here's the working code so far...
<div class = "box"><img src="http://placehold.it/300x150/cf5/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/f0f/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/fb1/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/444/&text=img+1"></div>​
Jquery:
$('.box').not(':first').hide();
$('.box a').click(
function(e){
e.preventDefault();
var newWin = window.open(this.href,'newWindow'),
that = $(this).closest('.box'),
duration = 1200;
if (that.next('.box').length){
that.fadeOut(duration,
function(){
that.next('.box').fadeIn(duration);
});
}
});
What I am having trouble with is:
Creating a "next" button so the user can cycle through to the next div without having the click the image, thus avoiding having to open a new window to get to the next image.
Having a click on the last div redirect the window location to a URL, while still doing the normal function of opening a new window to the a href location if the image is clicked. Otherwise if clicking the "next" button when the last div is shown, simply redirect the user.
What's the best way to go about this? Thanks!
Here is my attempt at tweaking your code to allow for a next button, and my best guess at what you want to happen for the last image:
var redirectUrl = 'http://www.google.com'; // replace in your code
function next(event, duration) {
duration = duration || 1200; // default value
var that = $('.box:visible');
if (that.next('.box').length) {
that.fadeOut(duration, function() {
that.next('.box').fadeIn(duration);
});
} else {
window.location.href = redirectUrl;
// the above line doesn't work inside jsFiddle, but should on your page
}
return false;
}
$('.box').not(':first').hide();
$('.box a').click(
function(e) {
e.preventDefault();
var newWin = window.open(this.href, 'newWindow'),
duration = 1200;
next(e, duration);
});
$('.next').click(next);
jsFiddle example here. Note the redirect is prevented in some browsers since it is running inside an iframe. But it should work in a normal page.
Perhaps look at a slideshow jquery plugin. JQuery Cycle being just one example. There are plenty. Just google jquery Slideshow or jquery cycle and pick the one that suites you best. The cycle plugin itself has a number of "pager" examples that let you change the contents of the displayed picture without leaving the page.
Most of them offer having the contents be html and not just a simple picture so you can play around with what exactly you want.
There's also Fancybox, lightbox, colorbox, etc. if that's what you're trying to accomplish.

jQuery: Why is by box collapsing on first click

The homepage of our website (legendboats.com) is 4 small cells, that if you click on, the large image changes. Pretty standard stuff, but there is a problem.
When you click on one of them the first time, the large area collapses before the new image reappears. This doesn't happen again, you can continue to click on different images, and they will fade in and out properly. Here is the code I'm using:
$('.home_boxes a.content_box').on('click', function(e) {
e.preventDefault();
var new_slide = this.hash;
$('#home_box div.active').fadeOut(function() {
$('#home_box ' + new_slide).fadeIn().addClass('active');
}).removeClass('active');
});
Any ideas on what I'm doing wrong, or any improvements?
It collapses because you're removing the class="active".
The reason it doesn't collapse after the first time is because jQuery is adding an inline style "display:block" which overrides the missing class="active".
Initially:
<div id="standard_equipment" class="active">
Subsequently:
<div id="more_power" style="display: block;" class="active">
Well I don't know why it happens, but I can see the symptoms. For some reason on first click the content collapses. This causes the odd flashing. If you set a min-height on home_box it sorts it out.
#home_box { min-height: 482px; }
Try doing this way
$('.home_boxes a.content_box').on('click', function(e) {
e.preventDefault();
var new_slide = this.hash;
$('#home_box div.active').fadeOut(function() {
var parent = this;
$('#home_box ' + new_slide).fadeIn(function(){
//You can shuffle following two lines and try
$(parent).removeClass('active');
$(this).addClass('active');
});
});
});
Hope this works you.

jQuery blinking mouseOver issue

I have a image that has a caption displayed on it. The caption floats over the image and is displayed at the bottom.
I have a jQuery event that when you rollover the image, it displays the caption. Like so:
function showCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeIn('200');
}
And when you roll out:
function hideCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeOut('200');
}
However, when you rollover the caption, it thinks that you have rolled out of the image and fades out. Is there anyway to fix this?
Here's a link: Example
Thanks, Coulton
I took a look at your JS but I couldn't find what triggers the display of the caption - you should be binding the event to the parent div of the image, that way it won't fade out. If it is currently bound to just the image, that's your problem. P.S - it always helps to include a code example.
Here is a fiddle that shows an example of how you could do it. It simply calls stop on the caption element when the mouse enters that element:
$("#caption").mouseover(function() {
$(this).stop();
});
The stop function cancels any animation that is running on the selected element (in this case, the caption element).

Categories

Resources