So You Want to Add Your Page to Favorites, Huh?

By Joe Burns

...use these to jump around or read it all
[Add This Page to Your Favorites] [The Coding]
[Only in IE4 or Better]

     First Things First: What you're reading is a tutorial that will work with Internet Explorer browsers version 4.0 or better only. At the moment (5/15/99) there isn't a method equal to this one in Netscape. But as soon as I know of one, I'll add it here.


Add This Page to Your Favorites

     I'll give you a couple of methods first and then show you the code for each.

 

Add this page to your favorites

     If you got an error, then you're not using the correct browser. Later in the tutorial I'll show you how to make sure that this code only shows up on browsers that understand it.


The Coding

     We'll do the button code first. It's the easier of the two.

<FORM>
<INPUT TYPE="button" VALUE="Add To Favorites"
onClick='window.external.AddFavorite(location.href, document.title);'>
</FORM>

     It's a basic HTML form button. The onClick Event Handler is what does the trick. The code is DHTML and is proprietary to Internet Explorer. That's a fancy way of saying only MSIE4.0 or better understands what the heck you're talking about. You know - like that smart kid in Spanish class.

  • window.external states that an external window will be called upon.
  • AddFavorite does just what it says. It adds something to your favorites menu.
  • location.href, document.title is what it adds, the page's URL and the document.title.

     Once the command spawns the external Favorites window, you take it from there.

     Now here's the basic link code. It's done with the SPAN tag and some Cascading Style Sheet commands:

<U>
<SPAN STYLE='color:blue;cursor:hand;'
onClick='window.external.AddFavorite(location.href, document.title);'>
Add this page to your favorites
</U>

     As you can see, the link is a bit of a trick. It isn't a hypertext link at all. The blue coloring and the hand icon come from a style sheet commands. The underline comes from <U> and </U>.

     The onClick Event Handler is exactly the same as it was in the button. Same effect. Different code.


Only in IE4.0 or Better

     I have an entire tutorial on doing this here, but I'll quickly give you the code. You can go and read more on what's happening at your leisure.

     You really only want this "add to Favorites" code to be available to those using IE 4.0 or above. There's no use of having the code pop up on Netscape 3.0 as it will only throw errors. But you still want people to bookmark or add your page to favorites. That's done on all other browser by hitting Ctrl-D. So let's make it so that if the browser is IE4.0 or better, the code for one of these buttons pops up and if the browser is anything other than IE4.0 or better, text pops up asking the user to hit Ctrl-D. OK?

Here's the Code

     It's a quick test of the browser. If the browser meets the criteria, the code, or the text is written to the page. Nothing to it.


That's That

     Use it in good health. I know I'll start to see this all over the place pretty soon.

 

Enjoy!

[Add This Page to Your Favorites] [The Coding]
[Only in IE4 or Better]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •