11540 sujets

JavaScript, DOM et API Web HTML5

Faire défiler du texte de bas en haut dans une div

Bonjour,

Alors comme à chaque fois que je viens sur alsacreation j'ai un problème qui me bloque complètement.

J'aimerai faire défiler du texte contenu dans une div de bas en haut en boucle sans fin. Suite a quelques recherches sur le net j'ai trouver une solution en JS, mais je ne la comprend pas et en plus elle ne marche pas. Voici le code pour ce qui le veulent.


<html>
<head>
<STYLE TYPE="text/css">BODY {scrollbar-face-color: #0069B3; scrollbar-shadow-color: #000000;scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #0069B3; scrollbar-arrow-color: #FFCC00;}</STYLE>
<STYLE TYPE="text/css">
<!--
A {
color:#FFCC00;
text-decoration:underline;
}
A:hover {
color:#FFFFFF;
text-decoration:none;
}
-->
</STYLE>
</head>
<body bgcolor="#0069B3">
<center>

test

<script language="JavaScript1.2">
<!--
var marqueewidth=300
var marqueeheight=300
var speed=3
var marqueecontents='<center><font face="Comic Sans MS, verdana" color="#000C00" size="6"><strong>Bienvenue sur <a href="http://www.easy-script.com">Easyscript</a> !!!</font></center>'
if (document.all)
document.write('<marquee direction="up" scrollAmount="3" style="width:300;height:300;">Ton Texte</marquee>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}

function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write(marqueecontents)
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.height
scrollit()
}

function scrollit(){
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.top-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.top=marqueeheight
scrollit()
}
}

window.onload=regenerate2
//-->
</script>
</center>
</body>
</html>


Voila, donc je voudrai savoir s'il y en a parmi vous qu'il pourrai m'aider...

Cordialement
La balise marquee qu'utilise ton script est ancestrale et ne fonctionne que sous IE7-, pour créer ce genre d'effet de défilement il te faudra une librairie d'animations : jQuery ou Mootools, pour citer les plus simple.

A noter que les défilements sont pour la plupart intrusifs et souvent déconseillés.
Modifié par Alpher (18 Jun 2009 - 17:07)
Quel type d'effet je doit choisir pour le faire avec la librairie jQuery ??? Parce que d'après ce que je sais et que j'ai vu, on peut faire quand meme beaucoup de choses avec cette librairie...
Bonsoir,
J'ai une problèmatique similaire sur ce défilement. J'ai installé un script qui au demeurant fonctionne :

(voir : http://maquettefebus.ovh.org/projet2/index.html)

Seulement, cela ne me convient pas pour plusieurs raisons :

- si on isole le script (intégré ds la page html),il ne fonctionne plus,
- les propriétés onMouseout/onMouseover : ne sont pas bien perçues en validation W3C :
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">

D'autre part, qu'entendez-vous en terme de sécurité par "intrusif" ?

Merci de votre réponse.
Cordialement,
Bouzette
Smiley smile
Bonsoir LUST,

A quoi sert ton : 
//if (document.all)


Si on l'enlève, ça a l'air de bien marcher aussi bien sous FF que sous IE8.

Cordialement,
Sylvain Smiley biggrin
Je regarde ca ce week end si j'ai le temps...
Mais déjà merci a tout ce qui on répondu.
sylvaindelepierre a écrit :
Bonsoir LUST,

A quoi sert ton : 
//if (document.all)


Si on l'enlève, ça a l'air de bien marcher aussi bien sous FF que sous IE8.

Cordialement,
Sylvain Smiley biggrin





Merci Sylvain pour ton aide... COmme ca tout fonctionne et en plus c'est valide.

<!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="fr" lang="fr">
	<head>
        <title>Test</title>
    </head>
    <body>

        <script type="text/javascript">
            <!--
            var marqueewidth=300
            var marqueeheight=300
            var speed=3
            var marqueecontents='<center><font face="Comic Sans MS, verdana" color="#000C00" size="6"><strong>Bienvenue sur <a href="http://www.easy-script.com">Easyscript</a> !!!</font></center>'

            document.write('<marquee direction="up" scrollAmount="3" style="width:300;height:300;">Ton Texte</marquee>')

            function regenerate(){
            window.location.reload()
            }
            function regenerate2(){
            if (document.layers){
            setTimeout("window.onresize=regenerate",450)
            intializemarquee()
            }
            }

            function intializemarquee(){
            document.cmarquee01.document.cmarquee02.document.write(marqueecontents)
            document.cmarquee01.document.cmarquee02.document.close()
            thelength=document.cmarquee01.document.cmarquee02.document.height
            scrollit()
            }

            function scrollit(){
            if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
            document.cmarquee01.document.cmarquee02.top-=speed
            setTimeout("scrollit()",100)
            }
            else{
            document.cmarquee01.document.cmarquee02.top=marqueeheight
            scrollit()
            }
            }

            window.onload=regenerate2
            //-->
        </script>
    </body>
</html>



Pour la conditionnel je ne sais pas a quoi elle pouvais servir car j'ai trouver ce script sur internet... Maintenant j'aurais aimé savoir si ce JS n'est pas obsolète... Et s'il n'y en a pas un qui serrai mieux. Bien que le défilement fonctionne sous IE7, FF, GoogleChrome, Safari et Opéra.

Par contre je ne voie pas comment faire pour que le défilement s'arrête lorsque je passe dessus avec ma souris... Quelqu'un aurait une idée pour m'aider ???
Modifié par Lust (22 Jun 2009 - 11:28)
Encore une question sur ce sujet... S'il est possible de me trouver une reponse se reait mais alors vraiment sympa.

En faite dans ma liste j'aimerai intégrer un flux RSS. L'affichage se fait actuellement dans une liste mais je souhaite qu'elle défile de bas en haut. Tout fonctionne très bien sur FF, mais sous IE je n'arrive pas a comprendre mon erreur.

Voici mon code :

<script type="text/javascript">
<!--
var speed=1

<?php
    require_once("data/php/feedparser.php");
?>
                                
document.write('<marquee direction="up" scrollAmount="3" ><?php echo FeedParser("http://rss.feedsportal.com/c/499/f/413829/index.rss", 5);?></marquee>')

function regenerate(){
    window.location.reload()
}

function regenerate2(){
    if (document.layers){
    setTimeout("window.onresize=regenerate",450)
    intializemarquee()
    }
}

function intializemarquee(){
    document.cmarquee01.document.cmarquee02.document.write(marqueecontents)
    document.cmarquee01.document.cmarquee02.document.close()
    
    thelength=document.cmarquee01.document.cmarquee02.document.height
    scrollit()
}

function scrollit(){
    if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
        document.cmarquee01.document.cmarquee02.top-=speed
    setTimeout("scrollit()",100)
    }
    else{
        document.cmarquee01.document.cmarquee02.top=marqueeheight
        scrollit()
    }
}

window.onload=regenerate2
//-->
</script>



Personnellement je pense que c'est la deuxieme partie de mon php qui fait foiré le JS sur IE... Je continue de chercher, et je met mes avancement en ligne quand j'en ai.

Si quelqu'un pouvait m'eclairer de sont savoir cela m'aiderai énormément.

Merci d'avance.
Sujet clos
Aller à