Comments on: Building a Robust Side Scrolling Page Effect with Scriptaculous http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/ Thu, 28 Aug 2008 03:19:25 +0000 http://wordpress.org/?v=2.1.2 By: Jay http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-146 Jay Sun, 19 Aug 2007 02:14:26 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-146 hi i enjoyed the read hi i enjoyed the read

]]> By: David Baxter http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-147 David Baxter Mon, 20 Aug 2007 12:52:00 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-147 Hey Jay, thanks a lot! David Hey Jay, thanks a lot!

David

]]> By: HazelNutz http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-154 HazelNutz Wed, 29 Aug 2007 11:21:44 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-154 Great stuff!!! Exactly the solution I was looking for, I'll implement it in my future applications, if it's okay!? I'll, for example, change one of my sites, www.mincv.se, with your solution! Great stuff!!!

Exactly the solution I was looking for, I’ll implement it in my future applications, if it’s okay!?

I’ll, for example, change one of my sites, www.mincv.se, with your solution!

]]> By: David Baxter http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-155 David Baxter Wed, 29 Aug 2007 13:07:08 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-155 Glad you liked it, feel free to use it, just shoot me a link when it is done so I can see it in action. David Glad you liked it, feel free to use it, just shoot me a link when it is done so I can see it in action.

David

]]> By: Gretchen http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-193 Gretchen Tue, 18 Sep 2007 16:58:19 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-193 Really great information! I have been beating my head against the wall for several weeks trying to get a hint on how to get the gridview to scroll smoothly in a div/panel, etc. ALL that I have seen scroll approx. 1 1/2 rows at a time which is totally unacceptable for viewing important data. Where should I look for the answer? Thanks in advance! I use VS2005 and Ajax. Really great information! I have been beating my head against the wall for several weeks trying to get a hint on how to get the gridview to scroll smoothly in a div/panel, etc. ALL that I have seen scroll approx. 1 1/2 rows at a time which is totally unacceptable for viewing important data. Where should I look for the answer? Thanks in advance! I use VS2005 and Ajax.

]]> By: David Baxter http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-194 David Baxter Tue, 18 Sep 2007 17:29:03 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-194 Hey Gretchen, have you tried putting the grid into the solution I provided? There shouldn't be any controls that won't slide around in the "blocks" I setup here, but I could be wrong. Shoot me an email [david @ creativeui . com] with the details and I will do my best to help out. David Hey Gretchen, have you tried putting the grid into the solution I provided? There shouldn’t be any controls that won’t slide around in the “blocks” I setup here, but I could be wrong.

Shoot me an email [david @ creativeui . com] with the details and I will do my best to help out.

David

]]> By: Gretchen http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-195 Gretchen Tue, 18 Sep 2007 18:47:17 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-195 Thanks so much, David, for your reply and generous offer! I need to do a little studying on JavaScript before I make a total fool out of myself, so I will keep your email address and be back to you in a few weeks. Thanks again! Thanks so much, David, for your reply and generous offer! I need to do a little studying on JavaScript before I make a total fool out of myself, so I will keep your email address and be back to you in a few weeks.
Thanks again!

]]> By: tyler http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-210 tyler Mon, 01 Oct 2007 04:54:44 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-210 hm, just wondering...instead of a separate click function for each tab...posible to write a generic single function that computes how much to move the menu/bigbox? prob there is but at 1AM, my mind not quick enuff... :( hm, just wondering…instead of a separate click function for each tab…posible to write a generic single function that computes how much to move the menu/bigbox? prob there is but at 1AM, my mind not quick enuff… :(

]]> By: David Baxter http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-211 David Baxter Mon, 01 Oct 2007 13:22:53 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-211 I would definitely say that there is a way to make that method more generic (i.e. one function). The example has it so that all of the menu items are the exact same size. This makes a generic method easier to implement. In the "real" version I made for a client has several different sizes. Hence why the demo has multiple methods. Hope that helps. David I would definitely say that there is a way to make that method more generic (i.e. one function). The example has it so that all of the menu items are the exact same size. This makes a generic method easier to implement.

In the “real” version I made for a client has several different sizes. Hence why the demo has multiple methods.

Hope that helps.

