HTML scrollbar bei laden von content mit jquery

[koffi]

hallo!

ich bastle gerade an einer webseite. ich möchte dabei auf unterverzeichnisse wie meineseite.de/willkommen.php verzichten. stattdessen möchte ich den gesamten inhalt auf der der startseite haben und diesen mit ein paar buttons individuell anzeigen lassen, so dass bei einem klick auf einen button nicht die seite neu geladen werden muss.
ich verwende dazu jquery. da ich das rad nicht neu erfinden wollte und ein ziemlicher java-legasteniker bin (leider, ich wünschte es wäre nicht so) habe ich mir die scripts von hier gegoogelt. dies ist der dazugehörige code.

<!-- Your Head Section -->
<link rel="stylesheet" type="text/css" media="screen" href="style/jquery.content-panel-switcher.css" /> 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.content-panel-switcher.js"></script> 

<!--Initialize the Content Switcher, specify the speed (in milliseconds) of the transition and the panel ID you wish the content to appear in -->
<script type="text/javascript">
$(document).ready(function() {
   jcps.fader(300, '#switcher-panel');
});
</script> 

<!--The switcher buttons, basic anchor tags, with the switcher class -->
<a id="content1" class="switcher">Content 1</a> 
<a id="content2" class="switcher">Content 2</a>

<!-- The panel you wish to use to display the content -->
<div id="switcher-panel"></div>

<!-- The actual content you want to switch in and out of the panel, this is hidden -->
<div id="content1-content" class="switcher-content show">This is content 1</div>
<div id="content2-content" class="switcher-content">This is content 2</div>

und der jquery script:

var jcps={};jcps.fader=function(speed,target,panel){jcps.show(target,panel);if(panel==null){panel=''};$('.switcher'+ panel).click(function(){var _contentId='#'+ $(this).attr('id')+'-content';var _content=$(_contentId).html();if(speed==0){$(target).html(_content);}
else{$(target).fadeToggle(speed,function(){$(this).html(_content);}).fadeToggle(speed);}});};jcps.slider=function(speed,target,panel){jcps.show(target,panel);if(panel==null){panel=''};$('.switcher'+ panel).click(function(){var _contentId='#'+ $(this).attr('id')+'-content';var _content=$(_contentId).html();if(speed==0){$(target).html(_content);}
else{$(target).slideToggle(speed,function(){$(this).html(_content);}).slideToggle(speed);}});};jcps.show=function(target,panel){$('.show').each(function(){if(panel==null){$(target).append($(this).html()+'<br/>');}
else{var trimPanel=panel.replace('.','');if($(this).hasClass(trimPanel)==true){$(target).append($(this).html()+'<br/>')

funktioniert auch soweit recht super! bis auf eine sache.
wenn ich durch einen klick auf einen meiner reiter einen langen content lade, der über den bildschirmrand hinausgeht, wird keine scrollbar angezeigt! der inhalt wird einfach nach unten hin immer weiter aufgelistet, aus dem bildschirm hinaus, ohne dass ich ihn mir komplett ansehen kann.

zur verdeutlichung hier zwei bilder.
hier die startseite, ohne probleme.
hier nach dem klick auf den reiter "friends". keine scrollbar wird eingeblendet.

hat jemand eine idee wie man das problem lösen kann?
danke schonmal

 

[Daaron]

Liegt meines Erachtens nach daran, wie <div id="switcher-panel"> im CSS deklariert ist. Da steckt bestimmt ein "height:xxx; overflow:hidden" im Code.

 

[koffi]

leider nein. in der gesamten css befindet sich kein einziges overflow:hidden.
ich vermute es liegt daran, dass der browser beim aufruf der startseite feststellt, dass keine scrollbar notwendig ist. wenn dann aber ein neuer content geladen wird, wird nicht nochmal überprüft, ob eine scrollbar notwendig ist.

ich komme wirklich nicht mehr weiter

 

[benneq]

Also es ist auch nicht sonderlich schlau sämtlichen Content gleich zu beginn in den DOM-Tree zu laden (ausgenommen davon sind reiner Text und sehr kurze Dinge). Besser wäre es nur die Startseite einzubinden und den Rest per AJAX nachzuladen und anzuzeigen. Das kann nach dem ersten Mal laden dann ruhig im Cache bleiben.
Aber wenn ich mir dein Projekt so ansehe, dann scheint es mir irgendwie prädestiniert für GWT (ohne Serverseite), allerdings musst du dafür Java können...

 

[Daaron]

Also es ist auch nicht sonderlich schlau sämtlichen Content gleich zu beginn in den DOM-Tree zu laden (ausgenommen davon sind reiner Text und sehr kurze Dinge). Besser wäre es nur die Startseite einzubinden und den Rest per AJAX nachzuladen und anzuzeigen. Das kann nach dem ersten Mal laden dann ruhig im Cache bleiben.

Spätestens, wenn man sich dann Gedanken um Barrierefreiheit und SEO macht ist so ein Ansatz komplett für die Tonne.
Es geht, auch im Bezug auf Bedienbarkeit, einfach nichts über separate Unterseiten (z.B. per mod_rewrite) ohne JS-generierten Inhalt.