javascript image pan 'blocking' nav links and making div elements opaque

Question

I have an image, bg, embedded in a div using CSS just above the footer. The idea is when the mouse moves left or right, the image moves along with it. The Javascript above /body is what causes this to work. It works well, but the nav links are now unclickable and the content divs are opaque where you can see the bg image through them. When I remove the #bg div, everything works fine. Any ideas how to fix it? HTML and CSS are below. I got this from tutorial here: panning.

<!DOCTYPE HTML>
<html>
<head>
    <title>portfolio</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/web.css">
    <script src="js/modernizr.custom.js"></script>
    <script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div id="site">
    <header>
        <nav>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
                <li><a href="portfolio.html">PORTFOLIO</a></li>
                <li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
                <li><a href="code.html">CODE</a></li>
                <li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </nav>
    </header>
    <div id="left_col1">
        <a href="../photo_collection_blom/index.html" target="blank"><img src="img/10.png" alt="image" width="280"
                                                                          height="170" class="fade"></a>

        <p>lorem ipsum</p>
    </div>
    <div id="mid_col1">
        <a href="../non_profit/index.html" target="blank"><img src="img/vpf.png" alt="image" width="280" height="170"
                                                               class="fade"></a>

        <p>lorem ipsum</p>
    </div>
    <div id="right_col1">
        <a href="../cd/index.html" target="blank"><img src="img/cd.png" alt="image" width="280" height="170"
                                                       class="fade"></a>

        <p>lorem ipsum</p>
    </div>
    <div class="clearfix"></div>
    <div id="left_col2">
        <a href="../zen/zen.html" target="blank"><img src="img/zen.png" alt="image" width="280" height="170"></a>

        <p>lorem ipsum</p>
    </div>
    <div id="mid_col2">
        <a href="../practicum/index.html" target="blank"><img src="img/practicum.png" alt="image" width="280"
                                                              height="170"></a>

        <p>lorem ipsum</p>
    </div>
    <div id="right_col2">
        <a href="../dropdown_nav/index.html" target="blank"><img src="img/navs.png" alt="image" width="280"
                                                                 height="170"></a>

        <p>lorem ipsum</p>
    </div>
    <div class="clearfix"></div>
    <div id="left_col3">
        <a href="http://centralpaintstore.com" target="blank"><img src="img/cps.png" alt="image" width="280"
                                                                   height="170"></a>

        <p>lorem ipsum</p>
    </div>
    <div id="mid_col3">
        <img src="img/88.png" alt="image" width="280" height="170">

        <p>lorem ipsum</p>
    </div>
    <div id="right_col3">
        <img src="img/99.png" alt="image" width="280" height="170">

        <p>lorem ipsum</p>
    </div>
    <div class="clearfix"></div>
    <div id="bg"></div>
    <footer>
        <p>lorem ipsum</p>
    </footer>
</div>
<!-- close site -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script>
    $(document).ready(function () {
        $('#bg').mousemove(function (e) {
            var mousePos = (e.pageX / $(window).width()) * 100;
            $('#bg').css('backgroundPosition', mousePos + '% 0');
        });
    });
</script>
</body>
</html>

CSS:

* {
    text-decoration:none;
    font-family:Helvetica, sans-serif;
    z-index:100;
}

html {
    background:url(../img/background.gif);
    height:100%;
}

body {
    height:100%;
    z-index:100;
}

#site {
    width:1200px;
    min-height:100%;
    margin:auto;
    position:relative;
    z-index:100;
}

header {
    background:url(../img/background_design.jpg);
    height:63px;
    padding-top:25px;
    z-index:100;
}

nav {
    width:500px;
    padding:10px;
    margin:auto;
    font-family:helvetica, arial, sans-serif;
    font-size:1.2em;
    color:#dcd8cf;
    z-index:100;
}

nav ul {
    word-spacing:20px;
}

li {
    display:inline;
    margin:auto;
}

a:link {
    color:#dcd8cf;
}
/* unvisited link */
a:visited {
    color:#e25d33;
}
/* visited link */
a:hover {
    color:#e25d33;
}
/* mouse over link */
a:active {
    color:#e25d33;
}
/* selected link */

p {
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    line-height:1.2em;
    margin:10px 5px 20px 5px;
}

#site p a:link {
    color:#ed1b24;
}
#site p a:visited {
    color:#ed1b24;
}
#site p a:hover {
    text-decoration:underline;
}
#site p a:active {
    color:#ed1b24;
}

