• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

how to position div over table

 
Ranch Hand
Posts: 192
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 ]
 
Author & Gold Digger
Posts: 7617
6
IntelliJ IDE Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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".
 
samir ware
Ranch Hand
Posts: 192
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 192
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This is what my code is

 
samir ware
Ranch Hand
Posts: 192
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have purposely changed the "onclick" of the button to "onClicks" as the site was not accepting it
 
Valentin Crettaz
Author & Gold Digger
Posts: 7617
6
IntelliJ IDE Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 192
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 192
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Author & Gold Digger
Posts: 7617
6
IntelliJ IDE Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Ok, basically, this is like doing a "freeze pane" in Excel. Gotcha! Let me see...
 
Valentin Crettaz
Author & Gold Digger
Posts: 7617
6
IntelliJ IDE Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 192
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Author & Gold Digger
Posts: 7617
6
IntelliJ IDE Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 192
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks a ton for the same Valentin. Thanks a lot once again ....




 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic