Ciao a tutti,
sto provando una soluzione per delle pagine web impostata in questo modo:

i contenuti li mostro utilizzando tab ajax, pescando quindi di volta in volta i dati da file esterni..

(in particolare usando questo script: http://www.dynamicdrive.com/dynamici...tent/index.htm )

a questo punto mi serviva una scrollbar decente, al che in una mia pagina esterna che includo ho inserito questa:

http://13thparallel.com/archive/dhtml-scrollbars/

Il problema è che ovviamente le due cose insieme non funzionano.

Vorrei capire se c'è un modo per risolvere..
Vi posto un po' di codice:



Codice PHP:
<body>
<script type="text/javascript">

//We wrap all the code in an object so that it doesn't interfere with any other code
var scroller = {
  init:   function() {

    //collect the variables
    scroller.docH = document.getElementById("content").offsetHeight;
    scroller.contH = document.getElementById("container").offsetHeight;
    scroller.scrollAreaH = document.getElementById("scrollArea").offsetHeight;
      
    //calculate height of scroller and resize the scroller div
    //(however, we make sure that it isn't to small for long pages)
    scroller.scrollH = (scroller.contH * scroller.scrollAreaH) / scroller.docH;
    //if(scroller.scrollH < 15) scroller.scrollH = 15;
    document.getElementById("scroller").style.height = Math.round(scroller.scrollH) + "px";
    
    //what is the effective scroll distance once the scoller's height has been taken into account
    scroller.scrollDist = Math.round(scroller.scrollAreaH-scroller.scrollH);
    
    //make the scroller div draggable
    Drag.init(document.getElementById("scroller"),null,0,0,-1,scroller.scrollDist);
    
    //add ondrag function
    document.getElementById("scroller").onDrag = function (x,y) {
      var scrollY = parseInt(document.getElementById("scroller").style.top);
      var docY = 0 - (scrollY * (scroller.docH - scroller.contH) / scroller.scrollDist);
      document.getElementById("content").style.top = docY + "px";
    }
  }
}

onload = scroller.init;
</script>


<ul id="countrytabs" style="z-index:2;">[*][url="#"]Tab 1[/url][*][url="test.htm"]Tab 2[/url][*][url="test2.htm"]Tab 4[/url][*][url="tipologia.php?act=tipologia&id_tipologia=13"]Thumbnails[/url]
[/list]
</div>


<div id="contenuti" style="z-index:2;">

<div id="countrydivcontainer" style="z-index:2;">
This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.
</div>
</div>






<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script> 

la pagina tipologia che viene inclusa ha questo output:


Codice PHP:
<body>
<script type="text/javascript">

//We wrap all the code in an object so that it doesn't interfere with any other code
var scroller = {
  init:   function() {

    //collect the variables
    scroller.docH = document.getElementById("content").offsetHeight;
    scroller.contH = document.getElementById("container").offsetHeight;
    scroller.scrollAreaH = document.getElementById("scrollArea").offsetHeight;
      
    //calculate height of scroller and resize the scroller div
    //(however, we make sure that it isn't to small for long pages)
    scroller.scrollH = (scroller.contH * scroller.scrollAreaH) / scroller.docH;
    //if(scroller.scrollH < 15) scroller.scrollH = 15;
    document.getElementById("scroller").style.height = Math.round(scroller.scrollH) + "px";
    
    //what is the effective scroll distance once the scoller's height has been taken into account
    scroller.scrollDist = Math.round(scroller.scrollAreaH-scroller.scrollH);
    
    //make the scroller div draggable
    Drag.init(document.getElementById("scroller"),null,0,0,-1,scroller.scrollDist);
    
    //add ondrag function
    document.getElementById("scroller").onDrag = function (x,y) {
      var scrollY = parseInt(document.getElementById("scroller").style.top);
      var docY = 0 - (scrollY * (scroller.docH - scroller.contH) / scroller.scrollDist);
      document.getElementById("content").style.top = docY + "px";
    }
  }
}

onload = scroller.init;
</script>
<div id="scrollArea"><div id="scroller"></div></div>


<div id="container"><div id="content"><div class="box_thumb"><div class="fotina">
<img src=immagini/small/093-051-37.jpg></div></div>
</div>
</body>
</html> 
ne capite qualcosa?
avete qualche consiglio?

Avevo provato anche a fare il contrario,
ovvero mettere la scrollbar nella pagina principale sul contenitore, il problema è che le dimensioni del contenitore variano in base al contenuto, il quale essendo aggiornato via ajax non viene beccato dallo script javascript.

(spero di aver spiegato decentemente..)