how is this done?

[maya]

http://news.yahoo.com/news?tmpl=index2&cid=703

down the page, under "More Stories", there's a section with two
interchangeable divs which slide back and forth into view.. how is this
done?

I tried to reproduce this locally on my machine but can't get bottom
section (with the buttons, which user can use to make divs slide in and
out of view..) to appear, even though still linking to relevant .js files..

it's not a Flash movie, so I assume it's done with JavaScript, but can't
figure out how they make divs SCROLL with JavaScript.. it's a neat effect..

thank you..

 

[RobG]

http://news.yahoo.com/news?tmpl=index2&cid=703

down the page, under "More Stories", there's a section with two
interchangeable divs which slide back and forth into view.. how is this
done?

I tried to reproduce this locally on my machine but can't get bottom
section (with the buttons, which user can use to make divs slide in and
out of view..) to appear, even though still linking to relevant .js files..

it's not a Flash movie, so I assume it's done with JavaScript, but can't
figure out how they make divs SCROLL with JavaScript.. it's a neat effect..

thank you..

It is done using JavaScript.


e.g.

<title>play</title>
<style type="text/css">
#tickerFrame {
position: relative;
width: 152px; height: 102px;
border: 1px solid blue;
overflow: hidden;
}
#tickerHolder {
position: relative;
width: 300px; height: 100px;
border: 1px solid red;
}
#boxLeft, #boxRight {
position: absolute;
top: 0; left: 0;
width: 150px; height: 100px;
border: 1px solid green;
text-align: center;
}
#boxRight {left: 150px;}
</style>
<script type="text/javascript">
function startSlide(){
var tickerHolder = document.getElementById('tickerHolder')
var tStyle, tLeft;
var low = '-150';
var high = '0';
if ( tickerHolder && (tStyle = tickerHolder.style) ){
if ('' == tStyle.left) tStyle.left = high + 'px';
tLeft = parseInt(tStyle.left, 10);
continueSlide(tickerHolder, (tLeft == low)? high:low);
}
}

function continueSlide(el, ePos){
var step = 5;
var lag = 10;
var pos = parseInt(el.style.left, 10);
var diff = ePos - pos;
var sign = (diff < 0)? -1 : 1;
var newPos = (Math.abs(diff) < step)? ePos : (pos + (step * sign));

if (newPos != ePos){
setTimeout( function(){continueSlide(el, ePos)}, lag); }
el.style.left = newPos + 'px';
}

</script>
<div id="tickerFrame">
<div id="tickerHolder" >
<div id="boxLeft">the left box</div>
<div id="boxRight">the right box</div>
</div>
</div>
<button onclick="startSlide();">Slide...</button>

 

[maya]

It is done using JavaScript.


e.g.

<title>play</title>
<style type="text/css">
#tickerFrame {
position: relative;
width: 152px; height: 102px;
border: 1px solid blue;
overflow: hidden;
}
#tickerHolder {
position: relative;
width: 300px; height: 100px;
border: 1px solid red;
}
#boxLeft, #boxRight {
position: absolute;
top: 0; left: 0;
width: 150px; height: 100px;
border: 1px solid green;
text-align: center;
}
#boxRight {left: 150px;}
</style>
<script type="text/javascript">
function startSlide(){
var tickerHolder = document.getElementById('tickerHolder')
var tStyle, tLeft;
var low = '-150';
var high = '0';
if ( tickerHolder && (tStyle = tickerHolder.style) ){
if ('' == tStyle.left) tStyle.left = high + 'px';
tLeft = parseInt(tStyle.left, 10);
continueSlide(tickerHolder, (tLeft == low)? high:low);
}
}

function continueSlide(el, ePos){
var step = 5;
var lag = 10;
var pos = parseInt(el.style.left, 10);
var diff = ePos - pos;
var sign = (diff < 0)? -1 : 1;
var newPos = (Math.abs(diff) < step)? ePos : (pos + (step * sign));

if (newPos != ePos){
setTimeout( function(){continueSlide(el, ePos)}, lag); }
el.style.left = newPos + 'px';
}

</script>
<div id="tickerFrame">
<div id="tickerHolder" >
<div id="boxLeft">the left box</div>
<div id="boxRight">the right box</div>
</div>
</div>
<button onclick="startSlide();">Slide...</button>

thank you very much!!