SitePoint Sponsor

User Tag List

Page 4 of 4 FirstFirst 1234
Results 76 to 96 of 96

Thread: Cycle EaseIn

  1. #76
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I've decided against the flip on silhouette.
    OK, so flip is out for good.

    Let's get a firm grip on what you want. I'm not saying I can get you there but it may help someone else understand your objective. Here's how I see it:

    Your page content is contained within a number of divs nested in a div with the ID #content. I'll call these "content divs".

    Clicking a menu item triggers hiding the current content div and revealing another.

    What you're aiming to do in this thread is to combine triggering switching between content divs with switching an image contained in the div #silhouette to another image. In short, when a content div is switched, the image switches too, and each image will be associated with a specific div rather than displayed at random or fixed sequence.

    It might behave like this, for example:

    • The page loads and shows the #ThreeDMot content div. #silhouette shows an image of a chair.
    • Clicking "Services", hides #ThreeDMot and reveals #Serv. The image of a chair is replaced with an image of a truck.

    The image switching should use jQuery Easing Plugin methods (more on this below).

    Notes on existing code

    References to jquery.flip.js and jquery.flip.min.js plugins need to be removed.

    A couple of points re Cycle.
    1. Cycle may not be the right approach for this.
    2. The easing methods you currently have in place (bounceout and backin) are used by Cycle with the 1.1.1 version of the Easing plugin. Are you sure that Cycle's easing options work with Easing 1.3, which you currently have in your page?

  2. #77
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let's get a firm grip on what you want. I'm not saying I can get you there but it may help someone else understand your objective. Here's how I see it:

    Your page content is contained within a number of divs nested in a div with the ID #content. I'll call these "content divs".

    Clicking a menu item triggers hiding the current content div and revealing another.

    What you're aiming to do in this thread is to combine triggering switching between content divs with switching an image contained in the div #silhouette to another image. In short, when a content div is switched, the image switches too, and each image will be associated with a specific div rather than displayed at random or fixed sequence.

    It might behave like this, for example:

    * The page loads and shows the #ThreeDMot content div. #silhouette shows an image of a chair.
    * Clicking "Services", hides #ThreeDMot and reveals #Serv. The image of a chair is replaced with an image of a truck.
    Correct, that sums it up
    References to jquery.flip.js and jquery.flip.min.js plugins need to be removed.
    They can't be removed, they will be used to flip the #content Divs.
    1. Cycle may not be the right approach for this.
    It was the closest thing, I could find that had the exact effect I wanted. The reason why I dumped flip for silhouette and I'm going to explain this the best I can, looking at a web page as a flat canvas you couldn't flip a piece of cardboard in which another piece of cardboard was ontop of, but you could slide a piece of cardboard up and down another piece of cardboard, it's a simple concept just hope it made sense
    2. The easing methods you currently have in place (bounceout and backin) are used by Cycle with the 1.1.1 version of the Easing plugin. Are you sure that Cycle's easing options work with Easing 1.3, which you currently have in your page?
    Not sure, good question !

  3. #78
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Correct, that sums it up
    Quote Originally Posted by Victorinox View Post
    References to jquery.flip.js and jquery.flip.min.js plugins need to be removed.
    They can't be removed, they will be used to flip the #content Divs.
    I don't see how flipping a div is any different from flipping an image. And some of your divs will contain images. I'll be very surprised if flipping makes the cut.

  4. #79
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Flip will flip the content Divs, with all the content on the DIVS

  5. #80
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Here's an example of combined div and image switching. Try it on your server.

    It links to the Google hosted jQuery 1.5 and requires jquery.easing.1.3.js to be in the same directory as the HTML document (same as currently on your page).

    As on your page, there are a number of content divs within a div with the ID #content. The divs have the IDs #one, #two and #three.

    A .zip file containing the HTML file (sh-test.html), the Easing plugin, and three images is attached. The folder named "img" should be in the same directory as test.html.

    So you'll end up with this on your server:

    /construction/jquery.easing.1.3.js
    /construction/sh-test.html
    /construction/img/one.jpg
    /construction/img/two.jpg
    /construction/img/three.jpg

    All Code
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     
    	<title>untitled</title>
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery.easing.1.3.js"></script>
    <script type="text/javascript">
     
    jQuery(function ($) 
    {
    	$('#nav').each(function()
    	{
    		$('a', this).click(function() 
    		{
    			if (this.hash) 
    			{
    				$('#content').children().hide();
    				$(this.hash).show();
    				var pic = $('.pic',this.hash).html();
    				$("#pic-container").animate(
    					{height:'hide'},
    					{duration: 1000, easing: 'easeInBounce'});
    				setTimeout(function () 
    				{
    					$("#pic-container").html(pic).animate(
    						{height: 'show'},
    						{duration: 1500, easing: 'easeOutBounce'});
    					}, 1200);
    				return false;
    			}
    		});
    		$('a:eq(1)', this).click();
    	});
    });
     
    </script> 
    <style type="text/css" media="screen">
    	div {padding:0;margin:0;}
    	#content {float:left;}
    	#one, #two, #three {width:500px;height:300px;padding:10px;}
    	#one {background:#F35334;}
    	#two {background:green;color:yellow;}
    	#three {background:blue;color:white;}
    	#pic-container {width:150px;height:250px;float:left;}
    	.pic {display:none;}
    </style>
     
    </head>
     
    <body>
     
    <ul id="nav"><li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li> </ul> 
     
    <div id="content">
     
    <div id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <div class="pic"><img src="img/one.jpg" alt="one" width="150" height="250" /></div>
    </div>
     
    <div id="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <div class="pic"><img src="img/two.jpg" alt="two" width="150" height="250" /></div>
    </div>
     
    <div id="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <div class="pic"><img src="img/three.jpg" alt="three" width="150" height="250" /></div>
    </div>
     
    </div>
    <div id="pic-container"></div>
    </body>
    </html>
    How it works

    Each div contains a nested div with the class .pic, which contains the image associated with that div. Neat and tidy. Note that .pic is set to display:none; so that the images reside in the content div but do not display there.

    Outside #content there is an empty div with the ID #pic-container.

    When a menu item is clicked, the content div is switched, the html (i.e. the img) of the .pic div in the newly revealed content div is set as a var (pic) and #pic-container is animated into hiding with a duration of 1000ms.

    There is a Timeout set to 1200ms (200ms longer than the above animation duration) and then the html in #pic-container is replaced by the var (pic), and #pic-container animates into view again.

    The easing is not exactly what you requested, so if you want something different you'll need to play around or seek help from cleverer people than I.

    The jQuery code is based on that from your page combined with Paul's example from earlier in the thread. To modify it for your page, change the jquery selectors from #pic-container to #silhouette and place an img element in a .pic div in each of your content divs. You'll also need to use jQuery 1.5. Of the CSS in test.html only the .pic {display:none;} should be needed.

    JS/jQuery isn't my area, so there may be slicker ways of doing what you want, but hopefully this will provide a leg up.
    Attached Files Attached Files

  6. #81
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't applied the images, as I'm awaiting approval for the zip file. It is in the right direction, I want to see it complete (with images) The bounce effect would need adjustment as you mentioned
    Then I want to proceed to put this on my site, but adjust the jQuery.

    Is there a difference with jQuery 1.5 does it make a difference from 1.4.2 which is what I've got on my server ?

  7. #82
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is perfect, Victor. I wonder what modifications could be done to the script, update soon.

  8. #83
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Victor, I have translated the code into my page but I've done something wrong.

  9. #84
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed the wrong file..arrrghhh (ignore the previous post until I fixed the problem)

  10. #85
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look Victor The link from message #83 !

  11. #86
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You done good!

  12. #87
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx There isn't anything if at all that I wanted changed in regards to the script. What the two options within the script do ?

  13. #88
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd like to update this thread with hopefully a simple change to the script. That change being I'd like if the EaseIn/BounceIn effect does not occur on the Div#Intro, I don't want anything to be visible on and only on that specific ID.

  14. #89
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If you remove the background colour from #silhouette then, with no .pic div in the #Intro div, nothing will show there.

    Otherwise, you could ask for help in making the animation conditional upon the current content div containing an element with the class .pic.

  15. #90
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed the background but the script does not run on some of the nested DIV within #content, therefore I decided to go with a condition. A condition whereas if ID#Intro is triggered, Cycle/BounceOut doesn't go

    Edit: I probably have to wrap this around the function where #silhouette is.

    Code JavaScript:
    if 
       {}

  16. #91
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Try this.

    The conditional encompasses the setTimeout, so that the #silhouette pic from the previous div animates out.

    If there is no .pic div in the content div that is being made visible, or the .pic div is empty, then the "show" animation is not run.

    #silhouette must still not have a background color set, or you will see an empty block of color when no image is present, which I assume you don't want. I'm not sure what you mean by "the script does not run on some of the nested DIV within #content". If you want those divs to be accompanied by an image in #silhouette then include a .pic div and image within them. If you don't, then either don't add a .pic div or leave it empty.

    A var for the #silhouette element has been added.

    As #Intro is presumably the entry page for the site, the eq at the end of the script has been set to "0" for this.


    Code JavaScript:
    jQuery(function ($) 
    {
    	$("#nav").each(function()
    	{
    		$("a", this).click(function() 
    		{
    			if (this.hash) 
    			{
    				$("#content").children().hide();
    				$(this.hash).show();
    				var pic = $(".pic",this.hash).html();
    				var sil = $("#silhouette");
    				sil.animate(
    					{height:"hide"},
    					{duration: 1000, easing: "easeInBounce"});
    					if (pic) { 
    				setTimeout(function () 
    				{
    					sil.html(pic).animate(
    						{height: "show"},
    						{duration: 1500, easing: "easeOutBounce"});
    					}, 1200);
    				}
    				return false;  
    			}
    		});
    		$("a:eq(0)", this).click();
    	});
    });

  17. #92
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no BounceOut on ID#Services & ID#Contact.

    As #Intro is presumably the entry page for the site, the eq at the end of the script has been set to "0" for this.
    Correct !

  18. #93
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    There is no BounceOut on ID#Services & ID#Contact.
    If coming to #Serv (there is no #Services) or #Contact from a "page" that displays an image in #silhouette then that image animates out of view.

    If moving between those two "pages" then there's no image and no animation in #silhouette because those divs contain no .pic div with an image to show.

    If moving from one of those two "pages" to a page that does have a .pic div with an image, then that image will animate into view.

    If this is not what you want then, instead of simply describing the current behaviour, please explain exactly what you do want.

  19. #94
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Reason why I brought it up is because formally all the #ID within #content were showing an image from silhouette, that could have been from the former script, I'm not sure. What change did you do to the script, I've been analyzing !

  20. #95
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    j
    Code JavaScript:
    Query(function ($) 
    {
        $("#nav").each(function()
        {
            $("a", this).click(function() 
            {
                if (this.hash) 
                {
                    $("#content").children().hide();
                    $(this.hash).show();
                    var pic = $(".pic",this.hash).html();
    // added var sil
                    var sil = $("#silhouette");
    // sil used instead of $("#silhouette")
                    sil.animate(
                        {height:"hide"},
                        {duration: 1000, easing: "easeInBounce"});
    // added if statement to make the image show if the pic variable is present
                        if (pic) { 
                    setTimeout(function () 
                    {
    // sil again
                        sil.html(pic).animate(
                            {height: "show"},
                            {duration: 1500, easing: "easeOutBounce"});
                        }, 1200);
    // if statement closing bracket
                    }
                    return false;  
                }
            });
            $("a:eq(0)", this).click();
        });
    });

  21. #96
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was helpful to understand, thanx


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
  •