Javascript Variables

@russellbainJun 08.2007

One of my clients has a website (designed and created by us) that has a scrolling text box on the main page. There are 5 lines of text in the scroller box and it alternates every few seconds. The users of the website (the client) use Contribute to update this site regularly.

To edit the text in the scroller bar, you need to go into the code for the main page on the website and look halfway down and you will find this section:

myScroller1.addItem(“<b>Welcome to CLIENT NAME</b>”);
myScroller1.addItem(“<b>Call today for full details of our latest offers<b>”);
myScroller1.addItem(“<b>See us on ITV Wales – or download our latest ad<b/>”);
myScroller1.addItem(“<b>Bank Holiday Promotions</b>”);
myScroller1.addItem(“<b>Visit the store for our easter bargains</b>”);

For our clients this is not always an easy task as they are not familiar with code of any sort. What I thought I could do was create a simple javascript file that allows the user to edit the captions as they like. Then the main page of the website could simply take the captions from this javascript file. I could also put comments through the javascript file telling them exactly what to edit and what not to edit. I am not really familiar with variables in javascript and how to pass them to another page on the website, does any body have any tips or pointers that may help me out?

Thanks a lot

to post a comment

JavaScript

7 Comments(s) _↴

@JMRKERJun 08.2007 — #Why not create an external JS file that contains only the messages to be edited and the bare minimum code to cause the actions to occur. Then you can avoid instructions about changes to the more critical areas of your script.

In the <HEAD> section:

<script type="text/javascript" src="TextScroller.js"></script>

Then put your calling function in the <BODY> somewhere:

<script type="text/javascript">

Call_To_TextScroller_function();

</script>

Good Luck!

@russellbainauthorJun 08.2007 — #Thanks a lot for that!

When i do this it now appears as undefined on the main page when it scrolls to the entry? I am not sure about the Javascript file that contains the messages as i am fairly new all of this. Currently it looks like this:

function scrollertext

{

caption1="test"

}

and i then inserted the code that you said in your previous post into my code. I am gettin an error on page and when i click on it it says "caption1 undefined.

Do i have to define the variable and if so how do i do this?

@JMRKERJun 08.2007 — #On your last post:

1. You have not defined your 'function scrollertext' correctly.

2. You have not defined anything about 'caption1'

Sorry, I can not help without your current script.

It's more like I'm trying to do brain surgery by stareing ar your foot! ?

@russellbainauthorJun 08.2007 — #ok sorry about that, as i say this is my first encounter with javascript so everything i have done so far has been either trial or error or stuff i have read on forums/books/websites etc.

that was all that was in my scrollertext.js file (external javascript that will contain the messages).

What do you need me to post and i will?

how do i correctly define my function and how do i define caption1?

Thanks for all your responses so far, i appreciate it!

@JMRKERJun 08.2007 — #MsgDisplay.js

[code=php]
 // Scroller Message Center
 var Msg = new Array();
 Msg[0] = 'Welcome to <font color="red">CLIENT NAME</font>';
 Msg[1] = 'Call today for full details of our latest offers';
 Msg[2] = 'See us on ITV Wales - or download our latest ad';
 Msg[3] = 'Bank Holiday Promotions';
 Msg[4] = 'Visit the store for our easter bargains';
 Msg[5] = ''; // space between scrolling region
 
 // ================ Change only between 'quotes' above
 [/code]

MsgDisplay.html

[code=php]
 <html>
 <head>
 <title>Message Display</title>
 <style type="text/css">
 div.MSG {
 font-size:1.2em;
 font-weight:bold;
 background-color:#ffffcc;
 /*   width:400px; */  /* play with this value */
 }
 </style>
 <script type="text/javascript" src="MsgDisplay.js"></script>
 <script type="text/javascript">
 var MsgStart = 0;
 var ScrollInfo = new Array();
 function ShowMessages(H_V) {
 for (var m=0; m<Msg.length; m++) { ScrollInfo[m] = Msg[((m+MsgStart) % Msg.length)]; }
 MsgStart++;  MsgStart = (MsgStart % Msg.length);
 var MsgTxt = '';
 if (H_V == true) {     // Vertical Scrolling 

 for (var m=0; m<Msg.length; m++) { MsgTxt += ScrollInfo[m]+'<br />'; }
 } else {               // Horizontal scrolling 

 for (var m=0; m<Msg.length; m++) { MsgTxt += ScrollInfo[m]+'&nbsp;&nbsp;&nbsp;'; }
 }
 document.getElementById('ScrollArea').innerHTML = MsgTxt;
 }
 var MsgTimeOut = 0;
 
 function InitTimer(tinfo) {
 MsgTimeOut = 0;
 MsgTimeOut = setInterval("ShowMessages(true)", tinfo );
 }
 function Msg_Vert(tinfo) {
 StopTimer();
 MsgTimeOut = setInterval("ShowMessages(true)", tinfo );
 }
 function Msg_Horiz(tinfo) {
 StopTimer();
 MsgTimeOut = setInterval("ShowMessages(false)", tinfo );
 }
 function StopTimer() {
 clearTimeout(MsgTimeOut);
 }
 </script>
 
 </head>
 <body onLoad="InitTimer(1000)">
 <h1>Message Display</h1>
 <div class="MSG" id="ScrollArea">Message Display Goes Here!</div>
 <br />
 Following not required -- only for testing<br />
 <button onClick="Msg_Vert(1000)">Start Vert</button>
 <button onClick="Msg_Horiz(1000)">Start Horiz</button>
 <button onClick="StopTimer()">Stop</button>
 </body>
 </html>
 [/code]

@russellbainauthorJun 11.2007 — #thanks for your response, I am just back into the office and have tried what you said in your last post and...........it works!

thank you very much for all your help

@JMRKERJun 11.2007 — #You're most welcome.

Glad I could help.

Also in #JavaScript _↴

Efficient Search and Replace on Multiple Conditions getelementid with a variable Changing SSI

Success!

Help @russellbain spread the word by sharing this article on Twitter...

Tweet This

Javascript Variables

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript Variables

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