comment faire defiler mes news ?

comment faire defiler mes news ? - HTML/CSS - Programmation

Marsh Posté le 23-03-2006 à 11:35:18    

Bonjour.
 
Je veut faire défiler les titres de mes dernieres news sur une ligne de droite à gauche mais je n'y arrive pas pour l'instant.
J'ai essayer un script javascript en y inserant mon code php pour récuperer les 5 dernieres news dans ma base mysql mais ca ne fontionne pas.
 
Quelqu'un aurait il une solution ?
 
Merci
 
Ps voici le script que j'ai essayer en y inserant mon code php qui me permet de récuperer les news
 

Code :
  1. <script language="JavaScript1.2">
  2. // personnalisez ici ***********
  3. var marqueewidth=150
  4. var marqueeheight=100
  5. var speed=2
  6. var marqueecontents='
  7. <?php
  8. mysql_connect('', '', '');  // Connexion à MySQL
  9. mysql_select_db("" ); // Sélection de la base coursphp
  11. $reponse = mysql_query("SELECT date FROM suivi ORDER BY date DESC LIMIT 0,1" ); // Requête SQL
  14. // On fait une boucle pour lister tout ce que contient la table :
  16. while ($data = mysql_fetch_array($reponse) )
  17. {
  18. // on décompose la date  
  19.         sscanf($data['date'], "%4s-%2s-%2s %2s:%2s:%2s", $an, $mois, $jour, $heure, $min, $sec);
  20. ?>
  21.     <? echo '' , $jour , '/' , $mois , ' à ' , $heure , ':' , $min , '' ;  ?> )
  22.     <?php
  23. }
  25. mysql_close(); // Déconnexion de MySQL
  26. ?>
  27.     '
  28. //*****************************
  30. var currentspeed=speed
  32. if (document.all) document.write('<marquee onmouseover="stop()" onmouseout="start()" direction="up" scrollAmount='+currentspeed+' style="width: '+marqueewidth+'px; height: '+marqueeheight+'px">'+marqueecontents+'</marquee>')
  34. function start()
  35. {
  36.     currentspeed=speed
  37. }
  39. function stop()
  40. {
  41.     currentspeed=0
  42. }
  44. </script>


Message édité par wydook le 23-03-2006 à 12:45:52

---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Marsh Posté le 23-03-2006 à 11:35:18   

Reply

Marsh Posté le 25-03-2006 à 22:41:17    

Bonjour :)  
 
Deux choses:
 
1. Ton code est une usine à gaz :fou:  

  • <script type="text/javascript"> et non <script language="JavaScript x.x"> ;)  
  • Met donc des points-virgules à la fin de tes déclarations JavaScript

  • Code :
    1. mysql_connect('', '', '');  // Connexion à MySQL
    2. mysql_select_db("" ); // Sélection de la base coursphp

    euh... j'espère que dans ton script tu remplit vraiment les valeurs :heink:  :whistle:  :whistle:  

  • Code :
    1. <?php
    2. ...
    3. ?>
    4.    <? echo '' , $jour , '/' , $mois , ' à ' , $heure , ':' , $min , '' ;  ?> )
    5.    <?php
    6. ...

    ... Pourquoi doubler tes balises php  :heink:  


2. La balise marquée est dépréciée obsolète et dépréciée par le W3C (principalement pour des raisons d'accessibilité)


Message édité par MS-DOS_1991 le 25-03-2006 à 22:42:05

---------------
Viendez sur le Newbie-Project et essayez le Newbie-Directory (nouveau)
Reply

Marsh Posté le 25-03-2006 à 23:44:43    

J ai un défileur de new rss avec deux boutons de vitesse de défilement:
 

Code :
  1. <span id='st' style="white-space:pre;font-family:monospace;"></span>
  3. <SCRIPT language="JavaScript" type="text/javascript">
  4. <!--
  5. var mtt_db = (document.compatMode && document.compatMode != 'BackCompat')? document.documentElement : document.body? document.body : null,
  6. mtt_n = navigator.userAgent.toLowerCase(),
  7. mtt_op = !!(window.opera && document.getElementById),
  8. mtt_ie = mtt_n.indexOf('msie') != -1 && document.all && mtt_db && !mtt_op,
  9. mtt_n4 = (document.layers && typeof document.classes != "undefined" );
  10. var tiptext='INSERT TEXT HERE'; // texte à faire défiler
  11. var tiptextx=Math.random()*tiptext.length;
  12. var tiptextl=50; // longueure en caractères
  13. var tiptextdir=1;
  14. function GetById(t_id)
  15. {
  16. return (
  17. mtt_n4? (document.layers[t_id] || null)
  18. : mtt_ie? (document.all[t_id] || null)
  19. : (document.getElementById(t_id) || null)
  20. );
  21. }
  22. function movetext()
  23. {
  24. var st=GetById('st');
  25. if (!st) return;
  26. var str='';
  27. var i;
  28. var l=0;
  29. if (tiptextx<tiptextl)
  30. {
  31. for(i=0;i<tiptextl-tiptextx;i++,l++) str+='&nbsp;';
  32. var s=tiptext.substr(0, tiptextx);
  33. str+=s;
  34. l+=s.length;
  35. }
  36. else
  37. {
  38. str=tiptext.substr(tiptextx-tiptextl,tiptextl);
  39. l+=str.length;
  40. }
  41. for(i=l;i<tiptextl;i++) str+='&nbsp;';
  42. if (tiptextdir)
  43. {
  44. st.innerHTML='<pre style="margin:0px">'+str+'<'+'/pre>';
  45. tiptextx=(tiptextx+tiptextdir)%(tiptext.length+tiptextl);
  46. if (tiptextx<0) tiptextx+=tiptext.length+tiptextl;
  47. tiptextx=(tiptextx)%(tiptext.length+tiptextl);
  48. }
  49. setTimeout('movetext();',150);
  50. }
  51. document.write('&nbsp;<INPUT style="font-size:xx-small;" type=button value="&lt;" onclick="javascript:tiptextdir=tiptextdir&gt;0?0:tiptextdir-1;"><INPUT style="font-size:xx-small;" type=button value="&gt;" onclick="javascript:tiptextdir=tiptextdir&lt;0?0:tiptextdir+1;">');
  52. movetext();
  53. // -->
  54. </SCRIPT>


Message cité 1 fois
Reply

Marsh Posté le 26-03-2006 à 12:45:22    

Vous n'avez pas plus pourri comme script [:petrus dei]

Reply

Marsh Posté le 26-03-2006 à 12:46:57    

c est sûr c est un vieux script, tu peut en faire un avec un div scrollant dans un div overflow:hidden. je suis preneur :)

