2010-12-07 2 views
3

AnythingSlider에서 사이트를 만들고 있고 패널 내부에서 jQuery UI의 아코디언 기능을 사용하려고하며 전체 페이지가 침대를 터벅 터벅니다. js 및 css에 대한 모든 참조가 작동합니다. 그리고 지금 뉴스를 위해 ... AnythingSlider 패널 내부에서 jquery UI (아코디언)를 사용하려고하는데 작동하지 않습니다.

<script type="text/javascript"> 
    // Set up Sliders 
    // ************** 
    $(function(){ 
    $('#slider').anythingSlider({ 
    startPanel    : 1, 
    buildArrows  : false, 
    autoPlay    : false, 
    width     : 600, // if resizeContent is false, this is the default width if panel size is not defined 
    height     : 350, // if resizeContent is false, this is the default height if panel size is not defined 
    resizeContents  : false, // If true, solitary images/objects in the panel will expand to fit the viewport 
    startStopped   : true, // If autoPlay is on, this can force it to start stopped 
    navigationFormatter : function(index, panel){ // Format navigation labels with text 
    return ['home', 'menu', 'find us', 'order online', 'cater', 'contact'][index - 1]; 
    } 
    }); 

    $("#accordion").accordion({ header: "h3" }); 

    }); 
</script> 

그리고 몸에

: 실종 무엇

<li class="panel2"> 

    <div id="accordion"> 
    <div> 
    <h3><a href="#">First</a></h3> 
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
    </div> 
    <div> 
    <h3><a href="#">Second</a></h3> 
    <div>Phasellus mattis tincidunt nibh.</div> 
    </div> 
    <div> 
    <h3><a href="#">Third</a></h3> 
    <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
    </div> 
    </li> 

답변

1

은 panel2 높이를 설정하는 CSS 정의입니다. 처음에는 목록 일 뿐이므로 높이는 훨씬 작습니다. 그러나 아코디언으로 변환하면 높이가 커집니다. 여기

.panel2 { height: 350px; } 

demo입니다 : 그래서 아마 당신이 원하는 높이를 파악하는 것이 가장 좋습니다, 더 쉬운 방법을 생각할 수 없다.

데모에 resizeContents: true을 설정하면 위의 CSS가 필요하지 않습니다.

+0

나는 이미 내가 질문에 포함 할 생각하지 않았다 CSS의 높이를 선언하지만, 여기에 대한 선언의 것 패널 내부의 클래스 = 슬라이더 : #slider .panel1 {width : 1000px; 높이 : 400px; } #slider .panel2 {width : 1000px; 높이 : 400px; } #slider .panel3 {width : 1000px; 높이 : 400px; } #slider .panel4 {width : 1000px; 높이 : 400px; } #slider .panel5 {width : 1000px; 높이 : 400px; } #slider .panel6 {width : 1000px; 높이 : 400px; } - 여전히 작동하지 않습니다. 다음은 URL입니다 : bigsilkdesign.com/mercado/index_jquery_ui.html – Adam

0

내 바보 같은, 바보 같은. 그것은 작동합니다. 나는 복사와 붙여 넣기의 결과로 뭔가 새로운 것을 추가하는 것을 게을리했다. 관심이 있으시면 : http://bigsilkdesign.com/mercado/

감사합니다. 그것을 위해서, 당신은 하나를 얻습니다. 당신이 그것을 필요로하지 않지만, 신용이 만기가되는 곳에.

다른 아무것도, AnythingSlider의 나의 변경된 사용을 볼 수 있다면 ...

+0

깨진 링크, 고칠 수 있습니까? –

관련 문제