/    Sign up×
Community /Pin to ProfileBookmark

100% accordion height: for the legends

Copy linkTweet thisAlerts:
Sep 03.2007

Ok this is going to be a tough one for a css legend with l33t skills. I’ve made a good amount of progress since my last post. Ive managed to put a tab Spry widget from Adobe Labs in #sidebar, which seems to fit fine. Inside one of the content tabs, ive inserted a accordian menu from the jQuery library. I need the menu to stretch 100% vertically within #sidebar, which is set to height=88%. Also there is some spacing issues going on and some weird quirks. My biggest concern is the menu stretching all the way down #sidebar despite the content inside it. You will need to download the attachment to troubleshoot this badboy.

?

The css for the accordion is in “Javascript Assets/jQuery/accordion.css”
The css for the tab spry is in “SpryAssets/SpryTabbedPanels.css”
The css for the main page is in the “mainFramewspryjquery.html”

Heres the guide for the jQuery Accordion
[URL]http://bassistance.de/jquery-plugins/jquery-plugin-accordion/[/URL]

[upl-file uuid=0b8c8489-d2be-45a6-8843-f6b1f935dd8e size=56kB]project.zip[/upl-file]

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@EmerickauthorSep 04.2007 — Ok ive simplified things alot. Now theres just the accordian. Ive attached the new project files as well. css is way slimmed down.

?

Ive fixed the width with some serious jerry rigging but i cant get the menu to properly stretch vertically in #sidebar (set to 88%). Thanks in advance.

[code=html]<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fruition Platform</title>
<style type="text/css">

/* -- MAIN STYLE -- */

html, body {
height: 100%;
overflow: hidden; /* remove scroll bar from ie */
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000000;
}
.fruitionCP #container {
text-align: left;
background: #434242;
width: auto; /* * */
margin: 0 auto; /* center, not in IE5 */
height: 100%; /* IE6 treated as min-height */
min-height: 100%; /* real browsers */
}
.fruitionCP #header {
background: url(logosml.jpg) no-repeat #434242 10px center;
padding: 0 10px;
height: 8%;
min-height: 8%;
}
.fruitionCP #sidebar {
position: absolute;
left: 0;
/* float: left; */
background: #C9C9C9;
width: 300px;
height: 88%;
}
.fruitionCP #sidebar h3, .fruitionCP #sidebar p {
margin-left: 10px;
margin-right: 10px;
}
.fruitionCP #mainContent {
margin: 0 0 0 300px;
background: #FFF;
height: 88%;
}
.fruitionCP #container #mainContent iframe {
width: 100%;
height: 100%;
background: #FFF;
}
.fruitionCP #footer {
padding: 0 10px;
background: #434242;
bottom: 0px;
}
.fruitionCP #footer p {
color: #FFF;
font-size: 60%;
margin: 7px 0;
/*padding: 10px 0;*/
}

/* -- MISC REUSABLE CLASSES -- */

.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
min-height: 0;
font-size: 0px;
line-height: 0px;
}

/* -- ACCORDION -- */


* {
margin: 0;
padding: 0;
}
#list1 {
/*height: 88%;
height: 88%; /*in pixels this changes height of menu */
/* min-height: 100%; */
width: 310px;
font-family: verdana;
margin-left: -11px; /* not sure if this is the best decision */
padding: 0px;
}
#list1 p {
/* margin-bottom : 10px; */
border: none;
color: #0c449b;
text-decoration: none;
font-weight: bold;
font-size: 10px;
margin: 0px;
padding: 10px;
background-color: #80cfe2;
/*overflow: visible;*/
/*height: 88%;
min-height: 88%;*/
width: 280px;
}
#list1 h3 {
cursor:pointer;
display:block;
padding:5px;
margin-top: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
color: white;
background-color: #00a0c6;
border: none;
width: 290px;
}
#list1 h3:hover {
color: #00a0c6;
background-color: white;
}
#list1 h3.selected {
color: white;
background-color: #80cfe2;
/* border-bottom: 1px solid black; */
}

