Frequently Asked Questions
- How do I change the colour/font/size of the text in my messages?
- Why are my marquee messages appearing in the wrong place?
- Why won't my marquee work?
- Why does the marquee appear out of place when my page is printed?
- Why does the hourglass keep appearing when my Marquee is running?
- Why does the carat pointer keep changing to the arrow pointer when my Marquee is running?
- How do I use server-side scripting to update my Marquee?
How do I change the colour/font/size of the text in my messages?
Just as you would change these things in your web pages. The common method is be using the depreciated <font> tag like this:
<font size="12" face="courier" color="red">My Text</font>
Cascading Style Sheets provide a more controllable method for applying colour. If you haven't used CSS before it's well worth looking into. However, you should avoid using the inline style attribute (i.e. <p style="color: red;">) as this can cause the marquee to fail. You will need to use classes instead:
In HTML doc:
<head>
<style><!--
P.redPara {
font-family: courier;
font-size: 12pt;
color: red;
}
--></style>
</head>
In marquee message array:
msgarray = new Array( '[…]', '<p class="redPara">Red Paragraph</p>', '[…]' );
This may seem rather verbose to do nothing but change the text colour, font and size, but CSS provides extremely detailed control of your document's appearance so in the long run it is the better option.
For expediency the marquee messages come with a default class - TD.mrqtd - so for example you can set the text colour of the entire marquee simply by including this embedded style sheet:
<head>
<style><!--
TD.mrqtd {color: red}
--></style>
</head>
[NOTE: for backward compatibility the messages are enclosed in single cell tables to preserve their formatting in some older browsers. This may change in future versions. Keep this in mind when working with CSS for your messages.]
If you need to control appearence for individual messages you can change this default class by using the csspat array in the external js file:
csspat = new Array('messageRed','mesageGreed');
And using these rules in your style sheet:
TD.messageRed {color: red;}
TD.messageGreen {color: green;}
This will apply the classes to alternate messages. So if you have three messages they will have classes in this order: messageRed, messageGreen, messageRed.
Why are my marquee messages appearing in the wrong place?
This may be the result of the browser switching into Quirks Rendering Mode, which it will if it encounters a syntax it doesn't recognise. Most commonly this will be the result of not using the units suffix on values in your Cascading Style Sheet:
DIV.myDiv {top: 10;}
Should be:
DIV.myDiv {top: 10px;}
You might also want to check that you are using the correct Document Type Definition at the top of your page:
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
You can find out more about DTDs at A List Apart.
Why won't my marquee work?
Most problems are caused by the message array in the external js file. It's very easy to miss the simple things so you should check your messages again to make sure there are no unescaped apostrophes (change "it's" to "it\'s") and also make sure that the syntax of the message array has not been compromised while editing. Messages should be separated by commas (outside of the single quotes) and the group enclosed in braces and terminated by a semicolon (;). Also make sure you have not accidentally included a comma after the last message. So the array should look like this:
msgarray = new Array( 'Message 1', 'Message 2', 'Message 3' );
Another problem may be caused by other JavaScripts running on the same page. The Marquee uses the window.onload event handler to trigger start-up so any other scripts that use this may be overriding the Marquee. The simplest way to fix this is to remove the other script. However, if it's something essential then you can create a new function that allows both scripts to use the event and place it below all your other script definitions:
<head>
<script type="text/javascript" src="marquee.js"></script>
<script type="text/javascript" src="otherscript.js"></script>
<script type="text/javascript"><!--
window.onload = startall;
function startall()
{
repos();
beginotherscript();
}
//--></script>
</head>
Yet another problem might be that you have inadvertently made a change in the body of the external js file, below the editable section. If nothing else seems to be working you might want to download the file again and copy your setting across to it.
If all else fails feel free to contact me and describe the problem as accurately as possible. You should also attach the external js file you are using and the HTML page it is called from (there is no need to include the associated files like images), or if you are testing online then send a link to it.
Why does the marquee appear out of place when my page is printed?
There are problems regarding the positioning of the marquee when the page is laid out for printing. Unfortunately there is no way to correct this at the moment. If this is causing severe problems with your layout then the only reliable workaround is to hide the marquee completely for printing purposes using the CSS @media rule:
<head>
<style><!--
@media print {
DIV.marquee {display: hide;}
DIV.message {display: hide;}
}
--></style>
</head>
In theory it should be possible to select a message to display in the correct position for the purposes of printing, but in practice there are problems regarding the way MSIE lays out the page during printing. Specifically, it appears that the @media rule is overridden by the JavaScript, meaning that any CSS properties used by the script cannot be used by the @media rule including those that control positioning. Future versions of the marquee may provide a method to deal with this.
In the meantime, one way to provide correctly positioned, printable content in your marquee is to create an image of a message to use in place of the transparent GIF. You then use the about @media rule above to hide the animated marquee. The downside of this is that you will not be able to use transparent backgrounds in your messages, nor can you use the diagonal direction combos with transition = 'contig', as these will reveal the message image during animation.
Why does the hourglass keep appearing when my Marquee is running?
Why does the carat pointer keep changing to the arrow pointer when my Marquee is running?
So far this has only been a problem in MSIE. It only occurs when using images for the backgrounds of your messages rather than simply a colour or transparency. It does not appear to unduly influence performance of the browser. The pointer turning from the carat to the arrow is simply a very brief use of the hourglass, after which the pointer defaults to the arrow even if it is still over a text block. Using a smaller marquee or images with a smaller file size might help reduce this problem.
How do I use server-side scripting to update my Marquee?
This is actually fairly simple. The marquee is handled entirely by the client's browser so all you have to do is have your server-side script rewrite the JavaScript before it is sent. This only requires a minor alteration to the external js file, specifically removing the msgarray = new Array () from the top of the settings section. It is this array that your script needs to rewrite in order to update the messages.
The following PHP script uses data returned from a MySQL query to compile a set of messages consisting of recent blog posts:
<head>
[...]
<?php
// Construct JavaScript Message Array from MySQL result //
// Connect to MySQL server //
$db_server = 'localhost';
$db_name = 'weblog';
$db_user = 'username';
$db_password = 'password';
$db_link = mysql_connect($db_server, $db_user, $db_password) or die ('Cannot connect to the database because: ' . mysql_error());
mysql_select_db($db_name);
// Get Last 10 LazyLog Entries //
$result = mysql_query('SELECT post_id,event,description FROM journal ORDER BY datetime DESC LIMIT 0,10;');
// Build array of HTML messages //
$message_array = array();
while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
// Remove existing HTML (but keep spacing) //
$row[2] = preg_replace('/<(?:.*?)>/', ' ', $row[2]);
// Use only first words of post in message //
$short_body = '';
foreach (explode(' ',$row[2]) as $word) {
$short_body .= "$word ";
if (strlen($short_body) >= 70) {break 1;}
}
$short_body = rtrim($short_body);
$short_body .= '...';
// Don't forget to escape those apostrophes! //
$short_body = addslashes($short_body);
$row[1] = addslashes($row[1]);
// Format HTML message //
$message_array[] = '<a href="http://www.ruinsofmorning.net/?p=entry&eid=' . $row[0] . '"><big>' . $row[1]. '</big></a><br />' . $short_body;
}
array_unshift($message_array, '<big><b>Latest LazyLog Posts...</b></big>');
// Reconstruct the array in JavaScript syntax and output to browser:
echo '<script type="text/javascript">';
echo "var msgarray=new Array ('";
echo join("','",$message_array);
echo "')";
echo '</script>';
?>
<!-- Now the external JavaScript with the 'msgarray' definition stripped out -->
<script type="text/javascript" src="demo7.js"></script>
[...]
</head>
This script is simply writing an piece of embedded JavaScript into the <HEAD> of the page. You should note that this scripting comes before the link to the external js file which will only execute if the msgarray has been defined first. You must be careful to ensure that any apostrophes in the messages are escaped to ensure that the JavaScript syntax is valid - here I've simply used the addslashes() function.
Using this method you can write scripts that use data from text files or RSS feeds.