jeudi 18 septembre 2014

TEXTE DÉFILANT À PARTIR D'UN FICHIER EXTERNE et DISTANT


Je savais déjà faire un texte défilant et d'ailleurs j'en utilisais un depuis quelques jours sur mon blog météo nbbcmeteo.blogspot.com.

Ne serait-ce que par curiosité, j'ai eu envie d'afficher le texte d'un fichier externe distant, ce qui laisse entrevoir pas mal de possibilités, par exemple, peut-être récupérer des données distantes, météo, news, etc.. (je n'ai pas encore essayé).

J'ai essayé avec <object> mais j'ai eu quelques déboires avec cette fichue scrollbar qui s'affichait systématiquement. Je me suis donc dirigé vers un iframe qui a l'avantage de comporter une option scrolling="no". Attention, la scrollbar s'affiche quand même en édition/mode rédiger mais heureusement disparaît lorsque l'article est publié.

Ci-dessous, le code de la page html externe qui contient le texte externe. Elle est hébergée sur ma Dropbox dans le dossier "Public". En jaune, les valeurs qui peuvent être changées.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style type="text/css">
a:link {
  text-decoration:none;
  color: #F0F806;
}
a:visited {
  text-decoration:none;
  color: #F0F806;
}
a:hover {
  text-decoration:none;
  color: #F83406;
}
</style>
</head>
<body>
<span style="color: BLACK; background-color: WHITE; font-size: 16px; font-weight: bold;"><strong>BlogNotes: Trucs et Astuces Blogger et HTML, widgets, tools et tips. Aide HTML, modèles, templates, etc...</strong></span>
</body>
</html>

Ci-dessous, le code du texte défilant proprement-dit. Il peut se trouver dans un post, un widget HTML-JAVASRIPT , ou même entre le <body> et le </body> de votre blog (en mode HTML)
<div style="text-align: center;">
<marquee behavior="scroll" direction="left" style="height: 25px; margin-left: -15px; margin-right: -15px; margin-top: 5px; text-align: center; width: 80%;"><iframe frameborder="0" height="25" name="testext" scrolling="no" src="https://dl.dropboxusercontent.com/u/19586410/Blogs/text_defil_blognote.html" width="800px"></iframe></marquee></div>
Je ne garantis pas que tout mon code est parfait, mais ça fonctionne... Il vous faudra peut-être quand même bidouiller et tâtonner pour arriver à votre but.

Il faut notamment modifier width="800px" (longueur de l'iframe) en fonction de la longueur de votre texte. Si vous voulez afficher un texte qui se présente sur plusieurs lignes, il faudra changer les paramètres de hauteur et mettre behavior=up pour avoir un texte qui défile verticalement vers le haut.

Je ferai peut-être un de ces jours un article sur la récupération et le défilement d'un texte via RSS.

Aucun commentaire:

Enregistrer un commentaire