JS + changing element CSS + named anchors

Question

I need help with some javascript, cos I'm a total newbie at it.

Basically the effect I'm working on is to have a nice landing page, with several links, and when the links are clicked, that whole initial "screen" should slide to the side and become a side-menu bar.

I got that far. I achieved it by using these tips: Change an element's class with JavaScript

Basically I change the div layers' CSS class with onclick js actions and get a nice sliding effect with css transitions.

However, that's not enough. The problem is that there is no way to give someone a direct link to one of the pseudo "sub-pages" then. Every time the page is loaded, it shows the landing screen again. I could use named anchors maybe, to "activate" a specific div layer.

But I don't know how to do that. I would have to execute a specific javascript function depending on the URL from which the page is being accessed... and umm... that's over my head.

Maybe I'm setting everything up completely wrong to begin with? I don't know... I hope someone can help. :(

Here's my jsfiddle:

http://jsfiddle.net/7hktzd44/8/

html:

<div id="overlay">
OVERLAY (menu)
<br /><br />
<a href="#one" id="link">link</a><br />
<a href="#two" id="linktwo">link2</a>
</div>

<div id="div1">
<a name="one" id="one"></a>
THIS IS LINK ONE DIV
</div>

<div id="div2">
<a name="two" id="two"></a>
THIS IS LINK TWO DIV
</div>

CSS:

body,html{
    margin: 0;
    padding: 0;
    background:#fff;
    color: #000;
}

#div1,
#div2{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 1s linear; 
    transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
}

.visible{
    float: left;
    width: 65%;
    border: 1px solid #369;
    visibility: visible!important;
    filter:alpha(opacity=100)!important; /* For IE8 and earlier */
    opacity: 1!important;
    -webkit-transition: opacity 2s linear; 
    transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
}

#overlay{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #999;
    color: #fff;
    text-align: center;
    -webkit-transition: all 0.4s ease-in-out; 
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;

}

.menu{
    width: 35%!important;
    position: fixed!important;
    top: 0;
    right: 0;
    background-color:#b9bcab;
    height: 100%;
    -webkit-transition: all 0.7s ease-in-out; 
    transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;

}

and the JS:

function visibleone()
    {
        document.getElementById("overlay").className = "menu";
        document.getElementById("div1").className = "visible";
        document.getElementById("div2").className =
        document.getElementById("div2").className.replace
      ( /(?:^|\s)visible(?!\S)/g , '' )
    }

function visibletwo()
    {
        document.getElementById("overlay").className = "menu";
        document.getElementById("div2").className = "visible";
        document.getElementById("div1").className =
        document.getElementById("div1").className.replace
      ( /(?:^|\s)visible(?!\S)/g , '' )

    }


 window.onload = function()
    {
    document.getElementById("link").addEventListener( 'click' , visibleone );
    document.getElementById("linktwo").addEventListener( 'click' , visibletwo );
    }

Miro · Accepted Answer · 2015-03-01T23:34:10.077

1

I highly recommend you use jQuery when dealing with hashes and history and deep linking. Will save you a lot of writing and trouble!

Here's a working demo on codepen

http://codepen.io/anon/pen/ByVboZ

(jsfiddle didn't like the hashchange)

$(window).bind( 'hashchange', function(e) { 
      hash = location.hash;      
      $('#overlay').addClass('menu');
        $('.slide').removeClass('visible');
      $('.slide'+hash).addClass('visible');
});

if (window.location.hash) {
    $(window).trigger('hashchange')
}

edited Mar 01 '15 at 23:34

answered Mar 01 '15 at 21:02

Miro

8,402
3
34
72

No problem. Just added one more line to trigger the function on load. If you go to http://codepen.io/anon/pen/ByVboZ#div2 it will open div2 – Miro Mar 01 '15 at 23:34

roeland · Answer 2 · 2015-03-01T21:59:45.520

0

You can use window.location.hash to get the fragment identifier (the part of the URL after the hash # sign).

Then give people a link like this: http://www.example.org/page.html#one

When the page finishes loading you can then open the right page:

window.onload = function()
{
    document.getElementById("link").addEventListener( 'click' , visibleone );
    document.getElementById("linktwo").addEventListener( 'click' , visibletwo );

    // handle direct link to a page:
    if (window.location.hash == "#one") { visibleone(); }
    if (window.location.hash == "#two") { visibletwo(); }
}

edited Mar 01 '15 at 21:59

answered Mar 01 '15 at 21:02

roeland

5,349
2
14
28

Thanks, I tried but it didn't quite work, maybe I did something wrong. Anyway miro's jquery solution works like a charm, I'll go with that. Thanks anyway :) – Tina Malina Mar 01 '15 at 21:41
My mistake, `window.location.hash` includes the hash character. I will edit the answer. – roeland Mar 01 '15 at 21:58

JS + changing element CSS + named anchors

2 Answers2