ScrollTo offset not working in Safari 4/Opera 10

ScrollTo offset not working in Safari 4/Opera 10

Hello Guys,

I'm using the JQuery ScrollTo Plugin to create a horizontal scrolling layout, and using the offset: option to make sure the content lines up with the menu. Although offset seems to work fine in Firefox and Chrome it doesn't in Safari and Opera.

Hope you can help

Take a look http://www.qbessi.com/test/

Many Thanks,

Q


JQuery

<script type="text/javascript">
        $(document).ready(function(){
            $('.banner').localScroll({
                        axis: 'x',
                        duration: 1300,
                        stop: true,
                        offset: -350
                    });
            $("a[rel^='prettyPhoto']").prettyPhoto();
        });
    </script>


HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<title>Test</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.banner').localScroll({
                    axis: 'x',
                    duration: 1300,
                    stop: true,
                    offset: -350
                });
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

</head>
<body>

<div class="wrapper">

<div class="banner">
        <ul class="menu">
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#price-list">Price List</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
</div><!-- End Banner -->

<div class="scroller">
<div id="content">
<ul id="home" >
        <li><h1>TEST TEST TEST TEST</h1></li>
        <li><h2>TEST TEST TEST TEST</h2></li>
        <li><h3>TEST TEST TEST TEST</h3></li>
    </ul>

    <ul id="portfolio" >
        <li><h1>TEST TEST TEST TEST</h1></li>
        <li><h2>TEST TEST TEST TEST</h2></li>
        <li><h3>TEST TEST TEST TEST</h3></li>
    </ul>

    <ul id="about" >
        <li><h1>TEST TEST TEST TEST</h1></li>
        <li><h2>TEST TEST TEST TEST</h2></li>
        <li><h3>TEST TEST TEST TEST</h3></li>
    </ul>

    <ul id="price-list" >
        <li><h1>TEST TEST TEST TEST</h1></li>
        <li><h2>TEST TEST TEST TEST</h2></li>
        <li><h3>TEST TEST TEST TEST</h3></li>
    </ul>

        <ul id="contact">
        <li><h1>TEST TEST TEST TEST</h1></li>
        <li><h2>TEST TEST TEST TEST</h2></li>
        <li><h3>TEST TEST TEST TEST</h3></li>
    </ul>

</div><!-- End Content -->

</div><!-- End Scroller -->

<div class="footer" >

</div><!-- End Footer -->

</div><!-- End Wrapper -->

</body>

</html>


/* Resets */
html{color:#000; background:#FFF}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{margin:0; padding:0}
table{border-collapse:collapse; border-spacing:0}
fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var, optgroup{font-style:inherit; font-weight:inherit}
del, ins{text-decoration:none}
li{list-style:none}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
q:before, q:after{content:''}
abbr, acronym{border:0; font-variant:normal}
sup{vertical-align:baseline}
sub{vertical-align:baseline}
legend{color:#000}
input, button, textarea, select, optgroup, option{font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit}
input, button, textarea, select{*font-size:100%}
body{font:13px/1.231 helvetica,arial,clean,sans-serif; *font-size:small; *font:x-small}
select, input, button, textarea, button{font:99% helvetica,arial,clean,sans-serif}
table{font-size:inherit; font:100%}
pre, code, kbd, samp, tt{font-family:monospace; *font-size:108%; line-height:100%}

body{font:62.5% helvetica,arial,clean,sans-serif; overflow-x:hidden}


/* Containers */

.scroller{height:350px;  width:5900px;  overflow:auto;  overflow-x:hidden;  position:relative;  clear:left}

#content{position:relative; top:0; padding-top:10px; width:7000px}

#content ul{ display:inline; float:left; width:728px; padding-right:200px}

div.wrapper{margin:0 auto; width:960px; padding-top:31px}

/* Link Styles */
a:link, a:visited{color:#231f20; font-weight:bold}
a:hover{color:#231f20; cursor:pointer}
a:active{color:#231f20}

/* Headings */
h1{font-family:Helvetica,Arial,sans-serif; font-weight:bold; color:#231f20; font-size:10.82em; letter-spacing:-0.10em; line-height:0.750; text-transform:uppercase}

h1 span{color:#fa7717; font-weight:bold}
h2{font-family:Georgia,'Palatino Linotype',serif; font-size:2.8em; letter-spacing:-0.04em; line-height:1.95em; color:#fa7717; white-space:nowrap; font-weight:normal}

h3{font-family:Georgia,'Palatino Linotype',serif; font-size:2em; font-style:italic; line-height:0.3em; font-weight:normal}

/* Main Nav */
.banner{margin-bottom:230px}
.logo{border:0; outline:none}

.logo, .menu{position:fixed}

.menu{outline:none; margin-top:86px}

.menu li{display:inline; margin-right:20px}

.menu li a{font:1.6em Helvetica,Arial; font-weight:bold; text-transform:uppercase; text-decoration:none; color:#000; outline:none}

.menu li a.selected{border-bottom:3px solid #fa7717}

    • Topic Participants

    • mk