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]

maya wrote:

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.getEle mentById('ticke rHolder')
var tStyle, tLeft;
var low = '-150';
var high = '0';
if ( tickerHolder && (tStyle = tickerHolder.st yle) ){
if ('' == tStyle.left) tStyle.left = high + 'px';
tLeft = parseInt(tStyle .left, 10);
continueSlide(t ickerHolder, (tLeft == low)? high:low);
}
}

function continueSlide(e l, ePos){
var step = 5;
var lag = 10;
var pos = parseInt(el.sty le.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(){cont inueSlide(el, ePos)}, lag); }
el.style.left = newPos + 'px';
}

</script>
<div id="tickerFrame ">
<div id="tickerHolde r" >
<div id="boxLeft">th e left box</div>
<div id="boxRight">t he right box</div>
</div>
</div>
<button onclick="startS lide();">Slide. ..</button>

--
Rob

[maya]

RobG wrote:

maya wrote:

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

down the page, under "More Stories", there's a section with two
interchangeabl e 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.getEle mentById('ticke rHolder')
var tStyle, tLeft;
var low = '-150';
var high = '0';
if ( tickerHolder && (tStyle = tickerHolder.st yle) ){
if ('' == tStyle.left) tStyle.left = high + 'px';
tLeft = parseInt(tStyle .left, 10);
continueSlide(t ickerHolder, (tLeft == low)? high:low);
}
}

function continueSlide(e l, ePos){
var step = 5;
var lag = 10;
var pos = parseInt(el.sty le.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(){cont inueSlide(el, ePos)}, lag); }
el.style.left = newPos + 'px';
}

</script>
<div id="tickerFrame ">
<div id="tickerHolde r" >
<div id="boxLeft">th e left box</div>
<div id="boxRight">t he right box</div>
</div>
</div>
<button onclick="startS lide();">Slide. ..</button>

thank you very much!! :)