PDA

View Full Version : Scrollable Content Script II with MySql



mtlhead
02-05-2007, 11:02 PM
1) Script Title:
Scrollable Content Script II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

3) Describe problem:
The scroll is working until I replace the static content with dynamic content loaded from mysql into a php variable. When I do that the content displays but the scroller expands to show all the content at once.

First the opening javascript code is not changed from the script

<script language="JavaScript1.2">
// PRELOADING IMAGES
if (document.images) {
img_down =new Image();
img_up=new Image();
img_off=new Image();

img_down.src ="images/event_scroll_home_down.jpg";
img_up.src="images/event_scroll_home_up.jpg";
img_off.src="images/event_scroll_home_off.jpg";

}

function lightUp() {
if (document.images) document.event_scroll.src=img_up.src;
}

function lightDown() {
if (document.images) document.event_scroll.src=img_down.src;
}

function lightOff() {
if (document.images) document.event_scroll.src=img_off.src;
}

/******************************************
* Scrollable content script II- Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
} else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}

window.onload=getcontent_height

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=1

if (iens6){
document.write('<div id="container" style="position:relative;width:211;height:300;border:1px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:208;left:0;top:0; font-size:8px; color:#424858;">')
}
</script>

Next I write the sql and load the results into a variable

<?
$fe = "";
$result = mysql_query("select * from calendar_events WHERE event_year='2006' order by event_month, event_day LIMIT 10",$db);
while ($myrow = mysql_fetch_array($result)) {
if(!($myrow["division"] == ""))
{
$fe .= "<tr>\n";
$fe .= "<td class='event'>Event Division:</td>\n";
$fe .= "<td>\n";

$result1 = mysql_query("SELECT * FROM divisions WHERE DID=".$myrow['division'],$db);
if ($myrow1 = mysql_fetch_array($result1)) {
$fe .= $myrow1['Name'];
}
$fe .= "</td>\n";
$fe .= "</tr>\n";
}
}


Then where it gets displayed

echo "<ilayer name='nscontainer' width='211' height='300' clip='0,0,211,300'>\n";
echo "<layer name='nscontent' width='208' height='300' visibility='hidden'>\n";
echo "<table border='0' cellpadding='2' cellspacing='0' width='208' bgcolor='#E0E0E0'>\n";
echo $fe;
echo "</table>\n";
echo "</layer>\n";
echo "</ilayer>\n";
?>

Then the closing stuff (again no change from the script here)

<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
}
</script>

In a nutshell the sql works but it breaks out of the div tags and thus the scroller. Any ideas/help greatly appreciated