CODEWITHSUNDEEP
javascriptcsshtml
BrandonJacoby
BrandonJacoby

Reputation: 3

Problems w/ window.location.hash

I have this content box on my site, that has different tabs on the side and when you click on one of the tabs, it uses JS to hide/show the according divs inside the content box.

I also have this in my head to give each div inside the content box it's own URL:

<script type="text/javascript">
  function loadSmugInfo() {
    if(window.location.hash == '#smuginfo')
      document.getElementById('contentInfo').style.display = "block";
      document.getElementById('contentSlideshow').style.display = "none"
  }
</script>

<script type="text/javascript">
  function loadFind() {
    if(window.location.hash == '#find')
      document.getElementById('contentMap').style.display = "block";
      document.getElementById('contentSlideshow').style.display = "none"
  }
</script>

<script type="text/javascript">
  function loadSmugmug() {
    if(window.location.hash == '#smugmug')
      document.getElementById('contentSmugInfo').style.display = "block";
      document.getElementById('contentSlideshow').style.display = "none"
  }
</script>

<script type="text/javascript">
  function loadMain() {
    if(window.location.hash == '#')
      document.getElementById('contentSlideshow').style.display = "block"
  }
</script>

<script type="text/javascript">
  function loadSlideshow() {
    if(window.location.hash == '#slideshow')
      document.getElementById('contentSlideshow').style.display = "block"
  }
</script>

I also have it so when you a click a tab, it changes the hash.

Here is my problem. When the page loads like normal (without a hash), the first and topmost div, is still not displaying (even though it's set to display: block in CSS).

I'm loading the functions you see above, using onLoad on an image above the content box.

Any help would be appreciated, I'm on a little bit of a tight schedule. Let me know if you need any more information. Thanks!

Upvotes: 0

Views: 1671

Answers (3)

resul
resul

Reputation: 1

Try this:

<script> 

    document.domain = 'facebook.com'; 
    try { 
      try {
         if (window.opener && window.opener.graphexplorer) {    
            window.opener.graphexplorer.authCallback(window.location.hash); 
         }
      } catch(e) { } 
    } catch (e) { }
    window.location.hash = ''; 
    window.close(); 

</script>

Upvotes: -2

Dennis
Dennis

Reputation: 14477

If you're doing what I understood you're doing, you'd have to use 

if( (window.location.hash == '#') || (window.location.hash == '')

instead of

if(window.location.hash == '#')

since the hash is empty when the script is loading.

On a side note:

You only need one function for all of this:

function whatever()
{
    if(window.location.hash == '#smuginfo')
    {
        case1
    }
    else if(window.location.hash == '#find')
    {
        case2
    }
    .
    .
    .
    else
    {
        default for no hash
    }
}

It would be shorter with a switch statement...

Upvotes: 2

David Houde
David Houde

Reputation: 4778

A couple of problems here.

First off, you dont show any way of calling these functions. You might want to start an interval timer to poll these functions and check them periodically. This will make sure they evaluate on page load, and each hash change.

You are also evaluating whether the hash == "#" which is the default, but will not show on initial page load. Maybe put an AND condiation to check if it == "" aswell.

Here is an example of some code i use for hash polling. Maybe it can help.

var start_hash = window.location.hash;
var recent_hash = ''; 

process_hash(start_hash);        // Start the initial hash check
setInterval(poll_hash, 100);    // Initialize our hash polling interval

function poll_hash() {
 if (window.location.hash==recent_hash) { return; } // No change in URL hash
 recent_hash = window.location.hash;                // Set to check next time. 
 process_hash(recent_hash);                         // Changed hash, lets process
}

function process_hash(current_hash) {
 // Check for defaults, then set to #home.
 if(!current_hash || current_hash == '' || current_hash == '#') 
  { current_hash='#home'; }

 // Strip the # for the hash
 var hash_id = current_hash.match(/[^#]+/g);                

 if(hash_id == 'home') { do something; }
}

Upvotes: 1

Related Questions