on mouse over show dynamic content div

Schuyler Kuhl
Schuyler Kuhl used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
are u using  ASP or PHP server, i.e. is the page dynamic or static?

Author

Commented:
php and the page is dynamic.

Commented:
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

 
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Author

Commented:
Ok thanks.  

Commented:
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.

Author

Commented:
thank you.
If you can retrieve the data in one bunch.
Just use php, and make it dynamic.
<html>

	<head>
		<style type="text/css">			
			.exdata a
			{
				text-decoration: none;
			}			
			.exdata a:hover 
			{
				position: relative;
			}
			.exdata a span 
			{
				display: none;
				
			}
			.exdata a:hover span 
			{
				display: block;
			   	position: absolute; top: 10px; left: 0;
	
				width: 250px;
				height: 50px;
	
			   	padding: 5px; margin: 10px; z-index: 100;
			   	background: #eeeeee; border: 1px solid #c0c0c0;
			}
		</style>
	</head>
	
	<body>
		<div class="exdata">		
			<ol>			
				<li>				
					<a href="#"class="exdata">Speaking of web de...<span>Extra data goes here</span></a>
				</li>					
				<li>				
					<a href="#"class="exdata">Speaking of web de...<span>Extra data goes here</span></a>
				</li>
				<li>				
					<a href="#"class="exdata">Speaking of web de...<span>Extra data goes here</span></a>
				</li>			
			</ol>				
		</div>
	</body>

</html>

Open in new window

Oops, remove the div tag.
Commented:
the idea i had used once was..

create a div with what ever size popup you want..

in php load all the popup content into a javascript array so that you can access the content using array[0],array[1] etc.


on mouse over icon you load the data  into the div from the array using an argument which would be set for every icon while loading the page & position the div to mouse position +- as per your requirement..

thats how i did it

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial