Question

I have a project that I borrowed some JavaScript from a lab that I did in class a year ago and I’m a little rusty so I can’t figure out why it isn’t working correctly. I made an example site so you can see how it’s not working. It is located at amykate.com/test and the example files can be downloaded at amykate.com/test.zip.

I need it set up so that when you first navigate to the site there would be no content showing from the “main” div. This allows for the slideshow I’ll have going in the background to be the main focus. Once you click on a link though, it should show the appropriate content from the associated div overtop of the slideshow. (I left all the slideshow stuff out for the example because it isn’t necessary.) The problem I am having is that once you click on a link, you have to then refresh the page to actually see the content. Why is that? I wanted to be able to not have to refresh the page at all so that the slideshow can just continue in the background the whole time. Any suggestions?

Here is how the HTML structure is set up…

<nav id="hide-show-nav">
    <a href="#about">About</a> |
    <a href="#gallery">Gallery</a> |
    <a href="#contact">Contact</a>
</nav>

<div id="main">

    <div id="about">
        <p>This is the about section.</p>
    </div> <!-- #about -->

    <div id="gallery">
        <p>This is the gallery section.</p>
    </div> <!-- #gallery -->

    <div id="contact">
        <p>This is the contact section.</p>
    </div> <!-- #contact -->

</div> <!-- #main -->

And the JavaScript goes like this…

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function addEvent(element, type, handler)
{
    if (element.addEventListener)
        element.addEventListener(type, handler, false);
    else
    {
        if (!handler.$$guid) handler.$$guid = addEvent.guid++;
        if (!element.events) element.events = {};
        var handlers = element.events[type];
        if (!handlers)
        {
            handlers = element.events[type] = {};
            if (element['on' + type]) handlers[0] = element['on' + type];
            element['on' + type] = handleEvent;
        }

        handlers[handler.$$guid] = handler;
    }
}
addEvent.guid = 1;

addLoadEvent(init);


function init()
{
    findDest();

    //get reference to container element
    var holder = document.getElementById('main');

    //create ref to all divs inside of main
    var divs = holder.getElementsByTagName('DIV');
    var l = divs.length;

    //get reference to nav
    var nav = document.getElementById('hide-show-nav');

    //create ref to all links in nav
    var links = nav.getElementsByTagName('A');
    var numLinks = links.length;

    //loop over links add event listeners
    for(var j=0; j < numLinks; j++)
    {
        addEvent(links[j], 'click', showDiv);   
        addEvent(links[j], 'click', setStatus); 
    }
}


function showDiv(evt)
{
    //get reference to container element
    var holder = document.getElementById('main');

    //create ref to all divs inside of main
    var divs = holder.getElementsByTagName('DIV');
    var l = divs.length;

    //loop over divs and hide them all
    for(var i = 0; i < l; i++)
    {
        divs[i].className = 'hide'; 
    }

    //get reference to link click on
    var target = evt.target || window.event.srcElement;
    var destination = target.href;
    var divName = destination.split('#')[1];
    document.getElementById(divName).className = 'show';
}

function findDest()
{
    //get reference to container element
    var holder = document.getElementById('main');

    //create ref to all divs inside of main
    var divs = holder.getElementsByTagName('DIV');
    var l = divs.length;

    //loop over divs and hide them all
    for(var i = 0; i < l; i++)
    {
        divs[i].className = 'hide'; 
    }

    //get reference to link click on
    var destName = window.location.toString();
    var loc = destName.split('#')[1];   
    document.getElementById(loc).className = 'show';
}

function setStatus(evt)
{
    //get reference to link click on
    var target = evt.target || window.event.srcElement;

    //get reference to nav
    var nav = document.getElementById('hide-show-nav');

    //create ref to all links in nav
    var links = nav.getElementsByTagName('A');
    var numLinks = links.length;

    //loop over links add event listeners
    for(var j=0; j < numLinks; j++)
    {
        changeClassName('remove', links[j], 'statusOn');
    }

    //add status indication to link
    changeClassName('add', target, 'statusOn');

}

And this little bit of CSS…

.hide {
    display:none;
}

.show {
    display:block;
}

Answer 1

I did finally figure this out a while ago and figured I’d post what I did incase anyone else comes across this.

$(function() {
    $('#main').addClass('hide');
});

$('body').on('click','nav a', function(e) {
    $('#main').removeClass('hide');
    $('#main').children().addClass('hide');
    $($(this).attr('href')).removeClass('hide');
    e.preventDefault();
});

Hope that helps.