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.
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?
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
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)
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: