Solved

JavaScript Scroll box - Records retrieved from an MySQL db using PHP - PLEASE HELP!!!

Posted on 2007-03-23
8
523 Views
Last Modified: 2008-03-25
Hello, experts-

I am glad you all are here to help us get our work done. Much appreciate your expertise and the hard work you put into this. It must be in your blood. I know the feeling.  My question is:

I have a table that contains sales leads. I would like to create a scroll box that scrolls vertically (scroll direction is from bottom to top). I have found several scripts that address the need for scrolling text vertically within a DIV.

Now, I would like to retrieve records from my database and have them scroll within the javascript scroll box. I understand that javascript is executed on the client and not the server and that the data retrieval occurs on the server and the result set is returned to the client.

Could someone be so kind as to help me with this issue. I am using Dreamweaver MX2004, PHP, with a MySQL back end.

To summarize: Need a javascript scroll box that would allow the records retrieved from the databsae to scroll verticaly from bottom to top. Also need for the scrolling to stop when the mouse is moved over the scroling text and the ability to click on one of the fields being presented to take the user to the details of that record. My table name is t_dem. The fields needing displaying are didk (the record id), d_subj_sp (the title of the sales lead), t_subj_descr_sp (the description of the lead), t_mem.co_name (the name of the company that placed the ad), and coidk (the id of the customer). The link should be on t_subj_sp and I need to pass the didk and the coidk.

I look forward to a response as my need is rather urgent.  Best regards and thanks for your assistance.

Daniel
0
Comment
Question by:buquenet
  • 3
  • 3
8 Comments
 
LVL 18

Expert Comment

by:Andrej Pirman
ID: 18784615
I coded something you might like.
Of course you NEED to modyify design to fit your own, but be carefull with single ' and double " quotes in PHP part of script.
Also, in the beginning you need to connect to database, but I assume you have this already done.

So, here it is. First, save it as somefile.php, add database connection script and test. If this is what you want, use it.
To customize JavaScript part of the code, go here (since this is where I got JavaScript scrollbox code) http://mediazeal.com/scroll.htm
For PHP part contact me.

============= BEGIN FILE SCROLLBOX.PHP =============

<?php
// Connect to your database
// You should have this already done

// Initialize var
$mymessage = "mymessage=''";

// Retreive results from database
// Since I do not have database, there might be some bugs
$sql = "SELECT * FROM t_dem";
$rs = mysql_query($sql);
while($res = mysql_fetch_object($rs)) {
      $mymessage .= "mymessage+='<p>'";
      $mymessage .= "mymessage+='<a href=\"page.php?coidk=".$res->coidk."&didk=".$res->didk."\"><font face=\"Verdana, Arial\">".$res->d_subj_sp."</font></a><br />'";
      $mymessage .= "mymessage+='<font face=\"Verdana, Arial\" size=\"2\">".$res->t_subj_descr_sp."</font><br />'";
      $mymessage .= "mymessage+='<font face=\"Verdana, Arial\" size=\"2\"><strong>".$res->t_mem.co_name."</strong></font>'";
      $mymessage .= "mymessage+='</p>'";
}

?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">
<!--//hide script

<!--Begin
//scroller width
var swidth=200

//scroller height
var sheight=70

//scroller's speed;
var sspeed=2

var mymessage=''

//text from PHP generated

<?=$mymessage;?>

function start(){
if (document.all) return
if (document.getElementById){
document.getElementById("slider").style.visibility="show"
ns6marquee(document.getElementById('slider'))
}
else if(document.layers){
document.slider1.visibility="show"
ns4marquee(document.slider1.document.slider2)
}
}
function ns4marquee(whichlayer){
ns4layer=eval(whichlayer)
ns4layer.document.write(mymessage)
ns4layer.document.close()
sizeup=ns4layer.document.height
ns4layer.top-=sizeup
ns4slide()
}
function ns4slide(){
if (ns4layer.top>=sizeup*(-1)){
ns4layer.top-=sspeed
setTimeout("ns4slide()",100)
}
else{
ns4layer.top=sheight
ns4slide()
}
}
function ns6marquee(whichdiv){
ns6div=eval(whichdiv)
ns6div.innerHTML=mymessage
ns6div.style.top=sheight
sizeup=sheight
ns6slide()
}
function ns6slide(){
if (parseInt(ns6div.style.top)>=sizeup*(-1)){
ns6div.style.top=parseInt(ns6div.style.top)-sspeed
setTimeout("ns6slide()",100)
}
else{
ns6div.style.top=sheight
ns6slide()
}
}

