PDA

View Full Version : Cross Browser marquee II and anchors



schlomo
11-29-2007, 04:06 PM
1) Script Title: Cross Browser marquee II

2) Script URL (on DD):http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

3) Describe problem: I want to jump to special points inside the marguee.
The html-ancors i tryed to use are asynchronous after a while.

The Javascript-Link to the special points don't work except the Link to the
"start-point" of the marquee

Has anyone an idea?
Thanks for help

here is my code:



<!--!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body
{
width:100%;
height:100%;
color:#000;
}

body
{
margin:0px;
padding:0px;
overflow:hidden;
height:100%;
background-color:#fff;
font-family:arial, helvetica, sans-serif;
}


/*Container outer*/
#_outer_box
{
position:absolute;
left:0px;
top:0px;
z-index:300;
width: 100%;
height: 100%;
overflow: hidden;
}

/*Container inner*/
#_inner_box
{
position:absolute;
left:0px;
height: 100%;
}


/*Container section*/
.section
{
width:1000px;
height:100%;
float:left;
padding:10px;
font-size:70px;
color:#fff;
}
</style>

<script type="text/javascript">
// <![CDATA[

/***********************************************
* Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=0 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=6 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=0 //Pause marquee onMousever (0=no. 1=yes)?

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed:0
var actualwidth=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("_inner_box")
cross_marquee.style.left=0
marqueewidth=document.getElementById("_outer_box").offsetWidth
actualwidth=cross_marquee.offsetWidth
setTimeout('lefttime=setInterval("scrollmarquee()",100)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee





/***********************************************
* Jump to adefined Point in the scrollarea
***********************************************/
function JumpTo (target)
{
cross_marquee.style.left =(target*(-1))
//cross_marquee.offsetWidth =(Point)
//alert (cross_marquee.style.left)
}

// ]]>
</script>
</head>

<body>


<!-- ==================================== Navigate =======================================-->
<div style="display:block; width:250px; height:300px; position:absolute; left:50%; top:50%; margin-left:-125px; margin-top:-150px; z-index:1000; background-color:#fff; padding:10px; font-size:12px; border:1px solid #ccc;">
<p>
<b>javascript-link (only "yellow" is OK)</b><br/>
<a href="javascript:JumpTo(0)">yellow</a><br/>
<a href="javascript:JumpTo(1000)">orange</a><br/>
<a href="javascript:JumpTo(2000)">blue</a><br/>
<a href="javascript:JumpTo(3000)">red</a><br/>
<a href="javascript:JumpTo(4000)">green</a>
<hr>
<b>anchor-links (confusing after some time)</b><br/>
<a href="index.htm#section01">yellow</a><br/>
<a href="index.htm#section02">orange</a><br/>
<a href="index.htm#section03">blue</a><br/>
<a href="index.htm#section04">red</a><br/>
<a href="index.htm#section05">green</a>
</p>
</div>



<!-- ==================================== SCROLLING =======================================-->
<div id="_outer_box" style="display:block">
<div id="_inner_box">
<!-- WIDTH-SETTING BOX -->
<div style="width:5000px; height:100%; float:left; padding-left:0px; overflow:hidden;">

<!-- colorbox -->
<div style="background-color:#ff3;" class="section">
<a name="section01">yellow</a>
</div>

<!-- colorbox -->
<div style="background-color:#f90;" class="section">
<a name="section02">orange</a>
</div>

<!-- colorbox -->
<div style="background-color:#39f;" class="section">
<a name="section03">blue</a>
</div>

<!-- colorbox -->
<div style="background-color:#f33;" class="section">
<a name="section04">red</a>
</div>

<!-- colorbox -->
<div style="background-color:#6c0;" class="section">
<a name="section05">green</a>
</div>

</div>
</div>
</div>

</body>
</html>