Member Avatar for vizz

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
  • 186 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by vizz

Recommended Answers

All 4 Replies

Member Avatar for LastMitch

@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 because: grammer
Member Avatar for vizz

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

Member Avatar for Airshow

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

Member Avatar for vizz

@Airshow

Thanks

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.