• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Complex Page Layout

 
Steve Dyke
Ranch Hand
Posts: 1643
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65123
91
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Steve Dyke
Ranch Hand
Posts: 1643
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65123
91
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1643
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65123
91
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Answer: that depends upon whether you want fixed or relative sizes.
 
Steve Dyke
Ranch Hand
Posts: 1643
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
emulation2.JPG
[Thumbnail for emulation2.JPG]
What I need to emulate
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1643
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1643
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You probably want to use mouseenter and mouseleave.

Eric
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic