Le TwiBlog

The one with Twidi

Aller au contenu | Aller au menu | Aller à la recherche

mardi 3 juin 2008

Javascript et IE : création de boutons radio en javascript

Il y a deux ans et demi j'avais déjà soulevé un problème lors de la création d'éléments de formulaire en javascript sous internet explorer.

Je viens aujourd'hui d'en trouver un autre, auquel j'ai trouvé une solution, en anglais, que je précise ici (je ne précise que la solution qui marche partout)

Le problème est le suivant : quand on créé un bouton radio dans internet explorer, en javascript, via document.createElement('input')........ le bouton est bien créé mais on ne peut le cocher.

La solution, la seule, l'unique, est... de ne pas utiliser le dom pour cela, malheureusement. Il faut le créer en html :

<input type="radio" name="truc" id="bidule" value="chose" />

La solution qui semble le mieux fonctionner dans les différents navigateurs est, sans faire de test de navigateur :

elementParent.innerHTML += '<input type="radio" name="truc" id="bidule" value="chose" />'

C'est moche, mais c'est tout ce qui marche.

Autre point, il ne faut pas, pour IE, spécifier ici l'état "checked" car si un radio du même groupe (même attribut "name") est déjà coché, on se retrouvera avec deux boutons radio cochés...

Il faut, une fois nos inserts terminés, faire par exemple :

document.getElementById(input_id).checked = true

mercredi 24 mai 2006

Faire tourner IE (Internet Explorer) sous Wine, suite : IEs4Linux

Il ya plus d'un an j'indiquais sur ce même blog une solution permettant de faire fonctionner Internet explorer sous Wine (sous linux, donc).

Un peu plus tard, j'abandonnais cette solution pour une autre, plus performante.

Encore une fois, je change, et cette fois c'est vers "IEs 4 Linux" que je m'oriente.

Il peut installer plusieurs IE, au choix, la version 6, 5.5 et/ou la 5. Le tout avec Flash 8.

Pratique, il fonctionne avec les dernières versions de wine, plus besoin de le figer comme je l'expliquais il y a quelques mois.

Et l'installation est on ne peut plus simple. On choisi juste les versions désirées.

Une fois l'installation terminée, le script nous indique qu'il nous suffit ensuite de taper par exemple "ie6" pour que ce dernier se lance, assez rapidement à mon goût.

IEs 4 Linux - Internet Explorers for Linux

dimanche 4 décembre 2005

Do you prefer Internet Explorer or Firefox ?

Bien qu'en anglais, cette petite vidéo micro-trottoir fait du bien et même parfois sourire, notamment quand un des passants réponds "internet explorer car il y a internet dans le nom et on sait alors à quoi ça sert".... :)

A voir sans attendre

mardi 15 novembre 2005

Javascript et IE : document.createElement('input') et document.forms['the_form'].elements['the_input']

J'ai découvert un petit bug dans IE6 (celui qui dit "un de plus"... ben il le dit... ).

Sur un site développé pour un client (celui dont je parlais il y a peu), j'ai une partie en javascript. On peut, en cliquant sur un bouton, ajouter des lignes de formulaire.

Voici une partie du code :

var input_mail = document.createElement('input');
input_mail.setAttribute('name', 'mail2');
input_mail.setAttribute('id', 'step3_mail2');
input_mail.className = 'step3_mail_input';
...
a_div_in_the_form.appendChild(input_mail);

Donc ajout classique d'un élément via le DOM.

Plus tard, j'ai un onsubmit sur le formulaire dans lequel j'effectue une validation.

Je veux donc pouvoir accéder au nouveau champs pour tester son contenu

Je fais donc, très logiquement

var input = documents.forms['the_form'].elements['mail2'];

Et bien pour IE6, impossible, l'élément n'existe pas. Pourtant quand on parcoure le tableau avec des index numériques, on trouve bien l'élément avec name = 'mail2'. J'ai aussi essayé avec l'id plutôt que le name, mais rien à faire. La création de l'élément n'a pas correctement mis à jour le tableau elements.

Pour éviter de refaire tout mon code, j'ai créé une petite fonction qui renvoie une table de hashage qui, pour chaque nom du tableau, me donne son index.

function el_id_by_name(el) {
	var els = new Array();
	for (i=0;i<el.length;i++) {
		if (el[i].name) {
			els[el[i].name] = i;
		}
	}
	return els;
}

Et mon code précédent devient

var els = el_id_by_name(document.forms['the_form'].elements);
var input = document.forms['the_form'].elements[els['mail2']];

Notez le remplacement de elements['mail2'] par elements[els['mail2']]

Voilà ;)

lundi 26 septembre 2005

Developer Toolbar pour IE sous Wine

Vous connaissez tous l'extension "Web Developer" de firefox, indispensable pour tout développeur web...

Et bien Microsoft a sorti la sienne pour IE et je vous propose de l'installer pour votre IE sous Wine

Pour l'installer, c'est simple.

Vous téléchargez le .msi sur la page pré-citée (je n'ai pas réussi avec ie sous wine, j'ai donc utilisé fx)

Vous installez, si ce n'est déjà fait MS Installer :

"msi" = "native, builtin"
"msiexec.exe" = "native, builtin"

Une fois MS Installer installé, utilisez la ligne de commande suivante pour installer votre barre d'outil au format .msi :

wine msiexec /i msifile.msi

vendredi 16 septembre 2005

PNG alpha dans internet explorer

En complément de l'article précédent, voici un autre behavior pour qu'internet explorer gère correctement les canneaux alph des images png.

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Pour l'utilisation, même principe, rajouter le sélecteur

img { behavior: url("pngbehavior.htc"); }

Par contre ne pas oublier de télécharger également l'image blank.gif. Plus d'explications sur le site de l'auteur.

Survol d'éléments css avec internet explorer

Dans le design web, quelque chose qui manque vraiment à internet explorer, c'est la gestion des "hover" sur autre chose que des liens.

"hover", c'est une pseudo-class qui s'utilise de la façon suivante :

#mon_element:hover { monc_code_css }

Le css indiqué sera alors appliqué à l'élément au survol de ce dernier.

L'absence de cette fonctionnalité dans internet explorer frustre notre créativité.

Or il existe une solution. Un fichier "htc", qui modifie le comportement d'internet explorer. On connaissait déjà le magnifique mais lourd "ie7" (qui n'a rien a voir avec internet explorer 7, mais l'auteur a du utiliser ce nom dans l'idée de proposer tout ce qu'il aimerait voir dans internet explorer 7) que l'on trouvera ici : http://dean.edwards.name/IE7/.

Mais là point besoin de charger tout ça, nous utiliseront le "csshover.htc" que nous propose le cite http://www.xs4all.nl/~peterned/csshover.html

Comment l'utiliser ? Très simplement... Il suffit de rajouter dans sa css

body { behavior: url(csshover.htc); }

(en n'oubliant pas de placer le htc dans le même répertoire que le css ;)

Seul défaut de ce procédé, la feuille de style ne validera plus, il peut être alors pertinent de placer cette déclaration dans un css à part, importé grace à @import.

vendredi 18 mars 2005

Faire tourner IE6 sous wine

Nouvelle solution plus performante, plus simple et moins restrictive, cliquez sur ce lien !

(Edit : Autre solution précédente ici)

Pour les développeurs web comme moi qui sont sous linux et doivent rebooter régulièrement pour tester leur site sous IE6, voici enfin un tutoriel ultra simple pour faire fonctionner IE6 sous linux via wine.

- Installez la dernière version de wine (a priori la 20041201 suffit)

apt-get install wine

(ou tout autre manière d'installer, ici c'est pour debian, rajouter le sudo devant pour la ubuntu)

- Renommez votre répertoire wine existant

cd ~/ 
mv .wine .wine.old

- Téléchargez et décompressez la config de wine tout prête (incluant un fake_windows)

wget "http://lordaeron.free.fr/temp/ie.tar.bz2"
tar -xjf ie.tar.bz2

(le bz2 est également dispo sur http://p.twidi.com/config_wine_ie6.tar.bz2)

D'après le tutoriel originel, cela suffit, sauf que non, j'ai trouvé un bug, que l'on va corriger

cd ~/.wine/dosdevices
rm "c:"
ln -s /home/VOTRE_USER/.wine/fake_windows "c:"
rm "h:"
ln -s /home/VOTRE_USER/.wine/.. "h:"

Ensuite pour lancer IE6, il suffit de lancer la commande suivante :

wine "/home/VOTRE_USER/.wine/fake_windows/Program Files/Internet Explorer/IEXPLORE.EXE"

Alors moi au premier lancement, j'ai déjà eu une petite erreur d'initialisation de DLL (ICFG95), ensuite IE6 s'est bien lancé, msn s'est affiché mais il IE a crashé au bout d'une trentainre de seconde. Lors des lancements suivants, toujours l'erreur de DLL, mais plus de crash. Mais à cause de cette DLL, la barre d'outils d'IE n'a pas d'icones, enfin bon, cela n'est pas vraiment vital....

Enfin voila, en tout cas "chez moi ça marche"