CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 10:17:01

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Effets

> TEXTE DÉFILANT ( BOUTONS : ARRÊT - PAUSE - AVANT - ARRIÈRE ET FEUILLE DE STYLE ) ( À UPGRADER À VOLONTÉ )

TEXTE DÉFILANT ( BOUTONS : ARRÊT - PAUSE - AVANT - ARRIÈRE ET FEUILLE DE STYLE ) ( À UPGRADER À VOLONTÉ )

Information sur la source

Note :

5,83 / 10

Catégorie :Effets Classé sous :textedéfilant, défilement, slide Niveau :Initié Date de création :25/11/2004 Date de mise à jour :18/09/2007 03:00:57 Vu / téléchargé :16 285 / 1 009

Auteur : xloadx

Ecrire un message privé

Site perso

Commentaire sur cette source (10)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Un texte qui défile de bas en haut avec un bouton d'arrêt et un bouton continuer.......
Attention ce script ne fait pas réapparaitre le texte quand il est passé hors champ.
Portabilité et modifications effectuées ....

Visitez mon portail et n'hésitez pas à me donner des idées pour le modifier.....votre avis m'intéresse !!

http://debbog.free.fr/

Source

/*************************************/
/*** Intégration du javascript ***/
/*************************************/
var y = 0;
var minuteur = null;
var temps = 10;
//minuteur défilement en avant du texte
function transfert()
{
minuteur=setInterval('defil()',temps);
}
//minuteur défilement en arriere du texte
function transfertBis()
{
minuteur=setInterval('retourArriere()',temps);
}
function defil()
{
document.getElementById('texteDefil').style.top = y--;
document.getElementById('compteur').value = y;
}
//Retour en arriere du texte
function retourArriere()
{
document.getElementById('texteDefil').style.top = y++;
document.getElementById('compteur').value = y;
}
//Arret défilement du texte
function arretDefil()
{
clearInterval(minuteur);
minuteur=null;
y = 0;
document.getElementById('texteDefil').style.top = y;
document.getElementById('compteur').value = y;
}
function pause()
{
clearInterval(minuteur);
}
/*************************************/
/*** Intégration dans une page PHP ***/
/*************************************/
<?
echo'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Texte Defilant</title>
<meta name="robots" content="all">
<meta name="description" content="Texte Défilant">
<meta name="keywords" content="voir,défiler,slide">
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252;">
<meta http-equiv="Content-Language" content="fr">
<script language="javascript" type="text/javascript" src="textDef.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body style="overflow:hidden;background-color:white;" onload="window.status=\'Votre navigateur est: \'+navigator.appName">
<div style="width:600;float:top;padding:15px;">
<a href="http://validator.w3.org/check?uri=referer" target="_blank"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0" style="text-decoration:none;" >
</a>
</div>
<center>
<div id="Haut" style="left:0;position:absolute;background:white;z-index:1;width:100%;">
<table align="center" bgcolor="white">
<tr>
<td style="height:20;">
<form name="boutons" style="border:solid black 1px;" action="">
<input class="boutons" onclick="pause()" type="button" value="II" >
<input class="boutons" onClick="transfert()" type="button" value="<<" >
<input class="boutons" onClick="arretDefil()" type="button" value="Début" >
<input class="boutons" onClick="transfertBis()" type="button" value=">>" >
<b>Pos: </b> <input type="text" value="0" id="compteur" name="compteur" >
</form>
</td>
</tr>
</table>
</div>
<table align="center" style="border:solid navy 2px;background:#aaccff;width:50%;height:30%;" >
<tr>
<td align="center">
<div id="texteDefil" style="z-index:0;position:relative;left:0;height:90%;width:500;">
<img src="titre.gif" alt="">
<pre id="texte" style="">';include("texte.txt");echo'</pre>
</div>
</td>
</tr>
</table>
<div id="Bas" style="position:relative;background:white;left:0;top:0; height:50;width:100%; z-index:1"></div>
</center>
</body>
</html>
';
?>
/******************************************/
/*** Intégration de la feuille de style ***/
/******************************************/
.boutons{
border :solid navy 2px;
background :#aaccff;
color :navy;
width :50;
height :25;
}
#texte{
text-align :left;
padding :10;
margin-top :50;
color :navy;
font-weight :bold;
}
#compteur{
border :solid black 1px;
width :30;
text-align :center;
}

