asked on

script.aculo - horizontal scrolling - smooth scroll to an anchor

I am trying to find a way of smooth scrolling horizontally, I have seen it done vertically, but not horizontally

Is anyone familiar with scriptaculo, the ajax effect framework? They have a scrolling function, but need some extra backend with the javascript.

http://wiki.script.aculo.us/scriptaculous/show/Effect.Scroll+Vertical+and+Horizontal

I could really use the help. I have tried google, but no luck wit that.

I have my HTML set up like:

<ul class="list_name">
<li><a href="?p=logos#dontbail">Don't Bail</a></li>
<li><a href="?p=logos#sifted">Sifted Records</a></li>
<li><a href="?p=logos#skithevalley">Ski The Valley</a></li>
<li><a href="?p=logos#dw">DW - GET FROM SEAN</a></li>
<li><a href="?p=logos#simple">Simple</a></li>
<li><a href="?p=logos#eurospa">Eurospa</a></li>
<li><a href="?p=logos#aldrighetti">Aldrighetti Logging</a></li>
<li><a href="?p=logos#monkeyhouse">Monkey House</a></li>
<li><a href="?p=logos#surgery">Orthopedic Surgery Center</a></li>
<li><a href="?p=logos#200orchard">200 Orchard</a></li>

</ul>

Say when you click an anchor it goes to that set of logos.

Link: http://www.flanels.com/?p=logos

See if you click it now it wont show on the screen, but it might to the left/right of it, any suggestions to make it show in the white box?

Thank you very much,

Ryan

TimYates

Do you mean like this:

http://www.filthyrichclients.org/

if so, the source from that page may be of use :-)

Tim

catonthecouchproductions

ASKER

Yeah, thank you! So say at my page:

http://www.flanels.com/?p=logos

Since I am using anchors for my page, instead would I just wrap the set of logos in a div and name it accordingly?

Thanks,

Ryan

TimYates

The way Romain has done it on that site is to wrap all of the "pages" in a div each, and then wrap the pages up in a "book" div

Then, you put the book inside another div, and set the scroll position of that div dependant on what link the user clicks...

Actually... it requires a fixed "page" width... so it may not work for you... Hmmmm.... I assume all your logos are different sizes?

(I guess that's why you need the anchor tag bit)

Sorry...I may be leading you down a blind alley here :-(

Tim

catonthecouchproductions

ASKER

Yeah, thats what I was thinking, by looking at his code. They are differernt, but I have each of the spacing to be 75px I think it was.

As long as I wrap the logos for each company in a DIV it should go to the first one in the set, then user can do the rest. Am I correct?

Thanks Tim

catonthecouchproductions

ASKER

So he has all of his content loaded on the page, which I figured, but I have my logos coming from logos.php, do you have any idea how that would work?

HTML:

<ul class="list_name">
                        <li><a href="?p=logos#dontbail">Don't Bail</a></li>
                        <li><a href="?p=logos#sifted">Sifted Records</a></li>
                        <li><a href="?p=logos#skithevalley">Ski The Valley</a></li>
                        <li><a href="?p=logos#dw">DW - GET FROM SEAN</a></li>
                        <li><a href="?p=logos#simple">Simple</a></li>
                        <li><a href="?p=logos#eurospa">Eurospa</a></li>
                        <li><a href="?p=logos#aldrighetti">Aldrighetti Logging</a></li>
                        <li><a href="?p=logos#monkeyhouse">Monkey House</a></li>
                        <li><a href="?p=logos#surgery">Orthopedic Surgery Center</a></li>
                        <li><a href="?p=logos#200orchard">200 Orchard</a></li>

                  </ul>

TimYates

No, as I said...this technique wouldn't work with your thing as it goes off fixed-width pages rather than anchors :-(

ASKER CERTIFIED SOLUTION

TimYates

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

catonthecouchproductions

ASKER

Thanks for your help! i am working with that first one and when I click a link I get:

uncaught exception: [object Object]

Menu:
<ul class="list_name" id="menu">
                        <li id="dontbail-menu">Don't Bail</li>
                        <li id="sifted-menu">Sifted Records</li>
                        <li id="skithevalley-menu">Ski The Valley</li>
                        <li id="dw-menu">DW - GET FROM SEAN</li>
                        <li id="simple-menu">Simple</li>
                        <li id="eurospa-menu">Eurospa</li>
                        <li id="aldrighetti-menu">Aldrighetti Logging</li>
                        <li id="monkeyhouse-menu">Monkey House</li>
                        <li id="surgery-menu">Orthopedic Surgery Center</li>
                        <li id="orchard-menu">200 Orchard</a></li>

                  </ul>

Pages:

<div id="aldrighetti-pane" class="section">

<li><a href="images/logos/full/aldrighetti/aldrighetti-1.png" rel="lightbox"><img src="images/logos/aldrighetti/aldrighetti-1.png" alt="aldrghetti"/></a></li>
<li><a href="images/logos/full/aldrighetti/aldrighetti-2.png" rel="lightbox"><img src="images/logos/aldrighetti/aldrighetti-2.png" alt="aldrghetti"/></a></li>
<li><a href="images/logos/full/aldrighetti/aldrighetti-3.png" rel="lightbox"><img src="images/logos/aldrighetti/aldrighetti-3.png" alt="aldrghetti"/></a></li>
<li><a href="images/logos/full/aldrighetti/aldrighetti-4.png" rel="lightbox"><img src="images/logos/aldrighetti/aldrighetti-4.png" alt="aldrghetti"/></a></li>
</div>

I was looking at the code, the pages need pane at the end, and the menu needs -menu, any suggestions?

TimYates

Hmmm...not sure...

I just saw this link as well: http://www.maxkiesler.com/index.php/weblog/comments/ajax_amp_javascript_galleries_slideshows_and_effects_redux/

There might be another method in there that's of use... (maybe)

catonthecouchproductions

ASKER

Thank you very much, I will play with the ones you got me, I cant seem to get that first one, but I really like it, hopefully I can get it.

Ryan