Random Text Display
12 posts by 3 authors in: Forums > CMS Builder
Last Post: September 17, 2009 (RSS)
Hello,
I have no idea if this is possible.
A client wants a blurb of text in the upper right hand corner of their site to randomly 'change' every 7 seconds or so. (I've played with random image displays before, and am assuming I'll find some javascript somewhere that is capable of this. I hope ? :))
Is this an option pulling in entries for this field in the Admin area? And if so... how would i even start??
I have no idea if this is possible.
A client wants a blurb of text in the upper right hand corner of their site to randomly 'change' every 7 seconds or so. (I've played with random image displays before, and am assuming I'll find some javascript somewhere that is capable of this. I hope ? :))
Is this an option pulling in entries for this field in the Admin area? And if so... how would i even start??
Re: [gagester] Random Text Display
By Chris - September 4, 2009 - edited: September 4, 2009
Hi gagester,
The easiest way to do this would be to load in all the possible entries when the page loads. That way, you don't need to build a separate page to deal with AJAX requests (and deal with possibly having to debug asynchronous requests.)
While we don't normally offer JavaScript support, I thought I'd give this one a go for fun.
Here's some sample code which populates a JavaScript array and then continuously changes an element on the page. You'll need to replace the parts in red with your own record list variable, field, and element id.
I hope this helps! Please let us know if you have any questions or comments.
The easiest way to do this would be to load in all the possible entries when the page loads. That way, you don't need to build a separate page to deal with AJAX requests (and deal with possibly having to debug asynchronous requests.)
While we don't normally offer JavaScript support, I thought I'd give this one a go for fun.
Here's some sample code which populates a JavaScript array and then continuously changes an element on the page. You'll need to replace the parts in red with your own record list variable, field, and element id.
<script type="text/javascript">
var entries = [
<?php
function jsencode($string) {
$string = preg_replace('/"/', '\\"', $string);
$string = preg_replace("/'/", "\\'", $string);
return $string;
}
function collectContentFieldAndMakeJSString($record) {
return '"' . jsencode($record['title']) . '"';
}
echo join(', ', array_map('collectContentFieldAndMakeJSString', $newsRecords));
?>
];
setInterval(function(){document.getElementById("html_element_id").innerHTML = entries[Math.floor(Math.random()*entries.length)];}, 1000)
</script>I hope this helps! Please let us know if you have any questions or comments.
All the best,
Chris
Chris
Re: [chris] Random Text Display
Thanks Chris!!
okay... I must be doing something wrong...
Take a look at the attached:
http://centrasodablasting.com/about-us.php
okay... I must be doing something wrong...
Take a look at the attached:
http://centrasodablasting.com/about-us.php
Re: [gagester] Random Text Display
By Chris - September 4, 2009 - edited: September 4, 2009
Hi gagester,
It looks like you changed the name of one extra variable. I probably should have mentioned that $record in that context is supposed to stay as-is. Sorry for the confusion. :)
Change this:
back to this:
Hope this helps!
It looks like you changed the name of one extra variable. I probably should have mentioned that $record in that context is supposed to stay as-is. Sorry for the confusion. :)
Change this:
function collectContentFieldAndMakeJSString($record) {
return '"' . jsencode($top_rightRecord['content']) . '"';
}back to this:
function collectContentFieldAndMakeJSString($record) {
return '"' . jsencode($record['content']) . '"';
}Hope this helps!
All the best,
Chris
Chris
Re: [chris] Random Text Display
yeah, i actually caught that and changed it... but it still didn't work .
hmmmmm...
hmmmmm...
Re: [gagester] Random Text Display
By Chris - September 4, 2009 - edited: September 4, 2009
Hi gagester,
Are you sure you changed it back? I'm looking at the source of your page at http://centrasodablasting.com/about-us.php and seeing the following:
And line 98 in your attachment above is:
Are you sure you changed it back? I'm looking at the source of your page at http://centrasodablasting.com/about-us.php and seeing the following:
<script type="text/javascript">
var entries = [
Notice: Undefined variable: top_rightRecord in /hsphere/local/home/c257177/centrasodablasting.com/about-us.php on line 98
Notice: Undefined variable: top_rightRecord in /hsphere/local/home/c257177/centrasodablasting.com/about-us.php on line 98
Notice: Undefined variable: top_rightRecord in /hsphere/local/home/c257177/centrasodablasting.com/about-us.php on line 98
...And line 98 in your attachment above is:
return '"' . jsencode($top_rightRecord['content']) . '"';
All the best,
Chris
Chris
Re: [gagester] Random Text Display
By Chris - September 4, 2009 - edited: September 4, 2009
Maybe it's a caching problem? Are you able to make other changes to that page?
All the best,
Chris
Chris
Re: [chris] Random Text Display
this still isn't working. am i missing something fundamental?
Re: [gagester] Random Text Display
By Kenny - September 17, 2009 - edited: September 17, 2009
Try this one
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php require_once "/home/username/public_html/cmsAdmin/lib/viewer_functions.php";
list($messagesRecords, $messagesMetaData) = getRecords(array(
'tableName' => 'messages',
));
?>
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body { font-family: arial; }
.instructions { border: 3px solid #000; background-color: #EEE; padding: 10px; text-align: left; margin: 25px}
</style>
</head>
<body>
<script type="text/javascript">
var delay = 2000; //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,255); // 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 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
<?php foreach ($messagesRecords as $record): ?>
fcontent[<?php echo $record['num'] ?>]="<?php echo $record['message'] ?>";
<?php endforeach; ?>
closetag='</div>';
var fwidth='400px'; //set scroller width
var fheight='150px'; //set scroller height
var fadelinks=1; //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;
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj.style.color=getstepcolor(step);
}
}
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);
}
}
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor-endcolor);
if(diff > 0) {
newcolor = startcolor-(Math.round((diff/maxsteps))*step);
} else {
newcolor = startcolor+(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:1px 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>
</body>
</html>
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php require_once "/home/username/public_html/cmsAdmin/lib/viewer_functions.php";
list($messagesRecords, $messagesMetaData) = getRecords(array(
'tableName' => 'messages',
));
?>
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body { font-family: arial; }
.instructions { border: 3px solid #000; background-color: #EEE; padding: 10px; text-align: left; margin: 25px}
</style>
</head>
<body>
<script type="text/javascript">
var delay = 2000; //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,255); // 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 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
<?php foreach ($messagesRecords as $record): ?>
fcontent[<?php echo $record['num'] ?>]="<?php echo $record['message'] ?>";
<?php endforeach; ?>
closetag='</div>';
var fwidth='400px'; //set scroller width
var fheight='150px'; //set scroller height
var fadelinks=1; //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;
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj.style.color=getstepcolor(step);
}
}
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);
}
}
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor-endcolor);
if(diff > 0) {
newcolor = startcolor-(Math.round((diff/maxsteps))*step);
} else {
newcolor = startcolor+(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:1px 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>
</body>
</html>