Forums

supermankd

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:

settings = $.extend({
		autoHeight: true,
		autoHeightEaseDuration: 1000,
		autoHeightEaseFunction: \"easeInOutExpo\",
		autoSlide: false,
		autoSlideInterval: 7000,
		autoSlideStopWhenClicked: true,
		crossLinking: true,
		dynamicArrows: false,
		dynamicArrowLeftText: \"&#171; left\",
		dynamicArrowRightText: \"right &#187;\",
		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):

// 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

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

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

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

treehouse : what would you like to learn today?

Forums

jQuery Coda slider panel height issue