Aller au contenu

Sujets conseillés

Posté

Bonjour

Je calcule en Javascript deux valeurs pour les variables width et height :

<script language="JavaScript" type="text/javascript">
function width()
{
var reducteur1 = 4;
var width = Math.floor(document.body.clientWidth/reducteur1);
}

function height()
{
var reducteur2 = 3*2;
var height = Math.floor(width/reducteur2);
}
</script>

que je ne peux pas passer directement à du Php (ni calculer en Php) ; le calcul est réalisé sous la forme de fonctions JS qui produisent chacune la valeur d'une des variables.

Jappelle ensuite (en dehors du JS) un module Php (cest une CSS) en lui passant ces deux valeurs :

<link rel="stylesheet" href="style00.php?parm1=java script:width()&parm2=java script:height()" media="screen">

en invoquant les deux fonctions qui produisent les valeurs des deux variables; vous avez compris que le problème ici est de passer des valeurs calculées en JS à un appel de module Php.

Je dois avoir une erreur qqepart car ça ne fonctionne pas, la CSS n'est pas appellée.

Remarques:

- le calcul produit bien les valeurs attendues

- en remplaçant java script:width() et java script:height() par des valeurs fixes, la CSS est bien appellée

- appeler une CSS avec autre chose que Link ne fonctionne pas (je crois)

- mettre le Link dans le JS dans une parenthèse document.write('.............'); ne fonctionne pas

Merci par avance de vos commentaires.

Francois

Posté

Le code PHP est exécuté sur le serveur avant le chargement de la page. Pour obtenir un nouveau traitement, il faut charger une nouvelle page, ce que l'on peut faire en Ajax, mais je ne pense pas que l'on puisse dynamiquement charger des feuilles de style.

Posté

bonjour et merci de ta réponse.

J'ai progressé jusqu'ici: jessaie d'appeller une CSS en lui passant une valeur calculée en Javascript par une fonction width() (qui produit bien le résultat attendu).

Voici ce qui nappelle pas la CSS :

En JS: document.write('<link rel="stylesheet"  href="style00.php?parm1=' + width() + '" media="screen" />');

comme j'aimerai qu'il le fasse.

Voici ce qui appelle la CSS mais en passant une valeur fixe :

<link rel="stylesheet"  href="style00.php?parm1=1200" media="screen" />
En JS: document.write('<link rel="stylesheet" href="style00.php?parm1=1200" media="screen" />');

Conclusions:

- la CSS existe et peut être appellée

Simplement, l'appel ne fonctionne pas; ai-je une erreur de syntaxe JS?

Merci par avance de vos suggestions et de votre aide.

Francois

Posté

Je viens de faire un essai avec:

<script language="JavaScript" type="text/javascript">
function widthtoto()
{
widtha = 1024;
return(widtha);
}
document.write('<link rel="stylesheet" type="text/css" href="style00.php?parm1=' + widthtoto() + '" media="screen" />');
</script>

et ça a donné le résultat négatif habituel.

Donc, même en éliminant un éventuel pb de calcul de la valeur, l'appel ne se fait pas correctement.

Au besoin:

- mon URL: http:cegvh1.free.fr/

- la CSS: style00.php

Merci de ton aide.

Francois

Posté

Question idiote: pourquoi as tu besoin du width et height dans ton fichier css/php?

ca peut paraitre idiot mais tu nous a pas dis pourquoi tu faisais ca... il y a peut etre une solution alternative beaucoup plus simple ;)

Posté

Pas idiot du tout.

Pour que ma mise en page reste stable qqesoit la résolution, je veux proportionner la dimension des images qui s'y trouvent à la résolution (width, height) du visiteur.

Ces dimensions peuvent être calculées en JS mais pas en Php.

Je les calcule donc en JS et j'essie de les passer à ma CSS qui a un début en Php.

Au besoin:

http://cegvh1.free.fr/

la CSS: style00.php

Francois

Posté

Qqes tests plus tard, j'en suis là: width() produit une valeur vide faute d'avoir pu trouver ses donnée de base (document.body, ...) placé comme il est dans le Head.

Si vous voyez une solution.

Francois

Posté (modifié)

deja la premiere erreur qui saute aux yeux c'est de ne pas avoir des id unique ;)

pour ma part je ferais tout en JS... voici trois solutions possible

CODE

<img src="img.gif" name="img1" />

<img src="img.gif" id="img2" />

<img src="img.gif" class="img3" />

<img src="img.gif" class="img3" />

<script type="text/javascript">

<!--

document.images["img1"].width=100;

document.getElementById("img2").width=100;

for (i=0; i<document.getElementsByTagName("*").length; i++) {

if (document.getElementsByTagName("*").item(i).className == "img3"){

document.getElementsByTagName("*").item(i).style.width=100;

}

}

//-->

</script>

pour le cas 1 et 2 les tags id et name doivent etre uniques

pour le 2eme cas, ca gere toutes les images de class img 2 ;)

je pense que cette piste te conviendra mieux :whistling:

evidemment c'est un peu brut de fonderie, va falloir adapter mais bon je vais pas faire tout le boulot :lol:

Modifié par steph29
Posté (modifié)

Hello,

Je trouve ça moyen comme truc, mais à faire ça en javascript, pourquoi ne pas faire un truc du genre :

CODE
function resize(){

var plop = document.getElementsbyTagname('img');

for(i=0;i<plop.length;i++){

plop.width ... //traitement des tailles avec ta formule

}

}

et tu la balances dans le onload, ça évite quand même de charger dynamiquement une feuille de style de manière hasardeuse. Maintenant, je pense que la meilleure des solutions est de définir une taille relative à tes image (en "em"), et tu charges une feuille de style qui surcharge la taille normale du texte en fonction de la taille de l'écran:

celle-ci devrait contenir un truc de ce genre :

CODE
body{

font-size:60%;

}

ça me parait plus propre. Je sais pas si je me suis bien exprimé sur les taille relative des images, mais c'est le matin :)

(ps : fais gaffe à la casse si tu copies colle le js ;) )

Modifié par hcplayer
Posté (modifié)

en effet la methode est brute de fonderie comme je l'avais signale... :blush:

mais j'ai fait rapidement mes tests, j'ai pas ete trop loin.. re :blush:

c'etait pour montrer l'utilisation des possibilites d'attaquer directement en js soit les attributs name, id et class

ta methode est bcp plus propre en effet ;)

avec ca il devrait s'en sortir maintenant

Modifié par steph29

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...