Page 1 of 1
Hover box, to see profile information
Posted: Sun Nov 22, 2009 11:49 am
by FlightFanatic
Hello, I created a section on my website where users can log in. After they are logged in, they are sent to a homepage, which has a section that displays the other users online. Is it possible to create in php, or javascript, etc. to have when the user hovers over a username, a box pops up and shows their profile information? I pasted pictures below to help show what I am describing. Thanks for any help, I greatly appreciate it

Re: Hover box, to see profile information
Posted: Sun Nov 22, 2009 3:39 pm
by morris520
Hi
Yes, it can be often seen and totally possible. You need a layer (which to show profile) and some JavaScript to calculate the possible of the mouse. And the event trigger is onMouseOver.
When loading profile, you have options:
1 you can pre-load all users' data and just pass the target when it needs to be displayed.
2 you can use Ajax (more sensible) to load when the event is called!
If you need help please let me know I will try my best.
Thx
Morris
Re: Hover box, to see profile information
Posted: Sun Nov 22, 2009 7:29 pm
by FlightFanatic
Hi morris520, thanks for the reply! I am not sure what AJAX is. Would it make the page load slower if I use the first method? If you dont mind helpin me get this working which way would you prefer? Thanks for the reply!
-Flightfanatic
Re: Hover box, to see profile information
Posted: Tue Nov 24, 2009 5:40 am
by morris520
FlightFanatic wrote:Hi morris520, thanks for the reply! I am not sure what AJAX is. Would it make the page load slower if I use the first method? If you dont mind helpin me get this working which way would you prefer? Thanks for the reply!
-Flightfanatic
Ajax you can google it millions there!
No it introduces a different way to load pages
Pre loading will make you page slow as you need to load ALL data when the page loads. Not a good idea.
The way to do for the first is:
1 load all users' data and put them to HTML markups, e.g. table or divs.
2 hide all of them
3 when JavaScript is triggered by onMouseOver, change the css.style.display prop to be 'block'.
You can follow that if you want
Morris