Avoir les moteurs de recherche d firefox dans une page web ?

[bormat]

http://sd-1.archive-host.com/membres/up ... se_102.zip
voici le dernier j'ai trouvé comment mettre lesp refference google là ou il faut
il faut mettre toute la page en position asoluteet ensuite mettre l'élément avec les prefférence en asolute

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7

[Jabe]

Ça ne fonctionne toujours pas chez moi, j'ai bien le texte qui s'enlève et quand je mets ma feuille de style il reste gris même quand on clique dans la boîte.

Et pour le positionnement CSS les éléments sont vides dans la page html du zip, exemple:

Code : Tout sélectionner

<div class="liensdedroite">
</div>

Donc rien ne s'affiche (normal), et quand je mets quelque chose dedans je n'arrive pas au résultat voulu non plus.

Es-tu sûr d'avoir envoyé la bonne archive ?

[bormat]

Ça ne fonctionne toujours pas chez moi, j'ai bien le texte qui s'enlève et quand je mets ma feuille de style il reste gris même quand on clique dans la boîte.

Et pour le positionnement CSS les éléments sont vides dans la page html du zip, exemple:

Code : Tout sélectionner

<div class="liensdedroite">
</div>

Donc rien ne s'affiche (normal), et quand je mets quelque chose dedans je n'arrive pas au résultat voulu non plus.

Es-tu sûr d'avoir envoyé la bonne archive ?

j'ai envoyé l'archive avec le texte qui se cache car celui avec les lien de droite bien présenté n'avait pas les moteur de recherches qui marches
et on ne peut rien tiré de ton script il faut en trouvé un autre car il ne marche que pour un à la fois sinon on le met noir et là pas de pb
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7

[bormat]

http://sd-1.archive-host.com/membres/up ... sse_34.zip
juste pour montrer que j'arrive à empeche le décalage quand on change de résolution
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7

[bormat]

http://www.commentcamarche.net/forum/af ... type-texte
voici un code qui devrait faire disparaitre ce qui a dans les zone de recherche

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7

[Jabe]

Pour le problème de décalage en 1024x768 voilà ce que ça donne (sous Firefox):

Et j'ai aussi une barre de scroll horizontale qui apparaît, et je dois scroller vers la droite pour bien voir.

Pour le texte qui disparaît dans les champs et qui change de couleur je crois que je vais contacter l'auteur du code dont je me suis inspiré on ne sait jamais…

[bormat]

ok tu me dira pour le scroll il suffit de changer les chiffre
j'ai tester mon lien mais on ne peut pas mettre une un mot différent à chaque fois

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7

[Florent V.]

Je suis l'auteur de la fonction JS textInputDynamicValue (sur base jQuery) utilisée ici. Elle ne fonctionne pas ici car elle ne correspond tout simplement pas à ce cas de figure; il faut soit l'adapter, soit l'utiliser autrement, soit écrire sa propre fonction.

Ce qui se passe ici devrait être clair pour toute personne connaissant un minimum JavaScript et qui a passé en revue le code de la fonction pour en comprendre le fonctionnement.

Pour commencer, le troisième cas («Test de changement de texte avec title») ne fonctionne pas car la fonction textInputDynamicValue est appelée avec un paramètre qui lui dit de prendre en compte la valeur de l'attribut "value"... donc forcément ça marche pas avec les title.