Reply

Marsh Posté le 26-03-2006 à 13:21:52    

J'en ai déjà fait pleins [:petrus75]
mais là j'en ai recodé un avec setInterval faudrait juste que je génère mieux la variable

Reply

Marsh Posté le 26-03-2006 à 14:47:53    

Ah oui je rajouterai que moi je bosse sur un Div ou un autre élément de ce type par défaut, deplus il faut savoir les enfants que un élément en overflow:hidden ne peut être scrollé sous opera,  
et ouais je sais, c'est le caca mais c'est comme ça :o

Reply

Marsh Posté le 26-03-2006 à 15:17:30    

> un élément en overflow:hidden ne peut être scrollé sous opera
hein? heu........... c est pas lui qu il faut scroller, c est celui qui est à l intérieur, non? j utilise en général un scroll avec css:left, ça marche.
 
J ai posté un truc comme ça pour un mec qui essayait de faire une présentation en page glissantes. Ça marche du tonnerre: tu as des liens en bas de la page, quand tu clique dessus la page arrive en glissant par la droite ou la gauche et la page courante repart. Le tout avec des iframes (car taille fixe imposé) pour que ça marche avec des urls. Pas eu le temps encore de l améliorer pour taille dynamique, mais ça fonctionne avec FF+IE+Opera.

Reply

Marsh Posté le 26-03-2006 à 15:53:45    

nargy a écrit :

J ai un défileur de new rss avec deux boutons de vitesse de défilement:
 

Code :
  1. <span id='st' style="white-space:pre;font-family:monospace;"></span>
  3. <SCRIPT language="JavaScript" type="text/javascript">
  4. <!--
  5. var mtt_db = (document.compatMode && document.compatMode != 'BackCompat')? document.documentElement : document.body? document.body : null,
  6. mtt_n = navigator.userAgent.toLowerCase(),
  7. mtt_op = !!(window.opera && document.getElementById),
  8. mtt_ie = mtt_n.indexOf('msie') != -1 && document.all && mtt_db && !mtt_op,
  9. mtt_n4 = (document.layers && typeof document.classes != "undefined" );
  10. var tiptext='INSERT TEXT HERE'; // texte à faire défiler
  11. var tiptextx=Math.random()*tiptext.length;
  12. var tiptextl=50; // longueure en caractères
  13. var tiptextdir=1;
  14. function GetById(t_id)
  15. {
  16. return (
  17. mtt_n4? (document.layers[t_id] || null)
  18. : mtt_ie? (document.all[t_id] || null)
  19. : (document.getElementById(t_id) || null)
  20. );
  21. }
  22. function movetext()
  23. {
  24. var st=GetById('st');
  25. if (!st) return;
  26. var str='';
  27. var i;
  28. var l=0;
  29. if (tiptextx<tiptextl)
  30. {
  31. for(i=0;i<tiptextl-tiptextx;i++,l++) str+='&nbsp;';
  32. var s=tiptext.substr(0, tiptextx);
  33. str+=s;
  34. l+=s.length;
  35. }
  36. else
  37. {
  38. str=tiptext.substr(tiptextx-tiptextl,tiptextl);
  39. l+=str.length;
  40. }
  41. for(i=l;i<tiptextl;i++) str+='&nbsp;';
  42. if (tiptextdir)
  43. {
  44. st.innerHTML='<pre style="margin:0px">'+str+'<'+'/pre>';
  45. tiptextx=(tiptextx+tiptextdir)%(tiptext.length+tiptextl);
  46. if (tiptextx<0) tiptextx+=tiptext.length+tiptextl;
  47. tiptextx=(tiptextx)%(tiptext.length+tiptextl);
  48. }
  49. setTimeout('movetext();',150);
  50. }
  51. document.write('&nbsp;<INPUT style="font-size:xx-small;" type=button value="&lt;" onclick="javascript:tiptextdir=tiptextdir&gt;0?0:tiptextdir-1;"><INPUT style="font-size:xx-small;" type=button value="&gt;" onclick="javascript:tiptextdir=tiptextdir&lt;0?0:tiptextdir+1;">');
  52. movetext();
  53. // -->
  54. </SCRIPT>



 
 
