Fullscreen Javascript Slide navigation

Date: 10th Jan 2012 Author: admin 5 Comments
Posted in: HTML/CSS, JavaScript

Fullscreen Javascript Slide navigation

Fullscreen Javascript Slide navigation

Today – new pure javascript tutorial-demonstration. Result page will contain 16 slides (pages). Four in each row, four columns, plus we will add animated navigation to them through css3 arrows (at sides of screen). Plus, we will have mini-navigation bar for better navigation.

Live Demo
download in package

Ok, download the example files and lets start coding !

Step 1. HTML markup

In our markup you can see 16 ‘pages’ and mini-navigation for our slides. Here it is.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Fullscreen Javascript Slide navigation | Script Tutorials</title>
        <link href="css/layout.css" type="text/css" rel="stylesheet">
        <script src="js/main.js"></script>
    </head>
    <body>
        <div class="container" id="container">
            <div id="pages">
                <div id="page1">
                    <a href="#page2" class="go right"></a>
                    <a href="#page5" class="go bottom"></a>
                </div>
                <div id="page2">
                    <a href="#page1" class="go left"></a>
                    <a href="#page3" class="go right"></a>
                    <a href="#page6" class="go bottom"></a>
                </div>
                <div id="page3">
                    <a href="#page2" class="go left"></a>
                    <a href="#page4" class="go right"></a>
                    <a href="#page7" class="go bottom"></a>
                </div>
                <div id="page4">
                    <a href="#page3" class="go left"></a>
                    <a href="#page8" class="go bottom"></a>
                </div>
                <div id="page5">
                    <a href="#page1" class="go top"></a>
                    <a href="#page6" class="go right"></a>
                    <a href="#page9" class="go bottom"></a>
                </div>
                <div id="page6">
                    <a href="#page5" class="go left"></a>
                    <a href="#page2" class="go top"></a>
                    <a href="#page7" class="go right"></a>
                    <a href="#page10" class="go bottom"></a>
                </div>
                <div id="page7">
                    <a href="#page6" class="go left"></a>
                    <a href="#page3" class="go top"></a>
                    <a href="#page8" class="go right"></a>
                    <a href="#page11" class="go bottom"></a>
                </div>
                <div id="page8">
                    <a href="#page7" class="go left"></a>
                    <a href="#page4" class="go top"></a>
                    <a href="#page12" class="go bottom"></a>
                </div>
                <div id="page9">
                    <a href="#page5" class="go top"></a>
                    <a href="#page10" class="go right"></a>
                    <a href="#page13" class="go bottom"></a>
                </div>
                <div id="page10">
                    <a href="#page9" class="go left"></a>
                    <a href="#page6" class="go top"></a>
                    <a href="#page11" class="go right"></a>
                    <a href="#page14" class="go bottom"></a>
                </div>
                <div id="page11">
                    <a href="#page10" class="go left"></a>
                    <a href="#page7" class="go top"></a>
                    <a href="#page12" class="go right"></a>
                    <a href="#page15" class="go bottom"></a>
                </div>
                <div id="page12">
                    <a href="#page11" class="go left"></a>
                    <a href="#page8" class="go top"></a>
                    <a href="#page16" class="go bottom"></a>
                </div>
                <div id="page13">
                    <a href="#page9" class="go top"></a>
                    <a href="#page14" class="go right"></a>
                </div>
                <div id="page14">
                    <a href="#page13" class="go left"></a>
                    <a href="#page10" class="go top"></a>
                    <a href="#page15" class="go right"></a>
                </div>
                <div id="page15">
                    <a href="#page14" class="go left"></a>
                    <a href="#page11" class="go top"></a>
                    <a href="#page16" class="go right"></a>
                </div>
                <div id="page16">
                    <a href="#page15" class="go left"></a>
                    <a href="#page12" class="go top"></a>
                </div>
            </div>
            <div id="nav">
                <div>Fullscreen Javascript Slide navigation</div>
                <div style="width:130px">
                    <a href="#page1" class="go"></a>
                    <a href="#page2" class="go"></a>
                    <a href="#page3" class="go"></a>
                    <a href="#page4" class="go"></a>
                    <a href="#page5" class="go"></a>
                    <a href="#page6" class="go"></a>
                    <a href="#page7" class="go"></a>
                    <a href="#page8" class="go"></a>
                    <a href="#page9" class="go"></a>
                    <a href="#page10" class="go"></a>
                    <a href="#page11" class="go"></a>
                    <a href="#page12" class="go"></a>
                    <a href="#page13" class="go"></a>
                    <a href="#page14" class="go"></a>
                    <a href="#page15" class="go"></a>
                    <a href="#page16" class="go"></a>
                </div>
                <div><a href="http://script-tutorials.com/fullscreen-javascript-slide-navigation/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a></div>
            </div>
        </div>
    </body>
