homepage Welcome to WebmasterWorld Guest from 107.22.70.215
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery hover flicker bug with IE 7/8
mattacuk




msg:4457468
 4:59 pm on May 24, 2012 (gmt 0)

As per the thread title, I am having a small problem with IE 7/8 where by when you hover over a thumbnail, it flickers. My code is as follows:-


var intMenuFadeIn = 500;
var intMenuFadeOut = 100;

//Post Thumbnails
var intThumbActiveOp = 0.1;
var intThumbInActiveOp = 1.0;
var intFadeTime = 450;
var strThumbClass = ".attachment-post-thumbnail";



function activateThumbnails(intThumbActiveOp, intThumbInActiveOp, intFadeTime, strThumbClass)
{
//Hide image title
jQuery("a " + strThumbClass).attr('title', '');

//Bind effect to post thumbnails..
jQuery(window).bind("load", function() {
var activeOpacity = intThumbActiveOp,
inactiveOpacity = intThumbInActiveOp,
fadeTime = intFadeTime,
clickedClass = "selected",
thumbs = strThumbClass;

jQuery(thumbs).fadeTo(1, inactiveOpacity);

//Animate thumbnail on hover event..
jQuery(thumbs).hover(
function(){
//Fade into thumbnail..
jQuery(this).fadeTo(fadeTime, activeOpacity, function(){
//Display Preview Body once faded in
intId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
jQuery('#previewId' + intId.substr(6)).show();
});
},
function(){
// Only fade out if the user hasn't clicked the thumb
if(!jQuery(this).hasClass(clickedClass))
{
//Fade out of thumbnail..
jQuery(this).fadeTo(fadeTime, inactiveOpacity, function(){
//Hide Preview Body once faded out
intId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
jQuery('#previewId' + intId.substr(6)).hide();
});
}
});

jQuery(thumbs).click(function() {
// Remove selected class from any elements other than this
var previous = jQuery(thumbs + '.' + clickedClass).eq();
var clicked = jQuery(this);
if(clicked !== previous)
{
previous.removeClass(clickedClass);
}
clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
});
});
}


Please note I am laying some preview text over the hover images , and it is when the cursor is over the preview text (not the image itself) that you get the flicker in IE 7/8 only. This is illustrated by the fact the issue does not happen if there is no textual overlay.

Any help would be really much appreciated as I am on a tight deadline


Kind regards and thanks,


p.s here is my markup:

<div id="postId" class="postContainer">
<!-- Post Preview canvas -->
<div id="previewId" class='postPreview'>
<!-- Post preview Title -->
<div class="previewTitle">
some title
</div>
<!-- Post preview Body -->
<div class="previewBody">
some text body
</div>
</div>
<a href="#" class="attachment-post-thumbnail">
some thumbnail
</a>
</div>

 

mattacuk




msg:4457469
 4:59 pm on May 24, 2012 (gmt 0)

p.s sorry I dont know where my indendation went *blushes*

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved