jQueryの自動目次生成の設定について

質問

JavaScriptのjQueryのJqtocですが自動的に目次も開くようにすると１２００ピクセル以下のモニターだと本文と重なってしまう不具合がでます。

１２００以上の場合は不具合は出ません。
そこでこれを１２００ピクセル以下のモニターでも重ならないように目次は、画面からはみだしてもいいので横スクロールで見れるように設定を変更したいのですが可能でしょうか？
また逆に１９００ピクセルほどのモニターで見ると本文と目次が離れすぎてしまいます。
できれば本文も目次も１２００に固定してセンタリングできればと思っています。
できれば完全に１２００pxに固定してどのモニターで見ても本文と目次が同じ位置で表示されるようにしたいです。
１０００ピクセル以下の場合は目次は、重なる方のデメリットのほうが大きいのではみだしてもいいので横スクロールして見るようにしたいです。

初期の状態は画面全部に目次も入るように映す設定のようですが、目次は見えなくても良いので重ならないで横スクロールするようにしたいです。

どこを変更すればいいのかわかりません。

よろしくお願いいたします。

回答No.1

yyr446 · ベストアンサー

見本で、jQuery本体とjquery.jqTOC.jsを何故2回も積んでいるのかはおいといて、
詳しく見てませんが、tocContainerに当たるdiv要素のスタイル属性をjquery.jqTOC.js内でセットしてあげればよいんじゃないかと。

jquery.jqTOC.jsのこのあたり

　 // create the main content container if not already created
　 if (document.getElementById(settings.tocContainer) == null)
　 $('body').append('<div id="'+settings.tocContainer+'"></div>');

　 $('#'+settings.tocContainer).css('width',settings.tocWidth).append(
　 (settings.tocTitle?'<div class="toc_header">'+ settings.tocTitle + '</div>':'') +
　 '<div class="toc_content"></div>'
　 );

メニューの幅は、settings ｛｝の
　　tocWidth: '600px',
を変えればよい。

オーバーフロー部をスクロール表示させたいなら、
$('#'+settings.tocContainer).css("overflow","scroll");
を追加、

表示位置は、CSSでセットしてるので、ここを変えてやればよさげです。

#toc_container {
background: none repeat scroll 0 0 black;
font: 11px/140% Verdana,Arial,Helvetica,sans-serif;
position: fixed;
right: 0;
top: 0;
}

補足

yyr446さんありがとうございます。おかげさまで６割方解決できました。たいへん感謝しております。
目次のほうのスクロールバーのボタンが出ないのですが何か原因は考えられますでしょうか？
それと本文と自動生成目次を二つセットでセンタリングしたいのですが可能でしょうか？
よろしくお願いいたします。