[RESOLU] Insérer un "width" proportionnel au "size"

Bonjour,

Je voudrais ajouter un width (css) sur tous mes inputs possédant un attribut size. Le code fonctionne parfaitement sur Mozilla mais provoque une erreur sur IE.

(C'est du jquery)

$('input[size]').css({
	width: ($(this).attr('size') * 4)+30+'px'
});

Après quelques test, ça viendrait du $(this), qui, remplacé par une variable, ne donne plus d'erreur. Mais alors la valeur du width inséré n'est plus proportionnelle au size de l'élément en question.

var sizeToConvert = $('input[size]').attr('size');
$('input[size]').css( 'width', (sizeToConvert*4)+30+'px');

J'ai déjà utilisé maintes fois $(this) pour IE, je ne vois pas pourquoi ça ne fonctionne pas ici ! Quelqu'un a une idée ?

Merci beaucoup de m'aider !
Modifié par ordiminnie (17 Dec 2009 - 11:25)

Bonjour,

En précisant le contexte du this à l'aide de each :

$(document).ready(function(){
	$('input').each(function(){
		$(this).css({ 
	         width: ($(this).attr('size') * 4)+300+'px' 
		});
	});
});	

Ça semble fonctionne chez moi sur IE7.

Ah mais oui c'est vrai ! jme disais bien qu'il y avait un truc !

Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci !!!


Bon je crois qu'il faut que j'arrête pour ce soir, j'ai la cafetière qui chauffe de trop ! Le travail, c'est pas bon pour la santé...

ok j'ai été un peu rapide pour crier victoire...

Ce code est nikel mais je me confronte à une autre difficultés : quand mes inputs n'ont pas de "size", IE (toutes versions) leur en met un d'office à 20.
Du coup, j'ai certains input comme ceci (sans size, et en général avec un width inline _ ou bien une classe css derrière laquelle on a un width) :

<input id="test" name="test" type="text" style="width:350px;" value="" />

Qui se retrouvent comme ceci :

<input id="test" name="test" type="text" style="width:110px;" value="" />

Pour les navigateurs intelli...euh...juste standard en fait, ce code fonctionne bien :

$('input[size]').each(function(){
			if ($(this).attr('size') > 0)
			{
				$(this).css({
					width : ($(this).attr('size') * 4)+30
				});
				
			}
		});

Je vois pas comment je pourrais faire, à part parcourir tout mon html pour traquer les size="20", les changer sur size="21" comme ça dès que IE me donne un size="20", je saurai qu'il l'a mis tout seul et donc qu'il ne faut pas appliquer le js...mais ça me semble tellement tordu (et long) que je demande à tout hasard (mais sans grand espoir) si vous avez une idée ?

merci !
Modifié par ordiminnie (11 Dec 2009 - 16:37)

Bonjour,
Peut être comme ceci ?

$('input').each(function(){
            var idthis = $(this).attr("id");
            if ($("#" + idthis + "[size!='']").length > 0) 
            { 
                $(this).css({ 
                    width : ($(this).attr('size') * 4)+30 
                }); 
                 
            } 
        }); 

Modifié par loicbcn (11 Dec 2009 - 18:12)

Je n'ai pas essayé ta solution car nous avons des anciennes pages qu'on ne met plus à jour et je ne suis pas sûre que tous les champs aient des id....
Par contre, j'ai trouvé une solution qui fonctionne (même si je me demande comment !)

if (navigator.appName == 'Microsoft Internet Explorer')
		{
			$('input[size]').each(function(){
				if (($(this).attr('size') > 0) && ($(this).attr('size') != 20))
				{
					$(this).css({
						width : ($(this).attr('size') * 4)+30
					});
				}
			});
		}else
		{
			$('input[size]').each(function(){
				if ($(this).attr('size') > 0)
				{
					$(this).css({
						width : ($(this).attr('size') * 4)+30
					});
				}
			});
		}

On pourrait croire que le code ne s'appliquerait pas aux champs qui n'ont pas d'attributs "size", et donc pour lesquels IE appliquent par default un size= "20", ainsi que pour les champs contenant un vrai attributs size = "20"...mais non, tout se déroulent parfaitement !

Mon code est appliqué partout...moi yen a pas comprendre mais moi yen a plus réfléchir ! J'avoue que j'ai pas creusé le pourquoi du comment, trop longtemps que je suis là-dessus, ça fonctionne, ça me suffit.

Merci de votre aide
Modifié par ordiminnie (17 Dec 2009 - 11:26)