HTML Goodies: Script Tip: Week 69

Hey there…

     This script was originally sent to JavaGoodies.com for posting by Leif King. It’s a great script for any site that deals with news and headlines at any level. The user sees a text box with headlines inside. By using buttons they can scroll through the headlines. Each headline then is a different link.

     I made a couple of minor changes:

1. The script had a random button which didn’t work very well. I took it out.
   
2. The mouse never changed to a pointer when passed over the headlines. I set it up so the pointer would appear.
   
3. The original script required the user to click on a button before choosing a headline. If the user clicked on the text box without first choosing a headline, the script would throw an error. I fixed that.
   
4. In its original form the script would not work with Navigator. I’ll show you how to fix that. It’s the simple addition of a button. When you click to see the script, you’ll see a link offered to try out the Netscape compatible version.
   
   

        It’s a very clever script. Take a look.

   ---

   
   Here’s the Effect
   

   ---

   Here’s the Code
   

   ---

        The Script is a very interesting use of interlining functions. The author really did a clever job of allowing the browser to keep track of what headline is in the text box display. Since there are form elements in this script, we always start with them. To the bottom!

   <FORM NAME=”headline” METHOD=”post”>
   
   
   <INPUT TYPE=”hidden” NAME=”nowShowing” VALUE=”0″>
   
   
   <INPUT TYPE=”text” NAME=”headHere” VALUE=”Choose and Click” SIZE=”50″
   onClick=”goTo(inlocation);”><br>
   
   
   <INPUT TYPE=”button” VALUE=”NEXT” onClick=”chngNext();”>
   
   
   <INPUT TYPE=”button” VALUE=”PREV” onClick=”chngPrev();”><br>
   
   
   <INPUT TYPE=”hidden” NAME=”shownext” VALUE=”N”>
   
   <INPUT TYPE=”hidden” NAME=”showprev” VALUE=”N”>
   
   </form>

        If you’re a faithful Script Tip reader…and I know you are…you’ll notice there are six form elements, but only three display. Notice above that there are three INPUT elements that have TYPEs set to “hidden”.
   That’s a neat little trick that allows the author to set a value aside as if he was placing it in a text box for later, only since the box is set to hidden, no one can see the value.

        Right off the bat, the form itself is named “headline”.

        The next element is a hidden input designed to hold the number of the headline currently showing. Notice it is set to zero (VALUE=”0″) to start it off.

        Next is the display text box. It’s set to 50 characters wide, has the name “headHere”, and is set to trigger a function called goTo(inlocation) when clicked.
   

   
   This is why the script doesn’t work in Netscape Navigator
   

        MSIE allows a text box to become a “clickable” item. Netscape Navigator does not. Yes, you could set the text box into a division or into a layer, but that is so much coding for not much effect. The easiest method to getting this script to function in Navigator is to simply separate out the onClick function to its own button.
   Like so:

   <INPUT TYPE=”button” VALUE=”Click to Go!” onClick=”goTo(inlocation)”>

        You can see the button in action in the Netscape version of the script. Moving along…

        You’ll notice the text box also has a VALUE that should display but does not. You see, when the script first arrived on my cyber-doorstep, the text did display. The user then had to click to see the first headline. The problem was that if the user clicked on the VALUE text without moving to the first headline, an error jumped up. That’s bad. Let me talk about the next INPUT item now. That will help explain how I got the first headline to appear
   rather than the VALUE text.

   The next line:

   <INPUT TYPE=”button” VALUE=”NEXT” onClick=”chngNext();”>

        …is a button that triggers the function
   chngNext(). You can probably guess that this is the function that changes to the next headline in succession.
   

   
   This is how to stop the no headline click error

        Well, knowing that, I simply set an onLoad= Event Handler into this page’s BODY flag in order to trigger that function. That way, when the page loads, the user is already looking at the first headline, which is active. Click away! No errors. The body flag looks like this:

   <BODY onLoad=”chngNext()”>

        The next line works the same way except it triggers a function that moves the run of headlines back one:
   

   
   <INPUT TYPE=”button” VALUE=”PREV” onClick=”chngPrev();”><br>

        Finally we have two more hidden input items:

   <INPUT TYPE=”hidden” NAME=”shownext” VALUE=”N”>
   
   <INPUT TYPE=”hidden” NAME=”showprev” VALUE=”N”>
   

        You can pretty well guess from the names that they deal with which number headline is displaying. Each had been given a value of “N”. Through the rest of the script, the functions will change these values and from that be able to decipher which headline is currently in the text box.

   Next Week: Change the Headlines

   
   

   Do YOU have a Script Tip you’d like to share? How about suggesting a Script Tip to write about? I’d love to hear it. Write me at: jburns@htmlgoodies.com.

   ---

   Learn to write your own JavaScripts with the