Système de news défilant de bas en haut

cs_moha007 Messages postés 40 Date d'inscription mardi 13 janvier 2004 Statut Membre Dernière intervention 27 décembre 2007 - 23 mai 2007 à 13:54
Cantat123 Messages postés 1 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 28 juin 2009 - 28 juin 2009 à 21:21

salut les amis
j'aimerais mettre un systèmes de news sur mon site, j'arrive à faire ça:

<marquee class="marquee" direction="up" hspace="10" scrolldelay="250" onmouseover="this.stop();" onmouseout="this.start();">
the news bla bla bla

</marquee>

ce qui me manque c'est que j'aimerais afficher news par news, que la newsl qui défile de bas en haut s'arrête pendant un certain temps (2, 3 secondes par exemple). pour permettre au visiteur de bien lire avant de continuer le défilement..

En quelques mots : réaliser un sytème de news qui ressemble au pub Ads de yahoo.

j'ai beacuoup cherché mais j'ai pas pu trouvé cette fonctionnalité.
SVP si vous avez un script, je vous serai reconnaissant.
Merci Infiniment

A voir également:

Système de news défilant de bas en haut
Système de cache - Conseils pratiques -PHP
Html texte défilant en boucle - Forum Javascript / DHTML
Texte défilant - Forum PHP
Texte defilant en boucle - Forum Flash
Système de réservation de salle - Forum Visual Basic

8 réponses

Réponse 1 / 8

yousfane Messages postés 243 Date d'inscription vendredi 24 novembre 2006 Statut Membre Dernière intervention 21 décembre 2007 2
23 mai 2007 à 15:34

Salut
tu peux arreter la newsl pendant le temps que tu veux avec un setTimeout

<marqueeid=  "marquee"class="marquee"direction="up"hspace="10"scrolldelay="250"onmouseover="this.stop();"onmouseout="this.start();">
the news bla bla bla 
</marquee>
<script langage="javascript">
  function   
arreter(){
marquee.stop(); 

setTimeout("demarrer()",3000); 

}
function demarrer(){
marquee.start(); 
setTimeout("arreter()",3000); 
}
</script>
onload  ="demarrer()">>

Réponse 2 / 8

Mokost Messages postés 48 Date d'inscription jeudi 18 décembre 2003 Statut Membre Dernière intervention 29 mars 2010
23 mai 2007 à 21:57

j'ai repris un code que je me suis permis de modifier j'espere qu'il te sera d'une utilité. Testé sous ie et mozilla.
Si tu veux le voir en action faire un tour sur le site de www.2a2p.net tu verras dans le cadre bleu en bas.
ce code fait défiler vers le haut en fois que tout a défiler il redescent et si tu met la souris dessus il s'arrete puis quand tu met la souris endehors il continue.

<script language="javascript" defer>

var pas=1;
var one=1;
// hauteur de la partie visible
var h_fen="100"; //hauteur de la fenetre pour les news
function scrollmrq(){

if ( parseInt(mrq.style.top) < -h_mrq )
{ pas=-1;
//mrq.style.top = parseInt(mrq.style.top)+3;
}
else if ( parseInt(mrq.style.top) > h_fen-14 )
{
pas=1;
}

mrq.style.top = parseInt(mrq.style.top)-pas+"px"

}

function init_mrq(){
mrq=document.getElementById("dd");
fen=document.getElementById("vv");
fen.onmouseover=function(){stoc=pas;pas=0};
fen.onmouseout=function(){pas=stoc};fen.style.height=h_fen;
var nbpixl = h.offsetTop-100;

h_mrq=nbpixl;

with(mrq.style){position="absolute";top=h_fen;}
setInterval("scrollmrq()",50);
}

</script>
<style>
body {
background-color:#FFFFFF;

}

<style type="text/css" />

body{text-align:center;width:100%;}
#vv{position:relative;overflow:hidden;width:400px;text-align:left;margin:auto;}
#dd{color:#002000;padding:0 5px;}
</style>
</head>

<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" bgcolor="#FFFFFF" onLoad='init_mrq()'>

<div name="news" id='vv'>
<span id='dd'>
....ici tes news....
....news1 ...
....news2....
....news-n...
<span id='h'></span>
</span>
</div>

</body>

</html>

Cordialement.
[font=Courier New]MokostNew

Réponse 3 / 8

cs_moha007 Messages postés 40 Date d'inscription mardi 13 janvier 2004 Statut Membre Dernière intervention 27 décembre 2007
24 mai 2007 à 12:03

