SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need some advice

    On my home page, I have a video area. I have a Jquery script that adds a curtain overlay to the video and then draws the curtains open to reveal the video behind it. It works fine in Firefox, but not in IE or Safari, not sure about other browsers. Can someone help me fix this so it works in those browsers please?


    http://billboardfamily.com/?theme=DeepFocus

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Which script handles that effect?

  3. #3
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the script:

    Code:
    <script type="text/javascript" src="http://billboardfamily.com/wp-content/themes/DeepFocus/js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8">
    	$(document).ready(function(){
              $('.content').show().find('object').append('<param name="wmode" value="transparent" />').find('embed').attr({wmode: 'transparent'});
             $('.content object').hide().show();
    
             // when user clicks inside the container...
             $('.curtain_wrapper').click(function(){
                
                //..animate the description div by changing it's left position to it's width (but as negative number)...
                $(this).children('.description').animate({'left': -1*$(this).width()});
                //...animate the 2 curtain images to width of 50px with duration of 2 seconds...
                $(this).children('img.curtain').animate({ width: 104 },{duration: 2000}, function(){
                $(this).children('.content').fadeIn(2000);
                });   
                
             });
             
          });
    $(function () {
       $('a[title="Free hit counters"]').hide();
    }); 
    $(function () {
       $('a[title="View stats"]').hide();
    });
    	</script>

    and the HTML

    Code:
    <!--START THE WRAPPER--> 
    <div class='curtain_wrapper'>
    
    	<!-- 2 CURTAIN IMAGES START HERE  -->
    	<img class='curtain curtainLeft' src='images/curtainLeft.jpg' />
        <img class='curtain curtainRight' src='images/curtainRight.jpg' />
        <!-- END IMAGES -->
    
        <!-- START THE CONTENT DIV --> 	
    	<div class='content'>
    		<!-- YOUR CONTENT HERE -->
    	<div id="main-video" style="text-align:center;">
    <?php echo do_shortcode('[youtubefeed limit="1" height="447" width="750"]'); ?>
    	</div>
    
            <!-- END YOUR CONTENT -->
        </div></div>
        <!-- END THE CONTENT DIV -->
    
    <!-- START DESCRIPTION DIV, WHICH WILL BE SHOWN ON TOP OF THE CURTAIN AND REMOVED WHEN THE CURTAINS OPEN -->
        <div class='description'>
        	Click anywhere to reveal
        </div>
        <!-- END DESCRIPTION DIV -->
        
    </div>
    <!--END THE WRAPPER-->


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
  •