aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Complex Page Layout Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Complex Page Layout" Watch "Complex Page Layout" New topic
Author

Complex Page Layout

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Is it possible to acheive the following?

I am not asking any one to do it. I just need a little direction.

I feel like this can be done with arrays and tables inside of div tags but how could you keep them in sync. And it would mean one div tag overlaping another div tag. Maybe?

My page needs left hand rows of assembly part numbers, top of page would be columns containing detail parts. The right hand needs rows containing update buttons for each record. Then I need a grid where quantities could be inserted at desired intersections of rows and columns. The rows should only scroll vertically and never be out of view. The columns(detail parts) should scroll horizontally between the assembly part rows and the update button rows.

Also, I would like this to be populated initially with jstl in the jsp file.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61415
    
  67

JSTL and JSP are red herrings. First figure out how you want to do this in HTML without worrying about how it's going to be generated. Only when you have the HTML, script and CSS working as you expect, worry about how to use JSP to generate the data dynamically.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Bear Bibeault wrote:JSTL and JSP are red herrings. First figure out how you want to do this in HTML without worrying about how it's going to be generated. Only when you have the HTML, script and CSS working as you expect, worry about how to use JSP to generate the data dynamically.


Okay, laying aside the data population can you get me headed in the right direction as far as the display goes?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61415
    
  67

Sounds like straight-forward, if intricate, CSS to me. I'd just go ahead and get started and post back with specific issues.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Bear Bibeault wrote:Sounds like straight-forward, if intricate, CSS to me. I'd just go ahead and get started and post back with specific issues.


A preliminary question. Would be be better to design it with width and height in percentages or specific px's?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61415
    
  67

Answer: that depends upon whether you want fixed or relative sizes.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Bear Bibeault wrote:Answer: that depends upon whether you want fixed or relative sizes.


I have my div tags set up on my page, however not with scrolling yet.

My first challenge is populating the header columns. I need them vertical which I have done but the width of the columns is the width of the input tag '20' characters. How can I get the TD tag to shrink after the rotation?

I have attached a file so you can see what I am tring to emulate.

I don't seem to be able to attach a file. It is eithe the wrong format or wrong size.



[Thumbnail for emulation2.JPG]

Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
I would say you should code with ems and not hard-coded px values.

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Eric
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
I was curious if I could sort of pull off what you are trying to do. I have not played with CSS3 stuff in awhile

[fails in IE8 - did not test 9]




Example here: http://jsbin.com/oyigib/2/
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
I got the matrix working like I needed, except scraped the text rotation.

However, Is there a way to have a crosshair cursor that spans the entire page so the user can easily see the row-column intersection they are currently pointing at?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Steve Dyke wrote:I got the matrix working like I needed, except scraped the text rotation.

However, Is there a way to have a crosshair cursor that spans the entire page so the user can easily see the row-column intersection they are currently pointing at?


Capture the mouse position with mousemove, position 2or more elements to make the lines.

Eric
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Eric Pascarello wrote:
Steve Dyke wrote:I got the matrix working like I needed, except scraped the text rotation.

However, Is there a way to have a crosshair cursor that spans the entire page so the user can easily see the row-column intersection they are currently pointing at?


Capture the mouse position with mousemove, position 2or more elements to make the lines.

Eric


Thanks for the response.
I decided to do this a little different also. When a mouseover event fires the header column and row cells highlight to yellow, on the mouseout they change back to default.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
You probably want to use mouseenter and mouseleave.

Eric
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Complex Page Layout