Link to home
Start Free TrialLog in
Avatar of QPR
QPRFlag for New Zealand

asked on

div float above table?

I have a div (display: none) inside a table cell when I toggle visibility it pushes the table borders out to thwe right to accomodate the div which is bigger than the table cell boundaries.
Is it possible to have the div float above(?) the table cell so when the display is set to block the table remains the same size? Would absolute/relative positioning do this? If so how can I use it so that everyone with different monitor sizes/resolutions shares the same positioning?
Avatar of BogoJoker
BogoJoker

Is setting the CSS/Style overflow to hidden suitable for this situation? Try setting this to the table cell (or the div itself if its given a width)
overflow: hidden;

Otherwise can you specify a width for the div?

If you do decide to position the div above the table (essentially creating a layer on top of the table) the positioning would likely need to be dynamic with javascript to react to screen sizes.
Avatar of QPR

ASKER

"If you do decide to position the div above the table (essentially creating a layer on top of the table) the positioning would likely need to be dynamic with javascript to react to screen sizes."

How do I code this so that the div is positioned relatively to the table cell?
And floats above the cell?
Avatar of QPR

ASKER

anybody?
I hope you can forgive my very crude example here, I did not have much time  but I wanted to at elast give you an example.  The concept is in the code, its not very pretty though.

1) There is a div, that is given position: absolute
2) There is a table cell that has an id, so that I can calculate the offsetTop and offsetLeft to determine where it is on the page.
3) There is some javascript that runs (in this case when you click the button but you could put it on the window's onload event... it only needs to be run once) to position the div with the javascript's calculated left and right values.

Here is the rough html, hopefully I can answer any questions that you have when I get some more time:
<style type="text/css">
#beta {
  height: 35px;
  width: 200px;
  position: absolute;
  display: none;
  background: red;
}
</style>


<script type="text/javascript">
var shown = false;

function toggle( button ) {
  var div = document.getElementById('beta');
  if (shown) {
    hide(beta);
    button.value = 'Show';
  } else {
    show(beta);
    button.value = 'Hide';
  }
  shown = !shown;
}

function show( div ) {
  var elem = document.getElementById('alpha');
  var top  = elem.offsetTop+10;
  var left = elem.offsetLeft+10;
  div.style.display = 'block';
  div.style.top = top;
  div.style.left = left;
}
function hide( div ) {
  div.style.display = 'none';
}

</script>

<div id="beta"><p>test</p></div>

<table border="1">
  <tr>
    <td><p>Some content<br />Some content</p></td>
    <td id="alpha"><p>Some content<br />Some content</p></td>
    <td><p>Some content<br />Some content</p></td>
  </tr>
</table>

<input type="button" value="Show" onclick="toggle(this);" />




Sorry again for the weak example, I normally try to have more quality code.
- Joe P
Oh a quick note, if your div doesn't show up over the table, increase it's z-index.  Here is the CSS property for z-index:
http://www.w3schools.com/css/pr_pos_z-index.asp
Avatar of QPR

ASKER

looking good, thanks for taking the time to do this.
One thing, I have several divs on this page, they all call a function to toggle block/none for display when an image is clicked just above the div.

Is it possible if we split your functionality so we just do the placement bit?
I have some on_load code in the code behind page (this is aspx) so maybe an inline script that sets the position of the div (id='today') and the z:index if needed.?

I'll have a go at doing this now and let you know how I get on - thanks again
ASKER CERTIFIED SOLUTION
Avatar of BogoJoker
BogoJoker

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of QPR

ASKER

cheers, I'll have a look Monday morning... it's approaching 5pm Friday here so time to hit the road - wahoo!