[résolu] Operamini et javascript

Bonjour,

Ayant eu l'occasion d'essayer "operamini", j'ai pu constater qu'il ne pouvait pas utiliser tout "javascript". Notamment la gestion des menus déroulant ne marche pas.

Voir par exemple :
Avec le script suivant :

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

Comment faire pour détecter ce navigateur, et faire en sorte que ce type de menu reste ouvert dans "operamini" ?
Modifié par papillon41 (02 Feb 2007 - 10:07)

Salut,

Peut-être en ajoutant en première ligne de ta fonction :

if(!document.getElementById) return;

Ne pas tenter de détecter.

Faire un menu qui se comporte bien sans JS en media="handheld", c'est tout

Ah ! dac... A vrai dire, je ne connais pas du tout operamini mais bon, le test n'en reste pas moins indispensable pour éviter quelques désagréments ; si la méthode n'est pas supportée, on annihile le script, ce qui permet d'offrir une protection supplémentaire...

Il ne s'agit pas de faire un site pour téléphone portable, mais faire en sorte qu'un site existant fonctionne avec "operamini" et garde son mode de fonctionnement avec les navigateurs web.

Il faudrait quelque choses comme :

var opmini = 1;
//
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++){
if (document.getElementById('smenu'+i)){
if (opmini == 1) {document.getElementById('smenu'+i).style.display='block';
}
else {
document.getElementById('smenu'+i).style.display='none';}
}
}
if (d) {d.style.display='block';
}
}

Comment mettre la variable "opmini" à 1 ?
Nota : Le "test" de Koala64 ne fonctionne pas !
Modifié par papillon41 (01 Feb 2007 - 14:23)

papillon41 a écrit :
Comment mettre la variable "opmini à 1"

On ne peut pas (côté client).

Amusants, les menus déroulants
Modifié par Laurent Denis (01 Feb 2007 - 14:25)

papillon41 a écrit :
Il ne s'agit pas de faire un site pour téléphone portable

Non. Mais de faire une CSS pour le media en question, oui. C'est tout de même le fond de l'histoire du but du jeu des standards CSS (même si c'est très imparfait actuellement)

Avais-tu bien mis :

function montre(id) {
[b]if(!document.getElementById) return;[/b]
var d = document.getElementById(id);
for (var i = 1; i<=10; i++){
...

?

Si c'est le cas, essaye de remplacer le test par :

if(!document.getElementById || !document.getElementById(id).style) return;

A propos de media, il existe une propriété media pour Javascript mais quelqu'un a-t-il trouvé des explications à ce sujet ? J'en ai entendu parler sur le site de Mozilla mais il n'y avait aucun détail.
Modifié par koala64 (01 Feb 2007 - 14:30)

Bon, j'ai ça déjà :

http://developer.mozilla.org/en/docs/DOM:style.media

C'est un peu mieux que ce que j'avais vu à l'époque mais s'il y a plus complet, je suis preneur.

Tiens, quand même... histoire de compléter...

Habituellement, je ne me sers pas de l'objet style de javascript pour afficher / cacher mes éléments. J'affecte ou je supprime une classe CSS, et dans la feuille de style, je précise bien le type de media auquel la propriété se rapporte.
Modifié par koala64 (01 Feb 2007 - 14:46)

Laurent Denis a écrit :


Non. Mais de faire une CSS pour le media en question, oui. C'est tout de même le fond de l'histoire du but du jeu des standards CSS (même si c'est très imparfait actuellement)

Oui. D'ailleurs pompage avait sorti un article sur le sujet. Je ne comprend pas qu'on essaye de reproduire l'interface d'un «site ordinateur» sur le navigateur d'un gsm ou un pda.

OK pour une css media "handheld".
Mais quoi lui dire pour annuler un ".style.display='none'". C'est "js" le plus fort.
Il aurai fallu le prévoir au départ.
De plus, "operamini" à un comportement particulier. C'est un serveur de chez opera qui fait presque tout le boulot. Il n'est pas sur qu'il réponde comme un "handheld". Il repond comme "opera 7.5".
J'ai testé avec :

if (screen.width < 300) {...

Mais cela ne marche pas.
Existe il une combine ressemblant à cela ?

var opmini = (navigator.userAgent.toLowerCase().indexOf('opera') > -1 && document.createTextNode);  // Opera 7

nota : Le test de de Koala64 ne fonctionne toujours pas.
Modifié par papillon41 (01 Feb 2007 - 15:35)

JS :

<script type="text/javascript"><![CDATA[
window.onload=montre;
function montre(id) {
if(!document.getElementById)
	return;
var d = document.getElementById(id);
for (var i = 1; i<=10; i++)
	if (document.getElementById('smenu'+i))
		document.getElementById('smenu'+i).className='cache';
if (d)
	d.className='';
}
//]]></script>

CSS :

@media screen, projection
{
    .cache { display: none; }
}

NB : Le test de koala64 fonctionne très bien mais n'est pas la source du problème de papillon41.
Modifié par koala64 (01 Feb 2007 - 16:22)

papillon41 a écrit :
OK pour une css media "handheld".

Bon, on avance, alors

a écrit :

Mais quoi lui dire pour annuler un ".style.display='none'". C'est "js" le plus fort.

Avec un element.style.display="none", peut-être, oui. Mais pas avec une attribution de classe par le script js, la classe restant définie par la CSS retenue par l'agent utilisateur (solution plus robuste au demeurant par ailleurs que le element.style).

lagoon a écrit :
Il n'est pas sur qu'il réponde comme un "handheld". Il repond comme "opera 7.5".
Existe il une combine ressemblant à cela ?

Non, et ça n'est encore pas une bonne démarche.

Bon sang, c'est pourtant simple: fournir à chaque media CSS ce qui lui convient, et laisser faire l'agent utilisateur...
Modifié par Laurent Denis (01 Feb 2007 - 15:36)

Si tu vas lire l'article que j'ai donné comme exemple plus haut, tu auras les réponses à tes questions. Si tu regardes l'exemple donné dans l'article avec Opera 9, tu ne verras pas de différence, par contre si avec le même Opera 9, tu sélectionne le rendu petit écran, là tu vas avoir le rendu dans opera mini et tous les agents utilisateurs qui reconnaisse le media handled. Sans utiliser de javascript. Comment? Grâce au media associé aux feuille de style, extrait du source de la page :

<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />
<link rel="stylesheet" type="text/css" href="http://pompage.net/pompage_v3/styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

J'ai fait la constatation suivante :
Je demande à "operamini" : "screen.width", il me repond : 800.
Je demande à "operamini" : "screen.height", il me repond : 5000.
C'est beaucoup pour un portable ?

J'ai fait cela :

var opmini = 0;
if (screen.height > 4500) {opmini = 1;
}
//
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++){
if (document.getElementById('smenu'+i)){
if (opmini == 1) {document.getElementById('smenu'+i).style.display='block';
}
else {
document.getElementById('smenu'+i).style.display='none';}
}
}
if (d) {d.style.display='block';
}
}

Je ne suis pas trés fier de moi, mais ça marche.
Je cherche encore pour trouver quelque chose de pérenne.
Modifié par papillon41 (02 Feb 2007 - 09:56)

Non, non, n'aie aucune inquiètude... C'est vraiment très bien...

Après tout, pourquoi s'encombrer avec des tests qui ne servent à rien et puis... l'indication du media... pfff... quelle idée ?!! C'est vrai qu'il est tellement plus logique de tester les propriétés width et height... ... sans compter qu'il y a un objet style dans Javascript alors pourquoi mélanger avec CSS... arf, décidemment, on a tout à apprendre... vraiment désolé de t'avoir dit n'importe quoi, hein !

a écrit :
C'est beaucoup pour un portable ?

ce n'est pas un peu cher ?

Par contre, utiliser media="handheld" pour suprimer les grosses images consomatrices de bande passante, là c'est intéréssant.

Je vais ajouter pour les vrais "handheld" :

if (screen.width < 350) {opmini = 1;
}

Je considère le sujet comme résolu pour le moment.

papillon41 a écrit :

Je vais ajouter pour les vrais "handheld" :

if (screen.width < 350) {opmini = 1;
}

Je considère le sujet comme résolu pour le moment.

S'il s'agit d'opera mini, se renseigner sur l'utilisation du module CSS3 media queries, qui évitera ce passage douteux par un javascript nous menant tout droit à des erreurs.

<edit>Papillon: je ne comprends pas cette rage de réinventer via des bricolages fragiles ce qui est déjà faisable par des moyens normalisés et correctement implémentés

Ou alors, c'est qu'il y a quelque-chose que l'on a pas su expliquer ?
</>
Modifié par Laurent Denis (02 Feb 2007 - 10:11)

Bonjour Laurent Denis,
Je crois effectivement que je n'ai pas su m'expliquer.
Ma question se résume a : comment rendre un script (que je désire conserver), inopérant sous "operamini" (script qui fonctionne avec d'autre navigateurs "handheld"- IE WM5...).
Ce qui n'exclu pas "@media handheld {}".
Tu me répond css.
Je ne sais pas faire.

Nota : je met de côté :

if (screen.width < 350) {opmini = 1;
}

Qui n'a rien à faire ici.