Dotclear

Vous n'êtes pas identifié(e).

Annonce

13 février 2024 Sortie de Dotclear 2.29

#1 2008-11-11 11:10:33

Moe
Responsable du mini-bar
Lieu : France
Inscription : 2004-09-19
Site Web

[Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Bonjour,
un beau jour où je passais sur Bricoland, je suis devenu fan de ce formulaire de commentaire qui est caché par défaut.

Pour m'amuser, j'ai voulu faire la même chose (on s'amuse comme on peut), voici le résultat, un code à coller avant la balise </head> du fichier post.html de votre thème :

<script type="text/javascript">
//<![CDATA[
$(document).ready(function()  {
	if (($('#c_name').val() == '') && ($('#c_mail').val() == '') && ($('#c_site').val() == '') && ($('#c_content').val() == '')) {
		$('#comment-form').children('fieldset').hide();
		$('#comment-form').children('h3').css({cursor:"pointer",textDecoration:"underline"})
		$('#comment-form').children('h3').click( function() {
			$('#comment-form').children('fieldset').toggle();
		});
	}
});
//]]>
</script>

Comme Pep, je souligne le <h3> pour que l'utilisateur ait l'impression que c'est un lien et qu'il clique dessus. Le formulaire ne sera pas caché si une case du formulaire est remplie.

Edit : un code accessible est disponible ci-dessous : http://forum.dotclear.net/viewtopic.php … 57#p233757

Dernière modification par Moe (2008-11-12 21:46:21)

Hors ligne

#2 2008-11-11 13:28:14

osku
Membre
Lieu : 28
Inscription : 2005-06-15

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Sympa merci pour l'astuce.

Hors ligne

#3 2008-11-11 13:46:33

olivier
Administrator
Inscription : 2004-10-11

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Souligner un titre n'en fait pas un lien et c'est un problème d'accessibilité :) Dans noviny, c'est fait comme ça :

$(function() {
	if ($('body.dc-post, body.dc-page').length == 0) { return; }
	if ($('#pr').length > 0) { return; }
	
	var link = $('<a href="#">' + $('#comment-form h3:first').text() + '</a>').click(function() {
		$('#comment-form fieldset:first').show(200);
		$('#c_name').focus();
		$(this).parent().removeClass('add-comment').html($(this).text());
		return false;
	});
	$('#comment-form h3:first').empty().append(link).addClass('add-comment');
	$('#comment-form fieldset:first').hide();
});

La seule difference entre un fou et moi, c'est que je ne suis pas fou. (Dali)

Hors ligne

#4 2008-11-11 15:35:05

Pep
Membre
Inscription : 2004-08-24
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

olivier a écrit :

Souligner un titre n'en fait pas un lien et c'est un problème d'accessibilité :)

Pour éviter toute méprise, j'utilise un vrai lien <a /> et pas un simple soulignement de <h3 />.
Faut pas croire ... :-)


Who Cares ?

Hors ligne

#5 2008-11-11 15:40:38

olivier
Administrator
Inscription : 2004-10-11

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

En quand est-ce qu'on peut soumettre sur DA ? ;)


La seule difference entre un fou et moi, c'est que je ne suis pas fou. (Dali)

Hors ligne

#6 2008-11-11 15:43:57

Pep
Membre
Inscription : 2004-08-24
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Quand ça sera prêt.™


Who Cares ?

Hors ligne

#7 2008-11-11 16:28:55

Moe
Responsable du mini-bar
Lieu : France
Inscription : 2004-09-19
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Olivier, voici ta méthode sans appliquer de style :

<script type="text/javascript">
//<![CDATA[
$(function() {
	if ($('body.dc-post, body.dc-page').length == 0) { return; }
	if ($('#pr').length > 0) { return; }
	
	var link = $('<a href="#">' + $('#comment-form h3:first').text() + '</a>').click(function() {
		$('#comment-form fieldset').show(200);
		$('#c_name').focus();
		$(this).parent().html($(this).text());
		return false;
	});
	$('#comment-form h3:first').empty().append(link);
	$('#comment-form fieldset').hide();
});
//]]>
</script>

Ça c'est pour les thèmes sans image associée au formulaire, pour les autres, on peut se passer d'une modification du fichier CSS :

<script type="text/javascript">
//<![CDATA[
$(function() {
	if ($('body.dc-post, body.dc-page').length == 0) { return; }
	if ($('#pr').length > 0) { return; }
	
	var link = $('<a href="#">' + $('#comment-form h3:first').text() + '</a>').click(function() {
		$('#comment-form fieldset').show(200);
		$('#c_name').focus();
		$(this).parent().css({paddingBottom:""}).html($(this).text());
		return false;
	});
	$('#comment-form h3:first').empty().append(link).css({paddingBottom:"30px"});
	$('#comment-form fieldset').hide();
});
//]]>
</script>

Merci pour ton code. :)

Pep a écrit :

Pour éviter toute méprise, j'utilise un vrai lien <a /> et pas un simple soulignement de <h3 />.
Faut pas croire ... :-)

Désolé, je voulais pas laisser penser que ton code était mauvais comme le mien. :)

J'ai fait de la rétro-ingénierie à partir de ce que j'ai vu (c'est souligné) et non par rapport au code (c'est un <a></a>).

ndMoe : j'avais oublié les balises <script>

Dernière modification par Moe (2008-11-22 14:52:32)

Hors ligne

#8 2008-11-11 22:39:50

Datavinn
Membre
Inscription : 2007-10-12

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

C'est simplement et tout bonnement excellent !

Hors ligne

#9 2008-11-12 10:07:57

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

par exemple pour celui-ci (puisque je n'ai pas d'image associé)

$(function() {
	if ($('body.dc-post, body.dc-page').length == 0) { return; }
	if ($('#pr').length > 0) { return; }
	
	var link = $('<a href="#">' + $('#comment-form h3:first').text() + '</a>').click(function() {
		$('#comment-form fieldset:first').show(200);
		$('#c_name').focus();
		$(this).parent().css({paddingBottom:""}).html($(this).text());
		return false;
	});
	$('#comment-form h3:first').empty().append(link).css({paddingBottom:"30px"});
	$('#comment-form fieldset:first').hide();
});

c'est ou qu'on met ça exactement??

Hors ligne

#10 2008-11-12 20:56:52

Moe
Responsable du mini-bar
Lieu : France
Inscription : 2004-09-19
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Je n'ai pas précisé mais le code se place au même endroit que le code du premier message.

Hors ligne

#11 2008-11-15 23:47:30

laMM
Membre
Lieu : Pau
Inscription : 2008-01-09
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

bonsoir,

pas mal, mais ça ne fonctionne pas sur mon blog. et en plus la console d'erreurs de Firefox me signale : "$ is not defined"
et me renvoie vers la ligne "$(function() {"
j'ai laissé le code pour que vous puissiez constater par vous même,
exemple ici : http://blog.lamaisondelamontagne.org/po … embre-2008

Hors ligne

#12 2008-11-16 17:53:44

laMM
Membre
Lieu : Pau
Inscription : 2008-01-09
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

résolu.
mon head.html datait de la version beta. le l'ai remplacé par celui de la dernière version de DC et ça roule.
et du coup Lightbox aussi.

Hors ligne

#13 2008-11-16 23:15:24

Tomek
Moderator
Inscription : 2006-04-12
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Ah, je l'ai appliqué, ça marche bien, sauf qu'il reste la ligne "se souvenir de moi sur ce blog" et le bouton prévisualiser. Comment faire pour les virer ?

Hors ligne

#14 2008-11-17 10:31:16

osku
Membre
Lieu : 28
Inscription : 2005-06-15

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Tomek a écrit :

Ah, je l'ai appliqué, ça marche bien, sauf qu'il reste la ligne "se souvenir de moi sur ce blog" et le bouton prévisualiser. Comment faire pour les virer ?

Je l'ai remarqué également :)
Tu peux remplacer

$('#comment-form fieldset:first').hide();

par

$('#comment-form fieldset').hide();

Hors ligne

#15 2008-11-17 11:56:41

laMM
Membre
Lieu : Pau
Inscription : 2008-01-09
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Tomek a écrit :

Ah, je l'ai appliqué, ça marche bien, sauf qu'il reste la ligne "se souvenir de moi sur ce blog" et le bouton prévisualiser. Comment faire pour les virer ?

