PDA

View Full Version : Holding a list item



pinago
01-26-2011, 03:02 AM
Hi, I have a list setup with links. The list scrolls with the css setting of overflow:auto.

However, when a link in the list that is scrolled down to (that is hidden unless scrolled down to) is clicked, I'd like to hold the list at that list item so that the viewer can return to the same line in the list and click the next li.

Right now, the list resets to the top after a li link is clicked... I have a feeling this is something simple, but I'm guessing it would be javascript...??

The site to view - click here (http://signart.wsiefusion.net/about.html) and then see the left side scrolling list. Thanks!!

oVTech
01-26-2011, 06:34 AM
I do not think you can do what you're asking for because every time you click on a link you are brought to a new page. That's what links do, they bring you to a new page, therefore making you leave the previous page. Although your list represents the same thing on all your pages, that list exists in every page individually as its own thing. You could accomplish the same thing with tabbed content. So instead of having an individual page for each link, you could have hidden div tags on a single page display to block when the links are clicked.

venegal
01-26-2011, 09:43 AM
It's not that hard, really:

On page load, you get the URL of the current page using window.location, then you search your list for an anchor that links to that URL, and scroll to it.

Depending on your prior knowledge of Javascript you might struggle with implementation details, though.

pinago
01-26-2011, 02:28 PM
The list is reloading on different pages, but it is a module unto it's own that is brought into the page through a CMS. Does that change anything?

venegal
01-26-2011, 02:32 PM
No. This is just about a piece of javascript that you have to add to every page.

pinago
01-26-2011, 08:21 PM
Thanks. So, is it a simple js? Do you know of a site where I can find a good example of this or is there a term to search to find resources on controlling a list item like this? Thanks

venegal
01-26-2011, 09:26 PM
This is not about 'controlling a list item'. It's about the stuff I said two posts ago: window.location, DOM traversing, scroll position. Those would be the search terms you need.

I just wrote it up in jQuery:


$.noConflict();
jQuery(function ($) {
var activeLink, container = $('#servicecontainer');
container.scrollTop(0);
activeLink = $('.servicelist a[href="' + window.location.pathname.replace(/^\//, '') + '"]');
if ( ! activeLink.get(0)) return;
container.scrollTop(activeLink.position().top);
});


If you put jQuery in there, this should work.
You already got Prototype in there, though, so you might not want to include a second framework but rather research how to write the same thing in Prototype.