Dans:
 var tiptext='INSERT TEXT HERE'; // texte à faire défiler
 
J ene peut pas mettre de requete sql, ca ne marche pas. J'ai aussi un flux rss, comment je doit proceder ?


---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Marsh Posté le 26-03-2006 à 16:05:44    

ben tu mets tout ça dans un fichier php, et:

Code :
  1. var tiptext='<? echo addslashes("INSERT TEXT HERE" ) ?>';


 
Si tu le met dans un fichier à part, tu ajoute tout au début un header(Content-type...).

Reply

Marsh Posté le 26-03-2006 à 16:05:44   

Reply

Marsh Posté le 26-03-2006 à 19:42:45    

nan nargy arrête de proposer ton script pourri stp, vous patientez une heure que j'ai fini le mien, et basta :o

Reply

Marsh Posté le 26-03-2006 à 19:55:49    

:lol: ok moi je suis pas pressé

Reply

Marsh Posté le 27-03-2006 à 03:23:15    

> nan nargy arrête de proposer ton script pourri stp, vous patientez une heure que j'ai fini le mien, et basta :o
 
ben j ai pas pu attendre finalement... je l ai pas encore testé avec IE, mais ça devrait être ok:
 


<!--
 
Script de défilement de news:
* Fait défiler une série de messages et une image de fond dans un cadre.
* Défilement horizontal cyclique. Ne fonctionne pas quand les messages sont peu nombreux.
* Accepte du HTML pour les messages: icônes, liens et multi-lignes possibles.
* Arrête temporairement le défilement lorsque la souris passe au dessus.
* Rechargement de la page avec continuité du défilement possible.
* Vitesses et dimensions configurables.
* Possibilité de mettre une copie des messages pour navigateurs sans javascript.
* Testé FF+Opera
 
Pour utiliser ce sript:
- copier/coller le script à l'endroit voulu
- changer les messages
- changer la vitesse de défilement
- changer la vitesse de défilement du fond
- changer ou retirer l'image de fond dans le prochain tag DIV
- changer ou retirer la bordure dans le prochain tag DIV
- changer ou retirer la largeur dans le prochain tag DIV
- mettre une copie des messages dans le prochain tag DIV pour navigateurs sans javascript
 
-->
 
<script language="JavaScript" type="text/javascript">
<!--
// changer les messages ici:
var messages=new Array(
' <a href="test.html"><img border=0 src="http://192.168.1.166/favicon.ico"> 1 Insert message here...khgkjghkjghkdhg dkjgh dkgjhdkgjhkjh</a>',
' <a href="test.html"><img border=0 src="http://192.168.1.166/favicon.ico"> 2 Insert message here...lkfghjlkj hkdjgk djgdfgdfg</a>',
' <a href="test.html"><img border=0 src="http://192.168.1.166/favicon.ico"> 3 Insert message here...mlj tldfg ndfgert</a>',
' <a href="test.html"><img border=0 src="http://192.168.1.166/favicon.ico"> 4 Insert message here...kgjh lkerg</a>',
' <a href="test.html"><img border=0 src="http://192.168.1.166/favicon.ico"> 5 Insert message here...ljchjj</a>'
);
// changer la vitesse de défilement ici:
var newsscrollerspeed0=4; // vitesse des messages en pixels
var newsscrollerbgspeed0=2; // vitesse du fond en pixels
var newsscrollerinterval=80; // par ces millisecondes
// changer ou retirer l'image de fond dans le prochain tag DIV
// changer ou retirer la bordure dans le prochain tag DIV
// changer ou retirer la largeur dans le prochain tag DIV
 
var newsscrollerspeed=newsscrollerspeed0;
var newsscrollerbgspeed=newsscrollerbgspeed0;
-->
</script>
<DIV style="background:pink;border:inset #efefef 5px;width:100%;overflow:hidden;" onmouseover="javascript:newsscrollerspeed=0;newsscrollerbgspeed=0;" onmouseout="javascript:newsscrollerspeed=newsscrollerspeed0;newsscrollerbgspeed=newsscrollerbgspeed0;" id="scroller">
<!--
Mettre une copie des messages ici pour navigateurs sans javascript.
-->
</div>
<script language="JavaScript" type="text/javascript">
<!--
var scroller=document.getElementById('scroller');
var newsscrolltext='';
for(i=0;i<messages.length;i++)
{
  if(i==0) newsscrolltext+='<table id="scrollercontent" style="cursor:default;position:relative;vertical-align:middle;white-space:pre;" border=0 cellpadding=0 cellspacing=0><tr><td id="scrollercell'+i+'">';
  else newsscrolltext+='</td><td id="scrollercell'+i+'">';
  newsscrolltext+=messages[i];
}
newsscrolltext+='</td></tr></table>';
scroller.innerHTML=newsscrolltext;
 
function newsscrollbounds()
{
  var firstcell;
  while(newsscrollerx>(firstcell=document.getElementById('scrollercell0')).offsetWidth)
  {
    newsscrollerx-=firstcell.offsetWidth;
    var firsthtml=firstcell.innerHTML;
    for(i=1;i<messages.length;i++)
    {
      document.getElementById('scrollercell'+(i-1)).innerHTML=
        document.getElementById('scrollercell'+i).innerHTML;
    }
    document.getElementById('scrollercell'+(messages.length-1)).innerHTML=
      firsthtml;
  }
}
 
