We help IT Professionals succeed at work.

Scrolling text on a website pulling from a database

599 Views
Last Modified: 2013-12-12
Hi,
I am trying to create a website that will display my rush jobs from an access database that will scroll , I have around 100 jobs that change constently in an access database.
Basically what I want to accomplish is to have a big screen in my office displaying those jobs. I thought of doing a website , but I am not really sure about it.
I am open to any other way to accomplish this. the best would be to display it like an aiport screen ( flight informations) refreshing every so often.
I would appresciate some example of code or a tutorial on how to accomplish this
Thanks
Comment
Watch Question

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Matthew,
thanks for the responds. I haven't look at the scrollers demo yet, but I think you find the correct code for me. I briefly red the description of the AJAX XHTMLHTTPRequest and I think this what I am looking for.
I never wrote any Ajax , so I am gonna try to follow example right now.
Do you know of any example that would look better from what I am thinking of instead of scrolling? I have seen another nice way at the aiport is a display that shows the passengers on standby list and the page refresh every so often , but will go through the list in 2 or 3 pages. do you know about htis kind of features?
thanks
David

Author

Commented:
ok, I got the scrolling I wanted and I am able to pull the data on the website from my database, now I am trying to replace the default text of the scrolling with mine.
i am trying to put the php code into it but I guess I am missing somehting :
here is the original code:

fcontent[0]="New scripts added to the Scroller category! Click here to visit";

and here is mine:


fcontent[0]="<?php
   $fv = $rs->Fields("DISTRIBUTOR");
   echo "Value: ".$fv->value."
\n";
   $rs->MoveNext(); ?>";

i am having a parse error
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
It finally worked. attached is the code that I used
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> PSH Rush Jobs </TITLE>
  <meta http-equiv="refresh" content="15">
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="David Pelerin" CONTENT="">
  <META NAME="Display Type Airport" CONTENT="">
  <META NAME="This Code will display the Rush Job from our Access Database" CONTENT="">
 
 
	<script type="text/javascript">
 
	/***********************************************
	* Local Time script- © Dynamic Drive (http://www.dynamicdrive.com)
	* This notice MUST stay intact for legal use
	* Visit http://www.dynamicdrive.com/ for this script and 100s more.
	***********************************************/
 
	var weekdaystxt=["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"]
 
	function showLocalTime(container, servermode, offsetMinutes, displayversion){
	if (!document.getElementById || !document.getElementById(container)) return
	this.container=document.getElementById(container)
	this.displayversion=displayversion
	var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
	this.localtime=this.serverdate=new Date(servertimestring)
	this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
	this.updateTime()
	this.updateContainer()
	}
 
	showLocalTime.prototype.updateTime=function(){
	var thisobj=this
	this.localtime.setSeconds(this.localtime.getSeconds()+1)
	setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
	}
 
	showLocalTime.prototype.updateContainer=function(){
	var thisobj=this
	if (this.displayversion=="long")
	this.container.innerHTML=this.localtime.toLocaleString()
	else{
	var hour=this.localtime.getHours()
	var minutes=this.localtime.getMinutes()
	var seconds=this.localtime.getSeconds()
	var ampm=(hour>=12)? "PM" : "AM"
	var dayofweek=weekdaystxt[this.localtime.getDay()]
	this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+ampm+" "
	}
	setTimeout(function(){thisobj.updateContainer()}, 1000) //update container every second
	}
 
	function formatField(num, isHour){
	if (typeof isHour!="undefined"){ //if this is the hour field
	var hour=(num>12)? num-12 : num
	return (hour==0)? 12 : hour
	}
	return (num<=9)? "0"+num : num//if this is minute or sec field
	}
 
	</script>
 </HEAD>
 
 <BODY bgcolor="#ffffcc">
	<!-- Code to Display Time -->
 
	<H1><center>			
		<div>
			<span id="timecontainer"></span>
			<script type="text/javascript">new showLocalTime("timecontainer", "server-php", 0, "short")</script>
		</div>
		</center>
	</H1>
 
 
	<TABLE >
		<TR>
			
					<?php
 
						$conn = new COM('ADODB.Connection') or die('Cannot start ADO'); 
						$conn->Open('Provider=Microsoft.ACE.OLEDB.12.0; Data Source=C:\inetpub\wwwroot\share\PshincNew2.accdb; Persist Security Info=False;');
 
						// SQL statement to build recordset.$rsElec for Electronic $rsHydr for Hydraulic
						$rsElec = recordset;
						$rsHydr = recordset;
						$rsElec = $conn->Execute("SELECT [JOB #] FROM [JOB FOLDER] WHERE (([Rush] = TRUE) AND ([STATUS] ='A'))");
						$rsHydr = $conn->Execute("SELECT [JOB #] FROM [SERVOHYDRAULICS] WHERE (([PRIORITY] = 'RUSH') AND ([STATUS] ='APPROVED'))");
						 
						//--variables initialized:
						$NumberOfJobsElec=0;
						$NumberPagesElec=0;
						$counterElec=0;
 
						$NumberOfJobsHydr=0;
						$NumberPagesHydr=0;
						$counterHydr=0;
						
						//calculate the number of Rush in the records set for electronics
						while (!$rsElec->EOF) 
						{ 
							$rsElec->MoveNext(); 
							$NumberOfJobsElec = $NumberOfJobsElec+1;
						}
 
						//calculate the number of Rush in the records set for electronics
						while (!$rsHydr->EOF) 
						{ 
							$rsHydr->MoveNext(); 
							$NumberOfJobsHydr = $NumberOfJobsHydr+1;
						}
				 
						//Calculate the number of Items per page
						//Ceil Returns the next highest integer value by rounding up value if necessary
						$NumberPagesElec = $NumberOfJobsElec/20;
						$NumberPagesElec = ceil($NumberPagesElec); 
						$NumberPagesHydr = $NumberOfJobsHydr/20;
						$NumberPagesHydr = ceil($NumberPagesHydr); 
						?>
			<TD>
				<font size="17" color=" #6600FF"><b><u><?php	echo $NumberOfJobsElec." Rush Jobs in Electronics  </p>"; ?></u></b></font>
			</TD>
			<TD>
				<font size="17" color=" #6600FF"><b><u><?php echo $NumberOfJobsHydr." Rush Jobs in Hydraulics</p>";?></u></b></font>
			</TD>
		</TR>
		<TR>
			<TD>
				<?php
				//echo $NumberPagesElec." Pages  with 20 job per page</p>";
				
				//echo $NumberPagesHydr." Pages  with 20 job per page</p>";
 
				//--ack to the beginning of the recordset
				$rsElec->MoveFirst(); 
				$rsHydr->MoveFirst();
 
				//Counter is to display the record number
				$counterElec=1;
				$counterHydr=1;
		 
				// Display all the values in the records set
				//while (!$rsElec->EOF) 
			//	{ 
			//		$RedData = $rsElec->Fields("JOB #");
			 //       echo "Value: ".$counterElec."\n".$RedData->value."<br>\n";
			 //       $rsElec->MoveNext();
			 //       $counterElec += 1;
			//	}
				
			//	while (!$rsHydr->EOF) 
			//	{ 
			//		$RedData = $rsHydr->Fields("JOB #");
			 //       echo "Value: ".$counterHydr."\n".$RedData->value."<br>\n";
			 //       $rsHydr->MoveNext();
			 //       $counterHydr += 1;
			//	}
		 
				//re-populate the recorset because we are at the EOF 
				$rsElec->MoveFirst();
				$rsHydr->MoveFirst();
			   
			//	echo "test123:"; 
 
			?>
 
 
 
				<script type="text/javascript">
				 
				/***********************************************
				* Fading Scroller- ? Dynamic Drive DHTML code library (www.dynamicdrive.com)
				* This notice MUST stay intact for legal use
				* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
				***********************************************/
				 
				var delay = 1000; //set delay between message change (in miliseconds)
				var maxsteps=30; // number of steps to take to change from start color to endcolor
				var stepdelay=40; // time in miliseconds of a single step
				//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
				var startcolor= new Array(255,255,204); // start color (red, green, blue)
				var endcolor=new Array(0,0,0); // end color (red, green, blue)
				var fcontent=new Array();
 
 
				begintag='<div style="font: normal 60px Arial; padding: 5px;">'; //set opening tag, such as font declarations
				 
				 
				<?php 
					$counterElec=1;
					while(!$rsElec->EOF)
					{
						echo 'fcontent[ fcontent.length ] = "' .  str_replace('"','&#34;',preg_replace('/\r?\n/U',"<br/>",$rsElec->Fields("JOB #")->Value)) . '<br/>\n' ."\";\n";
						++$counterElec;
						$rsElec->MoveNext();
					}
					$rsElec->Close();
				?> 
				closetag='</div>';
								
 
				 
				var fwidth='690px'; //set scroller width
				var fheight='660px'; //set scroller height
				var fadelinks=0;  //should links inside scroller content also fade like text? 0 for no, 1 for yes.
				var ie4=document.all&&!document.getElementById;
				var DOM2=document.getElementById;
				var faderdelay=0;
				var index=0;
				 				 
				/*Rafael Raposo edited function*/
				//function to change content
				var RECORDS_PER_SCREEN=8;
				function changecontent()
				{
					if (index>=fcontent.length)
						index=0;
					var data = "";
					for( var i=0; i < RECORDS_PER_SCREEN && typeof(fcontent[i+index])!="undefined"; ++i)
					{
						  data+=fcontent[index + i];
					}
					if (DOM2)
					{
						document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")";
						document.getElementById("fscroller").innerHTML=begintag+data+closetag
						if (fadelinks)
							linkcolorchange(1);
							colorfade(1, 15);
					}
					else if (ie4)
						document.all.fscroller.innerHTML=begintag+data+closetag;
					index+=RECORDS_PER_SCREEN;
				}
				 
				// colorfade() partially by Marcio Galli for Netscape Communications.  ////////////
				// Modified by Dynamicdrive.com
				 
				function linkcolorchange(step)
				{
					var obj=document.getElementById("fscroller").getElementsByTagName("A");
					if (obj.length>0)
					{
						for (i=0;i<obj.length;i++)
						obj[i].style.color=getstepcolor(step);
					}
				}
				 
				/*Rafael Raposo edited function*/
				var fadecounter;
				function colorfade(step) 
				{
					if(step<=maxsteps) 
					{      
						document.getElementById("fscroller").style.color=getstepcolor(step);
						if (fadelinks)
							linkcolorchange(step);
						step++;
						fadecounter=setTimeout("colorfade("+step+")",stepdelay);
					}
					else
					{
						clearTimeout(fadecounter);
						document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
						setTimeout("changecontent()", delay);
					  
					}   
				}
				 
				/*Rafael Raposo's new function*/
				function getstepcolor(step) 
				{
					var diff
					var newcolor=new Array(3);
					for(var i=0;i<3;i++) 
					{
						diff = (startcolor[i]-endcolor[i]);
						if(diff > 0) 
						{
						  newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
						} 
						else 
						{
						  newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
						}
					 }
					 return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
				}
				 
				if (ie4||DOM2)
				  document.write('<div id="fscroller" style="border:0px solid black;width:'+fwidth+';height:'+fheight+'"></div>');
				 
				if (window.addEventListener)
					window.addEventListener("load", changecontent, false)
				else if (window.attachEvent)
					window.attachEvent("onload", changecontent)
				else if (document.getElementById)
					window.onload=changecontent
				 
				</script>