</style>
<script type="text/javascript" src="Javascript Assets/jQuery/jquery.js"></script>
<script type="text/javascript" src="Javascript Assets/jQuery/chili-1.7.pack.js"></script>
<script type="text/javascript" src="Javascript Assets/jQuery/jquery.easing.js"></script>
<script type="text/javascript" src="Javascript Assets/jQuery/jquery.accordion.js"></script>
<script type="text/javascript">
jQuery().ready(function(){
// simple Accordion
jQuery('#list1').Accordion();

// second simple Accordion with special markup
jQuery('#navigation').Accordion({
active: false,
header: '.head',
navigation: true,
event: 'mouseover',
autoheight: true,
animated: 'easeslide'
});

// highly customized Accordion
jQuery('#list2').Accordion({
event: 'mouseover',
active: '.selected',
selectedClass: 'active',
animated: "bounceslide"
}).change(function(event, newHeader, oldHeader, newContent, oldContent) {
jQuery('<div>' + oldHeader.text() + ' hidden, ' + newHeader.text() + ' shown</div>').appendTo('#log');
});

// first simple Accordion with special markup
jQuery('#list3').Accordion({
header: 'div.title',
active: false,
alwaysOpen: false,
animated: false
});

var wizard = $("#wizard").Accordion({
header: '.title',
event: false
});

$("div.title", wizard).each(function(index) {
$(this)
.next()
.children(":button")
.filter(".next, .previous")
.click(function() {
wizard.activate(index + ($(this).is(".next") ? 1 : -1))
});
});

// bind to change event of select to control first and seconds accordion
// similar to tab's plugin triggerTab(), without an extra method
jQuery('#switch select').change(function() {
jQuery('#list1, #list2, #list3, #navigation').activate( this.selectedIndex-1 );
});
jQuery('#close').click(function() {
jQuery('#list1, #list2, #list3, #navigation').activate(-1);
});
jQuery('#switch2').change(function() {
jQuery('#list1, #list2, #list3, #navigation').activate(this.value);
});

});
</script>
</head>
<body class="fruitionCP">
<div id="container">

<!-- HEADER CONTENT DATA -->
<div id="header">
</div>


<!-- SIDEBAR CONTENT DATA -->
<div id="sidebar">

<!-- ACCORDION -->
<div id="list1">
<h3>Module 001</h3>
<div>
<p>
---<a href="">Test Link 1 Module 001</a><br/>
---<a href="">Test Link 2 Module 001</a><br/>
---<a href="">Test Link 3 Module 001</a><br/>
---<a href="">Test Link 4 Module 001</a><br/>
---<a href="">Test Link 5 Module 001</a><br/>
---<a href="">Test Link 6 Module 001</a><br/>
---<a href="">Test Link 7 Module 001</a><br/>
---<a href="">Test Link 8 Module 001</a><br/>
---<a href="">Test Link 9 Module 001</a><br/>
---<a href="">Test Link 10 Module 001</a><br/>
---<a href="">Test Link 11 Module 001</a><br/>
</p>
</div>
<h3>Module 002</h3>
<div>
<p>
---<a href="">Test Link 1 Module 002</a><br/>
---<a href="">Test Link 2 Module 002</a><br/>
---<a href="">Test Link 3 Module 002</a><br/>
---<a href="">Test Link 4 Module 002</a><br/>
---<a href="">Test Link 5 Module 002</a><br/>
---<a href="">Test Link 6 Module 002</a><br/>
---<a href="">Test Link 7 Module 002</a><br/>
---<a href="">Test Link 8 Module 002</a><br/>
---<a href="">Test Link 9 Module 002</a><br/>
---<a href="">Test Link 10 Module 002</a><br/>
---<a href="">Test Link 11 Module 002</a><br/>
</p>
</div>
<h3>Module 003</h3>
<div>
<p>
---<a href="">Test Link 1 Module 003</a><br/>
---<a href="">Test Link 2 Module 003</a><br/>
---<a href="">Test Link 3 Module 003</a><br/>
---<a href="">Test Link 4 Module 003</a><br/>
---<a href="">Test Link 5 Module 003</a><br/>
---<a href="">Test Link 6 Module 003</a><br/>
---<a href="">Test Link 7 Module 003</a><br/>
---<a href="">Test Link 8 Module 003</a><br/>
---<a href="">Test Link 9 Module 003</a><br/>
---<a href="">Test Link 10 Module 003</a><br/>
---<a href="">Test Link 11 Module 003</a><br/>
---<a href="">Test Link 1 Module 003</a><br/>
---<a href="">Test Link 2 Module 003</a><br/>
---<a href="">Test Link 3 Module 003</a><br/>
---<a href="">Test Link 4 Module 003</a><br/>
---<a href="">Test Link 5 Module 003</a><br/>
---<a href="">Test Link 6 Module 003</a><br/>
---<a href="">Test Link 7 Module 003</a><br/>
---<a href="">Test Link 8 Module 003</a><br/>
---<a href="">Test Link 9 Module 003</a><br/>
---<a href="">Test Link 10 Module 003</a><br/>
---<a href="">Test Link 11 Module 003</a><br/>
</p>
</div>
</div>

</div>


<!-- MAIN CONTENT DATA -->
<div id="mainContent">
<iframe name="mainframe" frameborder="0" scrolling="auto" src="content.html">
<!-- content for browsers w/o iframe support -->
</iframe>
</div>


<!-- force the #container div to contain all child floats -->
<!-- <br class="clearfloat" /> LOOKS LIKE WE WONT NEED THIS, SAVE FOR CONTENT JUST IN CASE -->


<!-- FOOTER CONTENT DATA -->
<div id="footer">
<p>Eklite Studios, Fruition Build 003.3</p>
</div>



</div>
<!-- BUILD 003.3 | LAST EDITED BY | GBOY | 9/03/07 -->
</body>
</html>[/code]

[upl-file uuid=8953fa6e-2656-48ee-8f94-a0adbbf35be6 size=50kB]proj.zip[/upl-file]
×

Success!

Help @Emerick spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...