JQUERY divs inside page, with URL?

Question

Hi Masters Of Web, I have a bit complicated question. Complicated for me. First of all I want to say that I read almost everything here in forum about this, I tried some codes fond here and in web but nothing suits in my case. So: I have got a site based on one single page (index.php). All content in it is called via show/hide divs with jquery. After I made first page of this site (what I really mean is "After I completed first div with content on page"), I started to make the second one. And here comes the problem. When I make some change in second div and I refresh site, the browser returns view with my first (the completed one) div. Because I told him, that this is the default opened div. And now I want to make that everyone single div will have his own URL (example: http://mysite/#divone, http://mysite/#divtwo, etc.) visible in address bar of the browser, and in this way I can share links, and bookmark the exact content etc. I read about jquery history plugins and other solutions like this (widows.location, bookmark plugin, etc.) but nothing seems to work for me...

So this is the code inside my index.php file, which calls the divs:

    <!-- START MENU -->
<ul class="lavaLampWithImage" id="lava">

 <li class="current"><a href="#about-us" onclick="togLayer('home');">About Us</a></li>

 <li><a href="#web-design" onclick="togLayer('web');">Web Design</a></li>

 <li><a href="#graphic-design" onclick="togLayer('graphic');">Graphic Design</a></li>

 <li><a href="#gallery" onclick="togLayer('gallery');">Gallery</a></li>
</ul>
<!-- END MENU -->

As you might see, it calls div ID with onclick function, which is one of the problems. The second one is that the other script that I use to visualize links in pretty way (Lava Lamp fo Jquery) contains functions for changing the class of the clicked link ("current"). Most of solutions that I found in web contains own functions for this, and the things are going to mess.

This is the one of the divs that contains the content of other php page:

    <!-- START HOME PAGE -->
  <div id="home">
   <?php include("includes/home.php"); ?>
  </div>
<!-- END HOME PAGE -->

And this is the script I use to call divs onclick:

        /*
    Global "swap" holder
    Use value, null, if no layer initially visible
    */
    var currLayerId = "home";

    function togLayer(id)
    {
    if(currLayerId) setDisplay(currLayerId, "none");
    if(id)setDisplay(id, "block");
    currLayerId = id;
    }

function setDisplay(id,value)
{
var elm = document.getElementById(id);
elm.style.display = value;
}

I'll be grateful for any help or advice on this. I hope that my explanation is understandable and correct

Edit: This is the site that I'm talkin' about: http://spoonk.eu It still does not have an English version. But I think you will understand what I'm talking about.

Answer 1

Have a look at this post, or this jQuery plugin.

Answer 2

It sounds like what you're trying to do is have the page load the previously selected div when the user refreshes the page. Here's what you need to do. For each link/anchor tag (<a>), make sure that its href attribute is set to "#the_name_of_the_panel. In your click event for each link, I'm guessing you already figured out to do return false; at the end of the event to prevent the page from randomly scrolling to some other location - but if you haven't done that, make sure that you also do that.

When the user refreshes the page, this code should handle getting the appropriate div:

$(document).ready(function() {
    theLoc = location.href;
    hash = theLoc.split("#");
    if( hash.length > 1 ) {
        hash = hash[1]; // this gets the part after the #
    } else {
        /* this is necessary because the user might not be
           refreshing, they might be making a first visit to the page */
        hash = 'name of default div';
    }

    // your code to switch to the appropriate div goes here
});

That should do the trick. ;)

Answer 3

Based on the two post I listed in my first answer, I compiled the following solution (tested in FF and IE7).

HTML:

<a href="#div1" onclick="showDiv('#div1');">Div1</a>&nbsp;
<a href="#div2" onclick="showDiv('#div2');">Div2</a>&nbsp;
<a href="#div3" onclick="showDiv('#div3');">Div3</a>&nbsp;
<br /><br />
<div id="div1" class="allDivs"><h1>Div 1 Content</h1></div>
<div id="div2" class="allDivs"><h1>Div 2 Content</h1></div>
<div id="div3" class="allDivs"><h1>Div 3 Content</h1></div>

Javascript:

$(document).ready(function() {
    var anchor = '#div1';

    if (location.hash != '')
     anchor = location.hash;

    showDiv(anchor);
});

function showDiv(divID) {
    $('.allDivs').hide();
    $(divID).show();
}