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>HOME</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>PORTFOLIO</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>CODE</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>CONTACT</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">
<img src="img/zen.png" alt="image" width="280" height="170">
<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;
}
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/
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;
}
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>
Related
I'm trying to change the background of NAV when i scroll. What i've done already is below. I don't know what else to do!
CSS
html, body{
margin:0;
padding:0;}html{
font-family: Poppins,sans-serif;}.jumbotron{
text-align:center;
color:red;
background-image: url(IMG/dyta.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
height:100vh;
padding-top:100px;}header{
z-index:1;
position:fixed;
display:flex;
width:100vw;
height:100px;
margin-left:80px;
font-size:20px;
line-height:100px;
color:white;}div.logo{
width:40%;}ul.header-menu-ul{
display:flex;}li.header-menu-li{
list-style:none;
margin-left:auto;
margin-right:auto;}.header-menu-li a{
text-decoration:none;
color:white;
text-transform:uppercase;
letter-spacing:2px;
font-weight: 600;
font-size:14px;
font-family: Poppins,sans-serif;}.header-nav.scrolled {
background-color: #fff;
transition: background-color 200ms linear;}
HTML
<header class="container-fluid header-nav">
<div class="logo text-center">
<i class="fab fa-google"></i>
</div>
<nav class="container-fluid nav-items text-center">
<ul class="header-menu-ul nav-links">
<li class="header-menu-li"><a title="AboutUs" href="#">About Us</a></li>
<li class="header-menu-li"><a title="Services" href="#">Services</a></li>
<li class="header-menu-li"><a title="OurProjects" href="#">Our Projects</a></li>
<li class="header-menu-li"><a title="News" href="#">News</a></li>
<li class="header-menu-li"><a title="Contact" href="#">Contact</a></li>
</ul>
</nav></header>
<div class="jumbotron section text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
JavaScript
$(function () {$(document).scroll(function () {
var $nav = $(".header-nav");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});});
I've been stuck in this for 3 days and i don't know what else to do! I don't kno where my problem is.Can anyone please help me??
try this
$(function () {
$(document).scroll(function () {
if($(this).scrollTop() > $(".header-nav").height()) {
$(".header-nav").addClass('scrolled');
}
});
});
make sum height for your content to see your code works, see this: https://codepen.io/anon/pen/bzbOzv
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
Hello I Work On Create Simple JQuery LightBox With Slide, So What is I Need That When I Click on Any Image, I Want This Image To Added to img Tag That it's Inside Div With Class .lightbox, And When Click On .next The Code Will Get The Next Image of The Current Image And When Click on previous The Code Will Get The Previous Image of The Current Image:
Second: I'd Like To Add Fade Effect Between Sliders.
Note: I'd Like To Understand More And More About JavaScript And JQuery So Please Not Suggest Any Plugin.
$(document).ready(function () {
$(".image img").click(function (e) {
e.preventDefault();
$(".lightbox img").attr("src", $(this).attr("src"));
});
$(".lightbox .next").click(function (e) {
e.preventDefault();
});
})
.image{
width:200px;
float:left;
}
.image img{
width:100%;
height:auto;
}
.clearfix{
clear:both;
}
.lightbox{
width:300px;
height:300px;
position:relative;
margin:50px auto;
border:2px solid #0094ff;
text-align:center;
line-height:300px;
font-size:40px;
}
.lightbox img{
width:100%;
height:auto;
position:absolute;
top:0;
left:0;
}
.lightbox div {
position:absolute;
top:0;
right:0;
bottom:0;
width:50px;
background-color:rgba(0, 234, 119, 0.80);
cursor:pointer;
}
.lightbox .left{
right:0;
left:0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image">
<img src="http://store6.up-00.com/2017-02/14870503793991.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037950512.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037968313.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037982314.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037997515.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705038013416.jpg" alt="" />
</div>
<div class="clearfix"></div>
<div class="lightbox">
<img src=""/>
<div class="next">
<i class="fa fa-chevron-right"></i>
</div>
<div class="left">
<i class="fa fa-chevron-left"></i>
</div>
</div>
Note: Please Run Code Snippet In Full screen
Try this, make an array of images while clicking on it, and then show them on .next click.
$(document).ready(function () {
var images = [];
var j;
$(".image img").click(function (e) {
e.preventDefault();
j = $(this).attr("src");
$(".lightbox img").attr("src", j);
images.push(j);
});
var i = 0;
$(".lightbox .next").click(function (e) {
$(".lightbox img").attr("src", images[i]);
i++
});
})
.image{
width:200px;
float:left;
}
.image img{
width:100%;
height:auto;
}
.clearfix{
clear:both;
}
.lightbox{
width:300px;
height:300px;
position:relative;
margin:50px auto;
border:2px solid #0094ff;
text-align:center;
line-height:300px;
font-size:40px;
}
.lightbox img{
width:100%;
height:auto;
position:absolute;
top:0;
left:0;
}
.lightbox .next{
position:absolute;
top:0;
right:0;
bottom:0;
width:50px;
background-color:rgba(0, 234, 119, 0.80);
cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image">
<img src="http://store6.up-00.com/2017-02/14870503793991.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037950512.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037968313.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037982314.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037997515.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705038013416.jpg" alt="" />
</div>
<div class="clearfix"></div>
<div class="lightbox">
<img src=""/>
<div class="next">
<i class="fa fa-chevron-right"></i>
</div>
</div>
Take a look at this.
I only added a few lines to your js
UPDATE: added previous button and fade effect.
UPDATE 2: working fiddle with some ideas that can help you to develop your slideshow.
$(document).ready(function () {
var first_img = $(".image img:first");
var last_img = $(".image img:last");
$(".lightbox img").attr("src", first_img.attr('src'));
$(".image img").click(function (e) {
$(".lightbox img").attr("src", $(this).attr("src"));
});
$(".lightbox .next").click(function (e) {
var img = $('.image img[src="' + $(this).parent().find('img').attr('src') + '"]').parent().next('div').find('img');
if (img.length === 0) { img = first_img; }
$(".lightbox img").attr("src", img.attr('src')).stop(true,true).hide().fadeIn(200);
});
$(".lightbox .prev").click(function (e) {
var img = $('.image img[src="' + $(this).parent().find('img').attr('src') + '"]').parent().prev('div').find('img');
if (img.length === 0) { img = last_img; }
$(".lightbox img").attr("src", img.attr('src')).stop(true, true).hide().fadeIn(200);
});
});
.image{
width:200px;
float:left;
}
.image img{
width:100%;
height:auto;
}
.clearfix{
clear:both;
}
.lightbox{
width:300px;
height:300px;
position:relative;
margin:50px auto;
border:2px solid #0094ff;
text-align:center;
line-height:300px;
font-size:40px;
background-color: rgba(0, 234, 119, 0.80);
}
.lightbox img{
width:100%;
height:auto;
position:absolute;
top:0;
left:0;
}
.lightbox .next{
position:absolute;
top:0;
right:0;
bottom:0;
width:50px;
background-color:rgba(0, 234, 119, 0.80);
cursor:pointer;
}
.lightbox .prev{
position:absolute;
top:0;
left:0;
bottom:0;
width:50px;
background-color:rgba(0, 234, 119, 0.80);
cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image">
<img src="http://store6.up-00.com/2017-02/14870503793991.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037950512.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037968313.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037982314.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705037997515.jpg" alt="" />
</div>
<div class="image">
<img src="http://store6.up-00.com/2017-02/148705038013416.jpg" alt="" />
</div>
<div class="clearfix"></div>
<div class="lightbox">
<img src=""/>
<div class="next">
<i class="fa fa-chevron-right"></i>
</div>
<div class="prev">
<i class="fa fa-chevron-left"></i>
</div>
</div>
I am trying to write one vertical menu like in this website . On hover the vertical menu should shift marginally to the right side and should display the sub menu.
I have been failed to accomplish this.
Please help me :(
<html>
<head>
<title></title>
<style>
.apear
{
width:200px;
height:300px;
background-color:pink;
float:right;
display:none;
}
.one
{
background-color:yellow;
height:100px;
width:100px
}
.two
{
background-color:blue;
height:100px;
width:100px
}
.three
{
background-color:green;
height:100px;
width:100px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<div class="apear">
</div>
<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
</body>
</html>
Here's the solution, I used JQuery:
HTML:
<div>
<div class="apear">
</div>
<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS:
.apear
{
width:200px;
height:300px;
background-color:pink;
float:right;
display:none;
}
.one
{
background-color:yellow;
height:100px;
width:100px
}
.two
{
background-color:blue;
height:100px;
width:100px
}
.three
{
background-color:green;
height:100px;
width:100px
}
JQuery:
$(document).ready(function(){
$(".one").mouseenter(function(){
$(".apear").show(500);
});
$(".apear").mouseleave(function(){
$(".apear").hide(500);
});
});
Here is a fiddle
I'm trying to make my HTML body move left when I click on the menu logo, but that doesn't seem to work through jQuery... I have played with the scripts' locations in the top of the page, and that doesn't seem to be the problem.
This is my HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>final project</title>
<link rel="stylesheet" type="text/css" href="css/final-fix.css">
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/final.js"></script>
</head>
<body>
<div class="container-box">
<nav>
<ul class="nav nav-pills pull-right">
<li role="navigation">Home</li>
<li role="navigation">About Us</li>
<li role="navigation">Contact Us</li>
</ul>
<ul ul class="nav nav-pills pull-left">
<li role="menu"><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span></li>
</ul>
</nav>
<header></header>
<div class="main" id="grad"><h1>Welcome to ducati</h1>
<div class="cover-div">
<div class="box" id="box1">
<span class="glyphicon glyphicon-headphones"></span>
<p>Lorem ipsum </p>
</div>
<div class="box" id="box2">
<span class="glyphicon glyphicon-music"></span>
<p>Lorem ipsum </p>
</div>
<div class="box" id="box3">
<span class="glyphicon glyphicon-download-alt"></span>
<p>Lorem ipsum </p>
</div>
<div class=" box" id="box4">
<span class="glyphicon glyphicon-shopping-cart"></span>
<p>Lorem ipsum </p>
</div>
</div>
</div>
<footer> © All right belong to me :) </footer>
</div>
</body>
</html>
This is my CSS:
* {
margin: 0;
padding: 0;
font-family: arial;
}
.container-box{
position:relative;
margin: 0 auto;
width:600px;
height:570px;
border:2px solid black;
}
.pull-right {
/* font-weight:bold; */
}
header {
background-image: url('http://dre.ducati.it/wp-content/uploads/2015/02/Home_Multi-720x404.jpg');
height:30%;
width:100%;
background-position: center center;
}
.main h1{
text-align:center;
margin:auto;
}
.main span{
text-align:center;
font-size:30px;
margin-top:10px;
}
.main{
position: relative;
height: 60%;
border-bottom:2px solid black;
text-align:center;
}
#grad {
background: -webkit-linear-gradient(left top, gray,gray,red,gray,white ); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, gray,gray,red,gray,white); /* Standard syntax */
}
footer {
background-color:gray;
}
.box{
width: 20%;
border: 1px solid black;
margin:2.5%;
height: 50%;
border-radius:15px;
color:purple;
font-weight:bold;
}
.cover-div{
width:100%;
margin:0 auto;
}
#box1{
float:right;
/* margin-left:170px; */
background-image:linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1)
),url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTB2YZ8vH8ya8CmAfxdelGL1Yg2H9wnubKmiMjTfa_-oUyWMBJrsg');
}
#box2{
float:right;
background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRHQ6KOrPE0qzNJXGClg03lWQ_N1mArKThc4oL2Cj9F06RaKHqajg');
}
#box3{
float:right;
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwFGxPLtrhbS_a3m_Vvc8I-M27rdh9fkIdXULQYSEGwuazc4ey');
}
#box4{
float:right;
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpOLpDTHGt7NHyuUtsc3Zrpb5JuV4G6vmIEQKD0VO9Nrot-MS46w');
}
.glyphicon{
color: red;
}
And this is my JavaScript:
var main = function () {
$('.glyphicon-menu-hamburger').click(function () {
$('.container-box').animate({
left: "285px"
}, 200);
});
$(document).ready(main);
};
Put a comment inside of main, you'll see it's not getting called most likely.
It looks like you are making the call to document ready inside of the declaration for main. Meaning it will never get called.
I'm trying to make a horizontal scroll anchoring inside a DIV. Seems to work if I just animate the whole body tag but doesnt seem to work in a DIV for me.
Heres the javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('#wrapper').animate({scrollLeft:$(this.hash).offset().left}, 500);
});
});
</script>
and heres the Html
<body>
<div id="wrapper">
<div id="wrappercontent">
<div id="section1" class="section">
<img src="images/big_head.png" />
</div>
<div id="section2" class="section">
<img src="images/whatis.png" />
</div>
<div id="section3" class="section">
<h2>Section 3</h2>
<p>
blahblahblabh
</p>
</div>
</div>
<div id="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</div>
</div>
</body>
and heres the stylesheet
*{
margin:0;
padding:0;
}
body{
background:#f0efe4;
letter-spacing:-1px;
font-family:Georgia;
font-size: 34px;
font-style: italic;
width:12000px;
}
#wrapper{
width:1000px;
height:700px;
overflow:scroll;
}
#wrappercontent{
height:auto;
width:12000px;
}
#nav{
z-index:1;
position:fixed;
}
.section{
margin:0px;
bottom:0px;
width:4000px;
float:left;
height:100%;
text-shadow:1px 1px 2px #f0f0f0;
}
Its behaving weirdly. Please help
You just need to account for the current scroll position in your calculation:
scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left
Demo: http://jsfiddle.net/brianpeiris/h6hvq/