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

Ce site au démarrage

begin process at 2012 02 13 02:32:18

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é :18 797 / 1 083

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

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0

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

SHOWMAPAREA par phidelum

DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev

ANIMATION DU TEXTE par brennal

EFFET RAYONS DU SOLEIL par tefa24600

TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

SCROLLBAR CLASS par heycraft

WAVEBOX V1.1, LA SLIDEBAR SEXY par flashdumpf

MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S... par Kimjoa

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

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

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 administrateur CS

ç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 administrateur CS

"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

[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

Forum

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

AIDE SUR UN SCRIPT?? par xavpac

[CPAINT ERROR] INVALID HTTP RESPONSE CODE '0 ' par warsez

[DEMANDE] ALGORITHME DJIKSTRA MéTRO/RER PARISIEN par dindin22

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning