Lisa Wollin : JavaScript

Creating a JavaScript Drop-Down Menu in FrontPage

lisawoll — Fri, 17 Dec 2004 02:16:00 GMT

We posted a new article on MSDN about creating JavaScript drop-down menus. If you read my earlier post about creating a drop-down menu, you may be interested in this article. The article uses a somewhat different method to show and hide menus than the code I showed earlier and also provides an example for cascading menus as well as menus that use image mouseovers. Plus, at the end of the article, you will find several links where you can find additional methods for creating drop-down menus.

Creating Image Mouseovers

lisawoll — Sat, 11 Dec 2004 00:35:00 GMT

After I learned JavaScript, the first thing I did was create an image mouseover. The one I created was relatively simple, just a few lines of code. I've since seen many more complex examples that do basically the same thing as my simple little script. I'm not sure whether complex is better...although the complex examples do have two debatable benefits for the developers: one, making them hard to read (and thus hard to steal and modify); and two, making me feel incredibly stupid. Hmm. I definitely prefer simplicity.

The script that I made way back then was a simple one-function script that I called in both the onmouseover and onmouseout events. The function took one parameter, which was a reference to the IMG element. All I did was swap the image displayed for a new image by changing the src property. Simple. Except that it didn't work in Netscape Navigator. I never understood why, I just rewrote it.

I promised to provide an image mouseover script a few posts ago, so in today's post I'm providing a very simple mouseover script that you can use in your Web pages. This script is only slightly more complex than the one I first wrote, but it does the trick in a single function and only a few lines of code. This script works in Internet Explorer, Netscape Navigator, Mozilla, and Opera, and there doesn't appear to be any difference in the way the script functions in each browser.

The script makes a few assumptions that you will need to understand. It assumes that the filename for the normal, onmouseout image ends with "Off.gif," and the active, onmouseover image ends with "On.gif." It also assumes that the images are stored in a folder named "graphics" that lives in the folder in which the page is stored. Your file structure and image-naming convention may be a bit different, so let me show you the script and explain it.

function mouseoverImage(image)
 {
 var s = image.id;
 var ssrc = image.src;
 
 if (ssrc.match(/[Oo]ff/))
 {
 image.src = "graphics/" + s + "on.gif"
 }
 else
 {
 image.src = "graphics/" + s + "off.gif"
 }
 }

The script uses a regular expression to determine whether the string "off" exists in the filename (or the value of the src attribute of the IMG element passed by using the image argument). (If you are unfamiliar with regular expressions, see the article Regular expressions on Office Online). If the string exists, the script changes the image's src attribute to the "On" image, and if it doesn't exist, the script changes the src attribute to the "Off" image.

Here's the HTML that accompanies this script.

<img src="graphics/ImageOff.gif" id="image" 
 onmouseover="javascript:mouseoverImage(this)" 
 onmouseout="javascript:mouseoverImage(this)">

This code assumes that you have two images: one named "imageOff.gif" and one named "imageOn.gif." You should be able to easily modify the filenaming for your own images; however, your images should have a base string that is the same.

For example, you might want to use mouseover images with a menu. If the text for a menu item was "products," your images might be named "productsOff.gif" and "productsOn.gif"; or the normal image might be "products.gif" and the mouseover image "productsOn.gif" or "productsOver.gif."

There are a number of possible combinations, but my point is that they both have a base string of "products." So you would set the image's id attribute to the base, the src attribute to the normal, onmouseout image, and then set the script calls in the onmouseover and onmouseout events. If your images are named differently, you need to make a few modifications to the script as well.

The regular expression "[Oo]ff" locates the occurrence of "Off" or "off" in the filename. If neither your normal nor your active image contains either string, the script won't function unless you change the regular expression. About the only thing that would complete this script is a script that preloads the images. You can find numerous such scripts online, and FrontPage comes with a preload script. I'll cover preloading images in a future post for those who may not understand why this is important.

Creating a scrolling marquee

lisawoll — Thu, 02 Dec 2004 23:30:00 GMT

In FrontPage, you can create a scrolling marquee by clicking Insert and Web Component. (You can find it listed under Dynamic Effects.) However, sometimes it's greyed out. This is because FrontPage inserts a MARQUEE element, which is only viewable from Internet Explorer. (Opera also displays the MARQUEE element properly.) To be able to add a marquee to your page, you need to specify that you are creating a page to be viewed only with Internet Explorer. You can do this from the Authoring tab of the Page Options dialog box (Tools menu). Under Browsers, select Microsoft Internet Explorer Only.