/*************************************/
/*** Intégration du javascript     ***/
/*************************************/

  var y        = 0;
  var minuteur = null;
  var temps    = 10;

  //minuteur défilement en avant du texte
  function transfert()
  {
     minuteur=setInterval('defil()',temps);
  }
  //minuteur défilement en arriere du texte
  function transfertBis()
  {
     minuteur=setInterval('retourArriere()',temps);
  }
  function defil()
  {
    document.getElementById('texteDefil').style.top = y--;
    document.getElementById('compteur').value = y;
    
  }
  //Retour en arriere du texte
  function retourArriere()
  {
    document.getElementById('texteDefil').style.top = y++;
    document.getElementById('compteur').value = y;
  }
  //Arret défilement du texte
  function arretDefil()
  {
    clearInterval(minuteur);
    minuteur=null;
    y = 0;
    document.getElementById('texteDefil').style.top = y;
    document.getElementById('compteur').value = y;
  }
  function pause()
  {
    clearInterval(minuteur);
  }
  
/*************************************/
/*** Intégration dans une page PHP ***/
/*************************************/
<?  
    
    echo'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
        <head>
            <title>Texte Defilant</title>        
            <meta name="robots"                    content="all">    
            <meta name="description"               content="Texte Défilant">
            <meta name="keywords"                  content="voir,défiler,slide">                
            <meta http-equiv="Content-Type"        content="text/html;charset=windows-1252;">
            <meta http-equiv="Content-Language"    content="fr">  
            <script language="javascript" type="text/javascript" src="textDef.js"></script>
            <link rel="stylesheet" href="style.css"> 
        </head>
        <body style="overflow:hidden;background-color:white;" onload="window.status=\'Votre navigateur est: \'+navigator.appName">
        <div style="width:600;float:top;padding:15px;">
            <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img
                src="http://www.w3.org/Icons/valid-html401"
                alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0" style="text-decoration:none;" >
            </a>
        </div>
        <center>
        <div id="Haut" style="left:0;position:absolute;background:white;z-index:1;width:100%;">
        <table align="center"  bgcolor="white">
        <tr>
            <td style="height:20;">
              <form name="boutons" style="border:solid black 1px;" action="">
                    <input class="boutons" onclick="pause()"         type="button" value="II"     >
                    <input class="boutons" onClick="transfert()"     type="button" value="<<"     >
                    <input class="boutons" onClick="arretDefil()"    type="button" value="Début"  >
                    <input class="boutons" onClick="transfertBis()"  type="button" value=">>"     >
                    <b>Pos: </b>  <input type="text" value="0" id="compteur" name="compteur" >               
              </form>
            </td>
        </tr>
        </table>
        </div>
        <table align="center" style="border:solid navy 2px;background:#aaccff;width:50%;height:30%;" >
        <tr>
            <td align="center">
             <div id="texteDefil" style="z-index:0;position:relative;left:0;height:90%;width:500;">
             <img src="titre.gif" alt="">
             <pre id="texte" style="">';include("texte.txt");echo'</pre>   
             </div>
            </td>
        </tr>

        </table>
        <div id="Bas"  style="position:relative;background:white;left:0;top:0; height:50;width:100%; z-index:1"></div>
        </center>
          </body>
        </html>

    ';
?>
/******************************************/
/*** Intégration de la feuille de style ***/
/******************************************/

.boutons{
    border      :solid navy 2px;
    background  :#aaccff;
    color       :navy;
    width       :50;
    height      :25;
}
#texte{
    text-align  :left;
    padding     :10;
    margin-top  :50;
    color       :navy;
    font-weight :bold;
}
#compteur{
    border      :solid black 1px;
    width       :30;
    text-align  :center;
}

Conclusion

