PDA

View Full Version : pausing scroller, expanded functionality



bcswebstudio
03-13-2006, 10:17 PM
The pausing up-down scroller (http://www.dynamicdrive.com/dynamicindex2/crosstick.htm) is great! Almost exactly what I am looking for, and it was the first that turned up from Google!

I'd like to expand it, or request that it be expanded, to allow for x-number of array elements to be displayed at a time. Specifically in my case, I'd like to show the contents of as many elements as fits on a screen at a time, pause-scrolling them up one by one until they're all eventually seen. Then it should cycle as normal.

I'm pouring over the code and am seeing that there are two internal DIVs (which I've changed to PREs for my purposes) with hard-coded "1" and "2" appended to each's ID respectively. That's where I'm a little stumped: would these actually then need to be dynamically generated?

having fun, loving the work you've done..
thanks

ddadmin
03-14-2006, 09:46 AM
If I understood you correctly, you're looking to make the script:

1) Show as many array items as possible that can fit into the scroller based on its height, with all the items visible.

1a) For these items that are currently all visible on the screen, still pause between each item.

2) Then, scroll in another batch of visible items (repeat above two steps).

Nothing's impossible of course, but I think based on the current design, it'll take quite a lot of changes. Your new script would need to first test how many items it can fit into the scroller on the fly, then call a different scrolling animation to scroll each item into view before moving on to 2), the primary scrolling animation.


with hard-coded "1" and "2" appended to each's ID respectively. That's where I'm a little stumped: would these actually then need to be dynamically generated?

"1" and "2" are suffixes that help identify the two DIVs within the scroller, which move like a conveyer belt in a circle as far as which one is on top and which one is at the bottom.

Just quickly thinking about it, one approach is not to mess with the main structure of the script as far as using two divs, but write additional code to animate each div in a stepping process to bring into view the multiple items that may exist inside each div. Each array item within each DIV probably would be contained inside a DIV of its own to allow your animation code to scroll each one to the top (into view).

bcswebstudio
03-14-2006, 03:01 PM
"1" and "2" are suffixes that help identify the two DIVs within the scroller, which move like a conveyer belt in a circle as far as which one is on top and which one is at the bottom.

A "conveyer belt" is exactly the structure I've got in mind. And using the original code, to continue the analogy, expanding the script would be like adding extra panels to the belt: it still pauses once per array item (not per screen).

Whether I understood your proposed quickly thought solution or if it sparked this idea, what about something along the lines of: content div1 has a single active element, content div2 has all remaining elements. Scroll both div1 and div2 up div1's height, then swap: div1 gets populated with all remaining contents (array-shifted, push cycled content), and div2 gets populated with current element. If I understand us correctly, this would sit nicely right atop the current code.

The solution I had prior to your reply was to literally add additional elements dynamically, but that may be better suited for a new script rather than a port-- really keeping only the scroller/pause/timer portion.

bcswebstudio
03-14-2006, 05:08 PM
ok- I've got what I think is a working solution based on our combined quick-solution inspirations. May I somehow submit it to you for review/cleanup/comments?

jscheuer1
03-14-2006, 05:15 PM
Just post a link to it.

bcswebstudio
03-14-2006, 07:32 PM
ok, the orig is behind a firewall, so here's a static copy of the page under development. I've not cleaned it for proper sharing, and I don't intend to have the link up permanently (but you know how dust collects..)
My example (http://www.fingertrips.com/more/pause-scroller.php) has real (public) data, so do not be alarmed. The implementation is messy b/c it was generated by a php injection.
Other things to note:
- method is as described earlier in this thread (using only two contents divs)
- initial contents: div1 empty and div2 shows the entire array (as opposed to content[0] and content[1] respectively)
- commented out the mouseover handlers; my implementation will be a standalone kiosk
- disabled/removed visibility function, b/c it's not necessary in this implementation; but kept the names the same: this is not good naming practice :O
- two key differences from orig script: the location/time where getinline is called and the calculation for getinline of div2's top
- added css to point out the mechanics

Any idea where that unsightly (but perhaps forgiveable) jump comes in? I think a div contents replace should be fast enough not to be causing that... I feel there's a top or padding change that I'm not catching. In the end, it's all aligned properly...