supermankd

# January 15, 2010 at 2:49 pm

For some reason the height of the panel div is calculated as a set number of pixels… once I switch panels and come back it is calculated to fit the content(height:auto; like it should be). I have been beating my head off the desk for hours trying to figure this one out.

website in question:
I’vehttp://kyam.ca/kyam06/

jquery.coda-slider-2.0.js:
http://kyam.ca/kyam06/js/jquery.coda-slider-2.0.js
settings used:

Code:

settings = $.extend({
autoHeight: true,
autoHeightEaseDuration: 1000,
autoHeightEaseFunction: “easeInOutExpo”,
autoSlide: false,
autoSlideInterval: 7000,
autoSlideStopWhenClicked: true,
crossLinking: true,
dynamicArrows: false,
dynamicArrowLeftText: “« left”,
dynamicArrowRightText: “right »”,
dynamicTabs: false,
dynamicTabsAlign: “center”,
dynamicTabsPosition: “top”,
externalTriggerSelector: “a.xtrig”,
firstPanelToLoad: 1,
panelTitleSelector: “h2.title”,
slideEaseDuration: 1000,
slideEaseFunction: “easeInOutExpo”
}, settings);

this must have something to do with the panel height but makes no sense to me (I’m a total newb when it comes to js):

Code:

// Set the height of the first panel
if (settings.autoHeight) {
panelHeight = $(‘.panel:eq(‘ + (currentPanel – 1) + ‘)’, slider).height();
slider.css({ height: panelHeight });
};

This is the css:
http://kyam.ca/kyam06/stylesheets/coda-slider-2.0.css

Code:

a:focus {
outline:none;
}

a:hover {
color:#000;
text-decoration:none;
}

p {
text-align:justify;
padding:10px;
}

h2 {
font-family:”Gill Sans”, “Helvetica Neue”, Arial;
font-size:16px;
letter-spacing:3px;
font-style:normal;
font-weight:100;
margin-top:25px;
border-bottom:2px solid #e3f4f6;
text-align:center;
}

h3 {
font-family:”Gill Sans”, “Helvetica Neue”, Arial;
font-size:16px;
letter-spacing:3px;
font-style:italic;
font-weight:100;
margin-top:25px;
margin-bottom:25px;
text-align:center;
}

.left {
float:left;
width:375px;
}

.right {
float:right;
width:375px;
}

#header {
width:800px;
position:absolute;
left:50%;
margin-left:-400px;
background:#blue;
padding:0;
}

body {
background-image:url(../images/bg-diag.png);
font-family:”Gill Sans”, “Helvetica Neue”, Arial;
font-size:14px;
letter-spacing:1px;
font-style:normal;
line-height:25px;
font-weight:100;
margin:0;
padding:0;
}

.panel h2.title {
margin-bottom:10px;
}

noscript div {
background:#ccc;
border:1px solid #900;
margin:20px 0;
padding:15px;
}

.coda-slider-wrapper {
position:absolute;
left:50%;
top:150px;
margin-left:-400px;
background:#e3f4f6;
clear:both;
overflow:auto;
padding:0;
}

.coda-slider {
background:#fff;
float:left;
overflow:hidden;
position:relative;
}

.coda-slider-no-js .coda-slider {
height:200px;
overflow:auto!important;
padding-right:20px;
}

.coda-slider-wrapper.arrows .coda-slider {
margin:0 10px;
}

.coda-nav-left a,.coda-nav-right a {
background:#000;
color:#fff;
width:100px;
display:block;
text-align:center;
text-decoration:none;
padding:20px;
}

.coda-nav ul li a.current {
background:#fff;
}

.coda-slider .panel-wrapper {
padding:5px;
}

.coda-slider p.loading {
text-align:center;
padding:20px;
}

.coda-nav ul {
background-color:#e3f4f6;
clear:both;
display:block;
overflow:hidden;
margin:auto;
}

.coda-nav ul li {
display:inline;
}

.coda-nav ul li a {
color:#000;
display:block;
float:left;
margin-right:1px;
padding:3px 20px;
}

.coda-slider .panel {
display:block;
float:left;
}

.coda-slider .panel-container {
position:relative;
}

.coda-nav-left,.coda-nav-right {
float:left;
}

a:link,a:visited {
color:#09C;
text-decoration:none;
}

.coda-slider,.coda-slider .panel,.coda-slider-wrapper.arrows .coda-slider,.coda-slider-wrapper.arrows .coda-slider .panel {
width:800px;
height:auto;
}

supermankd

# January 15, 2010 at 2:59 pm

I was wrong about the window height so I edited my post. It is always calculated at the same initial height no matter the window size.

supermankd

# January 15, 2010 at 3:50 pm

I added a height attribute to the solutions pic on the first panel… Problem solved!