var newsscrollerx=parseInt((new Date()).getTime()/newsscrollerinterval*newsscrollerspeed)%document.getElementById('scrollercontent').offsetWidth;
var newsscrollerbgx=newsscrollerx;
function newsscroll()
{
  newsscrollerx+=newsscrollerspeed;
  newsscrollbounds();
 
  newsscrollerbgx=(newsscrollerbgx+newsscrollerbgspeed);
  var scroller=document.getElementById('scroller');
  newsscrollerbgx%=scroller.offsetWidth;
  scroller.style.backgroundPosition=(-newsscrollerbgx)+'px 0px';
 
  var scrollercontent=document.getElementById('scrollercontent');
  scrollercontent.style.left=(-newsscrollerx)+'px';
  scrollercontent.visible=true;
}
 
setInterval('newsscroll()',newsscrollerinterval);
 
-->
</script>


Message édité par nargy le 27-03-2006 à 12:39:32
Reply

Marsh Posté le 27-03-2006 à 11:38:18    

c'est quoi ce caca [:petrus75] ??
ce soir 22H merci

Reply

Marsh Posté le 27-03-2006 à 11:54:51    

ça marchre très bien!
si tu veut réorganiser le javascript tu peut toujours, mais chez moi c est nikel

Reply

Marsh Posté le 27-03-2006 à 12:36:21    

par contre le post que j ai fait a foiré les " je vais corriger

Reply

Marsh Posté le 27-03-2006 à 23:06:36    

putain je croyais avoir posté cet aprem un de mes script :/
 
aller je repost.
 
au passage moi je bosse par le DOM et fait scroller un DIV avec du texte au préalable mis dedans,  
je fais pas un vieux caca en tableau et en trucs bizarres mal codé.
Ya 90% de ton code à jeter la dedans.
Ou peut etre qu'on a pas la même vision du scroll, tu fais défiler les message un à un avec attente [:petrus dei]
Faudra m'excuser que je ne sorte pas le script tout de suite, mais en ce moment c'est parti à 8h et rentré à 21h30 tous les soirs :/
quoi que je code dans le train mais je suis en train de debugger le bouzin afin qu'il soit DOM compliant et qui permette de gerer toutes les directions (top to bottom, bottom to top, left to right, right to left)

Reply

Marsh Posté le 27-03-2006 à 23:35:58    