</td>
 
 
 
 
<td>
<script type="text/javascript">
 
/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
 
var delay1 = 1000; //set delay1 between message change (in miliseconds)
var maxsteps1=30; // number of steps to take to change from start color to endcolor1
var stepdelay1=40; // time in miliseconds of a single step
//**Note: maxsteps1*stepdelay1 will be total time in miliseconds of fading effect
var startcolor1= new Array(255,255,204); // start color (red, green, blue)
var endcolor1=new Array(0,0,0); // end color (red, green, blue)
 
var fcontent1=new Array();
begintag1='<div style="font: normal 60px Arial; padding: 5px;">'; //set opening tag, such as font declarations
				<?php 
					$counterHydr=1;
					while(!$rsHydr->EOF)
					{
						echo 'fcontent1[ fcontent1.length ] = "' .  str_replace('"','&#34;',preg_replace('/\r?\n/U',"<br/>",$rsHydr->Fields("JOB #")->Value)) . '<br/>\n' ."\";\n";
						++$counterHydr;
						$rsHydr->MoveNext();
					}
					$rsHydr->Close();
				?> 
closetag1='</div>';
 
var fwidth1='690px'; //set scroller width
var fheight1='660px'; //set scroller height
 
var fadelinks1=0;  //should links inside scroller content also fade like text? 0 for no, 1 for yes.
 
///No need to edit below this line/////////////////
 
 
var ie14=document.all&&!document.getElementById;
var DOM21=document.getElementById;
var faderdelay1=0;
var index1=0;
 
 
/*Rafael Raposo edited function*/
				//function to change content
				var RECORDS_PER_SCREEN1=7;
				function changecontent1()
				{
					if (index1>=fcontent1.length)
						index1=0;
					var data1 = "";
					for( var i2=0; i2 < RECORDS_PER_SCREEN1 && typeof(fcontent1[i2+index1])!="undefined"; ++i2)
{
      data1+=fcontent1[index1 + i2];
}
 
 
					if (DOM21)
					{
						document.getElementById("fscroller1").style.color="rgb("+startcolor1[0]+", "+startcolor1[1]+", "+startcolor1[2]+")";
						document.getElementById("fscroller1").innerHTML=begintag1+data1+closetag1
						if (fadelinks1)
							linkcolorchange1(1);
							colorfade1(1, 15);
					}
					else if (ie14)
						document.all.fscroller1.innerHTML=begintag1+data1+closetag1;
					index1+=RECORDS_PER_SCREEN1;
				}
 
/*Rafael Raposo edited function*/
var fadecounter1;
function colorfade1(step) {
  if(step<=maxsteps1) {	
    document.getElementById("fscroller1").style.color=getstepcolor1(step);
    if (fadelinks1)
      linkcolorchange1(step);
    step++;
    fadecounter1=setTimeout("colorfade1("+step+")",stepdelay1);
  }else{
    clearTimeout(fadecounter1);
    document.getElementById("fscroller1").style.color="rgb("+endcolor1[0]+", "+endcolor1[1]+", "+endcolor1[2]+")";
    setTimeout("changecontent1()", delay1);
	
  }   
}
 
/*Rafael Raposo's new function*/
function getstepcolor1(step) {
  var diff;
  var newcolor=new Array(3);
  for(var i=0;i<3;i++) {
    diff = (startcolor1[i]-endcolor1[i]);
    if(diff > 0) {
      newcolor[i] = startcolor1[i]-(Math.round((diff/maxsteps1))*step);
    } else {
      newcolor[i] = startcolor1[i]+(Math.round((Math.abs(diff)/maxsteps1))*step);
    }
  }
  return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
 
if (ie14||DOM21)
  document.write('<div id="fscroller1" style="border:0px solid black;width:'+fwidth+';height:'+fheight1+'"></div>');
 
if (window.addEventListener)
window.addEventListener("load", changecontent1, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent1)
else if (document.getElementById)
window.onload=changecontent1
 
</script>
</td>
</tr>
</table>
 
 
 
 
 
 
 
 
<!-- Scrolling Marque on the bottom of the page -->
<script language="JavaScript1.2">
 
/*
Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
Credit MUST stay intact
*/
 
//Specify the marquee's width (in pixels)
var marqueewidth="1400px"
//Specify the marquee's height
var marqueeheight="70px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor="#ffffcc"
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=0
 
//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):
 
var marqueecontent='<nobr><font size ="12" face="Arial">NEWS!!!! Price of Gas will go down to $2.00/gallon by the end of the summer</font></nobr>'
 
 
////NO NEED TO EDIT BELOW THIS LINE////////////
marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed  //+1 added to speed the text
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee
 
function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",10)
}
window.onload=populate
 
function scrollmarquee(){
if (iedom){
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"
 
}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}
 
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
 
 </BODY>
</HTML>

Open in new window

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.