※ ChatGPTを利用し、要約された質問です（原文：ui.tabs.jsとjScrollPane.jsの連動について）
ui.tabs.jsとjScrollPane.jsの連動について
このQ&Aのポイント
Ui.Tabs.jsとjQuery1.2.6.jsを使ってタブを動作させ、そのコンテンツが表示領域に収まらなかった場合、jScrollPane.jsを使用してスクロールバーを表示したいと考えています。
タブを切り替えた時にスクロールバーの長さがリサイズされず、タブの変移にjScrollPaneが対応してくれません。
Ui.Tabs.jsの動作の完了後にjScrollPaneを再度読み込むように（クリック後のコンテンツの長さに対応したスクロールバーが表示されるように）スクリプトを組むことはできないでしょうか。ご教授よろしくお願い致します。
ui.tabs.jsとjScrollPane.jsの連動について
いつもお世話になっております。
先日質問させていただいた内容に補足させていただきます。
Ui.Tabs.jsとjQuery1.2.6.jsを使ってタブを動作させ、そのコンテンツが表示領域に収まらなかった場合、jScrollPane.jsを使用してスクロールバーを表示したいと考えています。それぞれ一応動作するまでには到っているのですが、タブを切り替えた時にスクロールバーの長さがリサイズされず、タブの変移にjScrollPaneが対応してくれません。
そこでタブをクリックしたときにjScrollPaneを再度読み込むようにしてみたのですが、下記記述だとクリック前のコンテンツの長さに対応したスクロールバーが表示されてしまいます。
Ui.Tabs.jsの動作の完了後にjScrollPaneを再度読み込むように（クリック後のコンテンツの長さに対応したスクロールバーが表示されるように）スクリプトを組むことはできないでしょうか。ご教授よろしくお願い致します。
#layer1 { height: 500px; width: 600px; position: relative; top: 110px; overflow: auto; visibility: visible; }
<script type="text/javascript">
$(function(){
$('#tab > ul').tabs({ fx:{ opacity: 'toggle',duration:500 } });
$('#layer1').jScrollPane({scrollbarWidth: 12});
$('#nor1,#mor12,#ho1,#hov12').click(function(){
$('#layer1').jScrollPane({scrollbarWidth: 12});
});
});
</script>
</head>
<body>
<div id="tab">
<ul>
<li><a href="#fragment-1"><span><img id="mon1" src="../diary/2009/1/diary-1mon-nor.png" alt=""/></span></a></li>
<li><a href="#fragment-2"><span><img id="mon2" src="../diary/2009/2/diary-12mon-nor.png" alt=""/></span></a></li>
<li><a href="#fragment-3"><span><img id="mon3" src="../diary/2009/3/diary-1mon.png" alt=""/></span></a></li>
<li><a href="#fragment-4"><span><img id="mon4" src="../diary/2009/4/diary-12mon.png" alt=""/></span></a></li>
</ul>
<div id="layer1">
<div id="fragment-1"><img src="../2009/1/content-diary-1.png" alt="" width="520" height="950" border="0" />
</div>
<div id="fragment-2"><img src="../2009/2/content-diary-2.png" alt="" width="520" height="453" border="0" />
</div>
<div id="fragment-3"><img src="../2009/3/content-diary-3.png" alt="" width="520" height="1150" border="0" />
</div>
<div id="fragment-4"><img src="../2009/4/content-diary-4.png" alt="" width="520" height="1150" border="0" />
</div>
</div>
</div>
</body>
お礼
askaaskaさん、ありがとうございます。 おかげさまで問題点に対して焦点をあわせることができました。 確かにmouseoutを使うことでタブの変移後のスクロールサイズを取得できました。 もう少し頑張ってみます。
補足
下記ソースで解決できました。 $('#tab1,#tab2,#tab3').click(function timer(){ mytimer = setTimeout(timer,1); $('.scroll-pane').jScrollPane({scrollbarWidth:12}); $('#tab1,#tab2,#tab3').mouseout(function (){ clearTimeout(mytimer); }); }); askaaskaさんの意見がとても参考になりました。 ありがとうございました。