Cercherò di essere chiaro e breve, anche se la questione è un pò complicata...
Ho una pagina, i cui i contenuti sono posti in due div, uno + stretto a sinistra, uno + largo al centro.
I contenuti del div di sinistra sono sempre e soltanto testi, e sono sempre abbastanza brevi, per cui non occorre mai uno scroll.
I contenuti del div di destra possono essere anche molto lunghi, e con molte immagini, per cui possono necessitare dello scroll.
Io ho un JavaScript per lo scroll molto carino, con effetto fade quando si passa da un contenuto all'altro, che in base al link cliccato, carica e visualizza (nel div di destra) il contenuto di uno dei div (nascosti) presenti nella pagina.
In pratica, io ho un menu principale con 5 diverse voci:
ART | BIO | CLIENT | PORTFOLIO | CONTATTI
Al primo caricamento della pagina, nelle due colonne (div di sx e div di dx) appare un testo introduttivo, poi - cliccando una qualsiasi delle voci del menu - accadono due eventi contestuali:
1) viene effettuata una chiamata AJAX ad un file PHP, attraverso la quale viene caricato nel div di sx un nuovo contenuto (diverso in base al link cliccato);
2) viene richiamata una funzione JS che fa apparire nel div di dx il contenuto di un div nascosto (anche questo diverso in base al link cliccato).
Il contenuto di questi div nascosti, che viene caricato nel div di dx dalla funzione JS, può essere un testo breve, di introduzione all'argomento, oppure un testo più lungo, esaustivo.
In ogni caso, tutti i contenuti che appaiono nel div di dx ciccando le voci di menu, sono già presenti nella pagina, e quindi ne determinano il peso.
Finchè si tratta di solo testo, non c'è alcun problema, ovviamente. Ma ci sono dei casi in cui devo caricare decine e decine di miniature, e quindi non posso mettere tutto già nella pagina, altrimenti peserebbe troppo...
Quindi, devo giocoforza caricarli successivamente.
Allora, faccio un caso di esempio, se si clicca la voce PORTFOLIO nel menu, nel div di dx carico via JS un testo introduttivo breve, e nel div di sx, via AJAX+PHP, un altro testo con dei link (BRAND | WEB DESIGN | FLASH DESIGN).
Cliccando ciascuno di questi link, nel div di dx viene caricato, attraverso una nuova chiamata AJAX+PHP, un testo con tutte le relative miniature.
Questi testi vengono caricati in un div nascosto, vuoto, che è già presente sulla pagina.
Funziona tutto perfettamente, sin qui.
I caricamenti, gli scroll, tutto.
Il problema sorge quando carico contenuti nel div di dx, attraverso la chiamata AJAX da un link presente nel div di sx. A questo punto, infatti, il contenuto del div di dx non scrolla più.
Per capire meglio, date un'occhiata qui: demo.php
Se cliccate su CLIENT o su BIO & SKILLS, vedrete che il testo caricato scrolla perfettamente; provate quindi a cliccare su ART, e poi sul link presente in fondo alla colonna di sinistra, ART SHOW: il nuovo testo viene caricato, ma non scrolla per niente!!!


Questo è il codice JS che regola lo scroll:
Codice PHP:
// scroll functions
function lib_bwcheck(){ //Browsercheck (needed)
    
this.ver=navigator.appVersion
    this
.agent=navigator.userAgent
    this
.dom=document.getElementById?1:0
    this
.opera5=this.agent.indexOf("Opera 5")>-1
    this
.ie5=(this.ver.indexOf("MSIE 5")>-&& this.dom && !this.opera5)?1:0
    
this.ie6=(this.ver.indexOf("MSIE 6")>-&& this.dom && !this.opera5)?1:0;
    
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    
this.ie=this.ie4||this.ie5||this.ie6
    this
.mac=this.agent.indexOf("Mac")>-1
    this
.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0
    
this.ns4=(document.layers && !this.dom)?1:0;
    
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
    return 
this
}
var 
bw=new lib_bwcheck()
var 
numScrollPages 10  
var transitionOut 1;         //The 'out' effect... 0= no effect, 1= fade
var transitionIn 2;          //The 'in' effect... 0= no effect, 1= fade, 2= slide
var slideAcceleration 0.2;   //If you use the slide animation, set this somewhere between 0 and 1.
var transitionOnload 1  
var px bw.ns4||window.opera?"":"px";
if(
document.layers){ //NS4 resize fix...
    
scrXinnerWidthscrYinnerHeight;
    
onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }
}
function 
scrollerobj(obj,nest){
    
nest = (!nest)?"":'document.'+nest+'.'
    
this.elm bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj)
    
this.css bw.ns4?this.elm:this.elm.style
    this
.doc bw.ns4?this.elm.document:document
    this
.obj obj+'scrollerobj'; eval(this.obj+'=this')
    
this.= (bw.ns4||bw.opera5)?this.css.left:this.elm.offsetLeft
    this
.= (bw.ns4||bw.opera5)?this.css.top:this.elm.offsetTop
    this