Now that you know how to add a scrolling marquee, you may want to customize it. By default, FrontPage doesn't set any attributes when it inserts a marquee, so what you get is plain text that scrolls from right to left across the page. FrontPage provides a dialog box that allows you to change the direction (left or right), speed, behavior, size, and background color and specify whether the marquee repeats and how many times. This may provide all the functionality you want for your marquee, but what if you want to bold some text or add an image? Or what if you want the marquee to scroll from top to bottom or vice versa? One customer who contacted me wanted to make each letter a different color. Another customer wanted to add a hyperlink.

Customizing a Marquee

To add customizations that FrontPage doesn't allow in the dialog box, you need to modify the HTML code in Code view. You can add almost any element you want to a marquee, and it will work perfectly fine. However, keep in mind that when you do this, the display in FrontPage will be ... uh ... funky. The MARQUEE element is one of the few HTML elements that FrontPage does not display exactly WYSIWYG. Instead, you see all the code that you add within the opening and closing <marquee> tags. FrontPage sees these as text, but the browser does not.

For example, perhaps you want to add a hyperlink to some text. You can switch to Code view and insert the hyperlink by adding an A element to the code (note that using the Hyperlink dialog box will add a hyperlink around the entire marquee and not just around selected text). To illustrate, I created a simple marquee and inserted a hyperlink around a portion of the text. In Design view, my marquee appears as shown in the following screen shot.

But in the browser, it scrolls as expected with hyperlinked text.

So now that you understand that what you see in FrontPage won't be exactly correct, you can add any number of other HTML elements to a MARQUEE element. You can add P elements to create paragraphs; IMG elements to insert pictures; UL, OL, and LI elements to create numbered and bulleted lists; SPAN elements to change the color and font of one or more characters; B elements, I elements, U elements, DIV elements, etc. (You can even add MARQUEE elements, which gives you overlapping scrolling marquees. This may sound kinda cool but it would be very strange if not done exactly right — for example, a top to bottom scrolling marquee that contains a right to left scrolling marquee might be a bit interesting....)

Vertical Scrolling Marquee

In the Marquee Properties dialog box, FrontPage provides the ability to change the direction of the scroll from left to right or right to left (the default is right to left). However, the MARQUEE element allows for scrolling from top to bottom and bottom to top as well. After you insert the marquee into your page, switch to Code view and change the direction attribute of the MARQUEE element to "up" to scroll from bottom to top or "down" to scroll from top to bottom.

Scripting the MARQUEE element

There are a variety of things that you can do to change the appearance of scrolling marquees, but one I saw recently was someone who wanted the marquee to slow down upon mouseover. As long as browser compatibility isn't an issue, since this only works in IE, you can script the MARQUEE element to slow down on mouseover, and then to speed up on mouseout.

The following two functions, slow and fast, change the scroll speed (by changing the scrollAmount property) of a specified MARQUEE element.

<script language="javascript">
 function slow(ele)
 {
 ele.scrollAmount = 1;
 }
 
 function fast(ele)
 {
 ele.scrollAmount = 15;
 }
 </script>

All you need to do to see this in action is to add the following HTML code to a page and display th page in IE.

<marquee direction="up" width="238" height="100%"
 scrollamount="15" onmouseout="javascript:fast(this);"
 onmouseover="javascript:slow(this);">This is a test.</marquee>

Creating Mouseover Effects

lisawoll — Wed, 27 Oct 2004 21:51:00 GMT

I know, it's been awhile since I've posted a tip. A couple weeks ago I was in SQL Server training, and last week was taken up with catching up on everything I postponed during training. Now I'm back and my tip for today is creating mouseover effects.

We get frequent questions about how to create mouseover effects, but there are a variety of different mouseover effects, and the scripts that accomplish them are very varied. The tip I'm sharing today is a script that I created for selling a house. The page shows a house plan; the house plan image contains image maps that when a user runs their mouse over, displays an image of the room next to the house plan. Take a look at the finished page so that you can understand the type of mouseover I'm talking about here.

