SitePoint Sponsor

User Tag List

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

    Small issues with Jquery

    On this page

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

    there is a video area that has a red curtain that opens up with Jquery to reveal the video. The issue I am having is that the video is appearing too soon, before the curtains open all the way, so it does not look right. I have tried adjusting the timing, but there is no change. Does anyone have any ideas?

    I can provide any source code needed, just ask


    Thanks!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Have you tried using window.setTimeout() so that the code doesn't execute until the curtain animation finished?

  3. #3
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Have you tried using window.setTimeout() so that the code doesn't execute until the curtain animation finished?

    No, I haven't. I have exactly zero experience with Javascript & Jquery...so I really am flying blind on this one.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Its pretty simple to use bud, all you need is the below and then all you need to do is add in your code to process the video where the comment is.

    Code JavaScript:
    setTimeout(function() {
        // Normal javascript/jQuery code here
    }, 500);

    NOTE: Make sure to change 500 to the delay time (in milliseconds) so it shows the video after your curtain animation.

  5. #5
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is what I have. Now the video does not ever appear. Hmmm. Am I doing this incorrectly?


    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(){
    			
    			// 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});
    
    setTimeout(function() {
       //...show the content behind the curtains with fadeIn function (2 seconds)
    				$(this).children('.content').fadeIn(2000);
    }, 500);
    				
    				
    			});
    			
    		});
    	</script>

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    window.setTimeout($(this).children('.content').fadeIn(2000), 1000);

  7. #7
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alandy View Post
    window.setTimeout($(this).children('.content').fadeIn(2000), 1000);
    Now the video pops in there, thanks.

    This is so close to working properly. I am trying to get it to open the curtains, the background being black until they are totally opened, then the video fades in. I see where it is coded to fade in, but it is really just popping up all at once, and it starts out white, rather than black...hmmm.

    Thanks for all the help, I think a little more tweaking and we can have this done. Any thoughts?


    If that will not work, maybe just have the contents already appearing where it is supposed to be so when the curtain is drawn, the contents are slowly revealed as the curtain peels away. That would be acceptable if it is simpler.

    Also, I have noticed some real differences between browsers on this issue.

    Thanks!

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh,i've visiten yours website,it's so beautiful!
    if you want to starts out black,you can give this div background color.once the pop up it should be black.of course,you can write the background color in JS,you better use CSS define this div.
    #div{
    backgroud-color:#000;
    }

  9. #9
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do not want it to start out black, if you look at the effect in Firefox, it works great. This does not happen in IE, or Safari, though. I need it to work right in all browsers

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by martinfamily2005 View Post
    I do not want it to start out black, if you look at the effect in Firefox, it works great. This does not happen in IE, or Safari, though. I need it to work right in all browsers
    i've looken your web soure code,if you don't start out black,you should modify the slide div background color;ohhhhhh~~~~

    #slides {
    background:#ffffff none repeat scroll 0 0;
    }

  11. #11
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want the video to show, not a background color, and the curtains reveal the video as they open. It works perfectly in Firefox, if you use that browser


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
  •