• Locked
2 replies [Last post]
Thu, 2009-11-19 03:08
Futile
Offline
newbie
Last seen: 13 years 27 weeks ago
Timezone: GMT-7
Joined: 2007-01-15
Posts: 3
Points: 4

Basically I'm trying to get a Span block to visually float and overlap the edges of a box which is overflow set to scroll.

So here is code example to try and clarify the issue.

.table_wrapper { height: 200px; overflow: scroll; }
a span { display: block; padding: 10px; background-color: #FF0000; color: #FFFFFF; }
 
<div class="table_wrapper">
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td><a href="#"><span>This message should Hover</span>Content 1</a></td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</table>
</div>

In my senario I have a TABLE with arround 700 rows of data in it. I've windowed it by putting it into a DIV and making the overflow SCROLL. However I am doing a TOOLTIP style javascript effect on table entries (which are <a>) to display the child SPAN tags. JQUERY is being used to POPUP the TOOLTIP on HOVER.

Regardless of Javascript I can't fathom a way to make a DIV or SPAN or any element breach the edges of a parent DIV which has Overflow set to SCROLL... Z-indexing doesn't seem to work as I'd have expected it to.

Any thoughts?

Top
Tags:
Thu, 2009-11-19 03:37
#1
Futile
Offline
newbie
Last seen: 13 years 27 weeks ago
Timezone: GMT-7
Joined: 2007-01-15
Posts: 3
Points: 4

So I actually bothered to

So I actually bothered to write out the whole HTML page this time to demo the issue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<title>Breaching Overflow Boundries</title>
<style type="text/css">
* { 
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px; padding: 0px;
}
body {
	font-family: Arial, Helvetica, sans-serif; 
	margin: 0px; padding: 50px;
}
 
.table_wrapper {
	position: relative; height: 200px;
	overflow-x: hidden; overflow-y: auto;
	z-index: 0;
	border: 1px solid #333333; padding: 20px;
}
 
table {
	border-spacing: 1px; position:relative;
	width: 100%; border: 0px;
	margin: 0px; padding: 0px;
}
th {
	margin: 0px; padding: 5px;
	background: #005596; color: #ffffff;
	text-align:left; font-size: 10pt;
}
td {
	color: #005596; font-size: 10pt;
	font-weight: normal; border-top: 1px solid #ffffff;
	border-bottom: 1px solid #dedede;
	margin: 0px; padding: 2px 5px;
}
 
tr:hover td {
	border-top: 1px solid #f19120;
	border-bottom: 1px solid #f19120; 
	background: #fff200;
}
 
.table_wrapper table tr td a {
	position: relative;
}
 
.table_wrapper table tr td a span {
	position: absolute; text-align: center;
	width: 200px; left: -100px; bottom: 50px;
	display: block; padding: 10px;
	background-color: #FF0000;
	color: #FFFFFF; z-index: 1;
}
 
</style>
</head>
 
<body>
<div class="table_wrapper">
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td><a href="#"><span>This message should Hover</span>Content 1</a></td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</table>
</div>
</body>
</html>

I want the red box to be visible ontop of the parent DIV without having to move the element from its context? Is this possible??

Top
Thu, 2009-11-19 07:36
#2
Futile
Offline
newbie
Last seen: 13 years 27 weeks ago
Timezone: GMT-7
Joined: 2007-01-15
Posts: 3
Points: 4

Still can't find a pure CSS

Still can't find a pure CSS way of doing this.. feel like there should be a way though.

Anyways so I noticed that FIXED positioned elements manage to escape the confines of the Overflow. I've found a rather messy way of achieving what I was after by utilising mouse positioning during my JQUERY Hover effect.

			$(document).ready(function()
			{  
       	$('.table_wrapper td a').hover(
          function(e){ $('span.tooltip', this).css("position", "fixed"); $('span.tooltip', this).css("left", e.clientX - 100); $('span.tooltip', this).css("top", (parseInt(e.clientY) - parseInt($('span.tooltip', this).height()) - 60)); $('span.tooltip', this).show("fast");},
          function(){ $('span.tooltip', this).stop(true, true); $('span.tooltip', this).hide("slow");});
			});

So basically I'm animating the HIDDEN SPAN into BLOCK and assigning it position = FIXED and TOP and LEFT as relative to the Mouse and Height of the SPAN.

It seems to work but I'm disappointed that I can't see a simple CSS workaround.

Top
  • Locked