</html>

Step 2. CSS

Now – stylesheets for our slides:

css/layout.css

*{
    margin:0;
    padding:0;
}
body {
    background-color:#aaa;
    color:#fff;
    font:16px Arial,sans-serif;
    font-weight:700;
    margin:0px;
    padding:0px;
    background:#111;
    width:100%;
    height:100%;
}
a.stuts,a.stuts:visited{
    color: #FCFCFC;
    font-size: 14px;
    text-decoration: none;
}
.stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#pages {
    left:0;
    position:absolute;
    top:0;
}
#nav {
    background-color:rgba(0, 0, 0, 0.8);
    margin:0;
    outline:#333 solid 1px;
    padding:10px;
    position:fixed;
    right:200px;
    top:50px;
    width:200px;
}
#nav div a.go {
    background:#333;
    float:left;
    height:25px;
    margin:3px;
    overflow:hidden;
    text-decoration:none;
    width:25px;
}
#nav div a.go:visited,#nav div a.visited {
    background-color:#666;
}
#nav div a.go:active,#nav div a.active {
    background-color:#fff !important;
}
#nav div a.go:hover,#nav div a.go:focus {
    background-color:#00f;
}
#pages > div {
    height:1100px;
    position:absolute;
    width:1700px;
}
#page1 {
    background:url(../images/1.jpg) no-repeat center center;
    left:0;
    top:0;
}
#page2 {
    background:url(../images/2.jpg) no-repeat center center;
    left:1800px;
    top:0;
}
#page3 {
    background:url(../images/3.jpg) no-repeat center center;
    left:3600px;
    top:0;
}
#page4 {
    background:url(../images/4.jpg) no-repeat center center;
    left:5400px;
    top:0;
}
#page5 {
    background:url(../images/5.jpg) no-repeat center center;
    left:0;
    top:1300px;
}
#page6 {
    background:url(../images/6.jpg) no-repeat center center;
    left:1800px;
    top:1300px;
}
#page7 {
    background:url(../images/7.jpg) no-repeat left center;
    left:3600px;
    top:1300px;
}
#page8 {
    background:url(../images/8.jpg) no-repeat center center;
    left:5400px;
    top:1300px;
}
#page9 {
    background:url(../images/9.jpg) no-repeat center center;
    left:0;
    top:2600px;
}
#page10 {
    background:url(../images/10.jpg) no-repeat center center;
    left:1800px;
    top:2600px;
}
#page11 {
    background:url(../images/11.jpg) no-repeat center center;
    left:3600px;
    top:2600px;
}
#page12 {
    background:url(../images/12.jpg) no-repeat center center;
    left:5400px;
    top:2600px;
}
#page13 {
    background:url(../images/13.jpg) no-repeat center center;
    left:0;
    top:3900px;
}
#page14 {
    background:url(../images/14.jpg) no-repeat center center;
    left:1800px;
    top:3900px;
}
#page15 {
    background:url(../images/15.jpg) no-repeat center center;
    left:3600px;
    top:3900px;
}
#page16 {
    background:url(../images/16.jpg) no-repeat center center;
    left:5400px;
    top:3900px;
}
#pages .left {
    border-bottom:transparent solid 50px;
    border-right:#FFF solid 80px;
    border-top:transparent solid 50px;
    height:0;
    left:20px;
    position:absolute;
    top:50%;
    width:0;
}
#pages .right {
    border-bottom:transparent solid 50px;
    border-left:#FFF solid 80px;
    border-top:transparent solid 50px;
    height:0;
    position:absolute;
    right:20px;
    top:50%;
    width:0;
}
#pages .top {
    border-bottom:#FFF solid 80px;
    border-left:transparent solid 50px;
    border-right:transparent solid 50px;
    height:0;
    left:50%;
    position:absolute;
    top:20px;
    width:0;
}
#pages .bottom {
    border-left:transparent solid 50px;
    border-right:transparent solid 50px;
    border-top:#FFF solid 80px;
    bottom:20px;
    height:0;
    left:50%;
    position:absolute;
    width:0;
}
#pages .left:hover {
    border-right:red solid 80px;
}
#pages .right:hover {
    border-left:red solid 80px;
}
#pages .top:hover {
    border-bottom:red solid 80px;
}
#pages .bottom:hover {
    border-top:red solid 80px;
}
#nav > div {
    margin:10px auto;
    overflow:hidden;
    text-align:center;
}