Ca par exemple c'est plus propre que ton bouzin qui fait des trucs de partout [:petrus75]
exmple ici : http://gatsu.ftp.free.fr/html/ScrollAuto.html  

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title></title> 
  5.     <script type="text/javascript"> 
  6.       /*fonction d'initialisation du scroll sur un élément 
  7.          La fonctionne se lance ainsi :  
  8.           initScroll(ElementId, increment, timer, direction) 
  9.           ElementId : correspond à l'identifiant de l'élément visé 
  10.           increment : nombre de pixels que le block avance 
  11.           timer : durée en millisecondes avant la prochaine incrémentation (avancement) 
  12.           direction : direction du bloc :  
  13.                       -TB : Top to Bottom, du haut vers le bas 
  14.                       -BT : Bottom to Top, du bas vers le haut 
  15.                       -LR : Left to Right, de la gauche vers la droite 
  16.                       -RL : Right to Left, de la droite vers la gauche 
  17.         
  18.           exemple :  
  19.              -initScroll("monbloc", 2, 20, "tb" ); 
  20.              -initScroll("mesnews", 1, 30, "lr" ); 
  21.               
  22.         
  23.          la fonction scrollElement est la fonction qui est appelée successivement, pour faire avancer le scroll. 
  24.          la fonction initScroll sert à créer et initialiser le block avec qu'il puisse faire du scrolling. 
  25.          sous Opera, le scroll ne fonction que si les scroller sont visible (overflow:auto), avec overflow:hidden  
  26.          le scroll ne fonctionnera pas sous Opera 
  27.  
  28.          Vous pouvez à tout moment arrêter le scroll sur un bloc ou le relancer. 
  29.          il vous suffit pour cela de faire un clearInterval(lenomdemonblockTimer) 
  30.          le nom de la variable qui est lancée par setInterval, est constitué de l'id du bloc suivi du mot Timer 
  31.          ex : blocktoscrollTimer 
  32.          et vous pouvez à tout moment relancer la fonction par un setInterval de cette manière :  
  33.          var monTimer = setInterval('scrollElement("iddemonElement", 10, "tb"', 30); 
  34.           
  35.          la fonction scrollElement se lance avec les parametre ElementId, increment, direction. 
  36.           
  37.          Attention aux valeurs que vous choisissez, dans l'increment, vous pouvre mettre des valeurs de 1 à 5, c'est largement suffisant 
  38.          et pour le timer, mettez des valeurs de 10 à 100, c'est une bonne fouchette 
  39.           
  40.                    
  41.        */   
  42.        
  43.       function initScroll(EltId, increment, timer, direction) { 
  44.          direction = direction.toLowerCase(); 
  45.          var BlockScroll = document.getElementById(EltId); //On recupere l'element 
  46.           
  47.          if (direction=="bt" || direction=="tb" ) { 
  48.             var FirstDiv = BlockScroll.insertBefore(document.createElement("div" ), BlockScroll.firstChild); //On cree un DIV au debut du bloc 
  49.             var LastDiv = BlockScroll.appendChild(document.createElement("div" )); //on cree un div à la fin du bloc 
  50.              
  51.             FirstDiv.style.height = BlockScroll.clientHeight+"px"; //On dimensionne le premier div de la hauteur du bloc 
  52.             LastDiv.style.height = BlockScroll.clientHeight+"px"; //idem pour le dernier div 
  53.          } 
  54.          if (direction=="lr" || direction=="rl" ) { 
  55.             BlockScroll.style.paddingLeft=BlockScroll.clientWidth; 
  56.             BlockScroll.style.paddingRight=BlockScroll.clientWidth; 
  57.             BlockScroll.style.whiteSpace="nowrap"; //On vire le retour charriot afin de présenter le texte sur une seule ligne 
  58.           } 
  59.         eval('var '+EltId+'Timer = setInterval("scrollElement(\'"+ EltId + "\'," + increment + ",\'" + direction +"\')",timer);'); //On lance la fonction qui va initialiser le scroll 
  60.        } 
  61.         
  62.        function scrollElement(eltId, increment, direction) { 
  63.           var BlockScroll = document.getElementById(eltId); 
  64.           with (BlockScroll) { 
  65.              switch(direction) { 
  66.                  case "bt": 
  67.                     scrollTop += increment; 
  68.                     if (scrollTop+clientHeight>=scrollHeight) { scrollTop=0}; 
  69.                     break; 
  70.                  case "tb": 
  71.                     scrollTop -= increment; 
  72.                     if (scrollTop<=increment) { scrollTop=scrollHeight}; 
  73.                     break; 
  74.                  case "rl":  
  75.                     scrollLeft += increment; 
  76.                     if (scrollLeft+clientWidth>=scrollWidth) scrollLeft=0; 
  77.                     break; 
  78.                  case "lr":  
  79.                     scrollLeft -= increment; 
  80.                     if (scrollLeft<increment) scrollLeft=scrollWidth; 
  81.                     break; 
  82.              } 
  83.               
  84.           } 
  85.        }  
  86.      
  87.        window.onload=function() { 
  88.          initScroll("blocktoscroll", 3, 10, "bt" ); 
  89.          initScroll("blocktoscroll2", 2, 10, "rl" ); 
  90.        } 
  91. </script> 
  92. <style type="text/css"> 
  93.         #blocktoscroll { 
  94.            overflow:hidden; 
  95.            width:100px; 
  96.            height:100px; 
  97.            border:1px solid red; 
  98.         } 
  99.         #blocktoscroll2 { 
  100.            overflow:hidden; 
  101.            width:100px; 
  102.            height:20px; 
  103.            border:1px solid blue; 
  104.         } 
  105.          
  106. </style> 
  107.   </head> 
  108.   <body> 
  109.     <div id="blocktoscroll"> 
  110.       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam euismod 
  111.       nisl eu sapien. Ut pharetra pharetra ante. Morbi eleifend molestie urna. 
  112.       Donec tempor, orci eu semper aliquam, ipsum tortor tempor ante, id 
  113.       interdum justo nulla vel ipsum. Class aptent taciti sociosqu ad litora 
  114.       torquent per conubia nostra, per inceptos hymenaeos. Sed dictum, ipsum 
  115.       vitae malesuada interdum, nunc felis dignissim nibh, vitae varius massa 
  116.       tortor ut mauris. Quisque eget est. Sed vel erat. Vivamus vitae justo sit 
  117.       amet purus porttitor gravida. Phasellus ornare, massa non posuere 
  118.       feugiat, sem magna fringilla arcu, ut aliquam elit turpis id turpis. 
  119.       Etiam sodales placerat sem. Donec a odio. Donec porttitor pellentesque 
  120.       eros. Phasellus tellus. Donec nec mi. Pellentesque tincidunt gravida 
  121.       magna. 
  122.     </div> 
  123.     <div id="blocktoscroll2"> 
  124.       Lorem ipsum dolor sit amet,  
  125.     </div> 
  126.      
  127.       </body> 
  128. </html>


Message édité par gatsu35 le 27-03-2006 à 23:44:28
Reply

Marsh Posté le 27-03-2006 à 23:42:17    

J'espère que tu prendra exemple sur ce que j'ai fait. le but du jeu :  
 
-tu as un élément HTML propre
-tu style ton élément à ta guise
-un javascript attaque l'élément, ajoute du style et des objets inside le bouzin, et lance une fonction qui s'occupe du scroll et baste.
 
C'est propre et comprehensible comme code.
ton truc à toi, c'est tellement mal codé que je ne prefère pas y fourrer mon nez. [:petrus75]
 
Au passage je vais le faire crossbrowser, car opera lui, a la mauvaise habitude (connard de opera :/) de ne pas autoriser le scroll sur un élément en overflow:hidden, on ne peut gerer que si l'overflow est en auto.
 
alors la feinte, consiste à mettre un autre div dans le div parent, et ) cacher les scroller par le div parent en overflow, et mettre le div enfant en overflow:auto
 
putain je travaille trop le soir [:petrus75]


Message édité par gatsu35 le 28-03-2006 à 00:18:51
Reply

Marsh Posté le 28-03-2006 à 00:03:12    

ah oui j'avoue que je ne prend pas en compte le background au niveau du scroll, mais est-ce vraiment utile [:petrus dei]

Reply

Marsh Posté le 28-03-2006 à 00:32:26    

Aller V3 avec action sur les attributs et donc cela me permet d'ajouter une interaction avec la souris, du coup le bordel s'arrête lors du passage de la souris [:kbchris]
Exemple toujours au même endroit : http://gatsu.ftp.free.fr/html/ScrollAuto.html
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title></title> 
  5.     <script type="text/javascript"> 
  6.       /*fonction d'initialisation du scroll sur un élément 
  7.          La fonctionne se lance ainsi :  
  8.           initScroll(ElementId, increment, timer, direction, ismouseover) 
  9.           ElementId : correspond à l'identifiant de l'élément visé 
  10.           increment : nombre de pixels que le block avance 
  11.           timer : durée en millisecondes avant la prochaine incrémentation (avancement) 
  12.           direction : direction du bloc :  
  13.                       -TB : Top to Bottom, du haut vers le bas 
  14.                       -BT : Bottom to Top, du bas vers le haut 
  15.                       -LR : Left to Right, de la gauche vers la droite 
  16.                       -RL : Right to Left, de la droite vers la gauche 
  17.           ismouseover : arrêt du défilement lors du passage de la souris 
  18.                         true : action avec souris 
  19.                         false : aucune action avec souris 
  20.         
  21.           exemple :  
  22.              -initScroll("monbloc", 2, 20, "tb" ); 
  23.              -initScroll("mesnews", 1, 30, "lr" ); 
  24.               
  25.         
  26.          la fonction scrollElement est la fonction qui est appelée successivement, pour faire avancer le scroll. 
  27.          la fonction initScroll sert à créer et initialiser le block avec qu'il puisse faire du scrolling. 
  28.          sous Opera, le scroll ne fonction que si les scroller sont visible (overflow:auto), avec overflow:hidden  
  29.          le scroll ne fonctionnera pas sous Opera 
  30.  
  31.          Vous pouvez à tout moment arrêter le scroll sur un bloc ou le relancer. 
  32.          il vous suffit pour cela de faire un clearInterval(lenomdemonblockTimer) 
  33.          le nom de la variable qui est lancée par setInterval, est constitué de l'id du bloc suivi du mot Timer 
  34.          ex : blocktoscrollTimer 
  35.          et vous pouvez à tout moment relancer la fonction par un setInterval de cette manière :  
  36.          var monTimer = setInterval('scrollElement("iddemonElement", 10, "tb"', 30); 
  37.           
  38.          la fonction scrollElement se lance avec les parametre ElementId, increment, direction. 
  39.           
  40.          Attention aux valeurs que vous choisissez, dans l'increment, vous pouvre mettre des valeurs de 1 à 5, c'est largement suffisant 
  41.          et pour le timer, mettez des valeurs de 10 à 100, c'est une bonne fouchette 
  42.           
  43.                    
  44.        */   
  45.        
  46.       function initScroll(EltId, increment, timer, direction, ismouseover) { 
  47.          direction = direction.toLowerCase(); 
  48.          var BlockScroll = document.getElementById(EltId); //On recupere l'element 
  49.          //On rajoute les attributs dans l'élément, ça évite de se les trimballer à chaque fois 
  50.          BlockScroll.increment = increment; 
  51.          BlockScroll.timer = timer; 
  52.          BlockScroll.direction = direction; 
  53.          if (direction=="bt" || direction=="tb" ) { //direction verticale 
  54.             var FirstDiv = BlockScroll.insertBefore(document.createElement("div" ), BlockScroll.firstChild); //On cree un DIV au debut du bloc 
  55.             var LastDiv = BlockScroll.appendChild(document.createElement("div" )); //on cree un div à la fin du bloc 
  56.             FirstDiv.style.height = BlockScroll.clientHeight+"px"; //On dimensionne le premier div de la hauteur du bloc 
  57.             LastDiv.style.height = BlockScroll.clientHeight+"px"; //idem pour le dernier div 
  58.          } 
  59.          if (direction=="lr" || direction=="rl" ) { //direction horizontale 
  60.             BlockScroll.style.paddingLeft=BlockScroll.clientWidth; 
  61.             BlockScroll.style.paddingRight=BlockScroll.clientWidth; 
  62.             BlockScroll.style.whiteSpace="nowrap"; //On vire le retour charriot afin de présenter le texte sur une seule ligne 
  63.           } 
  64.        //Rajout des évènement sur le block 
  65.        if (ismouseover) { 
  66.           BlockScroll.onmouseover = function() { //Arrête le défilement lors du passage de la souris 
  67.              this.backupincrement = this.increment; 
  68.              this.increment=0; 
  69.           } 
  70.           BlockScroll.onmouseout = function() { 
  71.              this.increment=this.backupincrement; 
  72.           } 
  73.        } 
  74.        eval('var '+EltId+'Timer = setInterval("scrollElement('"+ EltId + "')",timer);'); //On lance la fonction qui va initialiser le scroll 
  75.         
  76.         
  77.         
  78.        } 
  79.         
  80.        function scrollElement(eltId) { 
  81.         
  82.           var BlockScroll = document.getElementById(eltId); 
  83.           with (BlockScroll) { 
  84.  
  85.              switch(direction) { 
  86.                  case "bt": 
  87.                     scrollTop += increment; 
  88.                     if (scrollTop+clientHeight>=scrollHeight) { scrollTop=0}; 
  89.                     break; 
  90.                  case "tb": 
  91.                     scrollTop -= increment; 
  92.                     if (scrollTop<=increment) { scrollTop=scrollHeight}; 
  93.                     break; 
  94.                  case "rl":  
  95.                     scrollLeft += increment; 
  96.                     if (scrollLeft+clientWidth>=scrollWidth) scrollLeft=0; 
  97.                     break; 
  98.                  case "lr":  
  99.                     scrollLeft -= increment; 
  100.                     if (scrollLeft<increment) scrollLeft=scrollWidth; 
  101.                     break; 
  102.              } 
  103.           } 
  104.        }  
  105.      
  106.        window.onload=function() { 
  107.          initScroll("blocktoscroll", 3, 50, "bt", true); 
  108.          initScroll("blocktoscroll2", 2, 10, "rl", false); 
  109.        } 
  110. </script> 
  111. <style type="text/css"> 
  112.         #blocktoscroll { 
  113.            overflow:hidden; 
  114.            width:100px; 
  115.            height:100px; 
  116.            border:1px solid red; 
  117.         } 
  118.         #blocktoscroll2 { 
  119.            overflow:hidden; 
  120.            width:100px; 
  121.            height:20px; 
  122.            border:1px solid blue; 
  123.         } 
  124.          
  125. </style> 
  126.   </head> 
  127.   <body> 
  128.     <div id="blocktoscroll"> 
  129.       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam euismod 
  130.       nisl eu sapien. Ut pharetra pharetra ante. Morbi eleifend molestie urna. 
  131.       Donec tempor, orci eu semper aliquam, ipsum tortor tempor ante, id 
  132.       interdum justo nulla vel ipsum. Class aptent taciti sociosqu ad litora 
  133.       torquent per conubia nostra, per inceptos hymenaeos. Sed dictum, ipsum 
  134.       vitae malesuada interdum, nunc felis dignissim nibh, vitae varius massa 
  135.       tortor ut mauris. Quisque eget est. Sed vel erat. Vivamus vitae justo sit 
  136.       amet purus porttitor gravida. Phasellus ornare, massa non posuere 
  137.       feugiat, sem magna fringilla arcu, ut aliquam elit turpis id turpis. 
  138.       Etiam sodales placerat sem. Donec a odio. Donec porttitor pellentesque 
  139.       eros. Phasellus tellus. Donec nec mi. Pellentesque tincidunt gravida 
  140.       magna. 
  141.     </div> 
  142.     <div id="blocktoscroll2"> 
  143.       Lorem ipsum dolor sit amet,  
  144.     </div> 
  145.      
  146.       </body> 
  147. </html>


Message édité par gatsu35 le 28-03-2006 à 00:33:02
Reply

Marsh Posté le 28-03-2006 à 00:37:22    

Citation :


J'espère que tu prendra exemple sur ce que j'ai fait. le but du jeu :  
 
-tu as un élément HTML propre
-tu style ton élément à ta guise
-un javascript attaque l'élément, ajoute du style et des objets inside le bouzin, et lance une fonction qui s'occupe du scroll et baste.  


 
D accord, mon script est un peu crade, mais bon, tu peut mettre le JS et le CSS à part.
 
> ah oui j'avoue que je ne prend pas en compte le background au niveau du scroll, mais est-ce vraiment utile [:petrus dei]
 
Le mien n a pas le choix du défilement vertical.
 
Mais il a en plus:
* Fait défiler une image de fond,
* Défilement horizontal cyclique,
* Arrête temporairement le défilement lorsque la souris passe au dessus (pour ne pas courrir après un lien),
* Rechargement de la page avec continuité du défilement possible.
* curseur en forme de flèche
 
Pour pouvoir faire un message cyclique:
mets les messages dans un tableau et fait scroller le tableau dans un div
 
Utilise deux fonction javascript pas tout à fait standard: innerWidth et innerHTML, mais compatibles FF+IE+Opera (le reste j ai pas testé).
 
définit deux fonctions javascript:
- newsscrollbounds()=vérifier que le scroll cyclique est dans les limites
- newsscroll()=scroller à l aide de CSS
 
Le reste du code est des initialisations au début de scroll, que je pourrait certe mettre dans une fonction à part.
 
bref, le source du mien est plus crade, mais il est plus joli a regarder! et toc! :P

Message cité 1 fois
Reply

Marsh Posté le 28-03-2006 à 00:42:53    

Je l améliore encore:
+ pas besoin de scroller si les messages sont trop petits,
+ meilleur dimensionnement
+ laisser à l internaute le choix de la vitesse de défilement
+ JS/CSS à part et plus lisible

Message cité 1 fois
Reply

Marsh Posté le 28-03-2006 à 02:00:34    

Recode tout et porte toi sur le JS via le DOM.
 
Et utilise les scrollTop, scrollLeft and Co.
 
Pour opera c'est juste une chtite question de temps mais il est 2h du mat là :D

Reply

Marsh Posté le 28-03-2006 à 02:06:31    

nargy a écrit :

Je l améliore encore:
+ pas besoin de scroller si les messages sont trop petits,


