Hyperlinks pointing to anchors cause page refresh

eriklharper

Hey guys,

Here's my dilemma. I have run into this issue in the past, first noticing it when I created an FAQ page with a table of contents with bookmark links to named anchor divs further down the page. I noticed that if I don't include the current page name in front of each "#anchor-name" then Fuel thinks I'm trying to load the url: http://sitename.com/#anchor-name. Here is an example:

<ul> <li><a href="faq#question1">Question 1?</a></li> <li><a href="faq#question2">Question 2?</a></li> </ul> <a name="question1">Question 1 Answer</a> <a name="question2">Question 2 Answer</a>

The code above works fine, but originally I had it like this:
<ul> <li><a href="#question1">Question 1?</a></li> <li><a href="#question2">Question 2?</a></li> </ul> <a name="question1">Question 1 Answer</a> <a name="question2">Question 2 Answer</a>

If you try that above code and click either of those Question links, Fuel will think you're trying to load the url /#question1, which is obviously not correct and not the desired behavior.

Now, to my current issue. I'm noticing this problem getting in the way when implementing a Foundation Tab setup. Here is the code:

<dl class="tabs"> <dd class="active"><a href="#simple1">Simple Tab 1</a></dd> <dd><a href="#simple2">Simple Tab 2</a></dd> </dl> <ul class="tabs-content"> <li class="active" id="simple1Tab"> This is simple tab 1s content. </li> <li id="simple2Tab">This is simple tab 2s content. Now you see it!</li> </ul>

Here is where I got the code from:http://foundation.zurb.com/docs/tabs.php. You obviously need to include the appropriate Foundation assets in the correct order to get this working, but I think it basically relies on the jQuery tab system to do this. If I switch the above to the below, it technically works, but the page reloads, which shouldn't happen with these javascript click events.

<dl class="tabs"> <dd class="active"><a href="pagename#simple1">Simple Tab 1</a></dd> <dd><a href="pagename#simple2">Simple Tab 2</a></dd> </dl> <ul class="tabs-content"> <li class="active" id="simple1Tab"> This is simple tab 1s content. </li> <li id="simple2Tab">This is simple tab 2s content. Now you see it!</li> </ul>

Is this an issue that can be fixed with a setting tweak in Fuel, or is it only a javascript problem? I noticed that on the foundation tab page referenced above, if you click any of the sample tabs, you get this in the URL:

http://foundation.zurb.com/docs/tabs.php#simple2

And, if you inspect the code they have, it doesn't require having the URL slug in front of the anchor link.

Thanks,
Erik

Lance

Don't think FUEL's doing that. I use ZURB tabs with FUEL fine.

You don't happen to have a base tag set? http://www.w3schools.com/tags/tag_base.asp

eriklharper

I do have a base tag. My source code looks like this to generate the tag:
<base href="<?=site_url()?>" />
Is this not the correct way to do it?

admin

What happens if you remove that line?

eriklharper

Wow, that worked! Removing the <base href="<?=site_url()?>" /> line absolutely got these anchor links to show up properly. Thanks for that tip!