DevXen Posted September 27, 2009 Share Posted September 27, 2009 Okay, i'm really new to Javascript, so I apologize.. I'm trying to do an on hover inline popup for multiple different items. the idea is I have a 'sign up' form page. and I want to have a ? after each field box so that people can move the mouse over to that to see the popup to get 'instant/quick help' to explain what the username is used for, and how long it has to be, and can't already be taken, etc. then info for the password, and about 11 fields, currently. Another problem i have. with all my tests to get it to work with multiple popups.. i noticed, how it currently is, the popup, is in the same place on the page, not relative to the popup text.. *whereas idealy it would be next to each place i put the popup text.. or when i have it done and working, a little ? picture.. instead of going down the screen and hovering over it for help, and seeing the popup box at the top of the page. now i found this page: http://www.calcaria.net/javascript/2006/09/javascript-hover-over-html-popup.html and it was alot of help. except it only worked with 1 infobox. i've spent a few days trying to get it to work with more. and i've been unsuccessful. i think i can do 11 different functions, and in theory that should work, but seems very ineffecient as each one would be doing the same thing, just showing different information.. So this first code, i'm going to put in here. works just fine. except its only the 1 working popup and won't work for 'many' .. i'm showing you guys this, so you have an idea of what I am trying to do, and how i'd like it to look.. as far as how it works.. if there's a much better/more effcient way then the way i'm going about it.. that'd be great too. <html> <head> <script type="text/javascript"> function ShowPopup(hoveritem) { hp = document.getElementById("hoverpopup"); // Set popup to visible hp.style.top = hoveritem.offsetTop + 0; hp.style.left = hoveritem.offsetLeft + 20; hp.style.visibility = "Visible"; } function HidePopup() { hp = document.getElementById("hoverpopup"); hp.style.visibility = "Hidden"; } </script> </head> <body> <a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Test</a> <div id="hoverpopup" style="visibility:hidden; position:absolute; top:0; left:0;"> <table bgcolor="#666666" border="2" bordercolor="#000000"> <tr><td bgcolor="008aff" width="270"><font color="#000000"> <b>The USERNAME is used for:</b><br> * To sign into your account</tr></td> <tr><td bgcolor="008aff" width="270"> <b>Username Restrictions:</b><br> * It cannot already be taken.<br> * It must be <b>5</b> characters long.</font></td></tr> </table> </div> </body> </html> And here is the current code i've been working on so you can see kinda how I would like it to work.. this is the code i'm having problems with.. <html> <head> <script type="text/javascript"> function ShowPopup(hoveritem,name); { hp = document.getElementById(name); // Set popup to visible hp.style.top = hoveritem.offsetTop + 0; hp.style.left = hoveritem.offsetLeft + 20; hp.style.visibility = "Visible"; } function HidePopup(); { hp = document.getElementById(name); hp.style.visibility = "Hidden"; } </script> </head> <body> <a style="cursor:default;" onMouseOver="ShowPopup(this,'UsernameHelp');" onMouseOut="HidePopup();">Username</a><br> <a style="cursor:default;" onMouseOver="ShowPopup(this,'PasswordHelp');" onMouseOut="HidePopup();">Password</a><br> <div id="UsernameHelp" style="visibility:hidden; position:absolute; top:0; left:0;"> <table bgcolor="#666666" border="2" bordercolor="#000000"> <tr><td bgcolor="008aff" width="270"><font color="#000000"> <b>The USERNAME is used for:</b><br> * To sign into your account</tr></td> <tr><td bgcolor="008aff" width="270"> <b>Username Restrictions:</b><br> * It cannot already be taken.<br> * It must be at least <b>5</b> characters long.</font></td></tr></table> </div> <div id="PasswordHelp" style="visibility:hidden; position:absolute; top:0; left:0;"> <table bgcolor="#666666" border="2" bordercolor="#000000"> <tr><td bgcolor="008aff" width="270"><font color="#000000"> <b>The Password is used for:</b><br> * To Secure your account</tr></td> <tr><td bgcolor="008aff" width="270"> <b>Username Restrictions:</b><br> * It cannot already be taken.<br> * It must be Alpha-Numeric.</font></td></tr></table> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
.josh Posted September 27, 2009 Share Posted September 27, 2009 Make each popup message an element in an array. Then call the same functions, only add arguments to pass. Pass a specific # to the popup function and have it change the innerHTML to the text in that element #. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.