Pour un soucis de clarté, j'ai mis bout à bout le javascript, la page PHP et la feuille de style...de plus j'ai tout mis à la racine pour assurer la mise en place des sources externes pour les novices (OUPS des fots d'ortograf :P)

Venez sur mon portail, il est en cours de construction mais pourrait intéresser les novices ainsi que les exégètes du code ;)

http://debbog.free.fr/

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

index.php 2 773 octets
style.css 371 octets
textDef.js 1 029 octets
texte.txt 2 396 octets
titre.gif 1 162 octets
visuel.jpg 95 369 octets

Télécharger le zip

Historique

04 septembre 2005 22:36:27 :: Ajout de la fonctionnalité retour en arrière et portabilité effectuée D'autres demandes contactez moi
04 septembre 2005 22:42:25 :: Modification de la source pour une meilleure portabilité et rajout du bouton arriere
04 septembre 2005 22:49:05 :: Modification de la source pour une meilleure portabilité et rajout du bouton arriere
05 mai 2007 15:51:52 :: Mise à jour complète : - css externe - javascript externe - code migré du HTML au PHP - ajout de nouveaux boutons : 'Pause' et 'Début' - nouvelle fonction pause() - Normes W3C respectées - nouvelle variable 'temps' dans le script
05 mai 2007 15:55:40 :: Prochainement calcul du nombre de lignes du texte si ça intéresse quelqu'un ?
17 septembre 2007 01:32:48 :: Mise à jour de la source pour une mise aux normes W3C....
18 septembre 2007 02:57:58 :: ajout de mots clés...mise à jour minime ^^
18 septembre 2007 03:00:57 :: Mise à jour pour la validation en mode de transition...

Sources du même auteur

FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN...

AJOUT NOEUDS + OBJETS + LIENS (AJOUTUBE V1.1)

FOND D'ÉCRAN DÉFILANT AVEC FONCTION MARCHE/ARRÊT ( AJOUT JQU...

INFO BULLE MULTI -TEXTE OU FAUSSE FENÊTRE POPUP (SIMPLE ET P...

Toutes les sources de xloadx

Sources de la même categorie

MOOTOOLTIP par Miky76

PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony

FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

[DSI] DÉPLACEMENTS SUR IMAGES par Bul3

[ZI] ZOOM (LOUPE) SUR IMAGE par Bul3

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

DEFILEMENT OU SCROLL HORIZONTAL AUTREMENT FAIT AUTOMATIQUE E... par abdelaziz_info

CONFORTABLE AUTO DÉFILEMENT OU (SCROLL BAR) TOUT AUTOMATIQUE... par abdelaziz_info

DEUX MESSAGES DANS LA BARRE D'ÉTAT par pgl10

VITESSE AUTOMATIQUE ET VARIABLE DÉFILEMENT SANS BARRE ... par abdelaziz_info

FONDU ENCHAINER ENTRE PLUSIEURS IMAGES par ryosama

Commentaires et avis

Commentaire de rttb le 25/11/2004 17:47:41

Bien sympa ce script, merci ...

Commentaire de leris le 26/11/2004 09:37:46

il s'arrete quand ? à pâques ou a la trinité ?

Commentaire de jeff le 26/11/2004 12:24:21

très pratique, merci !

Commentaire de coucou747 le 26/11/2004 20:13:42

ça a l'air pas trop mal.

"il s'arrete quand ? à pâques ou a la trinité ?"=> je ne comprends pas pourquois tu dis ça... j'ai testé avec Mozilla 1.7 et Konqueror 3.2.3 et défilement et aret marchent...

Sinon, sous Mozilla, ça a beau marcher, c'ets moche... vas voir pourquois...

allez je sais que tu peux le rendre portable !!
Bonne chance

Commentaire de leris le 26/11/2004 20:19:21

"il s'arrete quand ? à pâques ou a la trinité ?"=> je ne comprends pas pourquois tu dis ça... j'ai testé avec Mozilla 1.7 et Konqueror 3.2.3 et défilement et aret marchent..."

ben oui, il fonctionne ... mais si tu le mets en marche, au bout de 20mn tu le recuperes chez le voisin du dessus ?

Commentaire de LiBe444 le 27/11/2004 17:55:07

Bonsoir,
leris : toujours casse-bonbons héhé ! Tu commences à ennuyer un peu tout le monde là... (je ne suis pas le seul à le penser d'après ce que j'ai vu par ailleurs)

xloadx : très bien, même pas besoin de programmation en java, continues comme ça !

Commentaire de leris le 27/11/2004 18:09:13

Libe444 :

http://bluejayway.free.fr/bartmoon.gif

L.

Commentaire de coucou747 le 28/11/2004 13:02:21

"même pas besoin de programmation en java,"=> ça veut dire quoi ?

sinon non, ça a l'air bien mais c'est pas portable, donc ça reste &a améliorer...

bonne chance pour coriger ça...

Commentaire de xloadx le 05/05/2007 03:07:47

désolé de n'avoir pas pu revenir plus tôt sur ce code, j'ai eu beaucoup à faire....me prévenir si besoin d'infos ou de codes en relations avec ceux déjà publiés..

Bien amicalement votre dévoué XLOADX...

Commentaire de kozaki le 22/06/2007 18:54:07

Sympa la séparation du code, du css, du JS et du contenu :)

Par contre, y-a pas mal de travail pour le rendre conforme à une DTD standard. Je viens de m'y coller un moment en HTML 4.01 strict et j'ai encore plusieurs erreurs.
Enfin surtout, après que j'ai retiré toutes les balises html 3.2 ("center" & Co), mais sans toucher le javascript, le texte s'affiche mais ne défile plus ; seul "Pos" s'incrémente !?

Ça va faire 3 ans que je cherche un moyen de faire défiler quelques news sur un site adhérant aux standards web. Sans dec :'o|

kozaki

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

diaporama complet si l'on ajoute des liens sur les images [ par oreglia ] bonjourdans cet excellent diaporama ci dessous à défilement manuel ou automatique (ce qui est rare à trouver dans les scripts du web)(de http://www.to défilement du fond [ par kinooo ] J'ai récupérer un script pr le défilement du fond. Est ce que qq'un serait ce qui ne va pas car je ne voit pas ou auraut un autre script.SCRIPT:<ht Défilement horizontale d'un texte [ par NestleMatt ] Bonjour !Je voudrai savoir si il est possible en JavaScript de faire défiller du texte dans une InputBox via un texte tappé dans l'HTML ou peut étre v Problème barre de défilement horizontal sur mes pages [ par rem78 ] Bonjour,Je suis confronté à un problème de barre de défilement horizontal qui apparaît sur ma page web automatiquement,cette page est constitué par un Défilement automatique des pages d'un site ? [ par adelysnet ] Bonjour,Je souhaite faire défiler des pages d'un site automatiquement.Chaque page finirait par viewimage2.php?imageID=1&style=listing En fait, seule l Scrollbar automatique sous la sourie [ par maxmic ] Bonjour à tous,je cherche à faire un défilement autimatique sur mon iframe, enfin automatique si ma soris passe sur les fleche en haut et en bas de ma SLIDE SHOW [ par sancho_x ] Je voudrais en cliquant sur une photo vignette, la faire apparaitre en plus grand sur la même feuille. Comment dois-je procéder ?Merci pour popup + barre de défilement [ par minet03 ] Coucou, j'ai un petit problème avec un popup, j'ai trouver la source sur TJS et elle ne marche pas. En fait je voudrais qu'il y ai la barre de d& probleme de modif. Js [ par xpbull ] bonjour voila j' ai trouver une source javascript et le fichier JS qui va avec sur un site, que j aimerais afficher sur mon site mais voila la source images cliquables dans diaporama [ par fcomba ] Bonjour, Je voudrais que chaque image de mon diaporama corresponde à un lien vers une page html ou une pop up. Quelqu'un pourrait-il m'aider? Vo

Nos sponsors

Derniers Blogs

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

Forum

RE : RéCUPERER LA TAILLE D'UN DIV par bumbo

RE : PROTOTYPE: PROBLèME AVEC "EVENT" par bumbo

RE : FONCTION RECHERCHE DATE par jeca

DEFINITION DE LA METHODE SETBORDER par nassim1987

RE : FONCTION RECHERCHE DATE par Eyeron

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5