Step 3. JS

ANd now – our javascript code:

js/main.js

var navi = {
    // variables
    aPages : [],
    aLinks : [],
    tween : {},
    oParent : null,
    oPages : null,
    bRunning : null,
    sTargPage : null,
    sCurPage : null,
    bHash : null,
    sOldH : null,
    bUpdateH : true,

    // initialization
    init : function (aParams) {
        this.oPages = document.getElementById(aParams.pages_id);
        this.oParent  = document.getElementById(aParams.parent_id);

        var aAEls = this.oParent.getElementsByTagName('a');
        var i = 0; var p = null;
        while (p = aAEls[i++]) {
            if (p.className && p.className.indexOf('go') >= 0) {
                var sHref = p.href.split('#')[1];
                var oDst = document.getElementById(sHref);
                if (oDst) {
                    // fill-in pages array
                    this.aPages[sHref] = {
                        oObj:  oDst,
                        iXPos: -oDst.offsetLeft,
                        iYPos: -oDst.offsetTop
                    };

                    // fill-in links array
                    this.aLinks.push({a: p, oObj: oDst});

                    p.onclick = function () {
                        navi.goto(this.href.split('#')[1], aParams.duration);
                        return false;
                    }
                }
            }
        }

        this.resize();

        if ('onhashchange' in window) {
            if (location.hash !== '' && location.hash !== '#') {
                this.sOldH = location.hash.substring(1);
                this.goto(this.sOldH, -1);
            } else
                this.goto('page1', -1);
            this.bHash = true;

            window.onhashchange = function() {
                if (location.hash.substring(1) !== navi.sOldH) {
                    navi.sOldH = location.hash.substring(1);
                    if (navi.sOldH == '') {
                        navi.bUpdateH = false;
                    }
                    navi.goto(navi.sOldH, aParams.duration);
                }
                return false;
            }
        }
    },

    // on resize
    resize : function () {
        var iCurW = this.oParent.offsetWidth; // current sizes
        var iCurH = this.oParent.offsetHeight;
        for (var i in this.aPages) { // for each page
            var oPage = this.aPages[i];
            var iNewX = Math.round(oPage.oObj.offsetLeft * iCurW / oPage.oObj.offsetWidth); // new sizes
            var iNewY = Math.round(oPage.oObj.offsetTop  * iCurH / oPage.oObj.offsetHeight);
            oPage.oObj.style.left   = iNewX + 'px';
            oPage.oObj.style.top    = iNewY + 'px';
            oPage.oObj.style.width  = iCurW + 'px';
            oPage.oObj.style.height = iCurH + 'px';
            oPage.iXPos = -iNewX;
            oPage.iYPos = -iNewY;

            if (this.sCurPage)
                this.goto(this.sCurPage, -1);
        }
    },

    goto : function (sHref, iDur) {
        this.tween.iStart = new Date() * 1;
        this.tween.iDur = iDur;
        this.tween.fromX = this.oPages.offsetLeft;
        this.tween.fromY = this.oPages.offsetTop;
        this.tween.iXPos   = this.aPages[sHref].iXPos - this.tween.fromX;
        this.tween.iYPos   = this.aPages[sHref].iYPos - this.tween.fromY;
        this.sTargPage = sHref;

        if (! this.bRunning)
            this.bRunning = window.setInterval(this.animate, 24);
    },

    animate : function () {
        var iCurTime = (new Date() * 1) - navi.tween.iStart;
        if (iCurTime < navi.tween.iDur) {
            var iCur = Math.cos(Math.PI * (iCurTime / navi.tween.iDur)) - 1;
            navi.oPages.style.left = Math.round(-navi.tween.iXPos * .5 * iCur + navi.tween.fromX) + 'px';
            navi.oPages.style.top  = Math.round(-navi.tween.iYPos * .5 * iCur + navi.tween.fromY) + 'px';
        } else {
            navi.oPages.style.left = Math.round(navi.tween.fromX + navi.tween.iXPos) + 'px';
            navi.oPages.style.top  = Math.round(navi.tween.fromY + navi.tween.iYPos) + 'px';

            window.clearInterval(navi.bRunning);
            navi.bRunning = false;
            navi.sCurPage = navi.sTargPage;

            var i = 0; var p = null;
            while (p = navi.aLinks[i++]) {
                if (p.oObj.id == navi.sCurPage) {
                    if (p.a.className.indexOf('visited') >= 0 ) {
                        p.a.className = p.a.className.replace('visited', 'active');
                    } else p.a.className += ' active';
                    p.visited = true;
                } else if (p.visited) {
                    p.a.className = p.a.className.replace('active', 'visited');
                }
            }

            if (navi.bHash) {
                if (navi.bUpdateH) {
                    navi.sOldH = navi.sCurPage;
                    window.location.hash = navi.sCurPage;
                }
                navi.bUpdateH = true;
            }
        }
    }
}

