Base tag messing with bookmark links

Question

I have a Joomla site which uses mod_rewrite to create pretty urls.

http://www.example.com/resources/newsletter

However this created a problem. Including images like this: src="images/pic.jpg", it would then look for a file at:

http://www.example.com/resources/newsletter/images/pic.jpg

...which obviously doesn't exist. To work around this, I included a <base> tag in my head section:

<base href="http://www.example.com/" />

...which worked fine, until I tried to do a link to an anchor point (bookmark) on the same page:

<!-- on http://www.example.com/resources/newsletter -->
<a href="#footer">go to the footer</a>

<!-- clicking that link takes you to http://www.example.com/#footer -->

Changing my links to be <a href="resources/newsletter/#footer"> is not feasible, since I won't necessarily know the URL of the page when editing it. Is there any way to make some links ignore the <base> directive?

Though I'd really prefer a straight HTML solution, I'm using jQuery on this site already, so that could be an option if I'm stuck.

Answer 1

Is it possible to change your src attribute to be something like /images/pic.jpg? That'll achieve the effect you're looking for.

If that's not possible, this (untested) jQuery code should work for you:

$('a[@href^="#"]').click(function() { 
  var hash = this.hash, el = $(hash), offset;
  if(!el.size()) {
    el = $("[@name=" + hash.slice(1) + "]");
  }

  offset = el.offset();
  window.scroll(offset.left, offset.top);
});