David

]]> By: tyler http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-212 tyler Tue, 02 Oct 2007 00:29:46 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-212 same here re varying widths...was thinking if you could store the specific widths of each tab in a hash or array, you could in theory make it compute the distance to slide...if i can get off my butt (and learn javascript syntax) i might give it a go same here re varying widths…was thinking if you could store the specific widths of each tab in a hash or array, you could in theory make it compute the distance to slide…if i can get off my butt (and learn javascript syntax) i might give it a go

]]> By: David Baxter http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-213 David Baxter Tue, 02 Oct 2007 11:55:56 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-213 Not a bad idea at all Tyler. Let me know how it works out. David Not a bad idea at all Tyler. Let me know how it works out.

David

]]> By: tyler http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-214 tyler Thu, 04 Oct 2007 13:50:19 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-214 will do... just out of curiousity - have you run into a bug where the overflow: hidden attribute on the scrollbox div breaks on Windows IE and Mozilla? It's weird - on my page, it will break once you start clicking and scrolling and you can see the entire bigbox div. works fine on safari 3.0 beta, and more or less ok in Camino... Tyler will do…

just out of curiousity - have you run into a bug where the overflow: hidden attribute on the scrollbox div breaks on Windows IE and Mozilla? It’s weird - on my page, it will break once you start clicking and scrolling and you can see the entire bigbox div. works fine on safari 3.0 beta, and more or less ok in Camino…

Tyler

]]> By: tyler http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-215 tyler Thu, 04 Oct 2007 13:50:42 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-215 (on your demo and on the panic site, everything works fine...) (on your demo and on the panic site, everything works fine…)

]]> By: rails blog » Blog Archive » [Rails-spinoffs] Re: css overflow:hidden attribute breaking on scriptaculous side scrolling animation? http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-217 rails blog » Blog Archive » [Rails-spinoffs] Re: css overflow:hidden attribute breaking on scriptaculous side scrolling animation? Fri, 05 Oct 2007 00:02:07 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-217 [...] am trying to build a side scrolling animation like the one onpanic.com/coda and on http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculou...(from which I am using a modified code [...] […] am trying to build a side scrolling animation like the one onpanic.com/coda and on http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculou…(from which I am using a modified code […]

]]> By: GSIY … Ruby-Rails Portal http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-218 GSIY … Ruby-Rails Portal Fri, 05 Oct 2007 01:23:28 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-218 [...] am trying to build a side scrolling animation like the one on panic.com/coda and on http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous... (from which I am using a modified code [...] […] am trying to build a side scrolling animation like the one on panic.com/coda and on http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous… (from which I am using a modified code […]

]]> By: GSIY … Ruby-Rails Portal http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-219 GSIY … Ruby-Rails Portal Fri, 05 Oct 2007 01:26:05 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-219 [...] am trying to build a side scrolling animation like the one onpanic.com/coda and on http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculou...(from which I am using a modified code [...] […] am trying to build a side scrolling animation like the one onpanic.com/coda and on http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculou…(from which I am using a modified code […]

]]> By: Nick http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-295 Nick Thu, 01 Nov 2007 21:28:55 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-295 I've created multiple instances of your scrolling pages, you can see the example on my site listed above. All works excellent and grand in Firefox, but when used in IE, only the first instance will work properly. I basically named each variable adding 2,3,4 etc. to the end of the names, then duplicated the javascript and retitled those accordingly. (e.g. MoveLeft2(), MoveLeft3() etc.) Any ideas on why it would break in IE, but work fine in FF? example is at www.nickhand.net/newsite07_end/index.php I’ve created multiple instances of your scrolling pages, you can see the example on my site listed above. All works excellent and grand in Firefox, but when used in IE, only the first instance will work properly. I basically named each variable adding 2,3,4 etc. to the end of the names, then duplicated the javascript and retitled those accordingly. (e.g. MoveLeft2(), MoveLeft3() etc.)

Any ideas on why it would break in IE, but work fine in FF?

example is at www.nickhand.net/newsite07_end/index.php

]]> By: David Baxter http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-296 David Baxter Thu, 01 Nov 2007 21:46:16 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-296 Hey Nick, can you email me your code? David Hey Nick, can you email me your code?

David

]]> By: Nick http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-297 Nick Thu, 01 Nov 2007 21:59:03 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-297 Sent, but the confirmation page appears that my html i sent you may have been rendered and such, sooo if that's the case, shoot me an email and i'll respond w/my code again. Thanks David Nick Sent, but the confirmation page appears that my html i sent you may have been rendered and such, sooo if that’s the case, shoot me an email and i’ll respond w/my code again. Thanks David

Nick

]]> By: steve ofner http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-710 steve ofner Wed, 21 Nov 2007 19:43:36 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-710 would it be possible to add a simple timer to the script so that every 10 secs or so it auto jumps to the next section if no one's clicked? would it be possible to add a simple timer to the script so that every 10 secs or so it auto jumps to the next section if no one’s clicked?

]]> By: David Baxter http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-752 David Baxter Fri, 23 Nov 2007 12:50:40 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-752 Sure, that is definitely possible. If you are using .NET you can use the UpdateTimer contol. In a pure javascript world you can use window.SetInterval to get it done. Hope that helps. David Sure, that is definitely possible. If you are using .NET you can use the UpdateTimer contol. In a pure javascript world you can use window.SetInterval to get it done.

Hope that helps.

David

]]> By: Hazelnutz http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-901 Hazelnutz Wed, 30 Jan 2008 07:42:44 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-901 Hi again David, In my version of your Side Scrolling Page solution I've put an overflow:auto function on a div on page one. It's working well on Windows IE but in Mozilla, when scrolling to page two, part of page one is visible to the left on page two! Any suggestions how to fix it? Hi again David,
In my version of your Side Scrolling Page solution I’ve put an overflow:auto function on a div on page one. It’s working well on Windows IE but in Mozilla, when scrolling to page two, part of page one is visible to the left on page two!
Any suggestions how to fix it?

]]> By: David Baxter http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-902 David Baxter Wed, 30 Jan 2008 13:55:07 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-902 Hey Hazel, my first suggestion would be to start with the CSS I have in my example and make sure that is working for you on both browsers (it should). Once that is working, then start manipulating it one aspect at a time till you get the effect you want. CSS can be a tricky bird, and sometimes the most irrelevant thing can throw off the entire page. Let me know how that works out for you. David Hey Hazel, my first suggestion would be to start with the CSS I have in my example and make sure that is working for you on both browsers (it should).

Once that is working, then start manipulating it one aspect at a time till you get the effect you want.

CSS can be a tricky bird, and sometimes the most irrelevant thing can throw off the entire page.

Let me know how that works out for you.

David

]]> By: Note-Worthy » Side-scroll page effect http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-912 Note-Worthy » Side-scroll page effect Tue, 05 Feb 2008 03:46:17 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-912 [...] Found this script [...] […] Found this script […]

]]> By: Christine http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-937 Christine Sun, 09 Mar 2008 04:20:06 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-937 Hello David, I am working with this script but with double the number of blocks, hoping that this is not too much for the script to handle. So far it's going OK except that I get a horizontal scrolling bar in the browser once I get to block 6 or so. Do you know how I can get rid of this scrollbar? I've just added on the necessary width to the #bigbox in CSS for the additional blocks - do I need to change something in the accordion.js or another file to ward off this browser scrollbar? Thanks for posting this great work, and for any help you can provide with my quandary here... -Christine Hello David,

I am working with this script but with double the number of blocks, hoping that this is not too much for the script to handle. So far it’s going OK except that I get a horizontal scrolling bar in the browser once I get to block 6 or so. Do you know how I can get rid of this scrollbar? I’ve just added on the necessary width to the #bigbox in CSS for the additional blocks - do I need to change something in the accordion.js or another file to ward off this browser scrollbar?

Thanks for posting this great work, and for any help you can provide with my quandary here…

-Christine

]]> By: David Baxter http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-940 David Baxter Mon, 10 Mar 2008 15:14:58 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-940 Hey Christine, glad the tutorial was helpful. I am sure there is some limit to this script, but I would imagine it is pretty large, and beyond what you are talking about. The scrollbar can be hidden with the CSS command overflow:hidden. I would also recommend making your blocks as small as you can in order to prevent the need for a scrollbar at all. You shouldn't ever need to change the javascript files unless you are getting REALLY fancy and wanting to change the behavior of things. Feel free to email me if you need more help. David Hey Christine, glad the tutorial was helpful. I am sure there is some limit to this script, but I would imagine it is pretty large, and beyond what you are talking about.

