CODEWITHSUNDEEP
htmlhyperlink
nickf
nickf

Reputation: 545995

Base tag messing with bookmark links

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.

Upvotes: 2

Views: 544

Answers (2)

Onur Yıldırım
Onur Yıldırım

Reputation: 33634

Old question, new answer.. Try this:

$('a[href^="#"]').on('click', function (event) { 
    event.preventDefault();
    window.location.hash = $(this).attr('href');
});

Upvotes: 0

Sophie Alpert
Sophie Alpert

Reputation: 143114

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);
});

Upvotes: 2

Related Questions