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