[HTML - Javascript] Changer le code HTML rendu en direct

Bonjour a tous !

Tout d’abord, je suis un complet débutant en Javascript, et malheureusement, je n’arrive pas à faire ce que je veux.

En pratique, j’ai créé une petite page web iPhone/iPod Touch, et j’aimerai bien qu’elle change de disposition lorsque l’iPhone change d’orientation. Pour l’instant, j’ai un tableau de 2x2 qui va bien en portrait, mais je veux le changer en 1x4 en paysage. C’est pour ca que j’ai pensé à un javascript du genre :

si(window.orientation==0 || window.orientation==180){ alors(<tr> <td>Case1</td> <td>Case2</td> </tr> <tr> <td>Case3</td> <td>Case4</td> </tr>) sinon(<tr> <td>Case1</td> <td>Case2</td> <td>Case3</td> <td>Case4</td> </tr>) }

Le problème, c’est que je n’ai aucune idée pour savoir comment le faire, et les méthodes avec des fonctions Javascript qui détectent l’orientation pour changer une CSS différente, je ne maîtrise pas du tout. En gros, je ne sais faire que du bon vieux HTML.
Et si c’est possible avec du PHP, je suis aussi preneur !

Si vous pouviez m’aider, ca serait sympa :slight_smile:

Merci !

bon je dit peut etre des conneries mais pour trouver le changement d’orientation ca revient a det"ecter un changement de resolution d’ecran :

http://www.commentcamarche.net/faq/sujet-8…ion-d-affichage

++
bussiere

C’est possible, parce que certains javascripts détectent justement ce changement de résolution (320px en mode portrait).

Le problème, c’est que je bataille pour mettre en place le javascript/PHP qui est donné en exemple…

EDIT: Précisément, ce qui s’affiche, c’est :
Tableau 1
} else {
Tableau 2
} } ?>

Et sur Firefox, il ajoute "; } else { if($_GET[‘Largeur’] != 320) { en début de page

Justement, je viens de tomber sur ce site, aussi, mais je sais pas comment faire pour le le javascript “ecrive” le code HTML qu’il faut.

J’ai tenté aussi un document.write(’ [mon code HTML] '), mais ca marche pas non plus : page blanche.

[codebox] [/codebox]

[quote=« Xinfe, post:4, topic: 36910 »]Justement, je viens de tomber sur ce site, aussi, mais je sais pas comment faire pour le le javascript « ecrive » le code HTML qu’il faut.

J’ai tenté aussi un document.write(’ [mon code HTML] '), mais ca marche pas non plus : page blanche.

[codebox] [/codebox][/quote] pour un document write faut pas faire un open et un close ? [code]document.open(); document.write("

Assez de l'ancien contenu, passons au nouveau !

"); document.close();[/code]

Par contre apres faut bosser son javascript moi je suis une quiche en javascript :confused:

Bussiere

Je suis pas webdesigner, mais le plus simple semble de mettre les deux tables dans la page et d’en cacher une des deux avec du javascript. Tu mets un id à ta table et tu fait un truc genre getElementById().visibility = none;

… un truc du genre

A voir aussi les events specifiques à Safari sur l’Iphone:
http://developer.apple.com/webapps/ (requiert une inscription à l’adc)
Puis Introduction to Safari Web Content Guide for iPhone > Handling Events

J’aime beaucoup cette maniere de dire RTFM.

[quote=« Xinfe, post:3, topic: 36910 »]C’est possible, parce que certains javascripts détectent justement ce changement de résolution (320px en mode portrait).

Le problème, c’est que je bataille pour mettre en place le javascript/PHP qui est donné en exemple…

EDIT: Précisément, ce qui s’affiche, c’est :
Tableau 1
} else {
Tableau 2
} } ?>

Et sur Firefox, il ajoute "; } else { if($_GET[‹ Largeur ›] != 320) { en début de page[/quote]
a mon avis en plus il faut faire tourner un javascript en htread qui sert a detecter le changement de resolution

Sinon ici ca semble bien comme exemple :
http://www.pageresource.com/jscript/jscreen.htm

enfin ca marche :slight_smile:

Bussiere

Si tu commençais par faire une page qui écrit “votre truc est vertical” ou “votre truc est horizontal” ?
ça serait déjà plus simple pour toi à lire / relire / écrire / re écrire et donc tester …

+1 pour LeGzo.
Tu cahche ton tableau portrait quand t’es en paysage et tu affiche l’autre. Inversement avec l’orientation portrait.
Tu fais tes tables dans un div séparé et tu regardes avec l’attribut display :block/none (un truc du genre) pour afficher/cacher les tables. C’est lourd, mais je vois pas d’autre solutions comme ca.

J’arrive certainement après la bataille, mais euh, une simple solution en css ? non ? sans table ? Dieu sait que je suis pas le plus fervent défenseur du CSS hype et des normes prout prout, mais pour le coup, ca me semble quand même la solution la plus simple, sans rechargement de quoi que ce soit et immédiatement efficace.

Il suffisait juste de mettre les images sans , elles se mettront en place en fonction de la largeur disponible puisque que ce sont des éléments inline : http://64k.be/temp/testiphone/

Halala les geeks compliqués… :slight_smile: