Javascript - Exemples d' Alérion

« juillet 2008
dim	lun	mar	mer	jeu	ven	sam
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

09 mars 2008 - Aller, insérer une horloge gratuite?

pas trop compliquer, allez sur cette page,

choisissez une horloge, copier le code que j'y mets, et celui là vous pouvez le mettre en toute tranquilité dans le nom d'un lien d'ami (l'adresse, vous pouvez mettre celui de votre blog)

Garanti sans pub :)

Posté par Alerion à 19:56 - Commentaires [7]

16 février 2008 - comment placer une horloge ou autre dans ma colonne en mode normale

Aller, il y avait longtemps que je n'avais fait un truc pour aider les bloggueurs qui sont en non "avancé": Positionner mon compteur, horloge et autres... trucs dans ma colonne de gauche, et non dans celle centrale...

Alors, déjà deux restrictions:

- pour des raisons techniques indépendantes de ma volonté mais de la volonté de l'HTML, les codes seront toujours placés dans la colonne de gauche, inutile donc de me demander de les mettre à droite, ce n'est pas réalisable.

- Il faut avoir un message d'accueil, car en fait vos codes, à l'origine, seront placés dans un message (donc autant qu'il soient dans un message d'accueil)

Voilà, sinon, c'est très facile; il n'y a qu'à suivre....

