Auto scroller de news

Soyez le premier à donner votre avis sur cette source.

Vue 23 623 fois - Téléchargée 8 878 fois

Description

Ce script va mettre en place une zone de défillement automatique, pour par exemple faire défiler des news.

Vous pouvez certainement déjà trouver des sources qui produise à peut pret cette effet, j'ai toutefois décidé de repartir à zéro afin d'y apporter quelque fonctionnalités qui me semblait intéressante comme:
  • Ce script permet aux robot indexer de 'voir' le contenu qui défile ainsi que les éventuels liens qui s'y trouve. Ce qui n'est pas le cas dans toutes les sources que j'ai pû trouvé puisque toutes l'informations ce trouvé au sein même du code Javascript. Mon code javascript quand à lui charge une liste (<ul>...</ul>, donc parfaitement indexable) dans le DOM est génère les élements défilants ensuite.
  • Ce script gère de façon fine les vitesses de défillement et de pause. J'ai nottamment fait une différence entre la vitesse d'apparition d'une news et la vitesse de retrait de celle-ci. On peut ainsi faire venir très vite l'information mais la faire partir plus lentement afin de laissé le temps au lecteur de la lire.
  • Le script permet aussi de rendre la zone cliquable, chaque bloc défilant pouvant avoir sa propre url de destination et sa propre cible.
  • D'autres propriétés ont également était mise en évidence en début de script afin de vous permettre une meilleur intégration dans vos projets. Je vous invite à lire les commentaires glisser dans le code source.

Source / Exemple :


cf le zip
Ou téléchargement depuis ma page : http://codessources.votre-web.com/codessources/js/autoScroller/index.php, avec explications détaillées

Démonstration simplifiée juste le stricte néssaire à savoir deux lignes de codes et l'include : http://codessources.votre-web.com/codessources/js/autoScroller/demo1/index.html
Démonstration sur le site http://codessources.votre-web.com

Conclusion :


Toutes et dans le zip et pour plus de détails n'hésitez pas à allez sur mon site.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
6
Date d'inscription
mardi 4 novembre 2003
Statut
Membre
Dernière intervention
28 novembre 2008

Hello MaX3315,
Heureux de voir que tu n'as pas déserté totalement cette page :)

>puisque la plupart du temps il y a un framework
En effet, on a tendance à zapper leur existance. Je ne m'y suis jamais vraiment plongé dedans pour une simple raison qui s'est confirmée dans une de mes lectures de comparatif : le choix d'un Framework est crucial dans le sens où une fois qu'il sera intégré, il faudra penser suivant sa stratégie. Il sera assez compliqué de changer de framework en cours de route. Ensuite, un Framework s'intègre plus ou moins bien à de l'existant (un peu lourd pour ne rajouter qu'une touche spécifique). Je termine en rajoutant Symphony à ton prémice de liste car il a l'air de s'en sortir avec quelques honneurs.

>Avec du recul j'évite de plus en plus de réinventer la roue
>(...)
>le script trouve encore des utilisateurs
C'est tout à fait ma philosophie : voilà pourquoi je cherchais un script de scroll =)
De plus, comme mon choix se portait sur un CMS sans SGBD, j'explorais les pistes de scripts qui puissent avoir un peu de souplesse d'adaptation. Pour les lecteurs de commentaires, ce script est super dans cette catégorie.

>il s'agit de javascript devant cibler tous les navigateurs.
Voilà le petit point noir de ce script. Mais c'est faisable, il suffit juste d'être rigoureux et d'user de quelques astuces. Mais après tout dépend de chaque problématique d'utilisation.

Merci pour la piste des Frameworks : il est bien de garder cette idée en tête afin de pouvoir faire le bon choix suivant le cadre de ses conditions. Et il est chouette d'exposer des pistes pour aider tout un chacun (Codes Sources, Projets Open Sources, etc).

=)
Messages postés
170
Date d'inscription
mercredi 18 juin 2003
Statut
Membre
Dernière intervention
11 mai 2009

Bonjour Sarumann,

Mon script est effectivement très vieux et je dois avouer que je ne l'utilise plus dans mes nouvelles créations de site puisque la plupart du temps il y a un framework (prototype, jquery, etc...) disponible ce qui facilite grandement la création de scroller.

