[JS] script cross-browser per scrolling

**secan** · 10-08-2006, 12:00

Buon giorno,
mi occorrerebbe il vostro aiuto per risolvere un problema con lo scorrimento, tramite codice JavaScript, di un layer (<div></div>).
Attualmente il codice funziona con MSIE ed Opera ma non con NN e FireFox, però non riesco a capirne il motivo.
Riporto di seguito i tre files interessati e vi ringrazio fin da subito per il vostro gentile interessamento.

Saverio

PAGINA XHTML ("index.html"):

codice:

<?xml version='1.0'?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Alberto Meda | Designer</title>
  <link rel="stylesheet" type="text/css" href="screen.css" />
  <script type="text/javascript" src="prodScroll.js"></script>
</head>

<body>
  
  <div id="div_header">
    <h1 id="titolo">[img][img_src][/img]</h1>
    <ul id="navigazione">[*][img][img1_src][/img][*][img][img1_src][/img][*][img][img1_src][/img][*][img][img_src][/img][*][img][img1_src][/img][/list]
  </div>
  

  
  <div id="div_body">
    
    <div class="sub_navigation">
      [img][img_src][/img]
      [img][img_src][/img]
    </div>

    
    <div id="boxLayer">
      <div id="contentLayer" style="width: 935px;">
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
      </div>
    </div>
  </div>
  

  
  <div id="div_footer">
    alberto meda &copy; tutti i diritti risevati crediti english
  </div>
  

</body>

</html>

FOGLIO DI STILE ("screen.css"):

codice:

/* CSS Document */

body {
  border: 0px none #ffffff;
  margin: 0px;
  padding: 140px auto;
  background-color: #ffffff;
  color: #666666;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
}

img {
  border: 0px none #ffffff;
  margin: 0px;
  padding: 0px;
}

h1 {
  font-size: 32px;
  font-weight: bold;
  color: #666666;
}

h2 {
  font-size: 12px;
  font-weight: bold;
  color: #78bde8;
}

h3 {
  font-size: 12px;
  font-weight: bold;
  color: #666666;
}

a:link {
  color: #666666;
  text-decoration: none;
}

a:visited {
  color: #666666;
  text-decoration: none;
}

a:hover {
  color: #b1b1b1;
  text-decoration: none;
}

a:active {
  color: #666666;
  text-decoration: none;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.undeline {
  text-decoration: underline;
}

.blue {
  color: #78bde8;
}

ul.masked {
  border: 0px none #ffffff;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

li.masked {
  border: 0px none #ffffff;
  margin: 0px;
  padding: 0px;
  text-indent: 0px;
}


/* === HEADER === */
#div_header {
  width: 680px;
  border: 0px none #ffffff;
  margin: 140px auto 30px auto;
  padding: 0px;
  background-color: #ffffff;
  color: #666666;
  text-align: right;
}

#titolo {
  border: 0px none #ffffff;
  margin: 0px auto 0px 0px;
  padding: 0px;
  color: #666666;
  font-size: 32px;
  font-weight: bold;
  font-family: "times new roman", times, serif;
  display: inline;
  float: left;
}

#navigazione {
  border: 0px none #ffffff;
  margin: 0px 0px 0px auto;
  padding: 0px;
  font-size: 12px;
  font-weight: bold;
  display: inline;
}

#navigazione li {
  border: 0px none #ffffff;
  margin: 0px;
  padding: 0px 3px;
  display: inline;
}

a.nav:link {
  color: #666666;
  font-weight: bold;
  text-decoration: none;
}

a.nav:visited {
  color: #666666;
  font-weight: bold;
  text-decoration: none;
}

a.nav:hover {
  color: #b1b1b1;
  font-weight: bold;
  text-decoration: none;
}

a.nav:active {
  color: #666666;
  font-weight: bold;
  text-decoration: none;
}


/* === BODY === */
#div_body {
  width: 680px;
  height: 400px;
  border: 0px none #00ff00;
  margin: 30px auto 10px auto;
  padding: 3px 0px;
  background-color: #ffffff;
  color: #666666;
  text-align: justify;
  vertical-align: top;
  clear: both;
}

#boxLayer {
  width: 680px;
  height: 106px;
  border: 0px none #ffffff;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

#contentLayer {
  position: relative;
  left: 0px;
  top: 0px;
  height: 106px;
  border: 0px none #ffffff;
  margin: 0px;
  padding: 0px;
  background-color: #ffffff;
  color: #666666;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}

div.sub_navigation {
  width: 680px;
  border: 0px none #ffffff;
  margin: 0px;
  padding: 0px auto;
  text-align: center;
}

div.left_img {
  width: 340px;
  height: 400px;
  border: 0px none #ffffff;
  margin: 0px;
  padding: 0px;
}

div.right_txt {
  width: 330px;
  height: 340px;
  overflow: auto;
  border: 0px none #ffffff;
  margin: 0px;
  padding: 0px 3px;
  float: right;
}


/* === FOOTER === */
#div_footer {
  width: 680px;
  border: 0px none #ffffff;
  margin: 10px auto 140px auto;
  padding: 0px;
  background-color: #ffffff;
  color: #666666;
  font-size: 10px;
  text-align: right;
}

a.left_bar {
  border-top: 0px none #ffffff;
  border-right: 0px none #ffffff;
  border-bottom: 0px none #ffffff;
  border-left: 1px solid #666666;
  margin: 0px 0px 0px 5px;
  padding: 0px 0px 0px 5px;
}

CODICE JAVASCRIP ("prodScroll.js"):

codice:

// starts the scrolling

function startProdScroll(dir, spd, loop) {
  loop = true;
  direction = "left";
  speed = 10;
  scrolltimer = null;
	
  if (document.layers) {
    var page = eval(document.contentLayer);
  } else {
    if (document.getElementById) {
      var page = eval(document.getElementById('contentLayer').style);
    } else {
      if (document.all) {
        var page = eval(document.all.contentLayer.style);
      }
    }
  }
	
  direction = dir;
  speed = parseInt(spd);
  y_pos = parseInt(page.left);
  wmax = parseInt(page.width);
  y_limit = -(parseInt(wmax - 680));
	
  if(isNaN(y_pos)) {
    y_pos = 0;
  }
	
  if (loop == true) {
    if (direction == "left") {
      if (y_pos < 0) {
        page.left = (y_pos + speed);
      } else {
        page.left = 0;
      }
    }
		
    if (direction == "right") {
      if ((y_pos > y_limit) && (y_pos <= 0)) {
        page.left = (y_pos - speed);
      } else {
        page.left = y_limit;
      }
    }
  }
		
  scrolltimer = setTimeout("startProdScroll(direction,speed)", 1);
}

// stops the scrolling

function stopProdScroll() {
  loop = false;
  clearTimeout(scrolltimer);
}

**secan** · 11-08-2006, 09:48

...up...
Qualcuno ha qualche suggerimento?

Grazie,
Saverio

**secan** · 21-08-2006, 10:09

Ok, ci riprovo un'ultima volta...
Scusate per l'insistenza ed il disturbo ma mi sono arenato su questo problema ed avrei dovuto terminare il sito già qualche giorno fa...

Grazie ancora,
Saverio

**andr3a** · 21-08-2006, 10:31

http://www.devpro.it/javascript_id_54.html ? :master:

**secan** · 21-08-2006, 10:50

Grazie Andr3a,
oggi provo ad utilizzare il codice che mi hai segnalato e vedo se finalmente riesco a risolvere il mio problema (anche se ancora non capisco il motivo per cui non funzioni il codice che avevo scritto io... :master: ).
Ti (vi) tengo aggiornati sul risultato.

Grazie ancora,
Saverio

**secan** · 21-08-2006, 12:02

Originariamente inviato da andr3a
http://www.devpro.it/javascript_id_54.html ? :master:

Originariamente inviato da secan
...cut...
Ti (vi) tengo aggiornati sul risultato.

Purtroppo sembra che non funzioni: IE da un errore JavaScrip ("Object doesn't support this property or method") e non scorre i contenuti, FF non segnala alcun errore ma continua a non scorrere i contenuti

Ho copiato il file che mi hai indicato, rinominandolo "PageScroller.js" ma senza apportare alcun'altra modifica; poi ho cambiato una delle pagine incriminate come segue:

codice:

<?xml version='1.0'?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Alberto Meda | Designer</title>
  <link rel="stylesheet" type="text/css" href="screen.css" />
  <script type="text/javascript" src="PageScroller.js"></script>
  <script type="text/javascript" src="PageScroller.js">
    var myScroller = new PageScroller();
  </script> 
</head>

<body>
  
  <div id="div_header">
    <h1 id="titolo">[img][img_src][/img]</h1>
    <ul id="navigazione">[*][img][img1_src][/img][*][img][img1_src][/img][*][img][img1_src][/img][*][img][img_src][/img][*][img][img1_src][/img][/list]
  </div>
  

  
  <div id="div_body">
    
    <div class="sub_navigation">
      [img][img_src][/img]
      [img][img_src][/img]
    </div>

    
    <div id="boxLayer">
      <div id="contentLayer" style="width: 935px;">
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
        [img][img1_src][/img]
      </div>
    </div>
  </div>
  

  
  <div id="div_footer">
    alberto meda &copy; tutti i diritti risevati crediti english
  </div>
  

</body>

</html>

... provando ad indicare l'ID del layer (<div></div>) da scorrere sia fra apici singoli che senza apici.

A questo punto ci apisco sempre meno...

Grazie comunque per il tuo gentile interessamento.
Saverio

**andr3a** · 21-08-2006, 12:15

**secan** · 21-08-2006, 12:31

Scusa, ho fatto un errore io con il cut&paste, nel codice non ho messo l'attributo "src"... temo proprio che il problema sia legato all'uso dei <div></div> anziché gli <iframe></iframe>.
Sob... sono di nuovo al punto di partenza

Saverio

**COMANDANTE SPACE** · 21-08-2006, 18:14

ciao,
quando setti via javascript la proprietà left, ricordati che devi scrivere ad esempio tuolayer.style.left=10+"px"; se dimentichi di aggiungere la stringa "px" non funziona più niente.

P.s. ma a che ti serve eval()?

**secan** · 22-08-2006, 10:31

Originariamente inviato da COMANDANTE SPACE
ciao,
quando setti via javascript la proprietà left, ricordati che devi scrivere ad esempio tuolayer.style.left=10+"px"; se dimentichi di aggiungere la stringa "px" non funziona più niente.

Ok, grazie per il suggerimento: ora ci provo e vedo se riesco a farlo funzionare.

Originariamente inviato da COMANDANTE SPACE
P.s. ma a che ti serve eval()?

Ehmmm... boh!... Mi sono ritrovato a dover "rifare" in PHP/MySQL un sito che precedentemente era in HTML e, fra i vari "pezzi di codice" c'era anche una funzione per lo scrolling di iFrames... dato che uso pochissimo JavaScript e non lo conosco alla perfezione, sono partito da quella funzione per rifarne un'altra che funzionasse con i layers.

Discussione: [JS] script cross-browser per scrolling

Strumenti discussione

Ricerca discussione

Visualizza

[JS] script cross-browser per scrolling

Permessi di invio