Déjà on cherche un code pour avoir, je prends juste l'exemple d'une horloge (non, ne me demandez pas d'adresses, je ne fais pas de pub)

Ce code, je le place donc dans un message d'accueil parce qu'il est trop long pour tenir dans les liens

Pour l'occase je vais en créer 02_messageaccueil et

Je passe en code HTML en appuyant sur le bouton <> mode html

Et y colle mon code

On peut le publier et regarder le résultat,
08_resultataccueilethorloge

Devant et derrière j'y rajoute ce qui va permettre de l'identifier et de l'afficher

Devant
<h4 id="codecompteur">

pour ceux qui ont déjà ces compteurs, horloge, suffit juste de rajouter au début des scripts l'identifiant

<h4 id="codecompteur">

Derrière, on va ajouter ma petite contribution,
<script src="http://contesdeweb.free.fr/placercode.js" type="text/javascript"></script></h4>
derriere

Le publier, et voilà, c'est fini, s'il n'y a pas d'erreur d'identifiant, les codes se placent dans la colonne de gauche en entête.
10_resultatfinal

(si vous êtes à la recherche d'une horloge gratuite et sans aucune publicité cachée go ===> là )

Posté par Alerion à 12:36 - Commentaires [21]

22 juin 2007 - Modifier le Calendrier

lors le calendrier est paramétrable en CSS.
on peut modifier sa présentation, changer les jours, afficher la date du jour et y mettre un fond, tout cela paramétrable directement par CSS, et cerise sur le gâteau, ajouter des images en entête, qui se changent toutes les 7 secondes.

Pour les besoins de l'exemple, j'ai donc créé un fond pour le calendrier (200*300 pixels) et deux images (190*110Pixels).

fondcalendar

|
imagecalendar1

imagecalendar2

Le code: -il se décompose en trois parties:
Une première partie à mettre dans le <head> </head>
Une autre partie après le bloc d'affichage du calendrier
Et enfin une dernière grosse partie dans le CSS

Et commençons, par le CSS, car c'est en fait le plus important

nous avons:
#cadrecalendar qui définit la taille de l'encadrement du calendrier et le fond (N'en pas tenir compte si on ne veut pas de fond)
#imagecalendrier qui permet d'afficher les image en entête du calendrier (N'en pas tenir compte si on ne veut pas d'image)

.jourdicalendar, .jourlucalendar... .joursacalendar qui définissent les 7 jours. (N'en pas tenir compte si on ne veut pas de jours personalisés)
.circlecalendar qui permet de diférencier le jour courant sur le calendrier. (N'en pas tenir compte si on ne veut pas différencier le jour présent )

#cadrecalendar { border:none; background:transparent url("http://storage.canalblog.com/65/55/289312/14436521.gif") no-repeat 50% 50%; height: 300px; width: 200px; display: block; } #imagecalendrier { padding: 5px 5px 0 5px; height:145px; display:block; } .jourdicalendar { background-color:#888888; } .jourlucalendar { background-color:#888888; } .jourmacalendar { background-color:#888888; } .jourmecalendar { background-color:#888888; } .jourjecalendar { background-color:#888888; } .jourvecalendar { background-color:#888888; } .joursacalendar { background-color:#888888; } .circlecalendar { background: transparent url("http://storage.canalblog.com/01/77/151832/14392149.gif") no-repeat 50% 50%; font-weight: bold; font-style: normal; font-size:10pt; color:#AA0000; }
donc ce code est à recopier dans la feuille de style général, (et si on veut rester cohérent, avant ou après le #calendar, c'est plus facile de tout regrouper)

ensuite le CSS pour le calendrier étant défini...
passons à la déclaration des images (ici la variable imageducalendar) (Ne pas tenir compte si on ne veut pas d'image)
<script type="text/javascript">  </script>
et chargeons le fichier javascript ----.js qui s'occupe de tout mettre en forme.
-Tout cela (le script en entier) est à mettre dans les pages avant </head>
<script src="http://storage.canalblog.com/79/67/272783/19819048.js" type="text/javascript" ></script>
Nota: le script et son fichier *****.js est le seul qui doit toujours être présent dans <head></head>

Maintenant, la partie qui change tout: à insérer juste après les commandes de bloc du calendrier
<CBCalendar><$BlogCalendar$></CBCalendar>

Sur la page d'accueil
<script type="text/javascript">  </script>

Sur les autres pages
<script type="text/javascript">  </script>

afficher_jours("calendar","v") ou afficher_mois("calendar","p") permettent de changer le calendrier et accepte des arguments:
(seul "calendar" n'est pas à modifier)
"" laisse en l'état (équivaut à ne rien faire)
"v" n'affiche que le style (permet de n'afficher que des images définies dans les styles .jourdicalendar...)
"p" affiche les jour (Dim Lun Mar Mer Jeu Ven Sam) avec un fond dans le style défini
"u" Affiche l'initiale (D L M m J V S D) avec un fond dans le style défini.
AfficherImagesCalendar() affiche les images définies dans la variable "imageducalendar" selon un cycle de 7 secondes

(Evidemment, ne pas mettre les commandes des choses que l'on ne veut pas)
donc....
en partant d'un calendrier standard comme
calendarnormal
celui-ci en ajoutant dans la feuille de style le code
stylegen
dans l'entête
pageaccueil
et le code javaScript sous les blocs de calendrier
pageaccueilcalendar
on se retrouve (magique) avec un calendar dans ce genre..
calendar1 puis calendar2

voili, voilà, j'espère qu'il n'est pas trop compliqué.
NB: du 06/09/2007, mon moteur remplace également en date du jour tous les 1..9 des dizaines également... pb que je vais tâcher de régler. dès que j'en ai le temps...

Posté par Alerion à 21:22 - Commentaires [23]

21 mars 2007 - Smileys

Comment faire

a toute première chose: être en "mode avancé"
La deuxième: éditer la "page d'un message"

Les étapes:

Prémière étape: le code situé en entête,
deuxième étape: Repérer l'Id et la Class
Troisième étape:Insérer le code pour afficher les smileys
Quatrième étape: Insérer le code pour pouvoir choisir dans le commentaire un smiley
Notas: diverses utilisations

Première étape:

Dans l'entête juste avant la balise </head> insérer ce code:
<script src="http://contesdeweb.free.fr/emoticon.js" type="text/javascript"></script>;
cette ligne est le coeur du système c'est ce qui permet de gérer les fonctions d'affichage.

-Bon moi j'ai créé un petit tableau de gif, mais rien ne vous empêche de le modifier pour y ajouter vos propre gif,
il suffit de modifier ou ajouter cette ligne:
list[list.length] = new Array("Nom du gif","adresse url du gif");
La liste des "gifs" ci dessous:

// -->
</script>

Deuxième étape

Ensuite, et là ça devient plus délicat, il faut bien repérer le <div id="..."> qui permet l'affichage des commentaires,
par défaut pour canalblog c'est "content" mais des plaisantins (comme moi) changent ce genre de truc.
Repérer également la class <Div class="..."> dans lesquels sont affichés les commentaires,
par défaut pour canalblog c'est "blogbody" mais des .../... trucs. :)
pour ceux et celles qui n'ont rien modifié ça se trouve dans ces lignes

</head>

         <body><div id="container"><div id="topbar-logo"><div class="logolink"><a href="<$BlogURL$>"></a></div></div><div id="topbar"><h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1><h2><$BlogDescription$></h2></div><div id="content"><div class="blogbody">

      <Blogger> <BlogDateHeader>

et plus particulièrement juste avant <Blogger> <BlogDateHeader> .

pour ceux qui ont changé, bon et bien ils savent où trouver donc. :)

Troisième étape:

Il faut maintenant repérer:

</CBComments> <CBControlForm>
<p><$CBControlForm$></p>
</CBControlForm>
<h2>Poster un commentaire</h2>

et insérer un code java juste après </CBControlForm>, comme ça:

</CBControlForm> (<===ça c'est l'existant, on y touche pas hein!!! On rajoute ce qu'il y a en dessous)

<h2>Poster un commentaire</h2> (<===ça c'est l'existant on y touche pas non plus, oki?)

cette partie remplace tous les codes utilisés par les smileys dans la class déclarée de id déclaré aussi

donc si <div id=...> est différent de "content" ainsi que class de "blogbody" il faut mettre votre définition, sinon ça ne marchera pas

Quatrième étape:

Juste avant le formulaire pour entrer les commentaires nous allons mettre en place "la fenêtre de vision":
Repérer :
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">
et juste avant y insérer:
<hr> <div id="visu"></div> <hr>
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">(<===ça c'est l'existant à ne pas modifier)

Dans la partie de renseignement du titre, on va insérer la barre d'outils:

dans la partie de saisie de commentaire juste en dessous du texte area à repérer:

il faut y insérer :

<textarea id="commentBody" name="commentBody" rows="10" cols="50"></textarea> (<===ça c'est l'existant à ne pas modifier)
</p><p>
<script type="text/javascript">

</script>
</p> (<=== ça aussi c'est l'existant à ne pas modifier)

ce texte permet d'insérer les émoticons en bas de la zone de saisie (et le cas échéant de mettre le code dans notre texte lorsqu'on clique dessus)

Notas:

pour afficher également les gif dans la liste des 10 derniers commentaires, il faut modifier "content" par "rigthbar"
(ou "leftbar" selon où se trouvent la liste des 10derniers commentaires) et "blogbody" par "navlinks"

exemple cette ligne
SwapCodeEmoticon("content","blogbody");
sera remplacée par
SwapCodeEmoticon("rightbar","navlinks");

et le code complet

à placé dans la rightbar après la balise </ul> qui permet d'afficher les commentaires ;)

(et dans les pages de texte, il est parfaitement faisable, en utilisant les code [le gif], de faire afficher les bons gif :))))

toujours grâce à : SwapCodeEmoticon("content","blogbody");

Voilà ça marche bien normalement.
en rapport (lointain, j'en conviens),allez voir Comment se passer d'une adresse mail dans les commentaires

Posté par Alerion à 10:43 - Commentaires [48]

« Accueil 1

Exemples d' Alérion

Pour infos, je ne suis qu'un simple "blogueur", et non un Employé de CanalBlog. Ce que je fais est juste pour vous dépanner lorsque j'en ai le temps, donc pas d'énervement si vous avez l'impression que je ne fais "que" mon boulot ;) oki? Sympa!!!