Bon je retire ce que j'ai dit, ya pas deux lignes à rajouter, puisque c'est tout bonnement impossible
de détecter la taille du contenu à proprement parler :/
Faudrait que je regarde de plus près :/, mais par défaut, si un bloc est fait pour scroller, il scrollera :/.
Et puis si un bloc doit être scrollé, c'est que son contenu est trop grand pour rentrer dans bloc par defaut
 

nargy a écrit :


+ meilleur dimensionnement  


>>Déjà fait [:kbchris]

nargy a écrit :


+ laisser à l internaute le choix de la vitesse de défilement  


un peu inutile mais c'est très simple à faire, quoi que si tu as déjà défini la vitesse de défilement, tu aura du mal à la redéfinir derrière. Humm ah si moi je peux les doigts dans le nez, étant donné que mon élément contient les attribut en lui même, j'ai juste soit à modifier l'incrément, soit à stopper l'élément, et à le relancer avec un nouveau timer [:petrus75] cf fonction setInterval et eval

nargy a écrit :


+ JS/CSS à part et plus lisible  


>>Déjà fait [:kbchris]
Ben comme je t'ai dit, c'est comme ça qu'on fait du javascript, pas comme toi tu fais là.  
Là ton script il est digne de figurer sur l'éditeurjavascript
 
[/quotemsg]


Message édité par gatsu35 le 28-03-2006 à 02:59:07
Reply

Marsh Posté le 28-03-2006 à 02:23:50    

nargy a écrit :


 
D accord, mon script est un peu crade, mais bon, tu peut mettre le JS et le CSS à part.
 
> ah oui j'avoue que je ne prend pas en compte le background au niveau du scroll, mais est-ce vraiment utile [:petrus dei]


Oui il est crade et je te l'ai dit plusieur fois. M'enfin, il est très moche à l'affichage, et je ne sais pas de quelle manière tu opère ton scroll, mais c'est d'une horreur pas possible, ca me bouffe mes scrollers sur ma page
 

nargy a écrit :


Le mien n a pas le choix du défilement vertical.


Ben il était concu pour ça au départ le mien :/
 

nargy a écrit :


Mais il a en plus:
* Fait défiler une image de fond,


gadget un peu inutile. J'ai juste à foutre une image en fond et baste background-attachment:scroll c'est fait pour :D, je te montrerai un exemple taleur

nargy a écrit :


* Défilement horizontal cyclique,


Cyclique ? plutôt bordelique nan ?
 
 

nargy a écrit :


* Arrête temporairement le défilement lorsque la souris passe au dessus (pour ne pas courrir après un lien),


Idem :D, ajouté à la mano sur les éléments eux même
 

nargy a écrit :


* Rechargement de la page avec continuité du défilement possible.
 


C'est quoi que tu appelle continuité ? reprise là ou il en était ?
humm ca me parapit plutot louche tout ça, car lors du rechargement de la page, comment fait tu pour récupérer l'état précédent du scroller ? en cookies ? Ca fait trop bloat, surtout que si tu enregistres le cookies toutes les 10 millisecondes imagines le pauvre PC du gars :/

nargy a écrit :


* curseur en forme de flèche


humm  cursor: default; en CSS sur l'élément ça fait pareil  [:petrus75]  
 

nargy a écrit :


Pour pouvoir faire un message cyclique:
mets les messages dans un tableau et fait scroller le tableau dans un div


Queneni pas besoin, le webmaster n'a juste qu'à caser ses news dans une liste genre :  
<ul>
<li>news 1 : voila la news</li>
<li>news 2: voila laseconde news </li>
<li>...</li>
</ul>
tout ceci dans le DIV qui sera scrollé, et automatiquement, sont truc sera splitté dans un tableau et défilera cycliquement, prévu dans la V4
 

nargy a écrit :


Utilise deux fonction javascript pas tout à fait standard: innerWidth et innerHTML, mais compatibles FF+IE+Opera (le reste j ai pas testé).


Ce ne sont pas des fonctions mais des attributs de l'objet en question [:aloy]
 

nargy a écrit :


définit deux fonctions javascript:
- newsscrollbounds()=vérifier que le scroll cyclique est dans les limites
- newsscroll()=scroller à l aide de CSS


Hhum ya trop de fonction je trouve, il devient bloatware ton truc et bordelique aussi
 

nargy a écrit :


Le reste du code est des initialisations au début de scroll, que je pourrait certe mettre dans une fonction à part.
 
bref, le source du mien est plus crade, mais il est plus joli a regarder! et toc! :P


vivi ton code est crade [:petrus75]  je te le confirme  [:petrus75]  et met une fonction à part, on ne met jamais de JS dans une page en brut sauvagement


Message édité par gatsu35 le 28-03-2006 à 02:31:22
Reply

Marsh Posté le 28-03-2006 à 10:34:11    

Citation :


C'est quoi que tu appelle continuité ? reprise là ou il en était ?
humm ca me parapit plutot louche tout ça, car lors du rechargement de la page, comment fait tu pour récupérer l'état précédent du scroller ? en cookies ? Ca fait trop bloat, surtout que si tu enregistres le cookies toutes les 10 millisecondes imagines le pauvre PC du gars :/


 
Wo non! la position de départ est fonction de l horloge du nagivateur, donc si tu recharge la page ça reprends là où c en était! hehehehe :p
 
Bon ok, ça ne marche plus quand le défileur est arrêté avec la souris, mais ça coûte rien de le mettre quand même.


Message édité par nargy le 28-03-2006 à 10:34:44
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed