Hashchange to show divs

Question

I have a number of divs on my page, which are hidden by default. Jobs can be selected by links (to "#job8, for example). I'm trying to use hashchange in my script to check the URL for the specific hash and then to display the appropriate div.

This is an example div

<div class="job-details" id="job8" data-jobid="8">
    <p>Job 8</p>        
</div>

This is my script.

$(document).ready(function(){

        $('.job-details').hide();
});

$(window).bind('hashchange', function() {

        if (location.hash.substring(0,4) == "#job"){
            var jobID = location.hash.substring(0);

            $('.job-details').hide();
            $('[data-jobid="' + jobID + '"]').show();
            }


});

Thank you Palpatim, Ishan Jain and Til. Changing the substring value to 4 in jobID works as it now matches the div's jobid data attribute. The selected div will now show, but only after the page has loaded, I need it to work as a permalink so that it can be saved or bookmarked. On a loaded page, adjusting the number changes the div. However, re-entering with the same number hides the div again. I've tried changing the hide() in hashchange to: `$('.job-details:not([data-jobid="' + jobID + '"]').hide();` — khal28, Jan 31 '14 at 19:16

score 0 · Answer 1 · answered Jan 31 '14 at 16:59

0

Your line:

var jobID = location.hash.substring(0);

Assigns '#' to jobID. Presumably that isn't what you want? Probably you want:

var jobID = location.hash.substring(4);

answered Jan 31 '14 at 16:59

Palpatim

9,074
35
43

double-check your answer. – Robert Kerr Jan 31 '14 at 17:12

score 0 · Answer 2 · answered Jan 31 '14 at 17:23

Do you must use hashchange? If not try example below, here's a FIDDLE

<nav>
  <a href="#job1" data-rel="job1">Job 1</a>
  <a href="#job2" data-rel="job2">Job 2</a>
  <a href="#job3" data-rel="job3">Job 3</a>
</nav>

<div class="job-details" id="job1">
  <p>Job 1</p>        
</div>
<div class="job-details" id="job2">
  <p>Job 2</p>        
</div>
<div class="job-details" id="job3">
  <p>Job 3</p>        
</div>

.job-details {
  position: absolute;
  width: 400px;
  height: 200px;
  border: 1px solid #ddd;
  display: none;
}

$(function() {
  $('nav a').click(function() {
    $('.job-details').fadeOut(400);
    $('#'+$(this).data('rel')).fadeIn(400);
  });    
});

I did try click for the links, and also for close buttons, and that seemed to work. But I need to be able to bookmark the URL. — khal28, Jan 31 '14 at 17:46

score 0 · Answer 3 · answered Jan 31 '14 at 17:38

0

Palpatim is right, this will do the job:

var jobID = location.hash.substring(4);

Here is a jsfiddle: http://jsfiddle.net/Cc9dL/

answered Jan 31 '14 at 17:38

Til

24
3

Thank you, yes it was just the number I needed for the jobID. The selected div shows now, but only after the page has loaded. I can adjust the number to change the div. However, re-entering with the same number the div hides itself again. I've tried changing the hide() in hashchange to: `$('.job-details:not([data-jobid="' + jobID + '"]').hide();` – khal28 Jan 31 '14 at 18:48

Ishan Jain · Answer 4 · 2014-01-31T17:49:57.787

Jquery hashchange

Your function working correctly after making some changes in get/set jobid.

Here location.hash gives you #job8, so you can directly use this as id selector.

$(window).bind('hashchange', function() {
     if (location.hash.substring(0,4) == "#job"){
         var jobID = location.hash;
         $('.job-details').hide();
         $(jobID).show();
     }
});

Try in fiddle

Updated :

$(window).bind('hashchange', function() {
     if (location.hash.substring(0,4) == "#job"){
        var jobID = location.hash.substring(4);
        $('.job-details').hide();
        $('div[data-jobid="' + jobID + '"]').show();
     }
});

Try in Fiddle

Hashchange to show divs

4 Answers4