window.onload = function() { // page onload
    navi.init({parent_id: 'container', pages_id: 'pages', duration: 1000});
}
window.onkeydown = function(event){ // keyboard alerts
    switch (event.keyCode) {
        case 37: // Left key
            var iPage = navi.sCurPage.substring(4) * 1;
            iPage--;
            if (iPage < 1) {
                iPage = 1;
            }
            navi.goto('page' + iPage, 1000);
            break;
        case 39: // Right key
            var iPage = navi.sCurPage.substring(4) * 1;
            iPage++;
            if (iPage > 16) {
                iPage = 16;
            }
            navi.goto('page' + iPage, 1000);
            break;
    }
};
Live Demo
download in package

Conclusion

Finally we have prepared interested result! I hope that this will interesting addition to your website. Don’t forget to tell thanks and leave a comment. Good luck!

Enjoyed this Post?

If you enjoyed this article, feel free to share our tutorial with your friends.
    Tweet
   
   

Stay connected with us:

Written by: admin on January 10, 2012.

5 Comments

    • Raj's Gravatar
    • Alexandre's Gravatar
    • AlexandreMarch 7, 2012 11:27 pm

      Hi!

      I’m getting this error:

      SCRIPT5007: Unable to get value of the property ‘iXPos’: object is null or undefined
      newSlider.js, line 93 character 9

      It shows up when I load the page. I tried to adapt your code to a page I’m developing, any idea why this happens?

      Thanks in advance!

    • pol's Gravatar
    • polMarch 29, 2012 8:13 pm

      Hello, could you please explain (comment a bit more the code) how did you manage to make the mini-navigation?
      thanks!!

    • admin's Gravatar
    • adminApril 14, 2012 5:53 pm

      Hello Alexandre,
      What is your browser?
      Because our demo should work well in most of browsers (FF, Chrome and IE).
      Generally, that iXPos property is filled for each page during initialization, look at code at line 30.
      iXPos: -oDst.offsetLeft,
      so, the same value (of iXPos) is at line 93 too.

    • admin's Gravatar
    • adminApril 15, 2012 8:08 am

      Hello Pol,
      But, this is just ordinary DIV with ID=nav, try to inspect styles of this DIV

Leave a Reply

Your email address will not be published. Required fields are marked *

*

CAPTCHA Image
Refresh Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>