0

I need to create layout like this
It is not scrolling smoothly.

I need to travel to 2nd div each time before going to div clicked by navigation

My full code is here

css

@import url("reset.css");


html, body{
height:100%;
width:100%;
margin:0;
overflow:hidden;
background:url(images/4.png) repeat center top;
color:#FFFFFF;
}

a{color:#FFFFFF}


#header{float:left; width:100%; background:#009999; top:0px; height:75px; position:fixed; display:block; z-index:1}
#navigation{float:right; width:45%;}

#nav{
position:fixed;
float:right;
clear:both;
width:100%;
z-index:5;
}

#nav li{
float:left;
position:relative;
margin:0 0 0 16px;
cursor:pointer;
padding:10px;
}

#container{margin:75px auto 0 auto; width:90%; background:#999966;  }
.slidingSpaces{ margin:auto; position:absolute}
#contentliquid{ padding:15px; }

#div1{position:absolute;width:100%;background:#0099CC; margin:0 0 0 100%; }

#div2{position:absolute;width:100%;background:#993300; margin:0 0 0 0; }

#div3{position:absolute;width:100%;background:#99FF33; margin:0 0 0 200%; }

#div4{position:absolute;width:100%;background:#00CCFF; margin:100% 0 0 200%; }

#div5{position:absolute;width:100%;background:#FFCCCC; margin:100% 0 0 100%; }

#div6{position:absolute;width:100%;background:#FFFFCC; margin:100% 0 0 0; }

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery ScrollTo - Smooth Scrolling to any jQuery/DOM Element</title>
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollto.js"></script>

<script type="text/javascript" src="js/script.js"></script>

</head>  
<body>
<div id="wrapper">

    <div id="header">
        <div id="logo">Logo</div>
        <div id="navigation">
            <ul id="nav">
                <li><a href="#div1" class="slidingLink">Div 1</a></li>
                <li><a href="#div2" class="slidingLink">Div 2</a></li>
                <li><a href="#div3" class="slidingLink">Div 3</a></li>
                <li><a href="#div4" class="slidingLink">Div 4</a></li>
                <li><a href="#div5" class="slidingLink">Div 5</a></li>
                <li><a href="#div6" class="slidingLink">Div 6</a></li>
            </ul>
        </div>
    </div>
    <div id="div1" class="slidingSpaces" title="Home">
        <div id="container">
            <div id="contentliquid">
                <h1>This is div1</h1>
            </div>
        </div>   
    </div>
    <div id="div2" class="slidingSpaces" title="Home">       
        <div id="container">     
            <div id="contentliquid">     
                <h1>This is div2</h1>
            </div>
            <div id="footer">
                <p>This is the Footer</p>
            </div>
        </div>   
    </div>
    <div id="div3" class="slidingSpaces" title="Product">
        <div id="container">
            <div id="contentliquid">
                <h1>This is div3</h1>
            </div>
        </div>   
    </div>
    <div id="div4" class="slidingSpaces" title="Space">
        <div id="container">
            <div id="contentliquid">
                <h1>This is div4</h1>
            </div>
        </div>
    </div>
    <div id="div5" class="slidingSpaces" title="Enquiry">
        <div id="container">
            <div id="contentliquid">
                <h1>This is div5</h1>
            </div>
        </div>   
    </div>
    <div id="div6" class="slidingSpaces" title="Contact">
        <div id="container">
            <div id="contentliquid">
                <h1>This is div6</h1>
            </div>
        </div>   
    </div>
</div>
</body>
</html>

script.js

$(document).ready(function() {  
    var bodyheight =$(window).height();
    $(".slidingSpaces").css({'height':bodyheight});

    $("#nav li a").click(function() {
        var linked=$(this).attr("href");
        $(linked).ScrollTo({duration: 800});        
    });     
});

Edited by vizz

3
Contributors
4
Replies
5
Views
4 Years
Discussion Span
Last Post by vizz
0

@vizz

jQuery ScrollTo Layout problem

You know this is getting annoying. You can't post 3 threads that is related at the same time and expect someone to help you. There's a reason why other members are ignoring your threads because something like this you are getting really desperate. You are forcing this issue you are having so someone can help you.

Edited by LastMitch: grammer

0

By mistakely I have created multiple threads of same subject.

One reason is there is no delete option to delete or modify option to modify thread.

I can understand reason behind no option for DELETE THREAD, but there should be modify option to avoid problems like this.

I have better idea in this thread than my previous threads (Vertical, Horizontal and Diagonal Sliding Content and ScrollTo left scroll) but there is no option to modify or delete

0

Hi Vizz,

It happens sometimes. We've all done it.

Best way out of accidental posts is to click "Flag Bad Post" and ask a moderator to delete it for you.

I have some moderation authority but not deletion. The guys at Daniweb Central can do all sorts. They are all-powerful.

Airshow

0

@Airshow

Thanks

But there should be modify option to avoid all problems and edit codes

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.