my dog learned polymorphism*
The moose likes HTML, CSS and JavaScript and the fly likes how to position div over table Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "how to position div over table" Watch "how to position div over table" New topic
Author

how to position div over table

samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
Hi all ,
I am trying to place a div tag over the table. My div tag has horizontal and vertical scroll bars and it works fine as long as the table cells having "position:absolute". However for a critical reason I want to change the position attribute of the specified table cells to fixed i.e. position:fixed.
However once I set the position attribute to fixed , the table column come out of the div tag. Is there any way we can avoid this. May be z-index can help . I tried using that. But it was not working.
Thanks in advance
Samir
[ August 23, 2007: Message edited by: Bear Bibeault ]
Valentin Crettaz
Gold Digger
Sheriff

Joined: Aug 26, 2001
Posts: 7610
Any element that is positioned using "fixed" is not in the flow of the document, and thus, it is normal that you see it outside of the containing div. Try setting the position of the div to "relative" and the oe of the table to "absolute".


SCJP 5, SCJD, SCBCD, SCWCD, SCDJWS, IBM XML
[Blog] [Blogroll] [My Reviews] My Linked In
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
hi Valentin ,
Thanks for the prompt reaply. As you said ...I have already tried that option and that is working also . However I cant make the position relative / absolute of that perticualr table column as I want to freez/fix that column . Is there any way I can apply the scroll bar to the table with some tds having position:fixed ?
Thanks in advance
Samir
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
This is what my code is

samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
I have purposely changed the "onclick" of the button to "onClicks" as the site was not accepting it
Valentin Crettaz
Gold Digger
Sheriff

Joined: Aug 26, 2001
Posts: 7610
I'm not sure I understand what you want to do. Basically, you'd like the div to only apply to the last two columns after clicking on the button, i.e. the scrollable part would only contain columns Franch and German and not Number and English anymore. Is that right?
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
hi Valentin ,
yesssss.....you are perfect ...that is what I want to achive . Is that possible. and the columns english and number should not come out of the div tag ....which currently are coming out of the div tag. I wanna apply the vertical scroll bar in short for all the four columns .
Is there any way out for the same ??
Regards
Samir
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
The columns English and Number should get freezed/locked at their own position just as in excel sheet. And remaining two columns (viz german and french) should get a horizontal scroll bar..
If you make the number of rows to 4 , the example works perfectly (on mozilla) and if number of rows becomes 5 ,then the last row of columns 1 and 2 (viz number and English ) will come out of the boundries of the div.
That is it overlaps the bottom of the div tag. This thing I want to avoid.
I hope this clarifies the problem .
Valentin Crettaz
Gold Digger
Sheriff

Joined: Aug 26, 2001
Posts: 7610
Ok, basically, this is like doing a "freeze pane" in Excel. Gotcha! Let me see...
Valentin Crettaz
Gold Digger
Sheriff

Joined: Aug 26, 2001
Posts: 7610
Ok, got it. The idea here is to take the problem differently, i.e. using two tabels whose scroll position is carefully synchronized. No need for that complex JS you had.

In the code below, the left table contains the freezed columns and the right table, any number of scrollable columns. Whenever you move the vertical scrollbar of the right table, the left table scrolls accordingly.

I hope this helps.



Note that you should remove the underscore in on_load.
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
hi Valentin,
Thanks a ton for your kind reaply . The example that you showed is perfect and this is what I want to achieve. But just one more question ...only one ...
In the example that I have posted , I used the java script because I wanted to change the CSS of the freezed column at runtime. In my case , the columns that are to be fixed/freezed is not fixed. User can select it at runtime which columns are to be freezed . But that will not be a random selection .If the user selects to freez the 4th column , all the column till 4th viz 1st ,2nd and 3rd will get freezed.
so this functionality can be achived if we make the use of the javascript and update the CSS for those columns which are to be freezed.
You can get the fair idea what I am trying to say by this URL url
but this works only on IE . not on mozilla.
Is it possible to achieve the same with the code that you have given . or is there any other way round for the same.
please please help .
Thanks in advance
Samir
Valentin Crettaz
Gold Digger
Sheriff

Joined: Aug 26, 2001
Posts: 7610
Yes, that's possible. You just need a couple JS statements to modify the DOM of both tables... Basically, whenever a user clicks on a table header to freeze it, all you have to do is to remove that column from the right table and append it to the left table.

If I get some spare time, I'll try it out.
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
Thanks a ton for the same Valentin. Thanks a lot once again ....




 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: how to position div over table
 
Similar Threads
Element positioning problem
DIV TAG
Aligning columns in 2 tables
Table in Javascript & HTML
Table in DIV not Displaying Vertical Scroll Bar