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 6 of 6
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question

    hi,

    I seem to have a problem with my header fader: http://www.jbiddulph.com/mrh/the-team.html it's ok teh first time round but when it fades onto next image the text block moves to the top?!

    Please help



    JQuery
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
        $('.slideshow').cycle({
    		timeout: 2000, // How long slide is displayed
    		speed: 1000, // How fast the transition is
    		fx: 'fade', // Transition effect
    		prev: '#prev',
    		next: '#next'
    	});		
    });
    </script>
    HTML
    Code:
    <div id="banneroverlay">
    	<div class="overlayimage">
    		<img src="images/overlay.png"  height="423"  alt="overlay" />
    	</div>
    	<ul class="slideshow">
    		<li><a href="#"><img src="images/banner6.jpg" alt="banner3" /><div class="bannertext1">A TRULY UNIQUE AND EXCITING ENTERTAINING COMPANY</div></a></li>
    		<li><a href="#"><img src="images/banner6.jpg" alt="banner3" /><div class="bannertext1">A TRULY UNIQUE AND EXCITING ENTERTAINING COMPANY</div></a></li>
    	</ul>
    	<a id="prev" class="preveventstop" href="#">&lt;</a>
    	<a id="next" class="nexteventstop" href="#">&gt;</a>
    </div>
    CSS
    Code:
    #banneroverlay > a {display: none;}
    #banneroverlay:hover > a {display: block;}
    #banneroverlay { margin: 0px auto; width:1000px; height:520px; background-color: #666666; margin-top: 9px; position: relative; }
    #banneroverlay .overlayimage {  position: absolute; top:0px; left:0px;	 z-index: 100; }
    #banneroverlay .slideshow  { height:520px!important; position:relative; }
    #banneroverlay .slideshow .bannertext { background-color: #000000; width:1000px; height:32px; position: absolute; bottom:0px; left:0px; padding:36px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; color: #ff8838; font-size: 32px; margin:0px; margin-bottom:7px; }
    #banneroverlay .slideshow .bannertext1 { background-color: #000000;width:1000px;height:32px; position: absolute; bottom:0px; left:0px; padding:36px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; color: #ff8838; font-size: 32px; margin:0px; margin-bottom:0px; }
    Last edited by VIPStephan; 02-17-2013 at 09:33 PM. Reason: double posting

  • #2
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    hi, can anyone please help me out here?

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    FireFox ver 18.0.2 here. Went to site. Did not see what you show. Site looks good.

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Position it correctly.

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    sorry, I forgot to say.. it happens in Safari

  • #6
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    I have position relative and position absolute on he divs


  •  

    Posting Permissions

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