How can I make a box with dynamic content slide in?

[metaphysics]

For a portfolio I am trying to make, I would like to be able to have a couple thumbnails on the page, that, when clicked, cause a box to horizontally slide in above the thumbnails. I am looking to achieve an effect similar to the one found here: Programming Articles - PHP Scripts, Articles, Tutorials - roScripts, with some minor changes.

• Instead of arrows to scroll to the next content, I would like thumbnails to trigger the change in content. Essentially, I need clickable thumbnails (linked thumbnails) with ids that can trigger a box with specific content to slide in.
• I'm expecting the thumbnails to be clicked out of order, so I want the effect to be:
  - if no boxes on the page, box slides in horizontally from right.
  - if boxes are on the page, box on page slides out to left, new box slides in from right.
  - if possible, a "close" button to be on each box, which will send the box on the page off to the left, making it so no boxes are on the page.

Each box will essentially just be a div with content inside of it.

I am relatively new to Javascript, DHTML, and AJAX, so any help would be greatly appreciated. If someone could point me in the right direction, and maybe answer a few questions once I get some direction, I would really appreciate it.

[acoder]

The page you link to uses Mootools. Would you be using a library/framework or writing from scratch?

[metaphysics]

I am currently working with Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications, but I'm not sure that it includes the feature that I would like. If I need to use another library/framework, I'd be happy to use one, if not, it doesn't make much of a difference to me.

[acoder]

It wouldn't be a good idea to use more than one library/framework - one should be enough, though you can sometimes use two together.

The library probably won't have exactly what you want out of the box, but someone may have written something similar, or you could write it yourself. The things you need are setInterval() for timing, the style.left/top properties for positioning, style.display for displaying/hiding, etc. This is using JavaScript only. prototype may have some utility methods which may help, but since I don't use prototype-js, I can't help more on that front.

[metaphysics]

Thanks. Do you think that this task could be easier with Mootools, or am I going to be just as safe using prototype-js?

[acoder]

Actually, I just remembered script.aculo.us - web 2.0 javascript which should be exactly what you need. It's built on top of prototype. Look at the demos to get you started.

[metaphysics]

I ended up being able to do everything with jquery. All it took was a little time spent searching and a little bit of trial and error. In fact, I found a script that does close to what I want to accomplish, but it has a flaw that I can't seem to figure out how to fix. I read the documentation on how to use the script here: Ariel Flesler: jQuery.LocalScr oll

The author notes that if hash is true, the hash of the clicked link, will appear on the address bar once the animation ends.

This is exactly the setting I want, but the author continues to write:

Note:This setting is not compatible with options like offset and margin, as the browser will natively scroll in the end.
If you use the option 'target'(to scroll an overflowed element) and the window has overflow, setting the hash will scroll the window as well. So my advice is:
only use 'hash' when scrolling the window.

Is their any workaround using hash without scrolling the window? This bit prevents me from accomplishing my final product. My local testing server acts similarly to the demo page for this script: http://demos.flesler.com/jquery/localScroll/. This page works fine with the hash setting enabled (the link changes on click, the setting I want), but it doesn't work when there is a scrollbar (you may have to resize the page).

If this is a new question, I would be happy to open a new topic for it. Thank you for your help.

[acoder]

Good job on that front. Note that if you're also using prototype, be careful about any problems when combining the two though jQuery does allow for that.

Yes, it probably would be better as another question.