3 Replies - 3532 Views - Last Post: 30 September 2009 - 12:23 PM

#1 DevXen  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 26-September 09

Help with Multiple hover text info boxes

Posted 26 September 2009 - 04:11 PM

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....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">&nbsp;<b>The USERNAME is used for:</b><br>&nbsp;&nbsp;* To sign into your account</tr></td>

  <tr><td bgcolor="008aff" width="270">&nbsp;<b>Username Restrictions:</b><br>&nbsp;&nbsp;* It cannot already be taken.<br>&nbsp;&nbsp;* 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">&nbsp;<b>The USERNAME is used for:</b><br>&nbsp;&nbsp;* To sign into your account</tr></td>
  <tr><td bgcolor="008aff" width="270">&nbsp;<b>Username Restrictions:</b><br>&nbsp;&nbsp;* It cannot already be taken.<br>&nbsp;&nbsp;* 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">&nbsp;<b>The Password is used for:</b><br>&nbsp;&nbsp;* To Secure your account</tr></td>
  <tr><td bgcolor="008aff" width="270">&nbsp;<b>Username Restrictions:</b><br>&nbsp;&nbsp;* It cannot already be taken.<br>&nbsp;&nbsp;* It must be Alpha-Numeric.</font></td></tr></table>
</div>

</body>
</html>


This post has been edited by DevXen: 26 September 2009 - 04:22 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Help with Multiple hover text info boxes

#2 masteryee  Icon User is offline

  • D.I.C Regular

Reputation: 40
  • View blog
  • Posts: 271
  • Joined: 16-May 09

Re: Help with Multiple hover text info boxes

Posted 28 September 2009 - 10:13 AM

I used a similar concept in ASP .NET with the AJAX PopupControl. Two things you need to fix: 1) remove the semicolons that follow your javascript function definitions, and 2) pass in the popup box name to the HidePopup function:

    function ShowPopup(hoveritem,name) // <-- remove semicolon
    {
        ...
    }

    function HidePopup(name) // <-- remove semicolon and add the 'name' parameter
    {
        ...  
    }
...
onmouseout="HidePopup('UsernameHelp');"
...
onmouseout="HidePopup('PasswordHelp');"


Was This Post Helpful? 0
  • +
  • -

#3 DevXen  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 26-September 09

Re: Help with Multiple hover text info boxes

Posted 28 September 2009 - 05:06 PM

Hey Thanks for the reply.. I tried those changes. and that did'nt help either.
I ended up finding a .js file. that works fine.. I got it, looking and working exactly how I want it
I don't know though. if its better to have a .js file, or actually write a script to do it..

one of the issues i have with the plugin.. is it allows you to setup an array. then you don't need the info
in the .html file.. but rather have it in the .js file.. which codewise for the page, seems cleaner, and more efficient
but I can't figure out how to get that working.. so i have really really long code lines. that has the popup
and that its in a table, and all its info in it.. right on the page *Shrug*

anyhow...
Was This Post Helpful? 0
  • +
  • -

#4 masteryee  Icon User is offline

  • D.I.C Regular

Reputation: 40
  • View blog
  • Posts: 271
  • Joined: 16-May 09

Re: Help with Multiple hover text info boxes

Posted 30 September 2009 - 12:23 PM

Here's one way to isolate the javascript from the HTML. Following your previous example, here's the HTML:

<html>
<head>
<script type="text/javascript" src="popup.js"></script>
</head>
<body onload="InitPopups();">
<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>
</body>
</html>



Here's the popup.js script file, which utilizes your array/hash theory:

var popupArray = new Array();
var div = null;

function InitDivPopup()
{
   div = document.createElement('div');
   div.id = 'divPopup';
   div.style.visibility = 'hidden';
   div.style.position = 'absolute';
   div.style.top = '0';
   div.style.left = '0';
   document.body.appendChild(div);
}

function CreateUsernamePopupHtml()
{
   var html = '<table bgcolor="#666666" border="2" bordercolor="#000000">';
   html += '<tr><td bgcolor="008aff" width="270"><font color="#000000">';
   html += ' <b>The USERNAME is used for:</b><br>  * To sign into your account</td></tr>';
   html += '<tr><td bgcolor="008aff" width="270"> <b>Username Restrictions:</b><br>';
   html += '  * It cannot already be taken.<br>  * It must be at least <b>5</b>';
   html += ' characters long.</font></td></tr></table>';
   popupArray['UsernameHelp'] = html;
}


function CreatePasswordPopupHtml()
{   
   var html = '<table bgcolor="#666666" border="2" bordercolor="#000000">';
   html += '<tr><td bgcolor="008aff" width="270"><font color="#000000">';
   html += ' <b>The Password is used for:</b><br>  * To Secure your account</td></tr>';
   html += '<tr><td bgcolor="008aff" width="270"> <b>Username Restrictions:</b><br>';
   html += '  * It cannot already be taken.<br>  * It must be Alpha-Numeric.</font></td></tr></table>';
   popupArray['PasswordHelp'] = html;
}

function InitPopups()
{
   InitDivPopup();
   CreateUsernamePopupHtml();
   CreatePasswordPopupHtml();
}

function ShowPopup(hoveritem,name)
{
   hp = div;
   // Set popup to visible

   hp.style.top = hoveritem.offsetTop + 0;
   hp.style.left = hoveritem.offsetLeft + 60;
   hp.style.visibility = "visible";
   hp.innerHTML = popupArray[name];
}

function HidePopup()
{
  hp = div;
  hp.style.visibility = "hidden";   
}



So what's it doing? Using a globally declared div object and array, it dynamically creates one div element that will be used to display your popup information. When you hover over the Username or Password links on the web page, the ShowPopup function will dynamically load the div popup in the correct position and load the correct HTML from the array. HidePopup() doesn't need any parameters since only one div popup object exists.

There are several other ways to accomplish this, including using more dynamic javascript and css, but I tried to keep it as simple as possible.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1