Jump to content

Javascript Horizontal Scroll


HDFilmMaker2112

Recommended Posts

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;
}

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.