Problems with anchors and jQuery

[Witom]

I've seen other posts on this forum with similar issues, but none answer my particular problem.

I'm developing a tabbed navigation system on a website that uses CMSMS. There's a mockup page here:

http://www.care-plan-management-system. ... -contents/

The crucial bit are the green tabs in the centre column ("Domiciliary Care" etc). Depending on which tab is selected the content below the green line is swapped out. This is done using a simple jQuery script (Tabify).

I've got the whole build working on a local flat HTML version of the page - the tabs work as they should.

The problem comes when loading the code into CMSMS. As others have noted in this forum, CMSMS requires the use of the {anchor} tag to generate proper working anchor links. Otherwise the link will take you to the root URL. I've tried using the {anchor} tag on this page, and that solves the problem of redirecting the user to the home page, but it also breaks the Tabify script and the tab content no longer shows / hides as it should. (I assume this is because using {anchor} or any other method to insert a full URL in the href tag (ie. href="#tab1" becomes href="www.fullurl.com/#tab1") confuses the jQuery script. It will ONLY accept the hash without the preceding URL.)

If I was a jQuery developer I could probably adapt the Tabify script to get around this, but I'm not. To save me the trouble of either learning jQuery or getting a developer involved -- can anyone suggest a workaround from the CMSMS side? Is there any way I can disable this annoying "hijacking" of the anchor links that CMSMS insists on doing?

All suggestions most welcome!

[Dr.CSS]

First you need to clean up the html....
http://validator.w3.org/check?verbose=1 ... ontents%2F

Then I would put all my $(document).ready(function() { in one of these calls not multiple ones as now, then use standard tab script...

$( '#info .hide:not(:first)' ).hide();

$('#info-nav li').click(function(e) {
$('#info .hide').hide();
$('#info-nav .current').removeClass("current");
$(this).addClass('current');

var clicked = $(this).find('a:first').attr('href');
$('#info ' + clicked).fadeIn('fast');
e.preventDefault();
}).eq(0).addClass('current');

Say you have 3 tabs...

<ul id="info-nav">
<li> <a href="#why">tab text</a> </li>
<li> <a href="#dpu">tab text</a> </li>
<li class="last"> <a href="#custom">tab text</a> </li>
</ul>
<div id="info">
<div class='hide' id="why"><p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.</p><img class="imgrt" style="float: right;" src="uploads/images/slides/chip.png" alt="img" width="204" height="185" />
<div class='clearb'></div>
</div>
<div class='hide' id="dpu"><p>Maecenas tristique, tortor nec eleifend luctus, nibh leo imperdiet wisi, et accumsan est lectus in orci. Proin facilisis, odio auctor feugiat accumsan, sapien purus iaculis dui, a volutpat augue pede ut sem. Nulla facilisi.</p>
<p id="custom">Curabitur ornare velit molestie nulla. Fusce fermentum facilisis mi. Maecenas volutpat, eros ac pellentesque mollis, urna elit rutrum turpis, congue convallis nibh erat nec purus.</p>
<div class='clearb'></div>
</div>
</div>

[Witom]

Thanks for your reply. Some good suggestions in there. However your solution still doesn't get round my central problem -- how do I stop CMSMS from "hijacking" the anchor links?

I've tried your code, but the tab links:

<a href="#why"> ... </a>

will still lead the user away from the page to the root URL.

[peterbisset]

Did you manage to find a solution for this? I have the exact same problem...

[applejack]

Try

Code: Select all

<a href="/url#why">tab text</a>

or

<a href="/{$page_alias}#why">tab text</a>

[Dr.CSS]

If they still redirect to home page or just mot work then something in the code isn't correct as it works just fine for me many times I've used it...