// End --->

function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}

//stop hiding script --->
</script>
</head>

<body onLoad="start();" >
<p>Here is your scrollbox:</p>
<p>The design:</p>

<p>
<a href="page.php?coidk=coidk&amp;didk=didk"><font face="Verdana, Arial">d_subj_sp</font></a><br />
<font face="Verdana, Arial" size="2">t_subj_descr_sp</font><br />
<font face="Verdana, Arial" size="2"><strong>t_mem.co_name</strong></font>
</p>

<p>
<table cellpadding="5" cellspacing="0" border="0" align="center" width="210">
<tr>
<td bgcolor="#ffffff">
<span style="borderWidth:0; borderColor:#ffffff; width:200; height:70;">
<ilayer width=200 height=70 name="slider1" bgcolor="#ffffff" visibility=hide>
<layer name="slider2" onMouseOver="sspeed=0;" onMouseOut="sspeed=2"></layer>
</ilayer>
<script language="JavaScript">
if (document.all){
document.writeln('<marquee id="ieslider" scrollAmount=2 width=200 height=70 direction=up style="border:0 solid grey;background-color:#ffffff">')
document.writeln(mymessage)
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=2")
document.write('</marquee>')
}
if (document.getElementById&&!document.all){
document.write('<div style="position:relative;overflow:hidden;width:200;height:70;clip:rect(0 302 102 0); background-color:#ffffff;border:0px solid white;" onMouseover="sspeed=0;" onMouseout="sspeed=2">')
document.write('<div id="slider" style="position:relative;width:&{swidth};">')
document.write('</div></div>')
}
</script>
</span>
</td>
</tr>
</table>

</p>
</body>
</html>


============== END FILE SCROLLBOX.PHP ==============
0
 

Author Comment

by:buquenet
ID: 18785845
Labsy- Thanks for your efforts. Here is the resultant code that includes yours. All I get for ourtput is the field names. Can you take a look?

Thanks a million!!

Daniel in Houston

<?php require_once('Connections/Intention.php'); ?>
<?php
mysql_select_db($database_Intention, $Intention);
$query_rs_test = "SELECT * FROM qub3_queries_que";
$rs_test = mysql_query($query_rs_test, $Intention) or die(mysql_error());
$row_rs_test = mysql_fetch_assoc($rs_test);
$totalRows_rs_test = mysql_num_rows($rs_test);
?>

<?php
// Initialize var
$mymessage = "mymessage=''";

// Retreive results from database
// Since I do not have database, there might be some bugs
$sql = "SELECT * FROM t_dem";
$rs = mysql_query($sql, $Intention) or die(mysql_error());
while($res = mysql_fetch_object($rs)) {
      $mymessage .= "mymessage+='<p>'";
      $mymessage .= "mymessage+='<a href=\"page.php?coidk=".$res->coidk."&didk=".$res->didk."\"><font face=\"Verdana, Arial\">".$res->d_subj_sp."</font></a><br />'";
      $mymessage .= "mymessage+='<font face=\"Verdana, Arial\" size=\"2\">".$res->t_subj_descr_sp."</font><br />'";
      $mymessage .= "mymessage+='<font face=\"Verdana, Arial\" size=\"2\"><strong>".$res->t_mem.co_name."</strong></font>'";
      $mymessage .= "mymessage+='</p>'";
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript">
<!--//hide script

<!--Begin
//scroller width
var swidth=200

//scroller height
var sheight=70

//scroller's speed;
var sspeed=2

var mymessage=''

//text from PHP generated

<?=$mymessage;?>

function start(){
if (document.all) return
if (document.getElementById){
document.getElementById("slider").style.visibility="show"
ns6marquee(document.getElementById('slider'))
}
else if(document.layers){
document.slider1.visibility="show"
ns4marquee(document.slider1.document.slider2)
}
}
function ns4marquee(whichlayer){
ns4layer=eval(whichlayer)
ns4layer.document.write(mymessage)
ns4layer.document.close()
sizeup=ns4layer.document.height
ns4layer.top-=sizeup
ns4slide()
}
function ns4slide(){
if (ns4layer.top>=sizeup*(-1)){
ns4layer.top-=sspeed
setTimeout("ns4slide()",100)
}
else{
ns4layer.top=sheight
ns4slide()
}
}
function ns6marquee(whichdiv){
ns6div=eval(whichdiv)
ns6div.innerHTML=mymessage
ns6div.style.top=sheight
sizeup=sheight
ns6slide()
}
function ns6slide(){
if (parseInt(ns6div.style.top)>=sizeup*(-1)){
ns6div.style.top=parseInt(ns6div.style.top)-sspeed
setTimeout("ns6slide()",100)
}
else{
ns6div.style.top=sheight
ns6slide()
}
}

// End --->

function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}

