By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,558 Members | 1,607 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,558 IT Pros & Developers. It's quick & easy.

how is this done?

P: n/a
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..

Oct 3 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a

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.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>

--
Rob

Oct 4 '06 #2

P: n/a


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
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>
thank you very much!! :)
Oct 4 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.