Texte défilant, arrêt au milieu de la page ?
Fermé
Escienca
Messages postés
418
Date d'inscription
mercredi 12 janvier 2011
Statut
Membre
Dernière intervention
4 avril 2024
-
19 mai 2011 à 17:05
Escienca Messages postés 418 Date d'inscription mercredi 12 janvier 2011 Statut Membre Dernière intervention 4 avril 2024 - 20 mai 2011 à 19:26
Escienca Messages postés 418 Date d'inscription mercredi 12 janvier 2011 Statut Membre Dernière intervention 4 avril 2024 - 20 mai 2011 à 19:26
A voir également:
- Texte défilant, arrêt au milieu de la page ?
- Supprimer une page word - Guide
- Smartphone milieu de gamme - Guide
- Page d'accueil iphone - Guide
- Traduire une page web - Guide
- Word numéro de page 1/2 - Guide
4 réponses
Creutzou
Messages postés
550
Date d'inscription
lundi 17 mai 2010
Statut
Membre
Dernière intervention
30 mai 2013
30
19 mai 2011 à 17:07
19 mai 2011 à 17:07
Salut,
je pense que si tu créer des div's, cela pourrait faire quelque chose.
je pense que si tu créer des div's, cela pourrait faire quelque chose.
Escienca
Messages postés
418
Date d'inscription
mercredi 12 janvier 2011
Statut
Membre
Dernière intervention
4 avril 2024
56
Modifié par Escienca le 23/05/2011 à 17:51
Modifié par Escienca le 23/05/2011 à 17:51
Rebonjour,
j'ai trouvé un post très intéressant pour cette fonction:
https://forums.commentcamarche.net/forum/affich-3608573-texte-defilant-arret-definitif
J'ai bidouillé comme suis (ce n'est pas encore définitif mais bon, au moins ça marche), pour que mon texte s'arrête au milieu sans repartir :
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var timer;
var larg;
var marge = 5;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginLeft = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetLeft)) {
setTimeout("repars()", 3000);
}else {
marge = 0;
timer = setInterval("defile(milieu)", 100);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
<style type="text/css">
.txtdefil {
text-align: Left;
margin-left: 0px;
}
</style>
</head>
<body onload="initDefile()">
<div>
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page</span>
</div>
</body>
</html>
J'ai fait une petite page perso rapide pour l'exemple:
http://escienca.pagesperso-orange.fr/
Tout ceci marche très bien, mais je voudrais savoir comment inverser le sens de défilement. Au lieu de voir apparaître le texte de la gauche et s'arrêter au milieu, je voudrais qu'il arrive de la droite. C'est expliqué sur l'autre page mais je n'ai rien compris.
A terme je voudrais qu'une ligne apparaisse en venant de la gauche, et une en dessous qui apparaisse de la droite, les deux s'arrêtant l'une sous l'autre au milieu.
Merci de votre aide.
j'ai trouvé un post très intéressant pour cette fonction:
https://forums.commentcamarche.net/forum/affich-3608573-texte-defilant-arret-definitif
J'ai bidouillé comme suis (ce n'est pas encore définitif mais bon, au moins ça marche), pour que mon texte s'arrête au milieu sans repartir :
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var timer;
var larg;
var marge = 5;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginLeft = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetLeft)) {
setTimeout("repars()", 3000);
}else {
marge = 0;
timer = setInterval("defile(milieu)", 100);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
<style type="text/css">
.txtdefil {
text-align: Left;
margin-left: 0px;
}
</style>
</head>
<body onload="initDefile()">
<div>
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page</span>
</div>
</body>
</html>
J'ai fait une petite page perso rapide pour l'exemple:
http://escienca.pagesperso-orange.fr/
Tout ceci marche très bien, mais je voudrais savoir comment inverser le sens de défilement. Au lieu de voir apparaître le texte de la gauche et s'arrêter au milieu, je voudrais qu'il arrive de la droite. C'est expliqué sur l'autre page mais je n'ai rien compris.
A terme je voudrais qu'une ligne apparaisse en venant de la gauche, et une en dessous qui apparaisse de la droite, les deux s'arrêtant l'une sous l'autre au milieu.
Merci de votre aide.
Escienca
Messages postés
418
Date d'inscription
mercredi 12 janvier 2011
Statut
Membre
Dernière intervention
4 avril 2024
56
Modifié par Escienca le 23/05/2011 à 17:50
Modifié par Escienca le 23/05/2011 à 17:50
Rebonjour, alors voilà j'en suis là :
http://escienca.pagesperso-orange.fr/
Le code tel que je l'ai modifié donne ça (ce n'est toujours pas la version définitive, pour le moment je ne fait que bidouiller, il va falloir par la suite faire le ménage de tout ce qui n'y sers plus à rien bien sur):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var timer;
var larg;
var marge = 5;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginRight = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetLeft)) {
setTimeout("repars()", 3000);
}else {
marge = 0;
timer = setInterval("defile(milieu)", 100);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
<style type="text/css">
.txtdefil {
text-align: right;
margin-left: 5px;
}
</style>
</head>
<body onload="initDefile()">
<div align="Right">
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page</span>
</div>
<p>
<div align="Left">
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page (ou plutôt qui devrait ??? <img src="data:image/gif;base64,R0lGODlhFAAUAJECAAAAAGbM/////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFEgACACwAAAAAFAAUAAACR5SPqXvgwBYINMDY7KQXO+Nw0tOBYrNVX9allcqa72yZ1xTStYDzaviA9VwpItCnmxWRyd/K1SzJNMFTAsqBSaIe6ArDI2EKACH5BAUUAAIALAUAAgAIAAoAAAIPlA+HEWqRFIiu2osVfLEAACH5BAUUAAIALAUAAgAIAAoAAAINlB+HAOoPo5wQJGFNAQAh+QQFFAACACwEAAIACQAKAAACDZQvgAcRC6OctMZmsCkAOw=="> )</span>
</div>
</body>
</html>
Voilà donc pour en haut c'est bon, mais celui d'en bas ne veut pas décidément pas défiler dans le sens contraire (de gauche à droite, et arrêt au milieu sous la ligne d'en haut). J'ai tenté un frame, ça complique bien trop, et ça ne marche pas de toute façon. Je continue à chercher, mais au cas où quelqu'un aurait un éclair de génie, ça me ferait gagner un temps précieux,
Merci de votre aide.
http://escienca.pagesperso-orange.fr/
Le code tel que je l'ai modifié donne ça (ce n'est toujours pas la version définitive, pour le moment je ne fait que bidouiller, il va falloir par la suite faire le ménage de tout ce qui n'y sers plus à rien bien sur):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var timer;
var larg;
var marge = 5;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginRight = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetLeft)) {
setTimeout("repars()", 3000);
}else {
marge = 0;
timer = setInterval("defile(milieu)", 100);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
<style type="text/css">
.txtdefil {
text-align: right;
margin-left: 5px;
}
</style>
</head>
<body onload="initDefile()">
<div align="Right">
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page</span>
</div>
<p>
<div align="Left">
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page (ou plutôt qui devrait ??? <img src="data:image/gif;base64,R0lGODlhFAAUAJECAAAAAGbM/////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFEgACACwAAAAAFAAUAAACR5SPqXvgwBYINMDY7KQXO+Nw0tOBYrNVX9allcqa72yZ1xTStYDzaviA9VwpItCnmxWRyd/K1SzJNMFTAsqBSaIe6ArDI2EKACH5BAUUAAIALAUAAgAIAAoAAAIPlA+HEWqRFIiu2osVfLEAACH5BAUUAAIALAUAAgAIAAoAAAINlB+HAOoPo5wQJGFNAQAh+QQFFAACACwEAAIACQAKAAACDZQvgAcRC6OctMZmsCkAOw=="> )</span>
</div>
</body>
</html>
Voilà donc pour en haut c'est bon, mais celui d'en bas ne veut pas décidément pas défiler dans le sens contraire (de gauche à droite, et arrêt au milieu sous la ligne d'en haut). J'ai tenté un frame, ça complique bien trop, et ça ne marche pas de toute façon. Je continue à chercher, mais au cas où quelqu'un aurait un éclair de génie, ça me ferait gagner un temps précieux,
Merci de votre aide.
Escienca
Messages postés
418
Date d'inscription
mercredi 12 janvier 2011
Statut
Membre
Dernière intervention
4 avril 2024
56
Modifié par Escienca le 23/05/2011 à 17:50
Modifié par Escienca le 23/05/2011 à 17:50
Rerebonjour, voilà j'ai trouvé:
http://escienca.pagesperso-orange.fr/
C'était bien avec des frames qu'il fallait jouer au final, voilà les 3 codes :
le frame1 (Montexte1):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var marge = 0;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginRight = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetCenter)) {
setTimeout("repars()", 3000);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
</head>
<body onload="initDefile()">
<div align="right" width="100%">
<span id="txtdefil" span style="color:white;">Montexte1</span>
</div>
</body>
</html>
Le frame2 (Montexte2):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var marge = 0;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginLeft = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetCenter)) {
setTimeout("repars()", 3000);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
</head>
<body onload="initDefile()">
<div align="left" width="100%">
<span id="txtdefil" style="color:white">Montexte2</span>
</div>
</body>
</html>
Et la page finale, qui contient les 2 frames:
<FRAMESET ROWS="7%,
93%" border="0">
<FRAME SRC="http://exeo.pagesperso-orange.fr/frame1.html" NAME="haut" width="100%">
<FRAME SRC="http://exeo.pagesperso-orange.fr/frame2.html" NAME="bas" width="100%">
</FRAMESET>
Reste quelques petits détails, comme par exemple le petit décalage entre les 2 lignes. Je pense que c'est juste une simple histoire de marges. Je modifierais mon message une fois que j'aurais trouvé.
Enfin voilà, c'est fonctionnel, mais attention j'ai remarqué que ces codes étaient très sensibles, si vous modifiez, je vous conseillent de faire des sauvegardes au fur et à mesure de vos fichiers...
À bientôt...
http://escienca.pagesperso-orange.fr/
C'était bien avec des frames qu'il fallait jouer au final, voilà les 3 codes :
le frame1 (Montexte1):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var marge = 0;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginRight = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetCenter)) {
setTimeout("repars()", 3000);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
</head>
<body onload="initDefile()">
<div align="right" width="100%">
<span id="txtdefil" span style="color:white;">Montexte1</span>
</div>
</body>
</html>
Le frame2 (Montexte2):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var marge = 0;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginLeft = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetCenter)) {
setTimeout("repars()", 3000);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
</head>
<body onload="initDefile()">
<div align="left" width="100%">
<span id="txtdefil" style="color:white">Montexte2</span>
</div>
</body>
</html>
Et la page finale, qui contient les 2 frames:
<FRAMESET ROWS="7%,
93%" border="0">
<FRAME SRC="http://exeo.pagesperso-orange.fr/frame1.html" NAME="haut" width="100%">
<FRAME SRC="http://exeo.pagesperso-orange.fr/frame2.html" NAME="bas" width="100%">
</FRAMESET>
Reste quelques petits détails, comme par exemple le petit décalage entre les 2 lignes. Je pense que c'est juste une simple histoire de marges. Je modifierais mon message une fois que j'aurais trouvé.
Enfin voilà, c'est fonctionnel, mais attention j'ai remarqué que ces codes étaient très sensibles, si vous modifiez, je vous conseillent de faire des sauvegardes au fur et à mesure de vos fichiers...
À bientôt...
