EzDevInfo.com

impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz impress.js is a presentation tool based on the power of css3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Get it on Github
Language : Javascript

http://impress.github.io/impress.js

impress.js with fixed top nav not working

I have been working with impress.js, html5 and css. I have got my impress.js presentation to a standard I am quite happy with but I am trying to implement a fixed top nav similar to Twitters.

The current implementation does not work correctly. if you click the bar whilst on a slide/step the links are unclickable.

My Attempt

HTML

<!DOCTYPE html5>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <title>PATCHU_</title>

    <meta name="author" content="patchu" />

    <link rel='nofollow' href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
    <link rel='nofollow' href="css/style.css" rel="stylesheet" />

    <link rel="shortcut icon" rel='nofollow' href="favicon.png" />
    <link rel="apple-touch-icon" rel='nofollow' href="apple-touch-icon.png" />
</head>

<body class="impress-not-supported">
<div class="fallback-message">
    <p>Your browser <strong>doesn't support the features required</strong> by my website, so you are presented with a simplified version.</p>
    <p>For the best experience please use the latest <strong>Chrome</strong>, <strong>Safari</strong> or <strong>Firefox</strong> browser.</p>
</div>
<div class="navbar-fixed-top2" align="center">
<p>Navigation will go here <a class="" rel='nofollow' href="#websites" title="My Websites">My Websites</a> 
<a class="" rel='nofollow' href="#about" title="My Websites">About</a> 
<a class="" rel='nofollow' href="#contact" title="My Websites">Contact</a>
<a class="" rel='nofollow' href="#applications" title="My Websites">Applications</a>
</div>
<div id="impress" data-transition-duration="800">   
    <div id="title" class="step slide" data-x="0" data-y="0" data-scale="3">
        <hgroup>
            <h1>@PATCHU_</h1>
            <h2></h2>
        </hgroup>
    </div>
    <div id="about" class="step slide" data-x="-1000" data-y="-700" data-rotate="270" data-scale="5">
            <h1>About Me</h1>
    </div>
    <div id="about1" class="step slide about" data-x="-1900" data-y="880" data-z="-100" data-rotate="270" data-scale="1">
            <p>Apart from making <strong>awesome websites</strong>, I love computer networking and making <strong>iOS applications.</strong></p>
    </div>
    <div id="about2" class="step slide about" data-x="-1900" data-y="100" data-z="-100" data-rotate="270" data-scale="1">
            <p>Minimalist, <strong>Perfectionist</strong>, Gamer and Apple fanboy. I have a passion for creating stuff. Love trying out <strong>new technologies</strong> and experiences.</p>
    </div>
    <div id="about3" class="step slide about" data-x="-1900" data-y="-800" data-z="-100" data-rotate="270" data-scale="1">
            <p>I mostly code in <strong>PHP</strong> and <strong>Objective-C</strong>, but I'm not afraid to get my hands dirty.</p>
    </div>
    <div id="about4" class="step slide about" data-x="-1900" data-y="-1600" data-z="-100" data-rotate="270" data-scale="1">
            <p><strong>Graduated</strong> with a <strong>1:1</strong> (84% Average) in Computer Network Technology BSc.</p>
    </div>
    <div id="websites" class="step slide" data-x="7100" data-y="-700" data-z="-3000" data-rotate="0" data-scale="5">
            <h1>Websites</h1>
    </div>
    <div id="applications" class="step slide application" data-x="3950" data-y="-4500" data-z="-3000" data-rotate="90" data-scale="5">
            <h1>Applications</h1>
    </div>
    <div id="contact" class="step slide" data-x="-180" data-y="2100" data-scale="3">
            <h1>Connect</h1>
            <p></p>

            <div id="contact_images">
                <a rel='nofollow' href=""><img src="images/twitter.png"></a>
                <a rel='nofollow' href=""><img src="images/linkedin.png"></a>
            </div>
    </div>
</div>


<script src="js/impress.js"></script>
<script>
    //All hail megatron
    impress().init();
    //impress().showMenu();
</script>
</body>

</html>

CSS

/* 
    Resetting the humans
*/
.navbar-fixed-top2{
    position:fixed;
    top:0;
    width:100%;
    height:50px;
    background-color:red;
    z-index:3000;
}