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

Signaler
Messages postés
40
Date d'inscription
mardi 13 janvier 2004
Statut
Membre
Dernière intervention
27 décembre 2007
-
Cantat123
Messages postés
1
Date d'inscription
jeudi 27 septembre 2007
Statut
Membre
Dernière intervention
28 juin 2009
-
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

8 réponses

Messages postés
246
Date d'inscription
vendredi 24 novembre 2006
Statut
Membre
Dernière intervention
21 décembre 2007

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()">>
Messages postés
48
Date d'inscription
jeudi 18 décembre 2003
Statut
Membre
Dernière intervention
29 mars 2010

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
Messages postés
40
Date d'inscription
mardi 13 janvier 2004
Statut
Membre
Dernière intervention
27 décembre 2007

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

Messages postés
246
Date d'inscription
vendredi 24 novembre 2006
Statut
Membre
Dernière intervention
21 décembre 2007

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>
Messages postés
40
Date d'inscription
mardi 13 janvier 2004
Statut
Membre
Dernière intervention
27 décembre 2007

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
Messages postés
246
Date d'inscription
vendredi 24 novembre 2006
Statut
Membre
Dernière intervention
21 décembre 2007

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()">>
Messages postés
40
Date d'inscription
mardi 13 janvier 2004
Statut
Membre
Dernière intervention
27 décembre 2007

Merci
ça marche nickel maintenant..
je vais essayer de modifier un peu le script
Merci Infiniment
Messages postés
1
Date d'inscription
jeudi 27 septembre 2007
Statut
Membre
Dernière intervention
28 juin 2009

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 !!!!