(Je me fie à http://www.jabe.fr/r)

Prenons maintenant le quatrième cas (test avec les value), et voyons ce qu'il se passe.

Pas-à-pas

Lorsqu'on appelle la fonction en lui passant un certain nombre de paramètres, voilà ce qu'on fait pour chaque élément visé:
- on récupère un texte, qui peut être le contenu actuel de l'attribut value de l'élément, le contenu de l'attribut title, ou un texte personnalisé passé en paramètre de la fonction;
- on remplace le value de l'élément avec le texte récupéré, et on applique la classe "hint" (ou autre classe définie en paramètre) à l'élément.

Dans le cas présent, et à ce stade, l'input a comme contenu de l'attribut value: "Dailymotion" (récupéré dans le value... donc ça ne change pas), et comme classe "hint".

Ensuite, notre fonction associe deux gestionnaires d'évènement à notre INPUT. Un pour le gain de focus (tabulation ou clic dans le champ de formulaire), et un pour la perte de focus (tabulation ou clic en dehors).

Le premier gestionnaire d'évènement est associé à une fonction qui vérifie que le contenu du value est "Youtube" (dans ce cas précis), et si oui passe le value à une chaine de caractères vide, et supprime la classe "hint".
Si le value a été changé entre-temps par un autre script, la condition est fausse, et donc rien ne se passe.

Le deuxième gestionnaire d'évènement est associé à une fonction qui vérifie que le contenu du value est "" (vide). Si c'est le cas, elle redonne la classe "hint" et le value "Youtube" à l'élément (là encore, dans ce cas précis).
Ce qui explique que si je charge la page, choisit l'option "Dailymotion", clique dans le champ texte, supprime le texte, et clique en dehors du champ texte... le value redevient "Youtube", et pas "Dailymotion".

Que faire alors?

Une solution possible serait de rappeler la fonction textInputDynamicValue à chaque changement manuel (au clic sur un bouton radio).

Globalement, il faudrait reprendre le JavaScript de manière un peu plus propre. La page devrait fonctionner sans JavaScript, ce qui se gère très bien de la manière suivante (en ne prenant en compte que le quatrième cas):

1. Un formulaire (élément FORM) qui pointe vers un script de traitement unique. Le changement de l'action à effectuer ne doit pas être fait en JavaScript, mais être géré côté serveur.

2. Un champ de saisie (INPUT de type "text") sans valeur prédéfinie (pas de "value"), sans "title" correspondant à l'une ou l'autre option, et avec comme icone informative une image neutre (et pas une icone Youtube par défaut...).

3. Des boutons radio dont le premier est sélectionné par défaut (selected="selected"), et dépourvus d'attributs onclick (on pourra gérer les évènements dans le script externe, surtout si on utilise jQuery...). Le LABEL peut entourer le INPUT, mais ne pas oublier de rendre les LABELs explicites en utilisant les attributs "id" et "for" qui vont bien!

4. Sans JavaScript, on peut taper des mots-clé, choisir un moteur de recherche, envoyer le formulaire au script unique (sur le même serveur)... et ce script s'occupera de recevoir les données du formulaire, de vérifier à quel moteur de recherche il doit transmettre la requête, et de faire une requête en bonne et due forme. Je ne sais pas si une redirection suffirait ou s'il faut recréer la requête dans le script (en PHP ou ce qu'on veut), ça serait à travailler.

Voilà pour la base. Le JavaScript ne doit venir qu'en supplément, pour des améliorations ergonomiques, en veillant au passage à ne pas bousiller l'accessibilité.

Côté JavaScript, il faut donc:

5. Au chargement de la page, appeler textInputDynamicValue sur l'INPUT (en le ciblant précisément!), et utiliser en paramètre le texte à afficher, qui doit correspondre au bouton radio sélectionné par défaut.

6. Toujours au chargement, modifier la source et éventuellement le alt de l'image, toujours en fonction du bouton radio sélectionné par défaut.

7. Au clic sur les INPUT radio (observé via un gestionnaire d'évènement défini avec jQuery, pas un onclick ), a) modifier l'image et b) appeler la fonction textInputDynamicValue en visant le bon INPUT (comme précédemment) et en lui passant le bon texte.

Voilà, tout ça devrait marcher. Au pire, si on veut faire marcher l'existant il doit être possible d'appliquer uniquement l'étape 7.

Ah oui, juste une chose: il faudrait vérifier qu'appeler deux fois la fonction textInputDynamicValue pour un même élément remplace bien les gestionnaires d'évènements, et ne les cumule pas. Tiens, je vais peut-être faire ça.

[Jabe]

Waou ! Ça c'est de la réponse !
Merci beaucoup Florent je ne m'attendais pas à un retour aussi rapide.

1. Un formulaire (élément FORM) qui pointe vers un script de traitement unique. Le changement de l'action à effectuer ne doit pas être fait en JavaScript, mais être géré côté serveur.

C'est vrai que l'idéal serait que ça fonctionne sans Javascript effectivement, as-tu un exemple de site utilisant ce système ?
Car en faisant des recherches je n'ai trouvé que des tutos ou sujets de forum utilisant Javascript justement .

ne pas oublier de rendre les LABELs explicites en utilisant les attributs "id" et "for" qui vont bien!

Là c'est vrai que j'avais lu ton article à ce sujet mais j'ai zappé de l'appliquer ici: my bad .

Au pire, si on veut faire marcher l'existant il doit être possible d'appliquer uniquement l'étape 7.

Vu que l'existant fonctionne mal même pour lancer une recherche -comme Dailymotion qui ne passe pas à cause des paramètres de Google qui faussent les résultats (input name="q")- je vais plutôt repartir sur de bonnes bases et chercher un moyen de faire ça via du PHP si je trouve.

Pour commencer je vais donc me concentrer sur tes suggestions 1 et 4 et quand j'aurai un changement de recherche qui fonctionne là je m'attaquerai au reste (changement d'image, de texte, etc.).

[Invité]

Bon courage pour la suite.

Je signale juste que comme je le craignais il y a un petit problème avec la surcharge de gestionnaires d'évènements pour un élément donné. J'ai donc modifié ma fonction pour gérer ce problème. Et j'en ai profité pour réorganiser un peu ma page:

http://covertprestige.info/test/45-cham ... focus.html