Source Code - JsMadeEasy.com

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Help Popups
Microsoft Windows help boxes are second-nature to most of us by now. How about having a similar popup help box on your web site!? When visitors put their cursor on an item you have defined as having a help popup, it will load very quickly because JavaScript is actually creating the entire HTML page for the popup! There are tons of customizations you can play with the tailor the appearance of the popups to your site. You have to see this script, it's great!
JavaScript Source Home Page JavaScript Message Forum JavaScript Source FAQs JavaScript Source Newsletter


Insert into <HEAD>
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Need help-popups to work in frames? Read how at: // http://faq.javascriptsource.com/?help-popups // Create an entry in this format for each help popup you will have. // hmsg["popup name"] = new helpmsg( // "Title of popup", "header style", "Message Style", "Help Message"); // 'popup name' is the what you will call the popup later, used to open help. // 'title of popup' is shown at the top of the help box that opens. (Optional) // 'header style' is a predefined style of how to display the title. // header style valid options include: 'header', 'fancyheader', 'h1', 'h2', or "" // 'message style' is a predefined style of how to display the help message. // message style valid options include: 'plain', 'italics', 'bold', "" // 'help message' is the the text shown in the popup. It should explain the topic. // I have tried to show a multitude of different popup combinations below.... var hmsg = new Array(); hmsg["home"] = new helpmsg( "Home Page", "fancyheader", "plain", "Clicking this link will bring you to the JavaScript Source home page."); hmsg["forum"] = new helpmsg( "", "", "bold", "Ask a JavaScript question or post a script request and our other JavaScript-savvy visitors will try to help you."); hmsg["faq"] = new helpmsg( "JavaScript Source FAQs", "h2", "italics", "Answers to the most common JavaScript questions we receive at The JavaScript Source."); hmsg["news"] = new helpmsg( "", "", "", "A monthly newsletter with links to all the script we've added to the site in the last month, a webmaster-related column, and links to other useful webmaster sites."); var myPopup = new helpbox("myPopup", hmsg, 275, 175, "#ffffee"); // 275 is the width of the popup box // 175 is the height of the popup box // "#ffffee" is the color of the popup box function helpmsg(header, hstyle, mstyle, message) { this.DEFAULTHSTYLE = "plain"; this.DEFAULTMSTYLE = "plain"; this.header = header; if (hstyle) this.hstyle = hstyle; else this.hstyle = this.DEFAULTHSTYLE; this.message = message; if (mstyle) this.mstyle = mstyle; else this.mstyle = this.DEFAULTMSTYLE; return this; } new helpmsg(); helpmsg.prototype.show = show; function show() { var H = "<FONT FACE='arial'>" + this.header + "</FONT>"; if (this.hstyle == "h1") H = "<H1>" + H + "</H1>"; else if (this.hstyle == "h2") H = "<H2>" + H + "</H2>"; else if (this.hstyle == "h3") H = "<H3>" + H + "</H3>"; else if (this.hstyle == "h4") H = "<H4>" + H + "</H4>"; if (this.hstyle == "fancyheader") H = "<table width='75%'>" + "<tr><td bgcolor='#6060ff' align='center' valign='center'>" + "<H1><FONT COLOR='white'>" + H + "</FONT></H1>" + "</td></tr></table>"; else if (this.hstyle == "italics") H = "<I>" + H + "</I>"; var M = "<FONT FACE='arial'>" + this.message + "</FONT>"; if (this.mstyle == "plain") {} if (this.mstyle == "italics") M = M.italics(); else if (this.mstyle == "bold") M = M.bold(); var htmlpage = ""; if (this.hstyle.indexOf("header")>=0) htmlpage = H + M; else htmlpage = H + "<BR>" + M; return htmlpage; } function helpbox(name, hm, width, height, bgcolor) { this.name = name; this.helpmessage = hm; this.timerHandle = null; this.windowHandle = null; this.DEFAULTWIDTH = 250; this.DEFAULTHEIGHT = 150; this.DEFAULTBGCOLOR = "#ffffcc"; this.POPUPDELAY = 100; if (width) this.width = width; else this.width = this.DEFAULTWIDTH; if (height) this.height = height; else this.height = this.DEFAULTHEIGHT; if (bgcolor) this.bgcolor = bgcolor; else this.bgcolor = this.DEFAULTBGCOLOR; return this; } function startHelp(msgindex) { var cmdstr="top." + this.name + ".showHelp('" + msgindex + "')"; this.timerHandle = setTimeout(cmdstr, this.POPUPDELAY); } function showHelp(msgindex) { if (!this.windowHandle \|\| !this.windowHandle.name \|\| this.windowHandle.name=="") this.windowHandle = window.open( "", "subWindow", "toolbar=no," + "location=no," + "directories=no," + "status=no," + "menubar=no," + "scrollbars=no," + "resizable=no," + "width=" + this.width + "," + "height=" + this.height ); else this.windowHandle.focus(); this.windowHandle.document.open(); var to_page = "<HTML>\n" + "<BODY BGCOLOR='" + this.bgcolor + "'><P>" + this.helpmessage[msgindex].show() + "</BODY></HTML>\n"; this.windowHandle.document.write(to_page); this.windowHandle.document.close(); } function clearHelp() { clearTimeout(this.timerHandle); if (this.windowHandle && this.windowHandle.name) { this.windowHandle.close(); this.windowHandle=null; } } new helpbox(); helpbox.prototype.startHelp = startHelp; helpbox.prototype.showHelp = showHelp; helpbox.prototype.clearHelp = clearHelp; // End --> </script>

Insert into <BODY>
<a href="http://javascript.internet.com/" onMouseOver="myPopup.startHelp('home')" onMouseOut="myPopup.clearHelp()">JavaScript Source Home Page</a><br> <br> <a href="http://forum.javascriptsource.com/" onMouseOver="myPopup.startHelp('forum')" onMouseOut="myPopup.clearHelp()">JavaScript Message Forum</a><br> <br> <a href="http://faq.javascriptsource.com/" onMouseOver="myPopup.startHelp('faq')" onMouseOut="myPopup.clearHelp()">JavaScript Source FAQs</a><br> <br> <a href="http://e-newsletters.internet.com/javascriptsource.html" onMouseOver="myPopup.startHelp('news')" onMouseOut="myPopup.clearHelp()">JavaScript Source Newsletter</a><br> <br>

Other Options