Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    HELP!!! problems jquery caption slider in IE

    Hi I'm attempting to achieve a hover overlay effect, listing objects elements using a basic div ul li a img, and I simply want a black overlay with some white text caption to slide in, when hovering over a specific image.

    So far I've got the JQuery and CSS caption sliders functionality to behave correctly in modern browsers and even IE8 along with previous versions, but I can't seem to get the caption integrated to function correctly for IE9. The text caption overlay partially shows (as intended), but does not slide up on a hover event.

    Heres a JSFiddle example of how it works correctly in the modern browsers:

    http://jsfiddle.net/RossB/THS2J/

    Can Anybody please shed some light on on any tricks i'm missing?

    Here is section of my HTML code:

    Code:
    <ul>
    <div class="featurebox holder">
         <li><img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/Puffins.jpg" alt="events" /></li>
         <div class="cover featuretext">
            <h3 class="date">Day 24th Month</h3>
            <p>Lorem ipsum dolor sit amet,
            consectetur asipisicing elit, sed do
            eiusmod tempor incididunt...<a href="http://webpage.net/events/" target="_BLANK">Read More></a></p>
          </div>
    </div>
    </ul>​

    Here is the CSS:

    Code:
    .featurebox h3{ 
            color:#ffffff;
            margin-top:0px; 
            margin-bottom:0px; 
            padding-left:5px; 
            font:11pt;  
            font-weight: bold;  
        }
    
    .featurebox{ 
            color:#ffffff;
            width: 185px; 
            height: 118px;  
            float:left; 
            /*border: solid 2px #8399AF;*/ 
            overflow: hidden;
            position: relative; 
        }
    
    
    /*caption para text*/               
    .featurebox p{ 
            margin-top:0px;
            padding-left: 5px; 
            padding-right:5px; 
        }
    
    /*caption slider */             
    .featuretext{ 
            top:99px;
            float: left; 
            position: absolute; 
            background: #000; 
            height: 100px; 
            width: 100%; 
            opacity: .8; 
            /* For IE 5-7 */
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
            /* For IE 8 */
            -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        }
    
    
    
    .holder .featuretext {
            top: 220;
            left: 0;
        }
    
    .featurebox p a  {
            float: right;
            color:#FFFF00;
        }​

    And finally the JQuery:

    Code:
    $(document).ready(function(){   
    //Caption Sliding (Partially Hidden to Visible)
        $('.featurebox.holder').hover(function(){
        $(".cover", this).stop().animate({top:'32px'},{queue:false,duration:160});
        }, function() {
            $(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160});
        });
    });
    Any help with this would be much appreciated. Thanks guys.
    Last edited by RossBryan; 10-24-2012 at 05:05 AM.


 

Posting Permissions

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