Page 1 of 1

Moving help box

Posted: Tue Oct 23, 2007 9:18 am
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.

Posted: Tue Oct 23, 2007 9:44 am
by VladSun
We will need a JS code, CSS and HTML sample of it :) ... There are too many ways this could be done.

Posted: Tue Oct 23, 2007 4:29 pm
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?

Posted: Tue Oct 23, 2007 4:52 pm
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.

Posted: Tue Oct 23, 2007 5:57 pm
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)

Posted: Wed Oct 24, 2007 3:03 am
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.

Posted: Wed Oct 24, 2007 4:49 am
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

Posted: Wed Oct 24, 2007 5:51 am
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.

Posted: Wed Oct 24, 2007 6:47 am
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.

Posted: Thu Oct 25, 2007 4:36 am
by shiznatix
thanks a million. that worked just fine and dandy