"Clearing url" removing hash between separate pages

Question

I have a tab system that works great on its own. The problem is that should someone click a link to another page with a simlar tab system, even with different classes, the past hash is being stored.

So, say they are on page 1 and the tab opened ends the url like: /dept/waste-recycling-programs?whatToRecycle#whatToRecycle

then, going to page 2, which has a completely different url, /dept/facilities/?goals2013#whatToRecycle

So someone had clicked on "2013 Goals" which leads to a different url and adds "?goals2013" like it should, but then it appends "#whatToRecycle" after that. Which was the last tab clicked on in the previous page with a tab system.

If I can just figure out how to call some function at page load that erases all ? and on, then it should work, I'm thinking.

The problem is that a left nav bar has all links to the specific tabs so that someone doesn't have to come to either page 1 or page 2 and then, click on say the third tab. They click on what would be the third tab on either page, hit the page and that tab is open.

HTML for the list of links:

<ul class="enviroNav">
    <li class="bottomBorder"><a href="?">WHAT WE DO</a></li>
    <li class="liWithSubs"><a href="/departments/site-facilities/environment">ENVIRONMENT</a></li>
    <li><a href="/departments/site-facilities/iso-14001?iso14001">ISO 14001</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/iso-14001?environmentalPolicy">-Environmental Policy</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/iso-14001?impactAreas">-Impact Areas</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/iso-14001?goals2013">-2013 Goals</a></li>
    <li><a href="/departments/site-facilities/environment/waste-recycling-programs?whatToRecycle">Recycling/Waste</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/environment/waste-recycling-programs?whatToRecycle">-What To Recycle</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/environment/waste-recycling-programs?whereToRecycle">-Where to Recycle</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/environment/waste-recycling-programs?quickTips">-Quick Tips</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/environment/waste-recycling-programs?seeResults">-See Results</a></li>
    <li class="bottomBorder"><a href="#">Energy</a></li>
    <li class="liWithSubs"><a href="#">COMMUNITY</a></li>
    <li><a href="#">-Upcoming Events</a></li>
    <li class="bottomBorder"><a href="?">-Past Activities</a></li>
    <li class="liWithSubs"><a href="?">HOW WE&#39;RE DOING</a></li>
    <li><a href="#">-See the Results</a></li>
    <li class="bottomBorder"><a href="#">-Success Stories</a></li>
    <!--    <li class="bottomBorder"><a href="#">WHY WE CARE</a></li>
    <li class="bottomBorder"><a href="#">EMPLOYEE WELLNESS</a></li>-->
    <li class="bottomBorder"><a href="/departments/site-facilities/ehs-training">ENVIRONMENTAL HEALTH &amp; SAFETY(EHS) PROGRAM</a></li>
    <li><a href="?">COMMUNITY LINKS</a></li>
</ul>

This routine works:

    function setupSubNav(){
  pathName = window.location.href;
  $('.hiddenSection').css('display','none');
  pathArray = pathName.split('#');
  param = pathArray[pathArray.length-1];
  if(pathArray.length>1){
    showWasteSection(param,$('.' + param + 'Trigger'));
  }
  else
  {
     if ($('body.fervens-a .pageTabsWaste li')) {
        var sectionNameWaste = $($('body.fervens-a .pageTabsWaste li')[0]).attr('class').split('Trigger')[0];
            showWasteSection(sectionNameWaste, $($('body.fervens-a .pageTabsWaste li')[0]));
        }
  }
    $('body.fervens-a .pageTabsWaste li').click(function(){
        if (!($(this).hasClass('current'))) {
            var sectionNameWaste = $(this).attr('class').split('Trigger')[0];
            showWasteSection(sectionNameWaste, $(this));
        }
    });
}
    function showWasteSection(sectionNameWaste,$navObj) {
    if (sectionNameWaste != 'whatToRecycle' && sectionNameWaste != 'whereToRecycle' &&       sectionNameWaste != 'quickTips' && sectionNameWaste != 'seeResults') {
        sectionNameWaste = 'whatToRecycle';
        $navObj = $($('body.fervens-a .pageTabsWaste li')[0]);
    }
        $('body.fervens-a .pageTabsWaste li').removeClass('current');
        $navObj.addClass('current');
        $('.hiddenSection').css('display','none');
        $('#' + sectionNameWaste + 'Content').css('display','block');
        window.location.hash = sectionNameWaste;
    }

and despite that I put that together some time ago, I didn't use it on more than one page back then so now I'm trying to force a clean wipe of the url. This is within a Drupal 6 site and it's on an intranet, internal so I have to support IE7+. Can't mess with the HTML5 storage or such.

Is there a way to wipe the url on clicking any link in the nav list? I'm not concerned with performance issues or iterations if that somehow figures in.

no, but since this is a Drupal site and I'm doing local development which will then get pushed to a live server, I can only start w/urls after the server. So a full url is actually now "http://localhost:8982/....." That way, it will automatically fill in — kelly johnson, Mar 21 '13 at 17:41
What about resolving to absolute url your partial url with php? http://stackoverflow.com/questions/1243418/php-how-to-resolve-a-relative-url — Hanlet Escaño, Mar 21 '13 at 17:42
Fiddle won't work in this case because you need to have two different pages. That's the issue. One page with five tabs, it all works. The issue is when you introduce another page at a different url but that is also changing the hash. The hash is being kept. I'll see if I can post a couple of pages on my server for an actual test. Might take me a bit. — kelly johnson, Mar 21 '13 at 18:03
ok try this: http://www.thumbslinger.com/twoPageSystem/2ndPage/2pageTest2.html notice when you hit that, the first tab's hash will appear to open the first tab. Click the tabs first and see how they work. Now, try clicking something like 2013 goals and watch the url. — kelly johnson, Mar 21 '13 at 18:49

score 1 · Answer 1 · answered Mar 21 '13 at 20:25

1

Maybe I don't completely understand what it is you want to accomplish, but this will avoid the function to append the hash at the end of the location, if the url contains the "?" symbol.

function showWasteSection(sectionName, $navObj) {
    if (sectionName != 'whatToRecycle' && sectionName != 'whereToRecycle' && sectionName != 'quickTips' && sectionName != 'seeResults') {
        sectionName = 'whatToRecycle';
        $navObj = $($('body.fervens-a .pageTabsWaste li')[0]);
    }
    $('body.fervens-a .pageTabsWaste li').removeClass('current');
    $navObj.addClass('current');
    $('.hiddenSection').css('display', 'none');
    $('#' + sectionName + 'Content').css('display', 'block');
    var location = String(document.location);
    if (location.indexOf("?") < 0)
        window.location.hash = sectionName;
}

answered Mar 21 '13 at 20:25

Hanlet Escaño

17,114
8
52
75

Thanks for looking into this. That might help me look to something else. As it stands, all tabs work, clicking on the actual tabs and all nav links work for the waste section. But, clicking on the ISO/enviro policy/impact/2013 goals.. go to the correct tab but somehow stops from showing the content. So I'm 3/4 of the way there. Somehow, the css isn't being applied upon clicking the ahref in the nav. I see a flash of content and then it hides so perhaps now I just need to look at order of execution. – kelly johnson Mar 21 '13 at 20:55
Sorry I could not help more. Have you tried looking into jQuery UI tabs? It is really so much easier!!! – Hanlet Escaño Mar 21 '13 at 20:56
well, if I were just coding all this, it would be easier but with the beast Drupal interfering, that's what is making it tough! Thanks for your help though... I think I need to define the sectionName (the window.location) first and then check for something past the ?, remove it and the let the script work. I'm going to up your answer for helping me down that path! – kelly johnson Mar 21 '13 at 21:11

score 0 · Answer 2 · answered Mar 21 '13 at 22:02

For completeness, the answer was to add all section names from all pages in an if statement checking the parameter:

function showWasteSection(sectionName, $navObj) {
    if (sectionName != 'whatToRecycle' && sectionName != 'whereToRecycle' && sectionName != 'quickTips' && sectionName != 'seeResults' && sectionName != 'iso14001' && sectionName != 'environmentalPolicy' && sectionName != 'impactAreas' && sectionName != 'goals2013' && sectionName != 'isoDocs') {
        sectionName = 'whatToRecycle';
        $navObj = $($('body.fervens-a .pageTabsWaste li')[0]);
    }
    $('body.fervens-a .pageTabsWaste li').removeClass('current');
    $navObj.addClass('current');
    $('.hiddenSection').css('display', 'none');
    $('#' + sectionName + 'Content').css('display', 'block');
    var location = String(document.location);
    if (location.indexOf("?") < 0)
        window.location.hash = sectionName;
}

adding the var location towards the end and removing the ? (courtesy of Hanlet, above) cleaned up the url as a bonus, so thanks for that one again!

"Clearing url" removing hash between separate pages

2 Answers2