Home › Forums › JavaScript › jQuery Coda slider panel height issue
- This topic is empty.
-
AuthorPosts
-
January 15, 2010 at 2:49 pm #27586
supermankd
MemberFor 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.cssCode: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;
}January 15, 2010 at 2:59 pm #69511supermankd
MemberI 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.
January 15, 2010 at 3:50 pm #69514supermankd
MemberI added a height attribute to the solutions pic on the first panel… Problem solved!
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.