Pagina scorrevole in html statico

[adone79]

Probabilmente è una domanda banale , ma sono abbastanza arruginito in materia.

E' possibile ottenere in html statico e (possibilmente) senza ricorrere ad un frame centrale , lo scorrimento mediante due pulsanti del testo come in questa pagina?

Grazie.

[pierofix]

Dovresti usare javascript: prova a chiedere nel forum di Scripting.

[sms]

non sto rispondendo alla tua domanda.
ti voglio solo fare riflettere.
quella pagina per fare quell'effetto utilizza tutto questo codice

<script language="JavaScript" type="text/JavaScript">
<!--

function P7_Snap() { //v2.62 by PVII
  var x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,args=P7_Snap.arguments;a=parseInt(a);
  for (k=0; k<(args.length-3); k+=4)
   if ((g=MM_findObj(args[k]))!=null) {
    el=eval(MM_findObj(args[k+1]));
    a=parseInt(args[k+2]);b=parseInt(args[k+3]);
    x=0;y=0;ox=0;oy=0;p="";tx=1;da="document.all['"+args[k]+"']";
    if(document.getElementById) {
     d="document.getElementsByName('"+args[k]+"')[0]";
     if(!eval(d)) {d="document.getElementById('"+args[k]+"')";if(!eval(d)) {d=da;}}
    }else if(document.all) {d=da;} 
    if (document.all || document.getElementById) {
     while (tx==1) {p+=".offsetParent";
      if(eval(d+p)) {x+=parseInt(eval(d+p+".offsetLeft"));y+=parseInt(eval(d+p+".offsetTop"));
      }else{tx=0;}}
     ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);var tw=x+ox+y+oy;
     if(tw==0 || (navigator.appVersion.indexOf("MSIE 4")>-1 && navigator.appVersion.indexOf("Mac")>-1)) {
      ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top);
      }else{var w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;
      a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<1000)?0:b;
      x=document.body.scrollLeft + event.clientX + bx;
      y=document.body.scrollTop + event.clientY;}}
   }else if (document.layers) {x=g.x;y=g.y;var q0=document.layers,dd="";
    for(var s=0;s<q0.length;s++) {dd='document.'+q0[s].name;
     if(eval(dd+'.document.'+args[k])) {x+=eval(dd+'.left');y+=eval(dd+'.top');break;}}}
   if(el) {e=(document.layers)?el:el.style;
   var xx=parseInt(x+ox+a),yy=parseInt(y+oy+b);
   if(navigator.appName=="Netscape" && parseInt(navigator.appVersion)>4){xx+="px";yy+="px";}
   if(navigator.appVersion.indexOf("MSIE 5")>-1 && navigator.appVersion.indexOf("Mac")>-1){
    xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin);
    xx+="px";yy+="px";}e.left=xx;e.top=yy;}}
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function P7_setScroller(a,b,x,y) { //v2.9 by PVII
 var g,d,dd,w,ww,pa="";
 if((parseInt(navigator.appVersion)>4 || navigator.userAgent.indexOf("MSIE")>-1)&& navigator.userAgent.indexOf("Opera")==-1){pa="px";}
 if((g=MM_findObj(a))!=null && (d=MM_findObj(b))!=null){
  if(g.p7Scroll){if((w=MM_findObj(g.p7Scroll))!=null){
   ww=(document.layers)?w:w.style;ww.visibility="hidden";}}
 g.p7Scroll=b;dd=(document.layers)?d:d.style;dd.left=parseInt(x)+pa;
 dd.top=parseInt(y)+pa;dd.visibility="visible";g.p7sCycle=0;
 if(document.layers){g.p7sTop=g.clip.top;g.p7sBot=g.clip.bottom;
  g.p7sRight=g.clip.right;g.p7sLeft=g.clip.left;g.p7sStartTop=parseInt(y);g.p7sStartLeft=parseInt(x);
 }else if(g.style.clip){var tc=g.style.clip;var j=tc.indexOf("(");
  tc=tc.substring(j+1,tc.length-1);var tr=tc.split(" ");
  if(tc.length < 1){tr[0]=0;tr[3]=0;tr[2]=g.style.pixelHeight;tr[1]=g.style.pixelWidth;}
  g.p7sTop=parseInt(tr[0]);g.p7sRight=parseInt(tr[1]);g.p7sBot=parseInt(tr[2]);
  g.p7sLeft=parseInt(tr[3]);g.p7sStartTop=parseInt(y);g.p7sStartLeft=parseInt(x);
 }else{g.p7sTop=0;g.p7sRight=g.offsetWidth;g.p7sBot=g.offsetHeight;
  g.p7sLeft=0;g.p7sStartTop=parseInt(y);g.p7sStartLeft=parseInt(x);}}
  g.toMove=true;
}

function P7_moveScroll(co,md,op,dy,cy) { //v2.9 by PVII
 var g,d,dd,x,y,h,w,tt,ff,m=false,pa="";
 op=parseInt(op);cy=parseInt(cy);dy=parseInt(dy);
 if((parseInt(navigator.appVersion)>4 || navigator.userAgent.indexOf("MSIE")>-1)&& navigator.userAgent.indexOf("Opera")==-1){pa="px";}
 if((g=MM_findObj(co))==null){return;}
 if((d=MM_findObj(g.p7Scroll))==null){return;}
 var sp=parseInt(sp=g.P7Ssp),fr=parseInt(g.P7Sfr),ff=fr;
 if(op==2){g.p7sCycle=0;g.p7sCycDy=(dy>0)?dy:g.p7sCycDy;dy=0;op=3;}
 if(op==3){g.p7sCycle+=sp;ff=fr;if(parseInt(g.p7sCycle)>cy){
  op=2;g.p7sCycle=0;ff=g.p7sCycDy;}}g.P7Sop=op;if(dy>0){ff=dy;}
 var ti="g.p7Magic=setTimeout(\"P7_moveScroll('"+co+"','"+md+"',"+op+",0,"+cy+")\","+ff+")";
 if(op==2 || dy>0){clearTimeout(g.p7Magic);eval(ti);return;}
 dd=(document.layers)?d:d.style;x=parseInt(dd.left);y=parseInt(dd.top);
 if(document.all || document.getElementById){
  h=parseInt(d.offsetHeight);w=parseInt(d.offsetWidth);
  if(!h){h=parseInt(d.style.pixelHeight);w=parseInt(d.style.pixelWidth);}
 }else if(document.layers){h=parseInt(d.clip.height);w=parseInt(d.clip.width);}
 var st=0,rStart=parseInt(g.p7sStartLeft),tStart=parseInt(g.p7sStartTop);g.p7sH=h;g.p7sW=w;
 if(md=="Down"){tt=y-sp;st=parseInt(g.p7sBot)-h-tStart;
  if(tStart<0 && tt<tStart){dd.top=tStart+pa;
  }else if(tStart>=0 && tt<st){dd.top=st+pa;}else{dd.top=tt+pa;m=true;}}
 if(md=="Up"){tt=sp+y;var rEnd=tStart+h;if(tStart<0 && tt>rEnd){dd.top=rEnd+pa;
  }else if(tStart>=0 && tt>tStart){dd.top=tStart+pa;}else{dd.top=tt+pa;m=true;}}
 if(md=="Right"){tt=x-sp;st=parseInt(g.p7sRight)-w-rStart;
  if(rStart<0 && tt<rStart){dd.left=rStart+pa;
  }else if (rStart>=0 && tt<st){dd.left=st+pa;}else{dd.left=tt+pa;m=true;}}
 if(md=="Left"){tt=x+sp;var rEnd=rStart+w;if(rStart<0 && tt>rEnd){dd.left=rEnd+pa;
  }else if (rStart>=0 && tt>rStart){dd.left=rStart+pa;}else{dd.left=tt+pa;m=true;}}
 if(m && g.toMove){eval(ti);}else{if(g.P7Sflip==1){clearTimeout(g.p7Magic);var tj=0;
  eval("g.p7Magic=setTimeout(\"P7_runScroller('"+co+"','Reverse','Medium',0,0,0,1)\","+tj+")");
 }else{if(op>0 && g.toMove){
  g.p7sCycle=0;dd.top=g.p7sStartTop+pa;dd.left=g.p7sStartLeft+pa;eval(ti);}}}
}

function P7_runScroller(co,md,spd,op,dy,cy,flp) { //v2.9 by PVII
 var g,d,dd,rl=0;rt=0;pa='',sp=2,fr=10,slw=true,kl=true;
 if((parseInt(navigator.appVersion)>4 || navigator.userAgent.indexOf("MSIE")>-1)&& navigator.userAgent.indexOf("Opera")==-1){pa="px";}
 if(navigator.userAgent.indexOf("NT")>-1 || navigator.userAgent.indexOf("Windows 2000")>-1 ){slw=false;}
 if((g=MM_findObj(co))!=null){if(g.p7Scroll){
 if((d=MM_findObj(g.p7Scroll))!=null){dd=(document.layers)?d:d.style;
 if(md=="Resume" && g.P7Sspd){spd=g.P7Sspd;md=g.P7Smd;op=g.P7Sop;dy=0;cy=g.P7Scy;flp=g.P7Sflip;kl=false;}
 if(md=="Reverse" && g.P7Sspd){spd=g.P7Sspd;md=g.P7Smd;op=g.P7Sop;flp=g.P7Sflip;dy=0;cy=g.P7Scy;kl=false;g.p7sCycle=0;
  if(g.P7Smd == "Down"){md="Up";if(g.P7Sop>0){g.p7sStartTop=g.p7sStartTop-g.p7sH;}}
  if(g.P7Smd == "Up"){md="Down";if(g.P7Sop>0){g.p7sStartTop=g.p7sStartTop+g.p7sH;}}
  if(g.P7Smd == "Left"){md="Right";if(g.P7Sop>0){g.p7sStartLeft=g.p7sStartLeft+g.p7sW;}}
  if(g.P7Smd == "Right"){md="Left";if(g.P7Sop>0){g.p7sStartLeft=g.p7sStartLeft-g.p7sW;}}}
 if(spd=="Slow"){sp=(slw)?2:1;fr=(slw)?40:30;
 }else if(spd=="Medium"){sp=(slw)?4:1;fr=(slw)?40:10;
 }else{sp=(slw)?8:4;fr=(slw)?40:10;}
 if(md=="Stop"){g.toMove=false;clearTimeout(g.p7Magic);}else if(md=="Reset"){
  g.toMove=false;dd.top=g.p7sStartTop+pa;dd.left=g.p7sStartLeft+pa;
 }else{if(kl){g.P7Ssp=sp;g.P7Sfr=fr;}if(md=="Speed"){return;}
  g.toMove=true;clearTimeout(g.p7Magic);
  g.P7Smd=md;g.P7Sspd=spd;g.P7Sop=op;g.P7Sdy=dy;g.P7Scy=cy;g.P7Sflip=flp;
  eval("P7_moveScroll('"+co+"','"+md+"',"+op+","+dy+","+cy+")");}}}}
}
//-->