Avec du recule j'évite de plus en plus de réinventer la roue... surtout quand il s'agit de javascript devant ciblé tous les navigateurs.

En tout cas je suis content de voir que même après quelque année le script trouve encore des utilisateurs ;)

Bonne prog'
Messages postés
6
Date d'inscription
mardi 4 novembre 2003
Statut
Membre
Dernière intervention
28 novembre 2008

De plus, en lisant les commentaires depuis le début (et assez anciens), une solution plus simple consiste a priori à suivre ces recommandations (que j'aurais pu lire bien avant que je poste à tord et à travers) :

Designotik le 14/06/2006 11:33:40
Donc, ceux qui avaient des pbs avec le scroller sous IE, en ce qui concerne le délais d'attente trop long entre les news, rajouter cette propriété dans le div, ce qui donne :



Cependant, pour l'intégration de ce script dans une petite box, ce fut la galère. Ma problématique de départ est de pouvoir isoler les styles décrits en modifiant des propriétés "absolu" à "relative". De plus, je ne pouvais modifier la balise body (donc bonjour l'appel au javascript dès le chargement de la page). Après avoir trouvé un script javascript (utilisant window.onload), voilà que mes tests en local fonctionnaient mais... une fois placé sur un hébergeur gratuit, je vous laisse imaginer la suite... Sous Firefox, cela allait bien mais sous IE (sans compter la Version 6)... Bref, si jamais vous êtes dans ce cas, n'hésitez pas à poster pour soumettre votre problématique : rien que le fait que j'expose les différents points de ce genre d'adaptation est assez long, alors imaginez si j'entre dans les détails.

Bref, merci pour ce script : une superbe base, même si l'adaptation est fort rugueuse =)
Messages postés
6
Date d'inscription
mardi 4 novembre 2003
Statut
Membre
Dernière intervention
28 novembre 2008

Bonjour moi-même : je ne suis pas resté les bras croisés. Pour les intéressés, je vous recommande ceci (à adapter suivant vos besoins) dans la partie javascript :

1. Indiquez la même vitesse à MAX3315_default_inCommingSpeed que celle pour MAX3315_default_outGoingSpeed (2 solutions : mêmes valeurs numériques ou mettre la deuxième ligne dans le style suivant : var MAX3315_default_inCommingSpeed=MAX3315_default_outGoingSpeed;)
2. Dans la fonction "MAX3315_currentComming()", après la ligne débutant par "var tmpTop= (...)", inscrire cette ligne :
if(tmpTop > this.listNews[this.currentIndex].h+6) { tmpTop=this.listNews[this.currentIndex].h+6; }
6 est ici donné à titre d'exemple. A vous de l'adapter de manière générale en sachant qu'il s'agit de multiplier par -3 la valeur de MAX3315_default_inCommingStep. 3 est une valeur donnée suivant quelques tests réalisés et n'est pas une valeur figée. Là encore, à vous de choisir si cela ne convient pas.

Ainsi, ce code devient bien un bon texte déroulant et fonctionne correctement sans retard, même sous IE6. Je vais tenter de l'intégrer dans un module d'un CMS pas tout jeune sans oublier de rajouter l'entête "GESTIONNAIRE D'AUTO SCROLLER, by MaX3315, (...)". Bref, là, c'est génial ! Et en plus cela contribue aux Open Sources Projects.
Messages postés
6
Date d'inscription
mardi 4 novembre 2003
Statut
Membre
Dernière intervention
28 novembre 2008

Bonsoir/Bonjour,
Ce script est chouette : sauf que je le trouve lent au niveau de l'affichage. Après un test sous Firefox, je constate pourtant qu'il passe bien et que les news s'enchaînent de manière normale. Mais j'avoue n'avoir pas vu où ça pouvait pêcher sous IE6... La première news s'en va normalement et après un temps d'attente relativement long, la deuxième news arrive.
J'ai eu beau jouer avec les variables Out et Comming Speed (du JS) mais sans succès.
Si quelqu'un a une piste, voire une solution, je suis preneur.
Afficher les 66 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.