Home/ Questions/Q 6791791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:53:20+00:00

http://www.indofolio.com/ , I’m trying to create a website with similar function to this one,

  • 0

http://www.indofolio.com/, I’m trying to create a website with similar function to this one, but I don’t understand how he did the horizontal scrolling with anchor tag without javascript.
Turn javascript off, and his website is still functionning properly. I really love the progressive enhancement he did.

Test code for horizontal anchoring, take out inline-block and float left and it works perfectly.

    <!DOCTYPE HTML>
    <html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ab {
    width: 20%;
    height: 20%;
    float: left;
    display: inline-block;
    border: 1px solid red;

}

</style>
 </head>
 <body>
 <a href="#box1">aaaaaaa</a>
 <a href="#box2">bbbbbbb</a>
<div id="container" style="width:100%">
    <ul style="width:500%;height:2000px;background-color:red">
        <li class="ab"><a name="box1"></a>
            <div>test</div>
        </li>
        <li class="ab"><a name="box2"></a>
            <div>test2</div>
        </li>
        <li class="ab">
            <a name="box3"></a>
            <div>test3</div>
        </li>
        <li class="ab">
            <div></div>
        </li>
        <li class="ab">
            <div></div>
        </li>
    </ul>
</div>
 </body>
 </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Like Quentin said, but his explanation might be a bit lacking if you are new to web design. With javascript off, note that the url in changes. The homepage is www.indofolio.com/#box1 the next has #box2, etc. Those are id‘s of the content boxes that he is using. Normal behavior for an a tag is to “jump” to those points if they exist on a page and the anchor is set to do so. His home page anchor is <a class="link home selected" href="#box1">Home</a> where the href is what causes the jump to that location.

    EDIT: Here’s some reworked code for your example.

    HTML

    <div id="nav">
 <a href="#box1">B1</a>
 <a href="#box2">B2</a>
 <a href="#box3">B3</a>
 <a href="#box4">B4</a>
 <a href="#box5">B5</a>
</div>
<div id="container">
    <ul>
        <li class="ab" id="box1">
            <div>test1</div>
        </li>
        <li class="ab" id="box2">
            <div>test2</div>
        </li>
        <li class="ab" id="box3">
            <div>test3</div>
        </li>
        <li class="ab" id="box4">
            <div>test4</div>
        </li>
        <li class="ab" id="box5">
            <div>test5</div>
        </li>
    </ul>
</div>

    CSS

    body {
    padding: 0;
    margin: 0;
}
.ab {
    width: 20%;
    float: left;
    padding: 0;
    margin: 0;
}

.ab div {
    height: 500px;   
    border: 1px solid red;
}

#container {
    width: 500%; /* five page widths for five horizontal pages */
    padding: 0;
    margin: 1.5em 0 0;
}

#container ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav {
    position: fixed;
    left: 0;
    top: 0;
}

#nav a {
    margin-right: 10px;
    display: inline-block;
}
    • 0