moi aussi j'avais remarqué ça. mais j'ai fusionné les 2 fieldset en supprimant la 1ère </fieldset> et la 2ème <fieldset>
c'est sur que la méthode de osku est plus propre, si j'avais su...

Hors ligne

#16 2008-11-17 12:23:09

Tomek
Moderator
Inscription : 2006-04-12
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Merci Osku !

Hors ligne

#17 2008-11-22 14:53:18

Moe
Responsable du mini-bar
Lieu : France
Inscription : 2004-09-19
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

osku a écrit :

Je l'ai remarqué également :)
Tu peux remplacer

$('#comment-form fieldset:first').hide();

par

$('#comment-form fieldset').hide();

Merci, j'ai modifié mon message en conséquence.

Je crois que ce code devrait être placé dans _head.html plutôt que dans post.html, ainsi ça cachera les formulaires des commentaires sur les pages, sur les galeries, etc. À moins que quelqu'un y voit un inconvénient ?

Hors ligne

#18 2008-11-22 15:59:03

Moe
Responsable du mini-bar
Lieu : France
Inscription : 2004-09-19
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Cette astuce a été publiée sur Tips.

Hors ligne

#19 2008-11-22 17:27:50

osku
Membre
Lieu : 28
Inscription : 2005-06-15

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Moe a écrit :

Je crois que ce code devrait être placé dans _head.html plutôt que dans post.html, ainsi ça cachera les formulaires des commentaires sur les pages, sur les galeries, etc. À moins que quelqu'un y voit un inconvénient ?

Je milite plus pour placer ce code dans un fichier JavaScript appellé depuis le user_head.html :)

Hors ligne

#20 2008-11-22 18:29:06

Moe
Responsable du mini-bar
Lieu : France
Inscription : 2004-09-19
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

osku a écrit :

Je milite plus pour placer ce code dans un fichier JavaScript appellé depuis le user_head.html :)

Dans ce cas il faudrait fournir un fichier js à placer dans le thème et mettre un lien vers ce fichier dans user_head.html ?

Tu peux m'en dire plus sur user_head.html ? Pourquoi "user", c'est spécifique à chaque utilisateur ?

Hors ligne

#21 2008-11-22 21:18:00

osku
Membre
Lieu : 28
Inscription : 2005-06-15

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Moe a écrit :

Dans ce cas il faudrait fournir un fichier js à placer dans le thème et mettre un lien vers ce fichier dans user_head.html ?

Tout à fait, comme les appels à jQuery dans le head.html

Moe a écrit :

Tu peux m'en dire plus sur user_head.html ? Pourquoi "user", c'est spécifique à chaque utilisateur ?

c'est le nom du fichier que lui a donné Olivier, template appellé à la fin du head.html . (regardes dans le thème Blowup, un vide a été créé à ce propos)

Cette solution est me semble t-il plus propre, enfin du moins pour moi :)

Hors ligne

#22 2008-11-27 21:06:45

matigol
Membre
Lieu : Kourou (973)
Inscription : 2006-11-25
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Vraiment extra cette astuce.
Mille bravo !


B. Laporte : "Une mélée, c'est comme une partouze, si on est mal placé, on se fait en***er."

Hors ligne

#23 2009-01-30 00:52:56

letoff
Membre
Lieu : Valence
Inscription : 2008-07-05

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Effectivement c'est une astuce au top ! Sauf, sauf que lorsque l'on utilise le plugin 'envoyer à un ami', celui-ci ne fonctionne plus vu que le formulaire d'envoi est caché.

Hors ligne

#24 2009-01-30 01:37:25

Moe
Responsable du mini-bar
Lieu : France
Inscription : 2004-09-19
Site Web

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Tu as un exemple ?

Hors ligne

#25 2009-01-30 10:05:58

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Astuce] Cacher le formulaire de commentaire lorsqu'il est vide

Moe génial cette astuce vraiment (très esthétique ) mais j'aurais voulut savoir s'il était possible de changer la phrase
"Ajouter un commentaire" en ...quelque chose de plus "intuitif" genre peut-être  "pour ajouter un commentaire cliquer ici"
ou encore " Cliquer sur cette phrase pour ajouter un commentaire"...c'est possible ça?

Hors ligne

Vous n'êtes pas identifié(e).

Pied de page des forums

Sites map