Moving help box

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Moving help box

Post by shiznatix »

I am making a registration page for my works website and they want this little help box to kinda float down the right side and display a help message depending on which field you have selected. The thing is the help box arrow thing will have to be pointing at the field that it is giving the message about. I can change the text in it no problem but I don't know how to make it move slightly down or up on the right side to point to the focused field. I was hopeing that someone could give me some advice. I have attached a small screenshot to give a better understanding of what I am talking about. In the picture you can see the arrow pointing at the username field and giving a message about that. But if I was to move to the password field, I would want this box to move a bit down to stay inline with the field I am focused on.

Image

Any help would be welcomed.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

We will need a JS code, CSS and HTML sample of it :) ... There are too many ways this could be done.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post by shiznatix »

the JS code right now is a simple "onfocus" that changes the text of a <span> depending on which field is onfocus. The CSS does not exist yet. the HTML is as simple as possible but the middle collumn (the one with the form) is in a different <div> tag than the column with the help message.

Basically, I want to put the arrow on the same x (or y?) index as the field that is on focus at the time. How, in javascript, can I get that (x/y) index and then set the <span> to be on the same (x/y) index?
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

The easiest way is to have one table with 5 columns:
1) field name
2) inputs
3) the green/red symbol
4) cells for the arrow image
5) your help text with rowspan=all rows

So, instead of calculating positions (and putting yourself into trouble with different browsers) you'll just have to hide/show the arrow image in the corresponding cell.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post by califdon »

VladSun wrote:The easiest way is to have one table with 5 columns:
1) field name
2) inputs
3) the green/red symbol
4) cells for the arrow image
5) your help text with rowspan=all rows

So, instead of calculating positions (and putting yourself into trouble with different browsers) you'll just have to hide/show the arrow image in the corresponding cell.
Good solution, VladSun, but it may not look very good if there are a lot more input fields.
shiznatix, are those really the only 5 inputs, or do you need a more general solution? (I don't really have a good general solution to offer, just asking)
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post by shiznatix »

vladsun, good idea but, yes, I do have more input fields. There are 7 fields right now but there could be more to come.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

Code: Select all

<head>

	<script language="JavaScript">
	<!--
	function inputFocused(elem)
	{
		var arrow = document.getElementById('idArrow');
		arrow.style.display = '';
		arrow.style.top = elem.offsetTop;
		arrow.style.left = elem.offsetLeft + elem.offsetWidth + 20;
	}

	function inputBlurred()
	{
		var arrow = document.getElementById('idArrow');
		arrow.style.display = 'none';
	}
	//-->
	</script>
</head>

<body>
<div style='position: absolute; top: 50; left: 50;'>
	<div style='position: absolute;'>
		<input type="text" name="" onfocus="inputFocused(this)" onblur="inputBlurred()">
		<input type="text" name="" onfocus="inputFocused(this)" onblur="inputBlurred()">
		<input type="text" name="" onfocus="inputFocused(this)" onblur="inputBlurred()">
		<input type="text" name="" onfocus="inputFocused(this)" onblur="inputBlurred()">
		<input type="text" name="" onfocus="inputFocused(this)" onblur="inputBlurred()">
	</div>

	<div id='idArrow' style='display: none; position: absolute;'>
	<
	</div>
</div>

</body>
You will have to calculate the poistion of the help baloon - it's your homework ;)

Tested with FF:2.0 IE:7.0
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post by shiznatix »

Thank you very much so far. That works perfect if its stand-alone but I am having some problems getting this to work the right way on my site. You can view the page here: http://tallinn.rakeback.com/register/

Basically, of course the table that the form is in is not helping my cause but I am not very good in CSS so I use what I know. But thats not what seams to be the real problem. The real problem is that the "right_column" div can not change its top or left. I get this error from my error console:
Warning: Error in parsing value for property 'top'. Declaration dropped.
Source File: http://tallinn.rakeback.com/register/
and
Warning: Error in parsing value for property 'left'. Declaration dropped.
Source File: http://tallinn.rakeback.com/register/
I think I can figure the rest out if I could just figure out how to change the top on that div tag.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

Code: Select all

function input_focused(elem2)
{
	var arrow = document.getElementById("right_collumn1");
	var elem = elem2.offsetParent;

	
	arrow.style.display = "";
	arrow.style.top = parseInt(elem.offsetTop) + "px";
	arrow.style.left = parseInt(elem.offsetParent.offsetLeft) + parseInt(elem.offsetParent.offsetWidth) + 20 + "px";

	arrow.innerHTML = "Arrow-top: "+arrow.style.top+"<br>Arrow-left: "+arrow.style.left+"<br>Elem-top: "+elem.offsetTop+"<br>Elem-left: "+elem.offsetLeft+"<br>Elem-width: "+elem.offsetWidth+"<--END";
}
Also you need to assign to right_collumn absolute positioning (CSS) like in my previous example.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post by shiznatix »

thanks a million. that worked just fine and dandy
Post Reply