Problème texte défilant aux normes W3C

LordVizor Messages postés 12 Date d'inscription lundi 25 juin 2007 Statut Membre Dernière intervention 26 février 2010 - 17 août 2008 à 18:20
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 22 août 2008 à 15:37
Bonjour à tous, je vous solicite car je suis face à un problème. En effet, j'ai décidé de mettre mon site aux normes W3C et depuis mon javascript de texte défilant vertical ne fonctionne plus correctement. J'aimerais que ce javascript marche correctement sous Firefox et IE mais la...je sèche. Etant donné que je suis débutant en javascript, pouvez vous m'aider?

Quand j'ajoute le doctype suivant le script bug:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   

Le script est disponible à cette page : http://www.pagon.org/test2/texte_defilant.html

Voici le code de ma page:

<head>

<link href="creation-site-internet-marchand-loire-atlantique_fichiers/gabarits.css" rel="stylesheet" type="text/css">
<style type="text/css">
.ejs_scroll {font-size:11px;line-height:11px;font-family:Arial;color: #333333; line-height: 15px;}
.ejs_scroll a{color:#333333; text-decoration:none;}
.ejs_scroll a:hover{color:#44606d; text-decoration: underline;}

</style></head>

                    ,
                    ,
   
    ----

                    ,
        <!-- DEBUT DU SCRIPT -->

<script type="text/javascript">

var ejs_scroll_largeur_1 = 126;
var ejs_scroll_hauteur_1 = 51;
var ejs_scroll_bgcolor_1 = '';
/* Mettre ici le chemin de l'image de fond */
var ejs_scroll_background_1 = "";
/* Mettre ici le temps en secondes */
var ejs_scroll_pause_seconde_1 = 4;

var ejs_scroll_message_1 = new Array;

ejs_scroll_message_1[0]='Ven 32 Mars / 21h
> Amérique du Nord';
ejs_scroll_message_1[1]='Sam 33 Mars / 20h30
> Europe';
ejs_scroll_message_1[2]='Dim 34 Mars / 21h
> Océanie';
ejs_scroll_message_1[3]='Lun 35 Mars / 20h30
> Moyen-Orient';
function d_1(texte)
    {
    document.write(texte);
    }

d_1('
');
d_1('
');
d_1('
'+ejs_scroll_message_1[0]+'
');
d_1('
'+ejs_scroll_message_1[1]+'
');
d_1('

');

var ejs_scroll_mode_1 =1;
var ejs_scroll_actuel_1 = 0;

function ejs_scroll_start_1()
    {
    if(ejs_scroll_mode_1 == 1)
        {
        ejs_scroller_haut_1 = "ejs_scroller_1_1";
        ejs_scroller_bas_1 = "ejs_scroller_2_1";
        ejs_scroll_mode_1 = 0;
        }
    else
        {
        ejs_scroller_bas_1 = "ejs_scroller_1_1";
        ejs_scroller_haut_1 = "ejs_scroller_2_1";
        ejs_scroll_mode_1 = 1;
        }
    ejs_scroll_nb_message_1 = ejs_scroll_message_1.length-1;
    if(ejs_scroll_actuel_1 == ejs_scroll_nb_message_1)
        ejs_scroll_suivant_1 = 0;
    else
        ejs_scroll_suivant_1 = ejs_scroll_actuel_1+1;
    if(document.getElementById)
        document.getElementById(ejs_scroller_bas_1).innerHTML = ejs_scroll_message_1[ejs_scroll_suivant_1];
    ejs_scroll_top_1 = 0;
    if(document.getElementById)
        setTimeout("ejs_scroll_action_1()",ejs_scroll_pause_seconde_1*1000)
    }

function ejs_scroll_action_1()
    {
    ejs_scroll_top_1 -= 1;
    document.getElementById(ejs_scroller_haut_1).style.top = ejs_scroll_top_1;
    document.getElementById(ejs_scroller_bas_1).style.top = ejs_scroll_top_1+ejs_scroll_hauteur_1;
    if((ejs_scroll_top_1+ejs_scroll_hauteur_1) > 0)
        setTimeout("ejs_scroll_action_1()",10)
    else
        ejs_scroll_stop_1()
    }

function ejs_scroll_stop_1()
    {
    ejs_scroll_actuel_1 = ejs_scroll_suivant_1;
    ejs_scroll_start_1()
    }

window.onload = function()     {    ejs_scroll_start_1(); ejs_scroll_start_2(); }
</script>
 ,
   

    ----

                    ,
                    ,

   

                    ,
                    ,
   
    ----

                    ,
        <!-- DEBUT DU SCRIPT -->

<script type="text/javascript">

var ejs_scroll_largeur_2 = 126;
var ejs_scroll_hauteur_2 = 51;
var ejs_scroll_bgcolor_2 = '';
/* Mettre ici le chemin de l'image de fond */
var ejs_scroll_background_2 = "";
/* Mettre ici le temps en secondes */
var ejs_scroll_pause_seconde_2 = 4;

var ejs_scroll_message_2 = new Array;

ejs_scroll_message_2[0]='[Background]
III) Les factions - Les Vampires';
ejs_scroll_message_2[1]='[Background]
III) Les factions - Les Lycans';
ejs_scroll_message_2[2]='[Background]
II) Histoire du P.A.G.O.N';
ejs_scroll_message_2[3]='[Background]
I) Les enjeux';
function d_2(texte)
    {
    document.write(texte);
    }

d_2('
');
d_2('
');
d_2('
'+ejs_scroll_message_2[0]+'
');
d_2('
'+ejs_scroll_message_2[1]+'
');
d_2('

');

var ejs_scroll_mode_2 =1;
var ejs_scroll_actuel_2 = 0;

function ejs_scroll_start_2()
    {
    if(ejs_scroll_mode_2 == 1)
        {
        ejs_scroller_haut_2 = "ejs_scroller_1_2";
        ejs_scroller_bas_2 = "ejs_scroller_2_2";
        ejs_scroll_mode_2 = 0;
        }
    else
        {
        ejs_scroller_bas_2 = "ejs_scroller_1_2";
        ejs_scroller_haut_2 = "ejs_scroller_2_2";
        ejs_scroll_mode_2 = 1;
        }
    ejs_scroll_nb_message_2 = ejs_scroll_message_2.length-1;
    if(ejs_scroll_actuel_2 == ejs_scroll_nb_message_2)
        ejs_scroll_suivant_2 = 0;
    else
        ejs_scroll_suivant_2 = ejs_scroll_actuel_2+1;
    if(document.getElementById)
        document.getElementById(ejs_scroller_bas_2).innerHTML = ejs_scroll_message_2[ejs_scroll_suivant_2];
    ejs_scroll_top_2 = 0;
    if(document.getElementById)
        setTimeout("ejs_scroll_action_2()",ejs_scroll_pause_seconde_2*1000)
    }

function ejs_scroll_action_2()
    {
    ejs_scroll_top_2 -= 1;
    document.getElementById(ejs_scroller_haut_2).style.top = ejs_scroll_top_2;
    document.getElementById(ejs_scroller_bas_2).style.top = ejs_scroll_top_2+ejs_scroll_hauteur_2;
    if((ejs_scroll_top_2+ejs_scroll_hauteur_2) > 0)
        setTimeout("ejs_scroll_action_2()",10)
    else
        ejs_scroll_stop_2()
    }

function ejs_scroll_stop_2()
    {
    ejs_scroll_actuel_2 = ejs_scroll_suivant_2;
    ejs_scroll_start_2()
    }

</script>
 ,
   

    ----

                    ,
                    ,

   

</html>

11 réponses

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
18 août 2008 à 10:57
bonjour,

1° tu pourrais nous dire ce qui plante, non ?

    pas réellement vu moi...

2° ça fonctionnait avant tes modifs ?
    qu'as-tu modifié ?

    reviens en arrière ?

3° avec K-Meleon ( pas exemple ) :
Avertissement : Couleur attendue, mais « ; » trouvé.  Erreur d'analyse de la valeur pour la propriété « background-color ».  Déclaration abandonnée. Fichier source : http://www.pagon.org/test2/texte_defilant.html
 ----------
Avertissement : Erreur d'analyse de la valeur pour la propriété « padding-right ».  Déclaration abandonnée.
Fichier source : http://www.pagon.org/v1/templates/sky/sky.css     Ligne : 484
 ----------
Avertissement : Erreur d'analyse de la valeur pour la propriété « padding-left ».  Déclaration abandonnée.
Fichier source : http://www.pagon.org/v1/templates/sky/sky.css     Ligne : 485
 ----------
Avertissement : Erreur d'analyse de la valeur pour la propriété « width ».  Déclaration abandonnée.
Fichier source : http://www.pagon.org/v1/templates/sky/sky.css    Ligne : 523
...
4° :
FireFox
, regarder la "console d'erreurs"
Outils / Console d'erreurs
et mieux : télécharger mon Site] [M'écrire], <!--
0
LordVizor Messages postés 12 Date d'inscription lundi 25 juin 2007 Statut Membre Dernière intervention 26 février 2010
18 août 2008 à 11:07
Comme je l'ai précisé, j'ai juste rajouté mon doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   

Et la le problème est survenu.

Pour que vous visualisiez mieux le problème.

Voici le script sans le doctype, qui fonctionne très bien: http://www.pagon.org/test2/texte_defilant.html

Voici le script avec le doctype: http://www.pagon.org/test2/texte_defilant2.html

Voyez vous même, les caractères se chevauchent...le défilement n'est plus le même...

Je précise que j'ai essayé plusieurs doctypes mais rien n'y fait.
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
18 août 2008 à 12:31
ben oui.... regarde les erreurs générées  et rectifie d'abord.
CordialementBul[mon Site][M'écrire], <!--
0
LordVizor Messages postés 12 Date d'inscription lundi 25 juin 2007 Statut Membre Dernière intervention 26 février 2010
20 août 2008 à 14:59
Les erreurs ont été corrigées et çela ne change rien du tout sauf si j'enlève le doctype...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
21 août 2008 à 05:29
il en reste au moins 1 :
Avertissement : Couleur attendue, mais « ; » trouvé.  Erreur d'analyse de la valeur pour la propriété « background-color ».  Déclaration abandonnée.
Fichier Source : http://www.pagon.org/test2/texte_defilant.html     Ligne : 0

néanmoins... toujours pas compris ce qui ne fonctionne pas !
ça me semble correct....

Cordialement     Bul   [mon Site]  [M'écrire], <!--
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
21 août 2008 à 05:32
mais francjhement, dire qu'avec un ch'tiote balise marquee tout est réglé en 2 secondes
rien à développer en js, du pur html !
ah ! c'est vrai que les recommandations ( qui datent de 25 ans ) du W3C ne reconnaissent
toujours pas cette balise qui fonctionne avec tous les navigateurs... le siècle prochain peut-être...
Cordialement     Bul   [mon Site] [M'écrire], <!--
0
LordVizor Messages postés 12 Date d'inscription lundi 25 juin 2007 Statut Membre Dernière intervention 26 février 2010
21 août 2008 à 15:28
Franchement ça m'échappe ce problème...le javascript est impecable dès que j'enlève le doctype...c'est quand même étrange. arf.

Ou bien peut être que vous connaitriez un script du même genre, mieux compatible avec les normes W3C?
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
21 août 2008 à 15:46
j'ai fais un "menu défilant" c'est ici
un truc "facilement" (sic ) adaptable... mais aujourd'huije préfère <marquee>
c'est bien plus simple, sinon, des sources à ce propos doivent pulluler...
Cordialement          Bul     [mon Site]   [M'écrire], <!--
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
21 août 2008 à 23:20
Bonjour,
avec les DOCTYPEs ne pas oublier de mettre les unités aux
valeurs
exemple
var Obj =
document.getElementById('mon_div');
Obj.style.top = 100 +"px";


Sinon j'ai également commis une source, à voir 



[codes/MESSAGE-DEROULANT-AVEC-PAUSE_36667.aspx MESSAGE DÉROULANT AVEC PAUSE]
.
;O)
0
LordVizor Messages postés 12 Date d'inscription lundi 25 juin 2007 Statut Membre Dernière intervention 26 février 2010
22 août 2008 à 15:21
Merci pour ton aide PetoleTeam mais je suis débutant en javascript et mettre des unités aux valeurs...c'est un peu abstrait pour moi :D

Ceci étant, je vais y réfléchir merci ;)
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
22 août 2008 à 15:37
Bonjour,
exemple de fonction ou il faut ajouter
+"px"
function ejs_scroll_action_1()
    {

    ejs_scroll_top_1 -= 1;

    document.getElementById(ejs_scroller_haut_1).style.top =
ejs_scroll_top_1 +"px" ;

    document.getElementById(ejs_scroller_bas_1).style.top =
ejs_scroll_top_1+ejs_scroll_hauteur_1 +"px";

    if((ejs_scroll_top_1+ejs_scroll_hauteur_1) > 0)

        setTimeout("ejs_scroll_action_1()",10)
    else

        ejs_scroll_stop_1()
    }
;O)
0
Rejoignez-nous