Link to home
Start Free TrialLog in
Avatar of befidled
befidled

asked on

Help with Anchor Hash tag

I have a page where I am using a number of Anchor hash tags to dynamically change the content on the page: http://waldronsfarm.com/index.php/products/

the hash tags are the secondary navigation that includes Groundcovers, Cacti, Trees, etc.

The issue I am having is that I am using named anchors to modify the filtering of my table (click on subcategories, i.e. http://waldronsfarm.com/index.php/products/#Groundcovers), but the page is repositioning itself to align the named anchor at the top of the page. How can I turn this off so that it doesn't do this?

thanks
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Don't use the # character.  The browsers will always move to the position.  
or don't have name="Groundcovers" or id="Groundcovers"
ASKER CERTIFIED SOLUTION
Avatar of Designbyonyx
Designbyonyx
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Should have been a little more descript.

You will need to view the "console" to view the output of this code.  Chrome and Opera and consoles built into the browser.  Firefox requires the Firebug addon for the console.

You can set up your hashes like this:

#filter-SomeHash
#sort-SomeHash
#SomeHash

You can also add other "actions" by modifying the regular expression... separating different "actions" with a pipe:

filter|sort|action1|action2

For each "action" you will need to add a "case" in the "switch" statement (see code).

Hope that helps.
Avatar of befidled
befidled

ASKER

Thanks that sounds like it is worth a try. I may just try changing Name to ID first and if that doesn't work I'll try the plugin.
Changing name to id wont work... I can save you the trouble.  Anything with an ID can be treated as a "named anchor" (even if the element is not an anchor tag).  For example, a url like this:

http://www.domain.com/#footer

would cause the browser to scroll all the way down to the footer element (assuming the footer has an ID of "footer")

<div id="footer">...</div>