Indexhibit

Login:

Created by:
Daniel Eatock &
Jeffery Vaska

Built with Indexhibit

Columner - #Index height auto-resize with expanded/collapsed menu

 

Indexhibit version: 2.0
Thread is resolved.

putilobot
THAILAND
10 month(s) ago
Permalink Post

Hey everyone,

That's my website: fangsua.com

What am trying to do is to have the #index resize automatically with the menu (I use Indexpand).
The idea, design wise, is to always keep a spacing of 150px on both sides of the solid border (150px below the text in the #index and 150px above the pic in #exhibit), whether the menu is expanded or not.

Thanks for the help!
Fran├žois

arsondpi
GREECE
10 month(s) ago
Permalink Post

can you elaborate? I'm not sure what you want to do.

putilobot
THAILAND
10 month(s) ago
Permalink Post

sure.

as of now, the menu at the top (what i called #index, though not sure its correct) as a fixed height: the height remains the same whether the sections menus are expanded or collapsed.

i'd like to know if there is a way to have it resize automatically according to the contents displayed in it. for example, i'd like it to behave like this:

when menus are collapsed:

stuff #01

------------------- (bottom line)

[pic]

when menus are expanded, the menu area becomes "higher" to accomodate for the exhibit titles:

stuff #01
// number 63
//exhibit01
//exhibit02

----------------------- (bottom line)

[pic]

i'v tried to play around the height and overflow settings of the #index element in the .css, but no, i guess that demands a bit more than this.

hope this clarifies my first post.

putilobot
THAILAND
10 month(s) ago
Permalink Post

oh some info was lost along the way, here again:

when menus are collapsed:

stuff #01
(150px)
------------------- (bottom line)
(150px)
[pic]

when menus are expanded, the menu area becomes "higher" to accomodate for the exhibit titles:

stuff #01
// number 63
//exhibit01
//exhibit02
(150px)
----------------------- (bottom line)
(150px)
[pic]

arsondpi
GREECE
10 month(s) ago
Permalink Post

try this and see if it works. Change #index to

  1. #index {
  2.     background: none repeat scroll 0 0 #FFFFFF;
  3.     height: auto;
  4.     left: 0;
  5.     overflow: visible;
  6.     position: fixed;
  7.     top: 0;
  8.     width: 100%;
  9.     z-index: 2;
  10. }

I guess it would work better if you changed the on-click feature of indexpand to 'hover'

putilobot
THAILAND
10 month(s) ago
Permalink Post

nice, that works fine, but for one thing:
for example on this page: fangsua.com/index.php/project/63/
when scrolling horizontally, the whole page (instead of the exhibit only) scrolls to the left, and the index disappears to the left...
i tried to change the backgroung-attachment, but it still moves to the left.

putilobot
THAILAND
10 month(s) ago
Permalink Post

and i am intrigued by your comment "it would work better if you changed the on-click feature of indexpand to 'hover'" - it already is on 'hover', did you notice anything weird (maybe this: after expanding a section title, when you move the cursor back to the pre-nav text, this section doesnt collapse)

Best Answer!
arsondpi
GREECE
10 month(s) ago
Permalink Post

you must have done something and the #index seems to be commented: jigsaw.w3.org/css-validator/…

but now I realised that you need to apply a minimum margin-top to #exhibit.

putilobot
THAILAND
10 month(s) ago
Permalink Post

ok, i am gonna look into that, will let you know. thanks for the support.

putilobot
THAILAND
10 month(s) ago
Permalink Post

thanks, resolved.

 

This thread has been closed, thank you.