0

I'm hoping someone can suggest a UI that I've actually never seen used.

I've got a lot of data that needs to be displayed in a fixed height scrolling div and to make it more palatable, the client wants sub-data to be displayed in an accordian div that can be expanded and closed.

The problem is that the sub-data is also potentially lengthy and requires a fixed header so that the user understands what's in each column. Please see the fiddle: http://jsfiddle.net/J5qFA/34/

You'll have to use your imagination a little, but consider the grey bars as headers on expandable divs and the one labled as "Expanded" is a header that's been clicked, showing its contents. (Note that expanding one header toggles closed any open div.)

The black bar is the data header and the yellow content is the data.

Is there a way to make the black bar "stick" to the top of the scrolling window so it's always visible when the user navigates down the yellow content? Note that it shouldn't appear over the top of any grey headers, so only needs to stick to the top of the scrolling window if the user scrolls down to see more yellow data.

And if not, is there a better way to ensure that the black header is always visible above the yellow data?

Oh, and I don't want to nest scrollbars, obviously!

Hope this makes sense!

5
  • Perhaps a modal dialog would be a better method to display the details because will not be in a constrained area. Aug 23, 2012 at 14:51
  • There is definately a sollution for you. But it's not going to be 100% css. You're going to need JS. Aug 23, 2012 at 14:51
  • I don't need it to be CSS only. I only need to be able to describe it to the client (and the front end dev) somehow. Diodeus, by modal, do you mean a pop-up or lightbox type thing?
    – yolise
    Aug 23, 2012 at 14:53
  • can you post the js you have as well?
    – Pevara
    Aug 23, 2012 at 15:05
  • I don't have any js written at the moment. We're only in wireframing stages at the moment. The fiddle was just a way of explaining it in a more visible way. We'll use standard jquery though, for the accordian, I expect.
    – yolise
    Aug 23, 2012 at 15:07

2 Answers 2

0

Give the yellow data div a fixed height and overflow-y:auto.

http://jsfiddle.net/J5qFA/35/

ive also remove overflow:scroll on the outer

3
  • That gives me nested scrollbars, sadly. The outer div has to have a scrollbar by default (existing design).
    – yolise
    Aug 23, 2012 at 15:00
  • oh, there's javascript plugins that will add "read more" buttons if a divs content starts to overflow. i can't recall off the top of my head.
    – deach
    Aug 23, 2012 at 15:03
  • @yolise For this approach, there is a jquery-threedots plugin for adding "read more" buttons
    – Kuf
    Sep 11, 2012 at 20:49
0

Well, Don't know if there is a better way, but one way (I would think of) to do it is using jQuery scroll, than attaching the black bar classes according to the position of the screen using window.pageYOffset and window.scrollTo(0, y).

I guess you might have 3 cases:

  • The black bar is under the top of the screen - show it as usual.
  • The black bar is above the top of the screen, and it's div is is the screen - use position: fixed;
  • The black bar is above as well as it's div - same as 1.

sorry, but I don't have the time now to write the code up but if you'll choose to do it this way i'll be happy to help.

Good luck anyhow!

1
  • Thanks. The client has passed this to the developers to come up with a method, so I'm in the clear for now. I may come back to this if they decide they don't want to think about it!
    – yolise
    Sep 12, 2012 at 15:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.