Creating this type of mouseover is relatively easy. You have two main images on the page: one is the image that the user mouses over, the other is the image that changes upon mouseover. In this particular example, the house plans image is the first image. I mapped the image (or created hot spots) to section it into rooms; each one of the rooms has an AREA element with an href attribute value that contains the path and filename of the image to show on click, plus an onmouseover event to show the image in a second image on the page. (You can easily create an image map in FrontPage -- see Add a hot spot to a graphic -- so don't worry about trying to create an image map by hand; however, you will need to add the onmouseover event to each AREA element by hand.)

Okay, maybe that sounds confusing, so let me make it a bit easier. If you've taken a look at the page, you see an image of the house plans on the left side of the page and on the right you see a picture of the front of the house. The house plans image is the first image (as I mentioned above). The picture of the front of the house, the second image, is actually a container image. When the page first displays, it shows the front of the house, but as the user drags the mouse pointer over the house plans, the picture of the front of the house changes to show a picture of the room over which the mouse pointer sit. (Depending on the speed of your connection, you may need to wait a few seconds for the image to download.)

The script that makes this happen is all of two lines. To make it easy for you, I've included the function below.

function ShowPic(sImage)
 {
 sImage = "images/" + sImage + ".jpg";
 document.ShowRoom.src = sImage;
 }

The script by it self does nothing spectacular. The ShowPic function takes a string (sImage), which is the name of the image file to display on mouseover. The script then uses the string (sImage) to concatenate a new string that contains the path to the image file ("images/") with the passed in value (sImage parameter) and the image extension (which in this case is ".jpg"). Then the code uses the src property to change the src attribute of the second image (which I gave a name attribute of "ShowRoom") to the value of the sImage string.

BTW, the script won't work without an image named "ShowRoom". You can either create an image named "ShowRoom" or change the ShowRoom in the line document.ShowRoom.src to the name of the IMG element that acts as your container image.

For my page, I used an image map, but you don't have to use a map. For example, you could have a vertical menu bar that on mouseover changes a central image on the page to a different image. In this case, the ShowRoom image container becomes your central image, and each of the elements in the menu bar (which could be IMG or A elements depending on how your menu bar is setup) contains the onmouseover event with the script call.

In the page you viewed above, I put in styles, so to make it easier to see what's going on in the code, here's some HTML to accomplish a mouseover effect without styles and without an image map. In this example, I use A elements instead of AREA elements; otherwise, the effect is the same.

<html>
 <head>
 <title>House For Sale</title>
 <script language="javascript">
 function ShowPic(sImage)
 {
 sImage = "http://www.wollinweb.com/blogimages/images/" + sImage + ".jpg";
 document.ShowRoom.src = sImage;
 }
 </script>
 </head>
 <body>
 <table width="800">
 <tr>
 <td valign="top" width="160">
 <p>
 <a onmouseover="ShowPic('outsidefront')" href="http://www.wollinweb.com/blogimages/images/outsidefront.jpg">Outside front</a><br>
 <a onmouseover="ShowPic('bedroom3')" href="http://www.wollinweb.com/blogimages/images/bedroom3.jpg" alt="Office/third bedroom">Office/third bedroom</a><br>
 <a onmouseover="ShowPic('bathroom2')" href="http://www.wollinweb.com/blogimages/images/bathroom2.jpg" alt="Second bathroom">Second bathroom</a><br>
 <a onmouseover="ShowPic('bedroom2')" href="http://www.wollinweb.com/blogimages/images/bedroom2.jpg" alt="Second bedroom">Second bedroom</a><br>
 <a onmouseover="ShowPic('livingroom1')" href="http://www.wollinweb.com/blogimages/images/livingroom1.jpg" alt="Living room">Living room</a><br>
 <a onmouseover="ShowPic('diningroom')" href="http://www.wollinweb.com/blogimages/images/diningroom.jpg" alt="Dining room">Dining room</a><br>
 <a onmouseover="ShowPic('masterbed1')" href="http://www.wollinweb.com/blogimages/images/masterbed1.jpg" alt="Master bedroom">Master bedroom</a><br>
 <a onmouseover="ShowPic('masterbath1')" href="http://www.wollinweb.com/blogimages/images/masterbath1.jpg" alt="Master bathroom">Master bathroom</a><br>
 <a onmouseover="ShowPic('laundryroom')" href="http://www.wollinweb.com/blogimages/images/laundryroom.jpg" alt="Laundry room">Laundry room</a><br>
 <a onmouseover="ShowPic('kitchen')" href="http://www.wollinweb.com/blogimages/images/kitchen.jpg" alt="Kitchen">Kitchen</a><br>
 <a onmouseover="ShowPic('sittingroom')" href="http://www.wollinweb.com/blogimages/images/sittingroom.jpg" alt="Sitting room">Sitting room</a><br>
 <a onmouseover="ShowPic('patio1')" href="http://www.wollinweb.com/blogimages/images/patio1.jpg" alt="Rear outside patio">Rear outside patio</a><br>
 </p>
 </td>
 <td><img name="ShowRoom" src="http://www.wollinweb.com/blogimages/images/outsidefront.jpg"></td>
 </tr>
 </table>
 </body>
 </html>

The HTML above uses absolute paths to the image, so you can just copy it to a new page in FrontPage (replacing all the HTML in the page), and view it in the browser.

I hope you enjoy this tip. It's simple, but mouseovers can be very powerful. Next tip, I'll show you how to get image mouseovers in navigation bars where you are changing the image on mouseover and then back to the original image on mouseout. (Oh, BTW, this script works without problem in IE, Moz, NN, and Opera.)

Creating a Drop-down Menu

lisawoll — Wed, 06 Oct 2004 02:44:00 GMT

We had an article on MSDN for creating a drop-down menu, but after repeated attempts, I, like many of our customers, couldn't make the code work, so we're in the process of removing it. We will (mostly likely) eventually replace it. In the meantime, though, I promised that I would provide an alternative. I have working code for a drop-down menu that works in IE, Mozilla, and Netscape Navigator (sort of -- I've noticed some funky onmouseout behavior in Mozilla and Netscape Navigator that I haven't been able to resolve).

The example is comprised of HTML, JavaScript, and CSS and is contained in the following two files:

Here's a simple explanation of the menu table and the accompanying script.

Menu Table

The menu table is simple, but to make it to be usable on any ... uh, almost ... page, I surrounded the entire table with a DIV element. The following code shows a shortened version of the menu table with the DIV element. The DIV element has an id attribute value so that the JavaScript code can access the child elements. This was necessary in order to allow anyone who might use this code to have <div> tags elsewhere on the page without interfering with the expand/collapse functions of the JavaScript.

<div id="menu">
    <table width="100%">
       <tr>
          <td>
             ... (missing code)
          </td>
       </tr>
    </table>
 </div>

The table has a width of 100%, but if you wanted to specify an exact pixel measurement, you could easily do that without messing up the menus. The table is comprised of one row (TR element) with multiple columns (TD elements). In the live version, there are five columns with drop-down menus. Each drop-down menu lives within its own cell in the table. The code within this TD element is somewhat complex to provide for the proper expand/collapse funtionality of the drop-down menu. The following shows the code for the first TD element. Each of the TD elements are almost exactly the same with a few exceptions, which I'll explain in a moment.

<td class="button" width="20%" valign="top" id="item1"
    onmouseover="expand(this.id, 'menu1');"
    onmouseout="collapse(this.id, 'menu1');">
       <p><b>Menu 1</b></p>
       ... (missing code)
 </td>

The class attribute names the style in the CSS that defines the table cells appearance when a user first displays the page. The width attribute is set to 20% so that each of the five drop-down menus will be of equal space. Again this is an easy thing to change if you want to modify the code to suit your own needs. The id attribute is necessary as the scripts use these to access the TD element.

The missing code is the nested DIV element that contains the items in the drop-down menu. The DIV element for the first menu item is shown below.

<div id="menu1" class="exp" onmouseout="collapse('item1', this.id);">
    <p class="button"><a href="page.htm" class="menuitem">Item 1</a></p>
    <p class="button"><a href="page.htm" class="menuitem">Item 2</a></p>
    <p class="button"><a href="page.htm" class="menuitem">Item 3</a></p>
    <p class="button"><a href="page.htm" class="menuitem">Item 4</a></p>
 </div>

The nested DIV element also provides a value for the id attribute. Again, the class attribute specifies the style to use when displaying the menu. Within the DIV element are paragraphs (P elements), with a class attribute value of "button", a style defined in the attached CSS file, and links (A elements), with a class attribute value of "menuitem", another style defined in the attached CSS. The menuitem style defines link, visited, hover, and active link styles.

Then, of course, there are the onmouseover and onmouseout events. The top-level menu item, contained in the TD element, specifies both the onmouseover and onmouseout events. However, the drop-down menu, contained in the nested DIV element, specifies only the onmouseout event. The JavaScript functions that these events call require both the id attribute for the TD element and the nested DIV element.

If you modify this script, adding or removing drop-down menus, you will want to change the second argument for these events. The following code shows the parts that you will need to change as you add and remove menus. The red code shows the id attribute for the top-level menu item (TD element) and all the places where you would need to change this in the event function calls, and the blue code shows the id attribute for the drop-down menu (DIV element) and all the places where you would need to change this in the event functions calls. Basically, all the code in red must match and all the code in blue must match.

<td class="button" width="20%" valign="top" id="item1"
    onmouseover="expand(this.id, 'menu1');"
    onmouseout="collapse(this.id, 'menu1');"><p><b>Menu 1</b></p>
    <div id="menu1" class="exp" onmouseout="collapse('item1', this.id);">
       <p class="button"><a href="page.htm" class="menuitem">Item 1</a></p>
       <p class="button"><a href="page.htm" class="menuitem">Item 2</a></p>
       <p class="button"><a href="page.htm" class="menuitem">Item 3</a></p>
       <p class="button"><a href="page.htm" class="menuitem">Item 4</a></p>
    </div> 
</td>

Notes

Because the event function calls use this.id, there's no need to specify the id attribute values for these.
The code is purple above is code that you can safely change without affecting how the menus function.

If you look at the full code in the page (see Drop-down menu example above), the only difference between each of the TD/DIV element pairs is the id attribute value. You'll notice that each menu is numbered consecutively (i.e., item1/menu1, item2/menu2, item3/menu3, etc.). I did this for ease of use. You can, of course, provide any id attribute values you want, as long as they're not the same as another element on the page and as long as you change the appropriate arguments in the event function calls so that they match as shown above.

JavaScript Functions

Now for the functions. There are three functions: one for collapsing all drop-down menus, one for expanding a single menu, and one for collapsing a single menu.

The first one, called collapseAll, collapses all menus. The collapseAll function takes no arguments and is called once when the page loads in the onload event for the BODY. This code is relatively simple and is shown in the following example:

function collapseAll()
 {
    var menuDiv = document.getElementById("menu");
    var divs = menuDiv.getElementsByTagName("div");
    var div;
    for (i = 0; i < divs.length; i++)
    {
       div = divs[i];
       div.style.visibility = "hidden";
       div.style.display = "none";
    }
 }

The second function, called expand, is where most of the action happens ... uh, at least half of it. The expand function has two parameters: Then, the function is basically a bunch of scripted CSS that is used to show the DIV element and change the appearance of the top-level menu. The expand function is shown below:

function expand(s, m)
 {
    var browser = window.navigator.appName;
    var dif = 0;
    if (browser != "Microsoft Internet Explorer") { dif = 12; }
    var d = document.getElementById(m);
    var td = document.getElementById(s);
    var left = td.offsetLeft;
    var top = td.offsetTop + 58;
    var width = td.offsetWidth - dif;
    td.style.color = "#FFFFFF";
    td.style.backgroundColor = "#686496";
    d.style.top = top;
    d.style.left = left;
    d.style.width = width;
    d.style.position = "absolute";
    d.style.visibility = "visible";
    d.style.display = "block";
 }

There are a few things you should know about this code.

First, there is a difference between how IE displays the menu and how Mozilla and Netscape Navigator display the menu. (Note that I haven't tested this code in Opera.) In Moz and NN, the width doesn't show up properly, so I had to specify a value that would account for the difference between the offsetWidth and the actual width of the table in these browsers. The number isn't arbitrary; I determined it by trial and error, and this was the only number than worked. I have no idea why this is different only that it is and this number fixes it. If you make huge changes to the menu, this number may need to be changed also.
Second, the number added to the offsetTop value accounts for the height of the first line in the top-level menu as well as the top heading paragraph. Again, this number is not arbitrary and accounts for the space between the top of the browser and the top of the drop-down menu. I arrived at this number by a trial and error process. If your top-level menu text runs onto multiple lines and/or you have a large graphic heading or other things above the menu bar, this number will likely change.
Third, if you want to change the appearance of the menu, you can change any of the values in purple in the code above to appropriate and desired values without affecting how the script functions.

And finally, the third function, called collapse, collapses a single drop-down menu. This is where the other half of the action happens. The collapse function has two parameters: the first is the id attribute value for the TD element (the top-level menu item), the second is is the id attribute value for the nested DIV element (the drop-down menu). The collapse function is shown in the following code:

function collapse(s, m)
 {
    var d = document.getElementById(m);
    var td = document.getElementById(s);
    td.style.color = "black";
    td.style.backgroundColor = "#EEEEEE";
    d.style.position = "static";
    d.style.visibility = "hidden";
    d.style.display = "none";
 }

There's absolutely nothing major about this code. It changes the appearance of the TD element back to the original formatting, and hides the DIV element. Ideally, this formatting would match what is in the attached CSS, which in this case, it does. You can change any of the values in purple in the code above to appropriate and desired values without affecting how the script functions.

Conclusion

And that's all there is to it. Have fun using this, and if you need help, please let me know. If you are looking for a drop-down menu, feel free to use it, or if you do an Internet search, you will find many more examples and just as many ways to create drop-down menus, and many of them much cooler than my litte example here.

Have fun, and enjoy playing with the code, and if you can tell me what's up with the Mozilla/Netscape issue, please do. I've tried all types of arrangements for the code to see if order made a difference, if putting the event function call in a different place made a difference, and I've been relatively unsuccessful getting it to be completely functional in these browsers. Sometimes the onmouseout event just doesn't fire.

Anyway, as usual, my only real caveat is that the code won't work at all if the user has scripting turned off in their browser, but IMHO, that's not a reason to not use it or any other script.

Creating a drop-down list that links to other pages

lisawoll — Thu, 19 Aug 2004 22:33:00 GMT

You've seen them. All the big Web sites have them. Now you want one, too. Perhaps you have localized sites and you want a cover page with a drop-down that lists the different languages into which your Web site is translated so that visitors can select the language they want to view. Maybe you want to use a drop-down for navigation for your site or to allow site visitors to access online search engines. There could be any number of reasons why you want to do it. Or maybe there's no reason at all. You just want to know how to do it because you think it looks cool.

There are two types of drop-down lists that hyperlink to other pages: one, the page changes when the selection changes; two, the page changes when the visitor clicks a button. I'm going to give you JavaScript code to do both of these, but there is of course, one limitation. As always, if the user has JavaScript disabled, then the simple examples that I provide here won't work. In this case, you could use ASP, ASP.NET, or another server-side processing technology to provide this functionality.

Page changes when the selection changes

Creating a dropdown that causes a new page to open when the selection changes is fairly simple to do. The user doesn't have to do anything except select the item from the drop-down and the page opens. I used the open method, but you could also use the navigate method.

Here's the script:

<script>
 function goToPage(url)
 {
 if (url != "")
 {
 .open(url);
 }
 }
</script>

And here's the dropdown. Note that the form tag is necessary for the script to function properly.

<form>
 <label><u>S</u>earch Engines</label>
 <select accesskey="S" onchange="goToPage(this.options(this.selectedIndex).value)">
 <option selected>Please select one</option>
 <option value="http://search.msn.com/">MSN Search</option>
 <option value="http://www.google.com/">Google</option>
 <option value="http://www.search.com/">Search.com</option>
 <option value="http://www.dogpile.com/">Dogpile</option>
 </select>
form>

Page changes when the user click a button

Creating a dropdown that uses a Go button is just as simple. When the user has selected the item they want from the dropdown, they just click Go, and the new page opens. I used the open method for this script also, but you could use the navigate method here as well.

Here's the script:

<script>
function goToNewPage(dropdownlist)
 {
 var url = dropdownlist.options(dropdownlist.selectedIndex).value;
 if (url != "")
 {
 window.open(url);
 }
 }
</script>

And here's the dropdown. Note that the form tag is necessary for the script to function properly.

<form name="dropdown">
 <label>Search <u>E</u>ngines</label>
 <select name="list" accesskey="E">
 <option selected>Please select one</option>
 <option value="http://search.msn.com/">MSN Search</option>
 <option value="http://www.google.com/">Google</option>
 <option value="http://www.search.com/">Search.com</option>
 <option value="http://www.dogpile.com/">Dogpile</option>
 <select>
 <input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">
</form>

In order to use this code, all you need to do is copy the code above, switch to Code view in FrontPage, and paste it into your page. Once you do this, change text displayed and the value attribute for each option in the SELECT element. The value attributes should contain a valid URL including the "http://". Place the script code in the HEAD section of your page, and place the form with the SELECT element anywhere on the page where you want it to appear. You can have more than one form on a page. Just don't nest this FORM element inside of another FORM element. If you do so, you will likely experience problems.

What's the difference?

The only differences between the two examples above are the location of the event that calls the script (which in the first is in the onchange event for the SELECT element, and in the second is in the onclick event for the Go button) and the way the SELECT element is accessed (which for the first example is accessed by using the this keyword, and for the second is accessed using the name attributes for the FORM and SELECT elements).

Add my page to a visitor's Favorites list

lisawoll — Wed, 14 Jul 2004 00:03:00 GMT

Here's a tip that Jim Buyens*, a FrontPage MVP, contributed awhile ago that shows how to create a link that adds a Web page to a visitor's list of Favorites.

Switch to Code view and add this script where you want the hyperlink to appear:

<script>
  if (navigator.appName.substring(0,9) == "Microsoft")
  {
    document.write("<a href='" +
      "javascript:window.external.addFavorite" +
      "(document.location, document.title)'>" +
      "Add to favorites.</a>")
  }
</script>

This script works unmodified in any page. The expression document.location gets the URL of the page that contains the script, and the expression document.title gets the page title. This is the title you enter in FrontPage on the General tab of the Page Properties dialog box.

Unfortunately, the window.external.addFavorite() method that makes all this possible works only in Internet Explorer. An if statement therefore tests the first nine characters of the browser's identification string for the presence of the word "Microsoft". This condition will be false for any browser other than Internet Explorer, and as a result, the link won't appear in those browsers.

* Jim Buyens is the author of ten computer books, including most recently Microsoft Office FrontPage 2003 Inside Out, from Microsoft Press, ISBN 0-7356-1510-1.

Open a page in a new window of a specific size

lisawoll — Wed, 07 Jul 2004 00:05:00 GMT

I've often seen questions in the FrontPage Programming newsgroup for code to programmatically open a page in a browser window that is of a specifc size. Of course, using the target attribute of the A element, you can easily open a new page in a new browser window, but it will be the same size as other browser windows. However, sometimes you may want to have a smaller browser window, or you may not want the user to be able to resize the window. Perhaps you want to remove the menu bar, address bar, status bar, or scroll bars. Today's tip shows JavaScript for doing this.

The code is fairly simple, but there are a few ways to do this. One way uses the open method; another way uses the showModalDialog method; and another way uses the showModelessDialog method. I'll explain each of these below.

open Method

The open method does just that: it opens a new page. Similar to the navigate method, by default it will open the page in the current browser window. However, unlike the navigate method, the open method also has parameters that allow for opening in a new window and for specifying the appearance of that window. The open method has the following signature:

window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

If you take a look at the help topic for the open method, you will get specific information about each of the parameters, but here are the basics:

sURL is the address for the new page.
sName is the value of the target attribute for an A element; which for this tip will be "_blank" to open a new window, but which could be the name of a frame or another window.
sFeatures specifies the display options for the window, including height and width.
bReplace specifies whether the new URL is added to or replaces an item in the browser's history list.

For this tip, we are only concerned with the first three parameters and will omit the fourth. So here's the code:

function openNewWindow()
{
    window.open("http://www.microsoft.com", "_blank", 
        "height=340px width=240px");
}

This code opens a new browser window that is 340 pixels high and 240 pixels wide and displays the Microsoft home page. You could add options to the sFeatures parameter string to hide the status bar, hide the scroll bars, prohibit resizing the window, and more. The help topic noted above has the complete list of options and possible values. All you need to do is add them to the sFeatures parameter string, separating each name=value pair with a space.

showModalDialog Method

The showModalDialog method is another way to show a page in a new window of a specific size, but when you use the showModalDialog method, the user can't return to the first window until he/she closes the modal dialog window. This is especially useful when you need you need to return values from the dialog (which I'll save for a future tip). When you use the showModalDialog method to open a new window, the new browser window cannot be resized. The signature for the showModalDialog method is as follows:

window.showModalDialog(sURL [, vArguments] [, sFeatures])

If you look at the help topic for the showModalDialog method, you will get specific information about each of the parameters, but here are the basics:

sURL is the address for the new page.
vArguments passes values to the dialog box.
sFeatures specifies the display options for the dialog box, such as height, width, and whether to show the help button, scroll bars, menu bar, etc.

For this tip, we are concerned only with the first and third parameters. Here's the code:

function openNewWindow()
{
    window.showModalDialog("http://www.microsoft.com", "", 
        "dialogHeight:340px; dialogWidth:240px")
}

This code opens a new browser window that is 340 pixels high and 240 pixels wide and opens the Microsoft home page. You can add additional dialog box features by adding them to the sFeatures string, separating each name=value pair with a semicolon. The help topic mentioned above lists all the features and possible values."

showModelessDialog Method

The showModelessDialog method is similar to the showModalDialog method except that the user can move between the first page and the modeless dialog window. As with the showModalDialog method, when you use the showModelessDialog method to open a new window, the new browser window cannot be resized, and the dialog box always stays on top. The signature for the showModelessDialog method is as follows:

window.showModelessDialog(sURL [, vArguments] [, sFeatures])

You will notice that the signature for the showModelessDialog method is the same as the showModalDialog method. If you look at the help topic for the showModelessDialog method, you will get specific information about each of the parameters and the possible values. As with the previous code, for this tip, we are concerned only with the first and third parameters. Here's the code:

function openNewWindow()
{
    window.showModelessDialog("http://www.microsoft.com", "",
        "dialogHeight:340px; dialogWidth:240px")
}

You'll probably notice that the only difference between this code sample and the previous one is the name of the method. This is because the signatures are basically the same. You can add options to the sFeatures parameter to change the look of the dialog box.

Pulling it All Together

In my typical style, I like to make things difficult, so here's a final code sample that creates a new window that is 300 by 500 pixels, removes the scroll bars, address bar, menu bar, and status bar, and prohibits resizing.

function openNewWindow(newPageURL)
{
    window.open(newPageURL, "_blank","height=500px width=300px " +
        "resizable=no scrollbars=no menubar=no location=no status=no");
}

To add this code, or any of the previous examples, to a Web page, just paste the function in a <SCRIPT> block within the <HEAD> section of the page. Then add the function, and the URL parameter, to the event that you want to access it. For example, if you want the code to run when someone clicks on a form button, you would use the onclick event, as shown in the following code:

<input type="button" onclick="javascript:openNewWindow('http://www.microsoft.com');" value="Click Here">

Now that you have the basics, have fun creating new windows with JavaScript.

Retain a visitor-specified value in a drop down list

lisawoll — Tue, 22 Jun 2004 21:26:00 GMT

Here's a tip that Jim Buyens*, a FrontPage MVP, contributed some time ago for retaining a visitor-specified value in a drop down list. If you're working with databases in FrontPage, the Database Results Wizard is probably what you use most, if not every, time you want to show database results on a Web page. When you use a drop-down list to display values from a database, you have probably noticed that after you submit the form, the selection in the drop-down list referts to the first item in the list. Jim's tip shows you how to make the drop-down list display the value that the visitor specified.

Switch to Code view and add a script such as the following just before the end of your form (that is, just before the </form> tag.)

<script>
   for (i = 0; i < document.forms[0].CategoryID.options.length; i++)
   {
      if (document.forms[0].CategoryID.options[i].value == "<%=request.form("CategoryID")%>")
      {
         document.forms[0].CategoryID.selectedIndex = i;
         break;
      }
   }
</script>

This sample code assumes that the name of the drop-down list box is CategoryID. To make the script work with your list box, change all four occurrences of the name CategoryID to the name of your list box. This will be the name you specify under Submit Values From This Field option on page four of the wizard.

* Jim Buyens is the author of ten computer books, including most recently Microsoft Office FrontPage 2003 Inside Out, from Microsoft Press, ISBN 0-7356-1510-1.

Dates, dates, and more dates...

lisawoll — Sat, 12 Jun 2004 00:40:00 GMT

We get a lot of requests from people who want to put the current date on their Web pages, so I thought I would start my first official FrontPage tip with code to help accomplish this.

There are a couple ways that you can get the current date onto your Web pages. One uses client-side JavaScript, the other uses server-side code. As always, there are advantages and disadvantages to both. The code I'm including in this post is for client-side JavaScript because generally you want the user to see the date that they have on their local machine. Server-side dates take their dates from the server, which could be all the way on the other side of the world. Probably the only disadvantage to JavaScript is that users can turn scripting off in their browser. However, if they do this, the worst that happens is that the visitor doesn't see the date.

Just because I like to be difficult, I'm including several renditions of the code, each display the date slightly differently.

To use any of these you just insert the one you want into a script block in the HEAD section of your page, and put an inline script block, like the following, that names the function, where "GetTodaysDate" in the following example is the name of the function.

<script language="javascript">document.write(GetTodaysDate());</script>

Dates and Times

6/11/2004:
This one displays the current date in short format:

function GetTodaysDate(){
    var oDate = new Date();
    var sDate = oDate.getMonth() + "/" + oDate.getDate() + "/" + oDate.getYear()
    return sDate;
}

Friday, 6/11/2004:
This one displays the day of the week and then the current date in short format:

function GetTodaysDayAndDate(){
    var oDate = new Date();
    var iDay = oDate.getDay();
    var sDay;
 
    switch (iDay){
        case (0) :{sDay = "Sunday"; break;}
        case (1) :{sDay = "Monday"; break;}
        case (2) :{sDay = "Tuesday"; break;}
        case (3) :{sDay = "Wednesday"; break;}
        case (4) :{sDay = "Thursday"; break;}
        case (5) :{sDay = "Friday"; break;}
        case (6) :{sDay = "Saturday"; break;}
    }
    var sDate = oDate.getMonth() + "/" + oDate.getDate() + "/" + oDate.getYear()
    return sDay + ", " + sDate;
}

Fri Jun 11 2004:
This one displays the day of the week and then the current date in pseudo short format:

function GetTodaysDateLongFormat(){
    var oDate = new Date();
    var sDate = oDate.toDateString();
    return sDate;
}

17:32:
his one shows the time. It's in military format, but the following example uses code that uses AM and PM.

function GetTime(){
    var oDate = new Date();
    var sTime = oDate.getHours() + ":" + oDate.getMinutes();
    return sTime;
}

5:32 PM:
This one shows the time in AM / PM format.

function GetTimeLong(){
    var oDate = new Date();
    var iHour = oDate.getHours();
    var sAmPm;
 
    if (iHour < 13)
    {
        sAmPm = "AM";
    }
    else
    {
        iHour = iHour - 12;
        sAmPm = "PM";
    }
    var sTime = iHour + ":" + oDate.getMinutes() + " " + sAmPm;
    return sTime;
}

6/11/2004, 5:32 PM:
And, finally, this one shows you date AND time.

function GetDateTime(){
 var oDate = new Date();
    var sDate = oDate.getMonth() + 1 + "/" + oDate.getDate() + "/" + oDate.getYear();
 var iHour = oDate.getHours();
 var sAmPm;
 
 if (iHour < 13)
 {
  sAmPm = "AM";
 }
 else
 {
  iHour = iHour - 12;
  sAmPm = "PM";
 }
 var sTime = iHour + ":" + oDate.getMinutes() + " " + sAmPm;
 
 return sDate + ", " + sTime;
}