3

I'm making a site from AnythingSlider and want to use jQuery UI's accordion feature inside a panel and the whole page poops the bed. All of the references to js and css work. And now for the news...

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

And in the body:

<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>
Adam
  • 1,022
  • 3
  • 13
  • 30

2 Answers2

1

What's missing is a CSS definition to set your panel2 height. Because initially it's just a list, the height is much smaller. But when you convert it into an accordion, the height grows. I can't think of an easier method, so probably it's best to figure out the height you want:

.panel2 { height: 350px; }

Here is a demo.

Also note that if I set resizeContents: true in the demo, I don't need that bit of CSS above.

Mottie
  • 84,355
  • 30
  • 126
  • 241
  • I'd already declared a height in the css, which I didn't think to include in the question, but here's the declaration for the panels inside class=slider:#slider .panel1 { width: 1000px; height: 400px; } #slider .panel2 { width: 1000px; height: 400px; } #slider .panel3 { width: 1000px; height: 400px; } #slider .panel4 { width: 1000px; height: 400px; } #slider .panel5 { width: 1000px; height: 400px; } #slider .panel6 { width: 1000px; height: 400px; } - and still doesn't work. Here's the URL: bigsilkdesign.com/mercado/index_jquery_ui.html – Adam Dec 10 '10 at 01:09
0

My stupid, stupid bad. It works. I neglected to add something as a result of copy and pasting into a new doc. If you're interested: http://bigsilkdesign.com/mercado/

Thank you, though, for your response. For that, you get a one up. Not like you need it, but credit where due.

If for nothing else, to see my altered use of AnythingSlider...

Adam
  • 1,022
  • 3
  • 13
  • 30