//stop hiding script --->
</script>

</head>

<body>
<p>Here is your scrollbox:</p>
<p>The design:</p>

<p>
<a href="page.php?coidk=coidk&amp;didk=didk"><font face="Verdana, Arial">d_subj_sp</font></a><br />
<font face="Verdana, Arial" size="2">t_subj_descr_sp</font><br />
<font face="Verdana, Arial" size="2"><strong>t_mem.co_name</strong></font>
</p>

<p>
<table cellpadding="5" cellspacing="0" border="0" align="center" width="210">
<tr>
<td bgcolor="#ffffff">
<span style="borderWidth:0; borderColor:#ffffff; width:200; height:70;">
<ilayer width=200 height=70 name="slider1" bgcolor="#ffffff" visibility=hide>
<layer name="slider2" onMouseOver="sspeed=0;" onMouseOut="sspeed=2"></layer>
</ilayer>
<script language="JavaScript">
if (document.all){
document.writeln('<marquee id="ieslider" scrollAmount=2 width=200 height=70 direction=up style="border:0 solid grey;background-color:#ffffff">')
document.writeln(mymessage)
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=2")
document.write('</marquee>')
}
if (document.getElementById&&!document.all){
document.write('<div style="position:relative;overflow:hidden;width:200;height:70;clip:rect(0 302 102 0); background-color:#ffffff;border:0px solid white;" onMouseover="sspeed=0;" onMouseout="sspeed=2">')
document.write('<div id="slider" style="position:relative;width:&{swidth};">')
document.write('</div></div>')
}
</script>
</span>
</td>
</tr>
</table>

</p>

</body>
</html>
<?php
mysql_free_result($rs_test);
?>
0
 

Author Comment

by:buquenet
ID: 18785897
Actually, here is what I get...

Here is your scrollbox:

The design:

d_subj_sp
t_subj_descr_sp
t_mem.co_name

I did include the OnLoad() in the <body> tag which is something I had not done in the code above.

Thanks and I hope you can help.

Daniel
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 18

Accepted Solution

by:
Andrej Pirman earned 500 total points
ID: 18786126
Sorry,
mistake is in PHP while() loop, where I forgot to add newline \n for each new line. Replace it with this code and it should work:

while($res = mysql_fetch_object($rs)) {
      $mymessage .= "\nmymessage+='<p>'";
      $mymessage .= "\nmymessage+='<a href=\"page.php?coidk=".$res->coidk."&didk=".$res->didk."\"><font face=\"Verdana, Arial\">".$res->d_subj_sp."</font></a><br />'";
      $mymessage .= "\nmymessage+='<font face=\"Verdana, Arial\" size=\"2\">".$res->t_subj_descr_sp."</font><br />'";
      $mymessage .= "\nmymessage+='<font face=\"Verdana, Arial\" size=\"2\"><strong>".$res->t_mem.co_name."</strong></font>'";
      $mymessage .= "\nmymessage+='</p>'";
}
0
 

Author Comment

by:buquenet
ID: 18786691
Thank you very much!!! IT works great. One more question... i

If I want to have more than one scroller on the page, I can create the pho while stmt. But, what about the marquees and that big function?

thanks again

Daniel
0
 
LVL 18

Expert Comment

by:Andrej Pirman
ID: 18786956
hmmm...
for multiple scrollers javascript and whole layers stuff would need to be rewriten. I might do it for you if you need this, but for next few days I won't have time for this.
0
 
LVL 1

Expert Comment

by:Computer101
ID: 21207273
Forced accept.

Computer101
EE Admin
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Load balancing is the method of dividing the total amount of work performed by one computer between two or more computers. Its aim is to get more work done in the same amount of time, ensuring that all the users get served faster.
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
The viewer will learn how to count occurrences of each item in an array.

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now