Help with Anchor Hash tag

befidled
befidled used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jason C. LevineDon't talk to me.

Commented:
Don't use the # character.  The browsers will always move to the position.  
Michel PlungjanIT Expert
Top Expert 2009

Commented:
or don't have name="Groundcovers" or id="Groundcovers"
What I normally do is use some sort of prefix.  So, for example any hash with a "filter-" prefix will be used to filter the data.  Is this a viable solution?  So your URL would look like this instead:

http://waldronsfarm.com/index.php/products/#filter-Groundcovers

And your javascript logic would first check the hash against a list of known prefixes before taking any action.  Here is some code to get you started.  It uses jQuery and the hashchange plugin from javascript guru Ben Allman.  Let me know if you have any questions about this code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Playing with hashes</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$(window).hashchange(function() {
		var hashObj = /^(?:(filter|sort)-)?(.*)/.exec(location.hash.substring(1));
		$.log('action: ' + hashObj);
		
		var hash = hashObj[2];
		var action = hashObj[1];
		
		switch(action) {
			case 'filter':
				$.log('Performing Filter action with hash "' + hash + '"');
				break;
			case 'sort':
				$.log('Performing Sort action with hash "' + hash + '"');
				break;
			default:
				$.log('Performing DEFAULT action');
				break;
		}
	}).hashchange();
});
</script>
</head>

<body>

<script type="text/javascript">
/*
	 * jQuery hashchange event - v1.3 - 7/21/2010
	 * http://benalman.com/projects/jquery-hashchange-plugin/
	 * 
	 * Copyright (c) 2010 "Cowboy" Ben Alman
	 * Dual licensed under the MIT and GPL licenses.
	 * http://benalman.com/about/license/
	 */
	(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);

/**
 * Copyright (C) 2009 Jonathan Azoff <jon@azoffdesign.com>
 * jQuery.log v1.0.0 - A jQuery plugin that unifies native console logging across browsers
 */
(function(a){a.extend({log:function(){if(arguments.length>0){var b=(arguments.length>1)?Array.prototype.join.call(arguments," "):arguments[0];try{console.log(b);return true}catch(c){try{opera.postError(b);return true}catch(c){}}return false}}})})(jQuery);

</script>
</body>
</html>

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

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.

Author

Commented:
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>

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial