1

I am working on my portfolio website and I have three horizontal sections that are automatically scrollable (did not include that code in Fiddle) The most upper section are the titles and serve as links for the anchors (which are the images). I have worked with the basic link to anchor that html has, but I want the images to align left to page and have a smooth scroll when they are clicked.

I've set up a jsFiddle: https://jsfiddle.net/Lzezqqv7/3/

  <html>
<head>
    <title>Max Waelbers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="scrollContent" class="container1">
      <div class="projects">
        <p>title: <a href="#link1">Project 1</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017<br>
            <br>A bundle of texts created by 11 <br>different authors, the texts are<br>sorted by the number of chapters <br>from the different authors.</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link2">Project 2</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    <div class="projects">
        <p>title: <a href="#link3">Project 3</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link4">Project 4</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    <div class="projects">
        <p>title: <a href="#link5">Project 5</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link6">Project 6</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>

 <div class="projects">
        <p>title: <a href="#link7">Project 7</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link8">Project 8</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    <div class="projects">
        <p>title: <a href="#link9">Project 9</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link10">Project 10</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    <div class="projects">
        <p>title: <a href="#link11">Project 11</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <a href="#link12">Project 12</a>
        <p>title: </p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    </div>

<div class="container2" id="scrollContent2">

    <div class="images" id="link1">1</div>
    <div class="images"id="link2">2</div>
    <div class="images"id="link3">3</div>
     <div class="images" id="link4">4</div>
    <div class="images"id="link5">5</div>
    <div class="images"id="link6">6</div>
     <div class="images" id="link">7</div>
    <div class="images"id="link8">8</div>
    <div class="images"id="link9">9</div>
     <div class="images" id="link10">10</div>
    <div class="images" id="link11">11</div>
    <div class="images" id="link12">12</div>

</div>

<div class="container3">
    <div class="about">
        <p>name</p>
        <p>school</p>
    </div>
     <div class="about">
        <p>place</p>
    </div>
    <div class="about">
        <p>Contact</p>
        <p>phone number<br>email</p>
    </div>

<script type='text/javascript'>

 new AutoDivScroll( "scrollContent", 50, 1, 2, "nohover" );
 new AutoDivScroll( "scrollContent2", 50, 1, 2, "nohover" );

</script>

</body>
</html>

body{
    margin:0;
}
::-webkit-scrollbar { 
    display: none; 
}
.projects{
    margin-right: 15px;
    margin-left: 10px;
    width: 200px;
    height: 170px;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
}
.about{
    margin-right: 15px;
    margin-left: 10px;
    width: 200px;
    height: 80px;
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
}
ul{
    list-style: none;
    float: left;
}
a{
    text-decoration: none;
}
a:visited{
    color: black;
}
a:active{
    color:black;
}
.container1{
    font-family: Favorit;
    font-size: 12px;
    height: 175px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap

}
.container2 {
    margin-left: 10px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap
}
.images {
    height: 500px;
    width: 800px;
    background: black;
    margin-right: 5px;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
    font-size: 50px;
    color: white;
    text-align: center;
}
.container3{
    font-family: Favorit;
    font-size: 12px;
    white-space: nowrap;
}

Thanks for your time.

Max Waelbers
  • 21
  • 2

0 Answers0