</script>

da un'altra parte tutto questo codice

<script language="JavaScript" type="text/JavaScript">
<!--
//////////////      Script per Scrolling           /////////////

//////////////      Browsercheck           /////////////

function lib_bwcheck(){ 
	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")>-1 && this.dom && !this.opera5)?1:0; 
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && 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()

//////////////////////////////////////////////////////////////////////

/////////////            Per Netscape 4           //////////////////////

if(bw.ns4 || bw.ns6 ){ 
	scrX= innerWidth; scrY= innerHeight;
	onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }
}

////////////////////////////       ////////////////////

var speed = 30
var loop, timer

function makeScrollObj(obj,nest){

	nest=(!nest) ? "":'document.'+nest+'.'
	this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
  	this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
	this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
	this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
	this.up=goUp;
	this.down=goDown;
	this.moveIt=moveIt; 
	this.y= bw.ns4?this.css.top:bw.opera5?this.css.pixelTop:this.el.offsetTop;
    this.obj = obj + "Object"
    eval(this.obj + "=this")
    return this
}

var px = bw.ns4||window.opera?"":"px";

function moveIt(x,y){
	this.x = x
	this.y = y
	this.css.left = this.x+px
	this.css.top = this.y+px
}

function goDown(move){

// per far si che non si fermi appena finite le news toglier pixel a oCont.clipHeight //
	//if (this.y>-this.scrollHeight+oCont.clipHeight-5){//
	if (this.y>-this.scrollHeight+150){
		this.moveIt(0,this.y-move)
			if (loop) setTimeout(this.obj+".down("+move+")",speed)
	}
}

function goUp(move){
	if (this.y<0){
		this.moveIt(0,this.y-move)
		if (loop) setTimeout(this.obj+".up("+move+")",speed)
	}
}

function scroll(speed){
	if (scrolltextLoaded){
		loop = true;
		if (speed>0) oScroll.down(speed)
		else oScroll.up(speed)
	}
}

function noScroll(){
	loop = false
	if (timer) clearTimeout(timer)
}

var scrolltextLoaded = false

function scrolltextInit(){

	oCont = new makeScrollObj('s2')
	oScroll = new makeScrollObj('s1','s2')

	oScroll.moveIt(0,0)

	oCont.css.visibility = 'visible'
	scrolltextLoaded = true
}

occhio. non ti sto dicendo di copiarli (potrebbero essere protetti da copyleft).. ti sto solo dicendo che secondo me il gioco non vale la candela.

[pierofix]

Originariamente inviato da sms
il gioco non vale la candela.

Sottoscrivo in pieno.

Oltre ad un uso improprio o quantomeno troppo macchinoso e pesante di javascript, i problemi di accessibilità che potrebbero sorgere sarebbero gravi, soprattutto se non si mette a disposizione una barra di scorrimento normale in caso di js disattivato.

Insomma, lasciamo perdere certi effetti speciali e concentriamoci di più sull'essenza del nostro messaggio e su come renderlo il più fruibile e accessibile possibile.

[adone79]

Infatti non ho alcuna intenzione di ricorrere a js , perché per il sito che sto realizzando la leggibilità da parte dei motori di ricerca è fondamentale.

Ho però comunque bisogno di qualcosa di simile , per poter utilizzare il template standard creato per la home page : se gli date un'occhiata vedete che lo spazio nel corpo centrale della pagine è limitato. Ci sono le cornici orizzontali a fondo pagina e quando il contenuto è troppo mi sballa tutta la pagina.

Ora provo ad inserire un frame centrale , non avrò i pulsanti ma dovrò accontentarmi di una barra di scorrimento verticale.

[pierofix]

Puoi sempre ricorrere ad un div+overflow. Prova a fare una ricerca sul forum di CSS con la chiave "overflow".