Could really do with some help on this if possible.
I’m trying to create a scrolling menu. Example here
http://www.pixel-shack.com/critter/ScrollMenu.html
I don’t think there’s an issue with the javascript necessarily. I’ve tried alternatively using jquery’s animate function with scrollLeft and I still get the flickering.
I’m thinking it’s more to do with the HTML/CSS. For instance I’m wondering if using a table instead of a floated list for the menu might be a step in the right direction.
If anyone here could give me some pointers it really would be much appreciated.
Here’s the code. Note it’s far from complete, I’m just focused on the scrolling at this time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Gallery</title>
<style type="text/css">
* { /* default styles */
margin: 0px;
padding: 0px;
outline: none;
list-style: none;
border: none;
font-family: verdana, arial, sans-serif;
color: #aaa;
text-decoration: none; }
.centre { margin-left: auto; margin-right: auto; text-align: center; }
h1 { color: #ccc; margin: 1% 0; font: normal 1.2em/1em verdana, arial, sans-serif; }
p { text-align: left; margin: 2% 5%; font: normal 0.85em/1.4em verdana, arial, sans-serif; }
body { background: #151515; }
div#wrapper { width: 1024px; }
div#gallery {
background: black;
width: 800px;
overflow: hidden; } /* clear float */
div#gallery #mainImage { /* Hi-res Gallery Image Container*/
position: relative;
height: 520px;
background: black }
div#gallery #mainImage img { /* Hi-res Gallery Image NEED TO CHANGE POSITIONING NOT WORKING IN OPERA */
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto; }
div#gallery #mainImage #loadImage { opacity: 0.5; margin: 0; top: 495px; left: 60px; } /* waiting gif */
#scrollNav, #scrollNav li, #scrollNav li ul { float:left; }
#scrollNav a {
display: block;
opacity: 0.3; filter: alpha(opacity=30);
-webkit-transition: opacity 0.5s linear; }
#scrollNav a:hover {
opacity: 1; filter: alpha(opacity=100);
-webkit-transition: opacity 0.25s linear; }
#scrollWin {
width: 690px;
height: 190px; /* 17px for scrollbar */
overflow: hidden; }
#scrollWin ul {
width: 2484px; /* 18 images = 138 x 18 */
background: black url("ASSETS/Thumbs/bgCrop.png") center left; }
#scrollWin ul li a{
width: 120px; height: 160px;
background: red;
margin: 15px 9px; }
</style>
<!--<script type="text/javascript" src="../Jquery/jquery-1.3.2.min.js"></script>-->
</head>
<body>
<div id="wrapper" class="centre">
<div id="gallery" class="centre" > <!-- Note look at the main image area -->
<div id="mainImage">
<h1>Tyrannosaurus Rex</h1>
</div>
<p id="description">A <strong>Tyrannosaurus</strong> emerges from the forest, startling a small herd of Edmontosaurus, but the large carnivore is not too interested. A small early mammal looks up, invisible to the <em>huge Therapod</em>. Remains of these Late Cretaceous animals are found In the <em>Hell Creek and Morrison</em> formations in America.</p>
<ul id="scrollNav"> <!-- scroll navigation -->
<li><a id="previous" class="scrollButton" href="#" ><img src = "ASSETS/Thumbs/Previous.png" alt="previous 5 images" /></a></li>
<li id="scrollWin"> <!-- a container with overflow settings -->
<ul id="thumbs">
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/AnkylosaurusEdmonto.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/Asteroid.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/Diplodocus.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/EarlyMidJurassic.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/Edmontosaurus.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/EdmontosaurusDeath.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/HeronPiranha.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/JurassicCretaceous01.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/JurassicCretaceous02.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/LateCretaceous.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/Mammoths.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/Migration.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/Protoceratops.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/Triceratops.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/Tyrannosaurus.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/Protoceratops.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/Triceratops.jpg" alt = "" />--></a></li>
<li><a href = "#"><!--<img src = "ASSETS/Thumbs/Tyrannosaurus.jpg" alt = "" />--></a></li>
</ul>
</li>
<li><a id="next" class="scrollButton" href="#" ><img src = "ASSETS/Thumbs/Next.png" alt="next 5 images" /></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
// Just testing...................
var Anim = (function (){
var _i = 0, _len, _duration = 0, _piHalf = Math.PI/2;
return {
iD : function (id){return document.getElementById(id)},
el : null, x0 : 0, x1 : 0, dx : 0,
timing : null,
timer : null,
easeInOut : function(){ // compiles an array of distance percentages 0 - 1;
var eIO = [], val; var output = "";
for (var currentTime = 0; currentTime < _duration; currentTime+=10){
eIO.push(((Math.sin(((currentTime/_duration)*2-1)*_piHalf)+1)/2).toFixed(6));
}
_len = eIO.length-1;
return eIO;
},
go: function(){
var o = Anim;
var progress = o.timing[_i+=1];
o.el.scrollLeft = parseInt(progress * o.dx) + o.x0; // percentage * delta + offset
if (!(_i < _len)) { clearTimeout(o.timer); o.timer = null; return; }
},
scroll: function(elem, from, to, fn, duration) {
var o = Anim;
if (o.timer) { clearTimeout(o.timer); o.timer = null; } // reset timer
o.el = o.iD(elem); // get Element by Id
o.x0 = from; o.x1 = to; o.dx = to - from;
_duration = duration;
o.timing = o[fn](); // compile transition
_len = o.timing.length-1; // set array length
_i = 0; // reset counter;
o.timer = setInterval(o.go, 10);
return false;
}
}
})();
Anim.iD("next").onclick = function(){Anim.scroll("scrollWin",0,690,"easeInOut",1000)};
Anim.iD("previous").onclick = function(){Anim.scroll("scrollWin",690,0,"easeInOut",1000)};
//$('#scrollWin').animate({scrollLeft : 690},2000);
</script>
</body>
</html>
RLM
The scrolling happens without any flickering or jerkiness.