views:

56

answers:

1

Not sure I'm really using the accordion widget as it's meant to be used but I've automated the showing of the panels so that site viewers can see each panel without clicking.

Problem is if the user scrolls down while the accordion is cycling, the page jumps back up to the next opening panel. I've tried all sorts of return falses and tried deleting the href tags in the html.

Here's minimal code:

<script type="text/javascript">
$(function(){
 $("#accordion").accordion({ header: "h3"});
});
itemid=0;
setInterval ("doSomething()", 2000 );
function doSomething(){
 itemid++;
 $("#accordion").accordion( "activate" , itemid);
 if (itemid==2){itemid=-1};
}   
</script>
</head>
<body>
<div id="accordion">
 <div>
  <h3 style="font-weight:bold;"><a href="#">title1</a></h3>
  <div>content1</div>
 <div>
  <h3 style="font-weight:bold;"><a href="#">title2</a></h3>
  <div>content2</div>
 </div>
 <div>
  <h3 style="font-weight:bold;"><a href="#">title3</a></h3>
  <div>content3</div>
 </div>
</div>
<br />
....

Anyone have ideas for me to try?

Thanks.

A: 

This is a browser rendering "issue". You can replicate it using Firebug. Notice if you scroll down the page when there is a lot of content and you hide the first content by setting the css property to display:none (basically what it is animated to do). Then the page will automatically jump to the top.

One option is to store the current scroll position pre-animation and then scroll to that position once the animation finishes, although this is quite ugly.

The other option is to restrict the height of your content to be less than the average page size, you would then have the scrollbar on the active content rather than the whole screen.

IMHO, either way it's not going to look nice. If I were a designer I would suggest a design rethink. If you are going to have large amounts of information I wouldn't be sticking it in an auto changing accordion.

xiaohouzi79
Ah, I did a little test using Firebug and you are correct. Setting display:none on items out of view makes the page jump. I'll have to rethink. The accordion was displaying highlights of the site, each panel was a title and description for an image or animation showing on the right (using the 'change' method to choose the image etc) It looked good (but then as the designer I would think that). Thanks, xgarb
xgarb
@xgarb - It does look good, I'm not denying that, but probably impractical for what you are wanting to achieve.
xiaohouzi79