Schuyler Kuhl
asked on
on mouse over show dynamic content div
Greetings,
I have a list of 30 things displayed in a table. On mouse over of an icon on each row of the table I'd like to have a div pop up that will have some additional content from that row of data. It needs to be laid out in simple html I guess, with a few text fields and perhaps one image.
I know it is a bit complex. I'm just starting to look into it so any ideas will be helpful.
Thanks very much.
Sky
I have a list of 30 things displayed in a table. On mouse over of an icon on each row of the table I'd like to have a div pop up that will have some additional content from that row of data. It needs to be laid out in simple html I guess, with a few text fields and perhaps one image.
I know it is a bit complex. I'm just starting to look into it so any ideas will be helpful.
Thanks very much.
Sky
are u using ASP or PHP server, i.e. is the page dynamic or static?
ASKER
php and the page is dynamic.
sorry I will not be able to help you in php, but
what you can do
is to have onmouseover function that pass the text you want to show as parameter in each table row while you generate the table )
if the div possiton is fixed for all table rows then it can be simple
in that function just use getlelement by id for the div, make it visiable, change z-index for heigher value
use mouseout event for div containing the table to unhide the details div
use innerhtml to change the div contents based on what text was passed as parameter to the function
what you can do
is to have onmouseover function that pass the text you want to show as parameter in each table row while you generate the table )
if the div possiton is fixed for all table rows then it can be simple
in that function just use getlelement by id for the div, make it visiable, change z-index for heigher value
use mouseout event for div containing the table to unhide the details div
use innerhtml to change the div contents based on what text was passed as parameter to the function
ASKER
Ok thanks.
Firstly you need to create a div with style set as positioning:absolute. That will allow the div to be placed any where on the page. you need to have a text holder inside it. Could be another div which holds the text you want to display or a span tag. You need to give it an id for eg:popup_txt
This div's visibility must be set to false
While loading the page, php needs to store all the info for each of the 30 items in javascript. This could be loaded as a continous string seperated by some characters. You can then split them and insert them into an array in javascript.
WHen you mouse over one of the 30 items in the list. you could call a function passing the item id to it.
The function then replaced the text in the div and positions the div to the x & y position your specify or the mouse position & set the visibility to true.
On mouse out.. set the divs visibility to false again.
hope this makes sence and doesnt sound complicated.
This div's visibility must be set to false
While loading the page, php needs to store all the info for each of the 30 items in javascript. This could be loaded as a continous string seperated by some characters. You can then split them and insert them into an array in javascript.
WHen you mouse over one of the 30 items in the list. you could call a function passing the item id to it.
The function then replaced the text in the div and positions the div to the x & y position your specify or the mouse position & set the visibility to true.
On mouse out.. set the divs visibility to false again.
hope this makes sence and doesnt sound complicated.
ASKER
thank you.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Oops, remove the div tag.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.