Javascript Horizontal Scroll

HDFilmMaker2112 · February 26, 2012

Need some help sorting this out. Saw this on another website and I'm trying to recreate it myself.

I'm trying to make a set of div tags scroll. Can't get it to work. The fourth div tag isn't hidden and the scroll left and scroll right "links" don't work.

Link to the current incarnation of the page:

http://www.area51entertainment.co/index.php

Basically what I'm looking to create is this:

http://www.lionsgate.com/

The vertical scroller next the video. I want to do that in javascript/xhtml/css and have it horizontal.

Here's my current code:

Main Page:

<?php
require_once 'func.php';

if(isset($_GET['contact'])){

}
else{
$javascript='<script type="text/javascript" src="scroll.js"></script>'."\n";
}
header("Content-Type: application/xhtml+xml;charset=utf-8");
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Area 51 Entertainment <?php echo "$section"; ?></title>
<meta charset="UTF-8" /> 
<meta name="verify-v1" content="" />
<meta name="keywords" content=""  />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />
<style type="text/css">
body {
background: #000000; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwMDQwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #400400 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#400400), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #300300 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #300300 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #300300 0%,#000000 100%); /* IE10+ */
background: linear-gradient(top, #300300 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#300300', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
background-repeat: no-repeat;
background-attachment: fixed;
color: #FFFFFF; 
font-family: Verdana; 
margin-right:auto;
margin-left:auto;
max-width:1000px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
<?php
echo $javascript;
?>
</head>
<body>
<div class="wrapper">

<div class="head_wrapper">
<div class="logo"></div>
<div class="links">
Home | Films | Television | DVD/Blu-Ray | Web | Music | About | Contact | Investors
</div>
</div>

<div class="content_wrapper">
<div class="video"></div>
<div class="recentfilms_wrapper">
<div class="left_arrow" onclick="jumpLeft('recentfilms')" onmouseover="scrollLeft('recentfilms')" onmouseout="stopScroll()">scroll left</div> 
<div id="recentfilms">
<div id="scroller" class="scroller">
<div class="film_entry">Test</div>
<div class="film_entry">Test2</div>
<div class="film_entry">Test3</div>
<div class="film_entry">Test4</div>
</div>
</div>
<div class="right_arrow" onclick="jumpRight('recentfilms')" onmouseover="scrollRight('recentfilms')" onmouseout="stopScroll()">scroll right</div>
</div>

<div class="news"></div>
</div>

<div class="footer_wrapper">
<div class="copyright"><? echo copyyear('2012'); ?> Area 51 Entertainment, Inc.</div>
</div>

</div>
</body>
</html>

scroll.js

scrollStep=1

var timerLeft
var timerRight

function jumpLeft(id){
  document.getElementById(id).scrollLeft+=scrollStep
}

function scrollLeft(id){
  clearTimeout(timerRight) 
  document.getElementById(id).scrollLeft+=scrollStep
  timerRight=setTimeout("scrollLeft('"+id+"')",10)
}

function scrollRight(id){
  clearTimeout(timerLeft)
  document.getElementById(id).scrollLeft-=scrollStep
  timerLeft=setTimeout("scrollRight('"+id+"')",10)
}

function jumpRight(id){
  document.getElementById(id).scrollLeft+=scrollStep
}

function stopScroll(){
  clearTimeout(timerRight) 
  clearTimeout(timerLeft)
}

style.css

a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #902C2C; text-decoration: underline;}

.link a:link {text-decoration: none; color: #902C2C;}
.link a:visited {text-decoration: none; color: #902C2C;}
.link a:active {text-decoration: none; color:#902C2C;}
.link a:hover {text-decoration: underline; color: #FFFFFF;}

.wrapper{
height: 100%;
}

.header_wrapper{
width: 1000px;
height: 100px;
}

.logo{
height: 90px;
width: 300px;
float: left;
}

.links{
height: 90px;
width: 700px;
float: right;
}

.tab{
width: 100px;
float: left;
text-align: center;
}

.tab2{
width: 15px;
float: left;
text-align: center;
}

.content_wrapper{
min-height: 530px;
height: 110%;
padding-top: 5px;
clear: both;
}

.content{
width: 900px;
margin-left: 50px;
margin-top: 15px;
}

.content_text{
width: 795px;
height: 100%;
margin-left: 100px;
clear: both;
}

.page_header{
width: 850px;
margin-left: 25px;
text-align: center;
font-size: 28px;
}

.left_arrow{
float: left;
width: 50px;
}

.recentfilms{
float: left;
width: 720px;
height: 200px;
overflow: hidden;
}

.scroller{
width: 720px;
height: 200px;
}

.film_entry{
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
margin-right: 10px;
}

.right_arrow{
float: left;
width: 50px;
}

.footer{
width: 998px;
background-color: #000000;
border: 0px;
border-top: 2px;
border-color: #902C2C;
border-style: solid;
border-collapse: collapse;
clear: both;
}

.copyright{
width: 500px;
height: 25px;
float: left;
font-size: 12px;
background-color: #000000;
}

HDFilmMaker2112 · February 27, 2012

Fixed a few of the CSS issues but it's still not scrolling.

http://www.area51entertainment.co/index.php

There are 7 divs, three of them hidden. Mousing over or clicking on "Scroll Left" and "Scroll Right" does nothing.

HDFilmMaker2112 · February 29, 2012

Pretty much got everything done. Just need help with the last piece.

I need the mouseover timeout to reset every time someone clicks the scroll left or scroll right control. Right now, it waits 2 seconds then starts moving.

http://www.area51entertainment.co/index.php

Here's the code:

scroll.js

function loadNew() {
var myCont = document.getElementById ("recentfilms");
myCont.scrollLeft = 2*140;
}

scrollJump=140

timerLeft="";
timerRight="";

function jumpLeft(id){
  document.getElementById(id).scrollLeft+=scrollJump;
  clearTimeout(timerLeft);
  timerLeft=setTimeout("scrollLeft('"+id+"')",2000);
}

function jumpRight(id){
  document.getElementById(id).scrollLeft-=scrollJump;
  clearTimeout(timerRight);
  timerRight=setTimeout("scrollRight('"+id+"')",2000);
}

scrollStep=2

function scrollLeft(id){
  clearTimeout(timerRight);
  document.getElementById(id).scrollLeft+=scrollStep;
  timerRight=setTimeout("scrollLeft('"+id+"')",;
}

function startScrollLeft(id){
clearTimeout(timerRight);
timerRight=setTimeout("scrollLeft('"+id+"')",2000);
}

function scrollRight(id){
  clearTimeout(timerLeft);
  document.getElementById(id).scrollLeft-=scrollStep;
  timerLeft=setTimeout("scrollRight('"+id+"')",;
}

function startScrollRight(id){
clearTimeout(timerLeft);
timerLeft=setTimeout("scrollRight('"+id+"')",2000);
}

function stopScroll(){
  clearTimeout(timerRight);
  clearTimeout(timerLeft);
}

<?php
require_once 'func.php';

if(isset($_GET['contact'])){

}
else{
$javascript='<script type="text/javascript" src="scroll.js"></script>'."\n";
}
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
  header("Content-type: application/xhtml+xml");
}
else {
  header("Content-type: text/html");
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Area 51 Entertainment <?php echo "$section"; ?></title>
<meta charset="UTF-8" /> 
<meta name="verify-v1" content="" />
<meta name="keywords" content=""  />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />
<style type="text/css">
body,html {
background: #000000; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwMDQwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #400400 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#400400), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #300300 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #300300 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #300300 0%,#000000 100%); /* IE10+ */
background: linear-gradient(top, #300300 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#300300', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
background-repeat: no-repeat;
background-attachment: fixed;
color: #FFFFFF; 
font-family: Verdana; 
margin-right:auto;
margin-left:auto;
max-width:1000px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
<?php
echo $javascript;
?>
</head>
<body onload="loadNew();">
<div class="wrapper">

<div class="head_wrapper">
<div class="logo"></div>
<div class="links">
Home | Films | Television | DVD/Blu-Ray | Web | Music | About | Contact | Investors
</div>
</div>

<div class="content_wrapper">
<div class="video"></div>

<div class="recentfilms_wrapper">
<div class="left_arrow" onclick="jumpLeft('recentfilms')" onmouseover="startScrollLeft('recentfilms')" onmouseout="stopScroll()">scroll left</div> 
<div id="recentfilms">
<div id="scroller">
<div class="film_entry" tabindex="1">Test</div>
<div class="film_entry" tabindex="2">Test2</div>
<div class="film_entry" tabindex="3">Test3</div>
<div class="film_entry" tabindex="4">Test4</div>
<div class="film_entry" tabindex="5">Test5</div>
<div class="film_entry" tabindex="6">Test6</div>
<div class="film_entry_last" tabindex="7">Test7</div>
</div>
</div>
<div class="right_arrow" onclick="jumpRight('recentfilms')" onmouseover="startScrollRight('recentfilms')" onmouseout="stopScroll()">scroll right</div>
</div>

<div class="news"></div>
</div>

<div class="footer_wrapper">
<div class="copyright"><? echo copyyear('2012'); ?> Area 51 Entertainment, Inc.</div>
</div>

</div>
</body>
</html>

Sign In

Javascript Horizontal Scroll

Recommended Posts

HDFilmMaker2112

Link to comment

Share on other sites

HDFilmMaker2112

Link to comment

Share on other sites

HDFilmMaker2112

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information