.= (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetWidth:bw.ns4?this.elm.clip.width:bw.opera5?this.css.pixelWidth:0
    this
.= (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetHeight:bw.ns4?this.elm.clip.height:bw.opera5?this.css.pixelHeight:0
}
scrollerobj.prototype.moveTo = function(x,y){
    if(
x!=null){this.x=xthis.css.left=x+px}
    if(
y!=null){this.y=ythis.css.top=y+px}
}
scrollerobj.prototype.moveBy = function(x,y){this.moveTo(this.x+x,this.y+y)}
scrollerobj.prototype.hideIt = function(){this.css.visibility='hidden'}
scrollerobj.prototype.showIt = function(){this.css.visibility='visible'}
var 
scrollTimer null;
function 
scroll(step){
    
clearTimeout(scrollTimer);
    if ( !
busy && (step<0&&activePage.y+activePage.h>scroller1.|| step>0&&activePage.y<0) ){
        
activePage.moveBy(0,step);
        
scrollTimer setTimeout('scroll('+step+')',40);
    }
}
function 
stopScroll(){
    
clearTimeout(scrollTimer);
}
var 
activePage null;
var 
busy 0;
function 
activate(num){
    if (
activePage!=pages[num] && !busy){
        
busy 1;
        if (
transitionOut==|| !bw.opacity){ activePage.hideIt(); activateContinue(num); }
        else if (
transitionOut==1activePage.blend('hidden''activateContinue('+num+')');
    }
}
function 
activateContinue(num){
    
busy 1;
    
activePage pages[num];
    
activePage.moveTo(0,0);
    if (
transitionIn==|| !bw.opacity){ activePage.showIt(); busy=0; }
    else if (
transitionIn==1activePage.blend('visible''busy=0');
    else if (
transitionIn==2activePage.slide(0slideAcceleration40'busy=0');
}
scrollerobj.prototype.slide = function(targetaccelerationtimefn){
    
this.slideFnfn?fn:null;
    
this.moveTo(0,scroller1.h);
    if (
bw.ie4&&!bw.macthis.css.filter 'alpha(opacity=100)';
    if (
bw.ns6this.css.MozOpacity 1;
    
this.showIt();
    
this.doSlide(targetaccelerationtime);
}
scrollerobj.prototype.doSlide = function(targetaccelerationtime){
    
this.step Math.round(this.y*acceleration);
    if (
this.step<1this.step 1;
    if (
this.step>this.ythis.step this.y;
    
this.moveBy(0, -this.step);
    if (
this.y>0this.slideTim setTimeout(this.obj+'.doSlide('+target+','+acceleration+','+time+')'time);
    else {    
        eval(
this.slideFn);
        
this.slideFn null;
    }
}
scrollerobj.prototype.blend= function(visfn){
    if (
bw.ie5||bw.ie6 && !bw.mac) {
        if (
vis=='visible'this.css.filter'blendTrans(duration=0.9)';
        else 
this.css.filter'blendTrans(duration=0.6)';
        
this.elm.onfilterchange = function(){ eval(fn); };
        
this.elm.filters.blendTrans.apply();
        
this.css.visibilityvis;
        
this.elm.filters.blendTrans.play();
    }
    else if (
bw.ns6 || bw.ie&&!bw.mac){
        
this.css.visibility'visible';
        
vis=='visible' this.fadeTo(100740fn) : this.fadeTo(0940fn);
    }
    else {
        
this.css.visibilityvis;
        eval(
fn);
    }
};
scrollerobj.prototype.op100;
scrollerobj.prototype.opacityTimnull;
scrollerobj.prototype.setOpacity= function(num){
    
this.css.filter'alpha(opacity='+num+')';
    
this.css.MozOpacitynum/100;
    
this.opnum;
}
scrollerobj.prototype.fadeTo= function(targetsteptimefn){
    
clearTimeout(this.opacityTim);
    
this.opacityFnfn?fn:null;
    
this.op target==100 100;
    
this.fade(targetsteptime);
}
scrollerobj.prototype.fade= function(targetsteptime){
    if (
Math.abs(target-this.op)>step){
        
target>this.opthis.setOpacity(this.op+step):this.setOpacity(this.op-step);
        
this.opacityTimsetTimeout(this.obj+'.fade('+target+','+step+','+time+')'time);
    }
    else {
        
this.setOpacity(target);
        eval(
this.opacityFn);
        
this.opacityFnnull;
    }
}
var 
pageslidefadeLoaded 0;
function 
initPageSlideFade(){
    
scroller1 = new scrollerobj('divScroller1');
    
pages = new Array();
    for (var 
i=0i<numScrollPagesi++){
        
pages[i] = new scrollerobj('dynPage'+i'divScroller1');
        
pages[i].moveTo(0,0);
    }
    
bw.opacity = ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-) || bw.ns6
    
if (bw.ie5||bw.ie6 && !bw.macpages[0].css.filter'blendTrans(duration=0.6)'// Preloads the windows filters.
    
    
if (transitionOnloadactivateContinue(0);
    else{
        
activePage pages[0];
        
activePage.showIt();
    }
    if (
bw.ie) for(var i=0;i<document.links.length;i++) document.links[i].onfocus=document.links[i].blur;
    
pageslidefadeLoaded 1;
}
if(
bw.bw && !pageslidefadeLoadedonload initPageSlideFade
poi, nella pagina, sono presenti una serie di div:
Codice PHP:
<div id="dynPage0" class="dynPage"></div
numerati progressivamente, ed a loro volta contenuti nel div:
Codice PHP:
<div id="divScroller1"></div
Come ho detto, il caricamento avviene correttamente, è solo lo scroll che non funziona più, in quei casi specifici. E questo benchè il relativo div con id dynPageX sia presente sulla pagina, ed indifferentemente che questo div sia vuoto o meno, prima di ricevere il nuovo testo.
HELP!!!!