SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery hover flicker problem with IE 7/8

    Hi all,

    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:-

    Code:
    	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 (see the red block of code), 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,

  2. #2
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone at all?

  3. #3
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    p.s. here is my markup:

    Code:
    <div id="postId<?echo$post->ID;?>" class="postContainer">
    							<!-- Post Preview canvas -->
    								<div id="previewId<?echo$post->ID;?>" class='postPreview'>
    									<!-- Post preview Title -->
    									<div class="previewTitle">
    										<?
    											$thetitle = $post->post_title; //Get post title
    											$getlength = strlen($thetitle);
    											$thelength = 35;//Set max title length
    											echo substr($thetitle, 0, $thelength); //Output title
    											if ($getlength > $thelength)
    											{
    												echo "..."; //Output trailing dots
    											}	
    										?>
    									</div>
    									<!-- Post preview Body -->
    									<div class="previewBody">
    										<?wp_trim_excerpt(the_excerpt());?>
    									</div>
    								</div>
    								<a href="<?echo the_permalink();?>"> 
    									<?the_post_thumbnail(); ?>
    								</a>
    							</div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •