Adding code to URL that will adjust DIV through jQuery

Question

I have this code as an example:

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
</script>

</head>

<body>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>


             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>

</body>
</html>

On a different page, I want to have a link that will show Div #2 when the user loads the page by clicking that external link. I want this to be possible by adding a hash variable to the URL, for instance: domain.com/page.html#newboxes2

Someone told me that such feature is possible by playing around this with:

$(function(){

  switch( window.location.hash ){
    case '#showcontainer1':
      $('#container1').fadeIn();
      break;
    default:
      $('#container2').fadeIn()
      break;
  }

});

However, after trying to wrap my head around how to add that code to my own code, I could not make it work. How does this work?

Any assistance is appreciate, my knowledge of coding is very limited so please be detailed if you choose to help.

nbrooks · Accepted Answer · 2012-08-03 21:58:43Z

1

Using your current html structure, all you will need to do is this. Navigating to domain.com/page.html#newboxes2 will result in the <div> with id as #newboxes2 will be shown. As you did before, set all of them to display:none; by default. You should consider pulling your styling out of the html and instead put them all between <style> tags at the top of your page. You can use class selectors (e.g. .newboxes) to apply the same style to all elements of a particular class.

Demo: http://jsfiddle.net/eqPGW/4/

Javascript:

$(function() {
    var showBox = window.location.hash.indexOf('#newboxes') != -1;
    if(showBox) {
        $(window.location.hash).prev('.cover').hide();
        $(window.location.hash).show();
    }
    else {
        $('.cover').first().hide();
        $('.newboxes').first().show();   
    }

    $('.cover a').click(function(e) {
        e.preventDefault();
        var $cover = $(this).closest('.cover');
        $cover.hide();
        $('.cover').not($cover).show();
        $('.newboxes').hide();
        $cover.next('.newboxes').show();            
    });
});

HTML/CSS:

<html>
<head>
    <script type="text/javascript">
        // PUT SCRIPT HERE
    </script>
    <style>
        .newboxes {
            border: 1px solid black;
            background-color: #CCCCCC;
            display: none;
            padding: 5px;
            width: 150px;
        }
        .cover {
        border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;
        }
    </style>
</head>

<body>
     <div class="cover">
        <a id="myHeader1" href="#" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes1">Div #1</div>

     <div class="cover" >
        <a id="myHeader2" href="#" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes2">Div #2</div>

     <div class='cover' >
        <a id="myHeader3" href="#" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes2">Div #3</div>        

</body>
</html>

edited Aug 3, 2012 at 21:58

answered Aug 3, 2012 at 21:22

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Henrik Petterson Over a year ago

This did not work. I added this code, then tried domain.com/index.html#newboxes3 but it did not show the newboxes3 div, have you tried this yourself?

Henrik Petterson Over a year ago

Just saw your edit, the style works perfectly, but the URL solution that I was looking for does not function as proposed. Does it work for you?

Henrik Petterson Over a year ago

Would this work although the page is PHP? E.g. index.php#newboxes3 ?

nbrooks Over a year ago

@henrik It operates at the dom level, when it's basically dealing with html anyway. Are you sure jQuery is included correctly? At the top of your jQuery dom ready function put alert(window.location.href); and see if that fires correctly

nbrooks Over a year ago

@henrik Sorry, I was misunderstanding your requirement, get it now. See update jsfiddle.net/eqPGW/4 p.s. notice that I changed your <a> tag href's to just be "#"; putting javascript in the html like that is bad practice

|

Chris Pratt · Accepted Answer · 2012-08-03 21:23:17Z

0

This is actually pretty straight-forward. The "hash" in a URL is the #foo bit; window.location.hash merely returns this bit from the URL. The code you received is kind of ridiculous though. The default functionality of the hash is to make the browser jump to that particular id in the page. If javascript is disabled, you'd still want it to jump, so you shouldn't use some arbitrary hash like #showcontainer1 in the URL, but the actual id itself, #container1. Then, you don't need the switch statement, you just directly show this div.

if (window.location.hash) {
    $(window.location.hash).show();
}

answered Aug 3, 2012 at 21:23

Chris Pratt

240k37 gold badges414 silver badges469 bronze badges

Collectives™ on Stack Overflow

Adding code to URL that will adjust DIV through jQuery

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related