robertkety
I've been putting the finishing touches on my campaign, "Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons, and I couldn't situate the header in a way that made me happy. So I decided to hide it. The following code minimizes the header into a small square with the Obsidian Portal logo. When you hover the mouse over the logo, it expands. For the coding example, I expanded the width so the minimized header would shift to the left of the content frame. The code is also designed for a campaign with no other CSS formatting so you'll need need to customize it. Feel free to take a look at how I tailored the code on my page. Happy coding!
@#header {
border: 1px solid white;
border-radius: 5px;
width: 42px;
margin: 5px 0px -50px -50px;
opacity: .5;
transition: all 0.3s ease-in-out;
}
#header:hover {
width: 1090px;
margin: 5px 0px 5px -50px;
opacity: 1;
transition: all 0.3s ease-in-out;
}
@
Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
Comments
Edit: Hmm, may be a browser issue here. Works great at home, but from work the contents of the header never appear after it expands upon hovering over it. Will have to continue testing.
As a side note, using a hover-expand approach on say the fans sidebar box might be an improvement over my "jury-rigged fans box scroll":http://forums.obsidianportal.com/comments.php?DiscussionID=2985&page=1#Item_4, worth playing around with.
- Kallak
Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
@#campaign-fans-sidebar {
height: 69px;
overflow: hidden;
}
#campaign-fans-sidebar:hover {
height: auto;
}@
I tried the code on your DANgerous Kalamar 4 page. The max-height and h4 adjustments you have on that element will require some tweaking; otherwise, you're all set.
Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
EDIT: Put it on there to do the old trial and error, 69px left a sliver of the top row of avatars showing for me. 64px covers it up on my test run here.
- Kallak
EDIT: There, mouseover message added for completeness.
EDIT 2: Added to "Tidbits Compilation Thread":http://forums.obsidianportal.com/comments.php?DiscussionID=2985&page=1#Item_20
- Kallak
@#campaign-fans-sidebar {
max-height: 69px;
overflow: hidden;
}
#campaign-fans-sidebar:hover {
max-height:3000px;
}@
I've implemented and tested the code and it works great!
Robert
"Autumn Dragon":http://www.obsidianportal.com/campaigns/autumn-dragons
EDIT: As an aside/afterthought, wouldn't it be better to keep the original code, and then set a "min-height" for the "collapsed" window? then even if it bounced it would be to the "min-height" only as the smallest. rather than having to make up an arbitrary max-height value for the non-collapsed window setup.
- Kallak
Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
@.sidebar { overflow:hidden; }
#campaign-controls-sidebar, #campaign-party-info-sidebar, #campaign-search-sidebar, #campaign-latest-updates-sidebar, #campaign-quick-stats-sidebar, #campaign-fans-sidebar, #wiki-page-tags-sidebar, #wiki-filter-by-tag-sidebar, #social-sharing-sidebar, #model-versions-sidebar, #wiki-page-tools-sidebar, #add-npc-sidebar, #sort-by-tag-sidebar, #manage-forums-sidebar, #calendar-next-event-sidebar, #calendar-subscribe-webcal-sidebar, #game-character-tools-sidebar {
max-height:15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
#campaign-controls-sidebar:hover, #campaign-party-info-sidebar:hover, #campaign-search-sidebar:hover, #campaign-latest-updates-sidebar:hover, #campaign-quick-stats-sidebar:hover, #campaign-fans-sidebar:hover, #wiki-page-tags-sidebar:hover, #wiki-filter-by-tag-sidebar:hover, #social-sharing-sidebar:hover, #model-versions-sidebar:hover, #wiki-page-tools-sidebar:hover, #add-npc-sidebar:hover, #sort-by-tag-sidebar:hover, #manage-forums-sidebar:hover, #calendar-next-event-sidebar:hover, #calendar-subscribe-webcal-sidebar:hover, #game-character-tools-sidebar:hover {
max-height:3000px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
#secondary-column #campaign-controls-sidebar h4, #secondary-column #campaign-party-info-sidebar h4, #secondary-column #campaign-search-sidebar h4, #secondary-column #campaign-latest-updates-sidebar h4, #secondary-column #campaign-quick-stats-sidebar h4, #secondary-column #campaign-fans-sidebar h4, #secondary-column #wiki-page-tags-sidebar h4, #secondary-column #wiki-filter-by-tag-sidebar h4, #secondary-column #social-sharing-sidebar h4, #secondary-column #model-versions-sidebar h4, #secondary-column #wiki-page-tools-sidebar h4, #secondary-column #add-npc-sidebar h4, #secondary-column #sort-by-tag-sidebar h4, #secondary-column #manage-forums-sidebar h4, #secondary-column #calendar-next-event-sidebar h4, #secondary-column #calendar-subscribe-webcal-sidebar h4, #secondary-column #game-character-tools-sidebar h4 { margin:0px; }@
Enjoy!
Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
I award you two beers, sir! (or beverage of your choice)
@.sidebar { overflow:hidden; }
#campaign-controls-sidebar, #campaign-party-info-sidebar, #campaign-search-sidebar, #campaign-latest-updates-sidebar, #campaign-quick-stats-sidebar, #campaign-fans-sidebar, #wiki-page-tags-sidebar, #wiki-filter-by-tag-sidebar, #social-sharing-sidebar, #model-versions-sidebar, #wiki-page-tools-sidebar, #add-npc-sidebar, #sort-by-tag-sidebar, #manage-forums-sidebar, #calendar-next-event-sidebar, #calendar-subscribe-webcal-sidebar, #game-character-tools-sidebar, #campaign-where-we-game-sidebar {
max-height:15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
#campaign-controls-sidebar:hover, #campaign-party-info-sidebar:hover, #campaign-search-sidebar:hover, #campaign-latest-updates-sidebar:hover, #campaign-quick-stats-sidebar:hover, #campaign-fans-sidebar:hover, #wiki-page-tags-sidebar:hover, #wiki-filter-by-tag-sidebar:hover, #social-sharing-sidebar:hover, #model-versions-sidebar:hover, #wiki-page-tools-sidebar:hover, #add-npc-sidebar:hover, #sort-by-tag-sidebar:hover, #manage-forums-sidebar:hover, #calendar-next-event-sidebar:hover, #calendar-subscribe-webcal-sidebar:hover, #game-character-tools-sidebar:hover, #campaign-where-we-game-sidebar:hover {
max-height:3000px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
#secondary-column #campaign-controls-sidebar h4, #secondary-column #campaign-party-info-sidebar h4, #secondary-column #campaign-search-sidebar h4, #secondary-column #campaign-latest-updates-sidebar h4, #secondary-column #campaign-quick-stats-sidebar h4, #secondary-column #campaign-fans-sidebar h4, #secondary-column #wiki-page-tags-sidebar h4, #secondary-column #wiki-filter-by-tag-sidebar h4, #secondary-column #social-sharing-sidebar h4, #secondary-column #model-versions-sidebar h4, #secondary-column #wiki-page-tools-sidebar h4, #secondary-column #add-npc-sidebar h4, #secondary-column #sort-by-tag-sidebar h4, #secondary-column #manage-forums-sidebar h4, #secondary-column #calendar-next-event-sidebar h4, #secondary-column #calendar-subscribe-webcal-sidebar h4, #secondary-column #game-character-tools-sidebar h4, #secondary-column #campaign-where-we-game-sidebar h4 { margin:0px; }@
Cheers!
Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons