HDFilmMaker2112 Posted February 26, 2012 Share Posted 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; } Quote Link to comment Share on other sites More sharing options...
HDFilmMaker2112 Posted February 27, 2012 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
HDFilmMaker2112 Posted February 29, 2012 Author Share Posted 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.