Vous n'êtes pas identifié(e).
13 février 2024 Sortie de Dotclear 2.29
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)
- les règles du forum : http://forum.dotclear.net/viewtopic.php?id=39494
- la galaxie de Dotclear 2 : http://fr.dotclear.org/documentation/2.0/links
Hors ligne
Sympa merci pour l'astuce.
Hors ligne
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
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
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
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. :)
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)
- les règles du forum : http://forum.dotclear.net/viewtopic.php?id=39494
- la galaxie de Dotclear 2 : http://fr.dotclear.org/documentation/2.0/links
Hors ligne
C'est simplement et tout bonnement excellent !
Hors ligne
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
Je n'ai pas précisé mais le code se place au même endroit que le code du premier message.
- les règles du forum : http://forum.dotclear.net/viewtopic.php?id=39494
- la galaxie de Dotclear 2 : http://fr.dotclear.org/documentation/2.0/links
Hors ligne
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
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
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
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 ?
- les règles du forum : http://forum.dotclear.net/viewtopic.php?id=39494
- la galaxie de Dotclear 2 : http://fr.dotclear.org/documentation/2.0/links
Hors ligne
Cette astuce a été publiée sur Tips.
- les règles du forum : http://forum.dotclear.net/viewtopic.php?id=39494
- la galaxie de Dotclear 2 : http://fr.dotclear.org/documentation/2.0/links
Hors ligne
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
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 ?
- les règles du forum : http://forum.dotclear.net/viewtopic.php?id=39494
- la galaxie de Dotclear 2 : http://fr.dotclear.org/documentation/2.0/links
Hors ligne
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
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
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
Tu as un exemple ?
- les règles du forum : http://forum.dotclear.net/viewtopic.php?id=39494
- la galaxie de Dotclear 2 : http://fr.dotclear.org/documentation/2.0/links
Hors ligne
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).