scrolling dock through centralized location

[24kGEM]

In a scrolling dock how do I get the selected icon to remain in a particular position and have the icons scroll through that position?

i.e. I have a bottom dock with the first 5 icons visible and I want the third icon of the five to always be the position that has the focus and the icons scroll left and right through that position.

Thanks for any help,

[tspderek]

just like any other scrolling dock, except you subtract 80 pixels for each icon, rather than subtracting 480 for each six.

[ajc3designs]

In your Theme Builder samples, there is a JScroll SVG, download NotePad++ and you can view the SVG to see how it works

[24kGEM]

Thanks Tspderek,
I saw there were 60 view of this thread and nobody was responding...I figured the answer must be a deep dark secret or something. I couldn't figure out why nobody would answer it. As it turns out, it was probably so elementary everybody prolly thought I was joking with the question.
I actually figured it out last week, before I posted the question, but I forgot I figured it out. Then, when I read your reply I just sort of rolled my eyes as I realized I all ready knew the answer.
Guess that IS the first thing that goes with old age...thanks for helping me out!

[2Tx1503]

could you explain this a little more detailed? or point to a tutorial? i used the jscroll sample and when i scroll from left to right the icons wont scroll back to right to left... they slide off the screen...

[24kGEM]

If you want the icons to move one by one to the left and right, then have them move the width of a single icon when they get focus. If you're using an icon that is 55 icons wide then you want your focus in to move the FIRST icon -55,0. Your next icon you want to move -110,0, the next one -165,0 and so on (each icon increases by 55 since they are 55pixels x (# of icons) from the first icon location).
If your icons are 80 pixels in width then it would be -80,0, -160,0, -240,0 and so on.

Hope that helps,

[2Tx1503]

and sorry for a stupid question- your example (-80,0) would be in the anim transform code at the end correct?

[2Tx1503]

bump bump .... i am able to get the icons all there... butttttt... they slide off the screen and i cant find em after the slide off.... they wont scroll back..

[24kGEM]

Do they slide off all at the same time, or one at a time as you scroll to them?
Here is a snippet of code I've used for a 12 icon sliding dock (used on 85xx series):

<animateTransform xlink:href="#Layer_1" id="_anim_l1" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_1.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l2" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_2.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l3" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_3.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l4" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_4.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l5" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_5.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l6" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_6.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l7" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_7.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l8" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_8.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l9" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_9.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l10" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_10.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l11" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_11.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l12" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_12.focusin" />


In this example, the first 6 icons remain on the screen until you go to the 6th icon and move right - to go to the 7th icon which is waiting off the screen to the right. When the 7th icon gets focus, the next 6 icons slide to the left and onto the screen, while the original 6 icons that were on the screen move off the screen to the left. To get the icons to move off the screen one at a time you can use this code (again, used on 85xx series):

<animateTransform xlink:href="#Layer_1" id="_anim_l1" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_1.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l2" attributeName="transform" type="translate"
to="-33.333,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_2.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l3" attributeName="transform" type="translate"
to="-66.667,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_3.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l4" attributeName="transform" type="translate"
to="-100,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_4.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l5" attributeName="transform" type="translate"
to="-133.333,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_5.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l6" attributeName="transform" type="translate"
to="-166.667,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_6.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l7" attributeName="transform" type="translate"
to="-200,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_7.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l8" attributeName="transform" type="translate"
to="-233.333,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_8.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l9" attributeName="transform" type="translate"
to="-266.667,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_9.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l10" attributeName="transform" type="translate"
to="-300,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_10.focusin" />


In this snippet the icons move 33 pixels to the left when they get focus. As the next icon gets focus, it moves an additional 33 pixels to the left from it's starting point (for a total of 66 pixels...rounded off, left of it's starting point). As the next icon gets focus, it moves an additional 33 pixels to the left from it's starting point (for a total of 100 pixels...again, rounded off, left of it's starting point) and so on.

Hope that helps,

[joebmxx]

Originally Posted by 24kGEM

Do they slide off all at the same time, or one at a time as you scroll to them?
Here is a snippet of code I've used for a 12 icon sliding dock (used on 85xx series):

<animateTransform xlink:href="#Layer_1" id="_anim_l1" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_1.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l2" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_2.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l3" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_3.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l4" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_4.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l5" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_5.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l6" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_6.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l7" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_7.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l8" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_8.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l9" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_9.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l10" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_10.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l11" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_11.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l12" attributeName="transform" type="translate"
to="-320,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_12.focusin" />


In this example, the first 6 icons remain on the screen until you go to the 6th icon and move right - to go to the 7th icon which is waiting off the screen to the right. When the 7th icon gets focus, the next 6 icons slide to the left and onto the screen, while the original 6 icons that were on the screen move off the screen to the left. To get the icons to move off the screen one at a time you can use this code (again, used on 85xx series):

<animateTransform xlink:href="#Layer_1" id="_anim_l1" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_1.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l2" attributeName="transform" type="translate"
to="-33.333,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_2.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l3" attributeName="transform" type="translate"
to="-66.667,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_3.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l4" attributeName="transform" type="translate"
to="-100,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_4.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l5" attributeName="transform" type="translate"
to="-133.333,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_5.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l6" attributeName="transform" type="translate"
to="-166.667,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_6.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l7" attributeName="transform" type="translate"
to="-200,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_7.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l8" attributeName="transform" type="translate"
to="-233.333,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_8.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l9" attributeName="transform" type="translate"
to="-266.667,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_9.focusin" />

<animateTransform xlink:href="#Layer_1" id="_anim_l10" attributeName="transform" type="translate"
to="-300,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_10.focusin" />


In this snippet the icons move 33 pixels to the left when they get focus. As the next icon gets focus, it moves an additional 33 pixels to the left from it's starting point (for a total of 66 pixels...rounded off, left of it's starting point). As the next icon gets focus, it moves an additional 33 pixels to the left from it's starting point (for a total of 100 pixels...again, rounded off, left of it's starting point) and so on.

Hope that helps,

iv been looking for this code for a long time so thank you for posting it but iv noticed as it gets the the right side of the icons it goes of the screen and cuts the last 3 icons on when i go back to the left straight from the furthest right icon how do i stop this? i need like a block or something i dont know? haha