Grow your CSS skills. Land your dream job.

jQuery Coda slider panel height issue

  • # 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;
    }

    # 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.

    # January 15, 2010 at 3:50 pm

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".