i have a page written with php and java script working to produce a scroller. now, the scroller works just fine. however the problem with it is that where it needs to be located is right under a dropdown menu of page links. and if you ever seen this happen, the loaded .php scroller file text shows up over the dropdown menu. is there a way to ensure the text stays behind the dropdown menu at all times? it looks bad when the text scrolls over the rest of the links.
Code: Select all
<?php
require_once './php/config.php';
$Page = new Page( 'home', 'Home' );
?>
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
<title><?php echo $Page->PAGE['name'];?></title>
<link rel='stylesheet' type='text/css' href='./style/main.css'>
<style type='text/css'>
div#scrollDiv {
width: 200px;
height: 330px;
overflow: hidden;
}
</style>
<script type='text/javascript' src='./scripts/drop.js'></script>
<script type='text/javascript'>
var scrollSpeed = 50; /* decrease value to increase speed */
var scrollDiv = false;
var scrollHTML = false;
var scrollHeight;
var htmlHeight;
var theScrollers = new Array();
var origScrollSpeed = false;
function initScroll ( containerId ) {
var topPos = theScrollers[containerId]['objRef'].style.top.replace( /[^\-0-9]/g, '' );
topPos = topPos - theScrollers[containerId]['scrollSpeed'];
if ( topPos / 1 + theScrollers[containerId]['htmlHeight'] / 1 < 0 )
topPos = theScrollers[containerId]['scrollHeight'];
theScrollers[containerId]['objRef'].style.top = topPos + 'px';
setTimeout( 'initScroll("' + containerId + '")', scrollSpeed );
}
function stopScrolling ( ) {
var containerId = this.id;
theScrollers[containerId]['scrollSpeed'] = 0;
}
function startScrolling ( ) {
var containerId = this.id;
theScrollers[containerId]['scrollSpeed'] = theScrollers[containerId]['originalSpeed'];
}
function initScrollingContent ( containerId, scrollSpeed ) {
scrollDiv = document.getElementById( containerId );
scrollHTML = scrollDiv.getElementsByTagName( 'DIV' )[0];
scrollDiv.style.position = 'relative';
scrollDiv.style.overflow = 'hidden';
scrollHTML.style.position = 'relative';
scrollHTML.style.top = '0px';
scrollDiv.onmouseout = startScrolling;
scrollDiv.onmouseover = stopScrolling;
origScrollSpeed = scrollSpeed;
theScrollers[containerId] = new Array();
theScrollers[containerId]['objRef'] = scrollHTML;
theScrollers[containerId]['htmlHeight'] = scrollHTML.offsetHeight;
theScrollers[containerId]['scrollHeight'] = scrollDiv.clientHeight;
theScrollers[containerId]['scrollSpeed'] = scrollSpeed;
theScrollers[containerId]['originalSpeed'] = scrollSpeed;
initScroll( containerId );
}
</script>
</head>
<body>
<div id='wrapper'>
<div id='topper'>
<div id='bar_1'>
**area where link bar loads images**
</div>
<div id='search'>
**site search function**
</div>
<ul id='bar_2'>
<li>
<a href='./' class='home'><span>Home</span></a>
<ul>
<li><a href='./sitemap.php'>Site Map</a></li>
</ul>
</li>
<li>
<a href='./news/' class='news'><span>News</span></a>
<ul>
<li><a href='./news/'>News</a></li>
<li><a href='./news/announcements.php'>News</a></li>
<li><a href='./programs/'>Program1</a></li>
<li><a href='./programs/page.php'>Page</a></li>
</ul>
</li>
<li>
<a href='./hr/' class='c'><span>Center</span></a>
<ul>
<li><a href='./c/'>Resources</a></li>
<li><a href='file:\\filedirectory' target='_blank'>Forms</a></li>
<li><a href='./c/page1.php'>page1</a></li>
<li><a href='./c/page2.php'>page2</a></li>
<li><a href='./c/page3.php'>page3</a></li>
<li><a href='./c/page4.php'>page4</a></li>
<li><a href='./c/page5.php'>page5</a></li>
</ul>
</li>
</ul>
</div>
<div id='main'>
<div class='holder news'>
<?php
require("./php/siteupdates.php");
?>this shows the sections of my page where the script for the scroller is placed and then the dropdown menu followed by the php loader for the scroller called siteupdates
non relevent code has been removed.