The scrollbar can be hidden with the CSS command overflow:hidden. I would also recommend making your blocks as small as you can in order to prevent the need for a scrollbar at all.

You shouldn’t ever need to change the javascript files unless you are getting REALLY fancy and wanting to change the behavior of things.

Feel free to email me if you need more help.

David

]]> By: Inishi http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-982 Inishi Mon, 28 Apr 2008 15:50:16 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-982 Hey David, I was looking a similar effect, and your script is by far the most flexible and useful I've found so far. I have a problem though. I'm new to javascript, and what I've learned has been more out of interest than any formal study. I'm trying to add more blocks to the script. While it works perfectly when I add "Page5" to the MoveRight() and MoveLeft() functions, when I add page5 to the ClickPage(1-4)() the whole website stops working. I even made a ClickPage5() which works. But I can't make the ClickPage1-4 take into account Page 5. What is the correct way to add blocks to these functions? Is there a limit to the amount of blocks I can add? Thanks anyways, and sorry for not explaining it better. Inishi Hey David,
I was looking a similar effect, and your script is by far the most flexible and useful I’ve found so far. I have a problem though. I’m new to javascript, and what I’ve learned has been more out of interest than any formal study. I’m trying to add more blocks to the script. While it works perfectly when I add “Page5″ to the MoveRight() and MoveLeft() functions, when I add page5 to the ClickPage(1-4)() the whole website stops working. I even made a ClickPage5() which works. But I can’t make the ClickPage1-4 take into account Page 5. What is the correct way to add blocks to these functions? Is there a limit to the amount of blocks I can add? Thanks anyways, and sorry for not explaining it better.

Inishi

]]> By: David Baxter http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-983 David Baxter Tue, 29 Apr 2008 13:23:00 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-983 Hey Inishi, I am glad the script is working well for you. The current script is built for 4 pages, but there is no reason it can't be made larger. In fact, several people have done quite a few creative things with it so I know it can be upgraded. The key is to get the pixels right. Currently the left and right methods are set to move enough for 4 pages. To add more, you simply need to expand them and tweak the numbers to include more pages. It isn't difficult, but it can be a bit maddening to find out you are 3 pixels off...trial and error is the way I built it. Hope that helps, David Hey Inishi, I am glad the script is working well for you.

The current script is built for 4 pages, but there is no reason it can’t be made larger. In fact, several people have done quite a few creative things with it so I know it can be upgraded.

The key is to get the pixels right. Currently the left and right methods are set to move enough for 4 pages. To add more, you simply need to expand them and tweak the numbers to include more pages. It isn’t difficult, but it can be a bit maddening to find out you are 3 pixels off…trial and error is the way I built it.

Hope that helps,
David

]]> By: Inishi http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-984 Inishi Wed, 30 Apr 2008 20:30:34 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-984 Hey David, Thanks for the info, and I found my error. The clickPage#() didn't work untill I had the page5 condition in all of them. At first I wanted to do small changes and go by sections to check if my changes to your code still worked, so I didn't try to add the page5 condition to all of the clickpage# functions till right now. Seems wine gave me the inspiration. Thanks a lot for a great website. And I specially appreciate the examples and the open code, since I can learn a lot from tweaking it myself. Since I learned html and css on my own, I really enjoy the learning opportunity CreativeUI gives to me to learn more about better interfaces. (Really, making a website in Latin America pays more than being a skilled Barman). Thanks. Inishi. Hey David,
Thanks for the info, and I found my error. The clickPage#() didn’t work untill I had the page5 condition in all of them. At first I wanted to do small changes and go by sections to check if my changes to your code still worked, so I didn’t try to add the page5 condition to all of the clickpage# functions till right now. Seems wine gave me the inspiration. Thanks a lot for a great website. And I specially appreciate the examples and the open code, since I can learn a lot from tweaking it myself. Since I learned html and css on my own, I really enjoy the learning opportunity CreativeUI gives to me to learn more about better interfaces. (Really, making a website in Latin America pays more than being a skilled Barman). Thanks.
Inishi.

]]> By: ♥ techyPink! http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-1042 ♥ techyPink! Sun, 03 Aug 2008 03:17:40 +0000 http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/#comment-1042 [...] this script Filed under: AJAX [...] […] this script Filed under: AJAX […]

]]>