re salut

Merci beaucoup Yousfan et Mokost !

Mokost: Merci pour le script il est intéressant, Merci ^^ :p

Yousfan: oui

setTimeout peut règler un peu le problème, sauf que, comment définir le temps ou la news doit s'arrêter sans que le text ne soit pas coupé ?

pour mieux comprendre, j'ai mis le script dans une page en ligne, voici ce que ca donne:

http://www.bourki.123.fr/downtoup.htm

j'aimerais afficher news par news, et que la news se place au centre du cadre bleu, y'a-t-il un moyen pour définir la zone au le text doit se placer sachant que la hauteur de chaque news est différente...

Merci Infiniment

Réponse 4 / 8

yousfane Messages postés 243 Date d'inscription vendredi 24 novembre 2006 Statut Membre Dernière intervention 21 décembre 2007 2
24 mai 2007 à 16:16

Salut
j'ai un code d'un membre qui me l'a envoyé par message et je l'ai edité

<html>
<head>
</head>

>
<script language=  "JavaScript1.2">

ejs_scroll_largeur = 
200; 
ejs_scroll_hauteur = 200; 

ejs_scroll_bgcolor = '#ffffff'; 
ejs_scroll_background = ""; 

ejs_scroll_pause_seconde = 3; 
n = 0
  var   time   = "" 

news =   ["1ère 
news","2ème news","3ème 
news","4ème news","5ème news"]

  function   
d(texte)
{
document.write(texte); 
}

d('
+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+ejs_scroll_bgcolor+';">'); 
d('
+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:4;clip:rect(0'+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">'); 

d('
id  =ejs_scroller_1 onmouseover=  "pause()" onmouseout="ejs_scroll_action()" 
style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:0;" CLASS=ejs_scroll> 1ère news'); 
d('
id=ejs_scroller_2 onmouseover="pause()" onmouseout="ejs_scroll_action()" 
style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:'+ejs_scroll_hauteur+';" 
CLASS=ejs_scroll> 2ème 
news'); 
d(''); 

ejs_scroll_mode =1; 

ejs_scroll_actuel = 0; 

  function   ejs_scroll_start()
{
if(ejs_scroll_mode   ==   
1)
{
ejs_scroller_haut = "ejs_scroller_1"; 
ejs_scroller_bas = 
"ejs_scroller_2"; 
ejs_scroll_mode = 0; 
}
  else  
{
ejs_scroller_bas   = "ejs_scroller_1"; 

ejs_scroller_haut =   "ejs_scroller_2"; 
ejs_scroll_mode = 1; 
}
ejs_scroll_nb_message = 
news.length-1; 

  if  (document.getElementById)
n++ 

document.getElementById(ejs_scroller_bas).innerHTML   = news[n]; 
ejs_scroll_top =   0;   if  (n   4){n -1}

  if  (document.getElementById)
time   = 
setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)
}

function ejs_scroll_action()
{
ejs_scroll_top -=   1; 
document.getElementById(ejs_scroller_haut).style.top = 
ejs_scroll_top; 
document.getElementById(ejs_scroller_bas).style.top = 
ejs_scroll_top+ejs_scroll_hauteur; 
  if  ((ejs_scroll_top+ejs_scroll_hauteur)>0) 
time   = setTimeout("ejs_scroll_action()",10)
else ejs_scroll_stop()
}

function ejs_scroll_stop()
{
ejs_scroll_actuel =   0; 
ejs_scroll_start()
}
  function   
pause(){
clearTimeout(time)
}

window.onload   = ejs_scroll_start; 
</SCRIPT>
</table>

>
</html>

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

Posez votre question

Réponse 5 / 8

cs_moha007 Messages postés 40 Date d'inscription mardi 13 janvier 2004 Statut Membre Dernière intervention 27 décembre 2007
24 mai 2007 à 16:39

resalut yousfane !

j'ai mis ton code dans fichier hmtl, mais il semble que ca n'affiche rien du tout !! juste une page vierge!

je n'ai pas trouvé dans le code le text du news qui peut défiler....
news = ["1ère news","2ème news","3ème news","4ème news","5ème news"]

peut tu m'expliquer s'il te pait?
Merci

Réponse 6 / 8

yousfane Messages postés 243 Date d'inscription vendredi 24 novembre 2006 Statut Membre Dernière intervention 21 décembre 2007 2
24 mai 2007 à 17:07

Salut
j'ai essayé le code avec firefox et ça marche mais cette source doit marcher avec IE aussi

<script 
language=  "JavaScript1.2">
ejs_scroll_hauteur = 200; 
//la position de la news dans la page
ejs_scroll_pause_seconde = 3; 
n = 0
  var   time   = "" 

news =   ["1ère 
news","2ème news","3ème 
news","4ème news","5ème news"]//les news à afficher

document.write('
>'); 
document.write('
4;left:4;">'); 

document.write('
id=ejs_scroller_1 onmouseover="pause()" onmouseout="ejs_scroll_action()" 
style="position:absolute;left:0;top:0;"> 1ère 
news'); 
document.write('
id=ejs_scroller_2 onmouseover="pause()" onmouseout="ejs_scroll_action()" 
style="position:absolute;left:0;top:'+ejs_scroll_hauteur+';"> 
2ème news'); 
document.write(''); 

ejs_scroll_mode =1; 
ejs_scroll_actuel = 0; 

  function   ejs_scroll_start()
{
if(ejs_scroll_mode   ==   
1)
{
ejs_scroller_haut = "ejs_scroller_1"; //le div qui defile
ejs_scroller_bas = 
"ejs_scroller_2"; //le div caché
ejs_scroll_mode = 0; 
}
  else  
{
ejs_scroller_bas   = "ejs_scroller_1"; 

ejs_scroller_haut =   "ejs_scroller_2"; 
ejs_scroll_mode = 1; 
}

  if  (document.getElementById)
n++ 

document.getElementById(ejs_scroller_bas).innerHTML   = news[n]; //on met la news dans le div
ejs_scroll_top =   0; //la variable de la position du div  if  (n   4){n -1}

  if  (document.getElementById)
time   = 
setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)
}

function ejs_scroll_action()
{
ejs_scroll_top--; 
document.getElementById(ejs_scroller_haut).style.top =   ejs_scroll_top; //on change la position du div
document.getElementById(ejs_scroller_bas).style.top = 
ejs_scroll_top+ejs_scroll_hauteur; 
  if  ((ejs_scroll_top+ejs_scroll_hauteur)>0) time   = setTimeout("ejs_scroll_action()",10)
else ejs_scroll_stop()
}

function ejs_scroll_stop()
{
ejs_scroll_actuel =   0; 
ejs_scroll_start()
}
  function   
pause(){
clearTimeout(time)//arreter le defilement des news
}
</SCRIPT>
 onload  ="ejs_scroll_start()">>

Réponse 7 / 8

cs_moha007 Messages postés 40 Date d'inscription mardi 13 janvier 2004 Statut Membre Dernière intervention 27 décembre 2007
25 mai 2007 à 17:15

Merci
ça marche nickel maintenant..
je vais essayer de modifier un peu le script
Merci Infiniment

Réponse 8 / 8

Cantat123 Messages postés 1 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 28 juin 2009
28 juin 2009 à 21:21

Bonjour,
j'ai besoin d'un script news défilant. à intéger dans le body. Je suis désespéré.

Je suis prêt à payer un petit qqch pour la peine, 10€ via paypal puis une fois réalisé, 10€ supplémtaire pour m'adapter un de ses codes. Si sa intéresse qqn... Peu importe que ce soit avec java, swf ou sql, du moment que je puisse changer l'image et le texte ou le nombre de news par un procédé simple.

Je suis nul mais si un script est adapté à mes besoins avec une explication comme /votre texte ici/ et... /le lien de votre image ici/ Je saurais me repérer.

J'ai besoin n'un news de présentation avec un cadre
-couleur #fe38cd sur 2 px
-cadre total de 187 sur 272...
(Bon après si j'ai besoin de changer la taille, je saurais me repérer.)
-Il faut que l'image et sa légende défile puis s'arrète 4 secondes. ce sont des articles avec le prix. L'image est avec un lien.
-J'aurais besoin qu il y ai un bord blanc entre le cadre et l'image à l'intérieur.
Je n'ai pas encor la taille des images qui iront à l'intérieur. Mais j'arriverais à adapter le cadre.
Voilà... avec 2 ou trois images pour que je voient comment.

Si j'ai un sauveur, ce serait super !!!!

Discussions similaires

Les systèmes réducteurs

conception de systéme de géolocalisation de véhicule par balise gps

gestion de systeme de pointage dans une entreprise

texte qui defile en boucle sans espace entre le debut et la fin

création d'un système de gestion de tickets pour SAV

Votre réponse

Discussions similaires