h3 {
    font-family:helvetica, arial, sans-serif;
    font-size:1.5em;
    color:#000;
    margin:20px;
}

#bg {
    background:url(../img/boston_skyline4.png) no-repeat 0 0 scroll;
    height:auto;
    left:0;
    min-height:100%;
    min-width:1024px;
    overflow:hidden;
    position:fixed;
    top:0;
    width:100%;
    z-index:1;
}

#left_col1, #left_col2, #left_col3 {
    border:1px solid #e0dfdf;
    width:280px;
    height:384px;
    margin-left:120px;
    margin-right:20px;
    background:white;
    padding:10px;
    overflow-x:scroll;
    float:left;
    z-index:100;
}

.clearfix {
    height:20px;
    clear:both;
}

#mid_col1, #mid_col2, #mid_col3 {
    border:1px solid #e0dfdf;
    width:280px;
    height:384px;
    margin-right:20px;
    background:white;
    padding:10px;
    overflow-x:scroll;
    float:left;
    z-index:100;
}

#right_col1, #right_col2, #right_col3 {
    border:1px solid #e0dfdf;
    width:280px;
    height:384px;
    background:white;
    padding:10px;
    overflow-x:scroll;
    float:left;
    z-index:100;
}

#left_col1, #mid_col1, #right_col1 {
    margin-top:20px;
}

#left_col3, #mid_col3, #right_col3 {
    margin-bottom:20px;
}

footer {
    background:url(../img/footer.gif);
    margin:auto;
    position:absolute;
    bottom:0;
    width:1200px;
    height:55px;
}

footer p {
    font-family:helvetica, arial, sans-serif;
    color:#e0dfdf;
    font-size:.9em;
    margin:auto;
    padding-top:1.5em;
    padding-left:1.5em;
}

score 0 · Accepted Answer · answered Aug 22 '13 at 03:03

0

The <div id="bg"> tag is sitting on top of everything else in the <div id="body" wrapper. Z-index won't work on your floated columns, so you'll have to wrap your columns in another div or move the <div id="bg"> tag outside of the <div id="body" tag.

Here's a fiddle of the first solution: http://jsfiddle.net/hjeAT/3/

And the second: http://jsfiddle.net/hjeAT/4/

answered Aug 22 '13 at 03:03

Eric Kidd

71
3

This answer works best, but no dice yet; the links are clickable now and there's no opacity issues anymore, but the image, when sliding, only slides when the mouse is hovering outside the body. The image jumps from left to right instead of scrolling smoothly. Is there a way to get it to work properly inside the body tag? – winthropite Aug 22 '13 at 18:52
Try this: `$('body').mousemove(function (e) { ...` as your selector. I've updated this fiddle to demonstrate: http://jsfiddle.net/hjeAT/5/ – Eric Kidd Aug 22 '13 at 22:01

score 0 · Answer 2 · answered Aug 22 '13 at 03:10

i think the z-index of <div id="bg"> changed when run. you should check the z-index when the nav links are unclickable. may be you can change the z-index in your javascript. i have another advise that you'd better remove the z-index in the css of the * selector as follows

* {
    text-decoration:none;
    font-family:Helvetica, sans-serif;
    z-index:100;
}

tokkonopapa · Answer 3 · 2013-08-22T04:29:34.870

0

Here is one solution:

Just delete <div id="bg"></div> and

CSS:

body {
    height:100%;
    background:url(../img/boston_skyline4.jpg) no-repeat 0 0 scroll;
}

script:

You can change the mousemove event target.

<script>
    $(document).ready(function () {
        $('body').mousemove(function (e) {
            var mousePos = (e.pageX / $(window).width()) * 100;
            $('body').css('backgroundPosition', mousePos + '% 0');
        });
    });
</script>

edited Aug 22 '13 at 04:29

answered Aug 22 '13 at 03:30

tokkonopapa

167
4

I expected this to be the best solution but it didn't work. The bg image didn't show up at all. Any ideas as to why? – winthropite Aug 22 '13 at 18:55
Oh I see, the `boston_skyline4.jpg` on `` is under the `background.gif` on ``. I don't know each size of the images and your target element which you expect to move with mouse. So my assumption was like [this fiddle](http://jsfiddle.net/tokkonoPapa/TVkgL/). If you tell us some details about your design, we can help you. – tokkonopapa Aug 23 '13 at 02:12

javascript image pan 'blocking' nav links and making div elements opaque

3 Answers3

CSS:

script: