?
Solved

div float above table?

Posted on 2007-07-29
8
Medium Priority
?
2,473 Views
Last Modified: 2008-02-01
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?
0
Comment
Question by:QPR
  • 4
  • 4
8 Comments
 
LVL 17

Expert Comment

by:BogoJoker
ID: 19589976
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.
0
 
LVL 29

Author Comment

by:QPR
ID: 19589980
"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?
0
 
LVL 29

Author Comment

by:QPR
ID: 19621781
anybody?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 17

Expert Comment

by:BogoJoker
ID: 19622410
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
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 19622414
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
0
 
LVL 29

Author Comment

by:QPR
ID: 19622590
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
0
 
LVL 17

Accepted Solution

by:
BogoJoker earned 2000 total points
ID: 19622637
Well I'm still up (typing a blog entry that I have been meaning to get out of me for some time... and its really long).

If you have multiple divs then you are going to float them over multiple table cells.  I would give them similiar ids.  For instance:
<td id="cell1"> and <div id="float1" class="floater">

By giving the div a class you can set the style properties for all the floating divs like so:
.floater { position: absolute; z-index: 100; }

You could then make a function that is a little more dynamic.  It would start counting up from 1 up to the number of divs on the page.  An example would look like this:

function setDivPositions() {
  var cellStr = 'cell';
  var divStr = 'float';

  for (var curr=1; document.getElementById( cellStr + curr ); curr++) {
    var cell = document.getElementById(cellStr + curr);
    var div = document.getElementById(divStr + curr);
    div.style.top = cell.offsetTop;
    div.style.left = cell.offsetLeft;
  }
}

You could then call setDivPositions onload and it would automatically go through and set the positions of all of the divs, because they match up with all of the cells.  The trick in that code is the condition in the for loop.  It checks if there is a cell1, cell2, cell3 element... As soon as one doesn't exist then the loop breaks.

Hope this helps a little.  It makes the code a little more dynamic.
- Joe P
0
 
LVL 29

Author Comment

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

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question