info
Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
effet de zoom
2 views
Skip to first unread message
Une Bévue
Dec 9, 2012, 4:04:19 AM12/9/12
to
le but de la manip :
avoir une div d'une dimension donnée, disons 400x400 px^2 qui est
zoomable, cad qui prenne toute la fenêtre du navigateur.
J'ai réalisé une maquette simple à partir du WebGL que j'expérimente.
j'ai donc remplacé la balise x3d par une div.
les mêmes phénomènes se produisent pour la div et pour le x3d.
A savoir quand je zoom à 100% du body les navigateurs ne répondent pas
de la même manière.
De mémoire, sur Mac OS X, avec Safari ou Webkit, la hauteur de la div au
départ, sans zoom, est d'emblèe celle de la fenêtre.
Avec les autres navigateurs tjs sur mac os, la div zoomée prend bien
toute la largeur du body mais pas toute sa hauteur.
De plus sour ubuntu avec Firefox Aurora comme avec Seamonkey, pas de
background de la div non zoomée.
Donc j'ai mis une petite maquette ici :
<http://studio.quatorze.free.fr/zoom_test/zoom_test.html>
AU cas où vous pourriez m'apporter des lumières...
--
L'homme est imparfait, mais ce n'est pas étonnant
quand on pense à l'époque où il a été créé.
— Alphonse Allais
avoir une div d'une dimension donnée, disons 400x400 px^2 qui est
zoomable, cad qui prenne toute la fenêtre du navigateur.
J'ai réalisé une maquette simple à partir du WebGL que j'expérimente.
j'ai donc remplacé la balise x3d par une div.
les mêmes phénomènes se produisent pour la div et pour le x3d.
A savoir quand je zoom à 100% du body les navigateurs ne répondent pas
de la même manière.
De mémoire, sur Mac OS X, avec Safari ou Webkit, la hauteur de la div au
départ, sans zoom, est d'emblèe celle de la fenêtre.
Avec les autres navigateurs tjs sur mac os, la div zoomée prend bien
toute la largeur du body mais pas toute sa hauteur.
De plus sour ubuntu avec Firefox Aurora comme avec Seamonkey, pas de
background de la div non zoomée.
Donc j'ai mis une petite maquette ici :
<http://studio.quatorze.free.fr/zoom_test/zoom_test.html>
AU cas où vous pourriez m'apporter des lumières...
--
L'homme est imparfait, mais ce n'est pas étonnant
quand on pense à l'époque où il a été créé.
— Alphonse Allais
SAM
Dec 9, 2012, 6:59:53 AM12/9/12
to
Le 09/12/12 10:04, Une Bévue a écrit :
taka zoomer l'image
au lieu de zoomer son conteneur
(à mon idée, Safari a faux)
Le height: 100%
qui doit remplir l'écran (le view-port !)
ça ne peut fonctionner que si le body (et le html ?) remplis(sent) la
hauteur préliminairement.
mais ... d'augmenter le width d'un div ne lui accroit pas
proportionnellement la hauteur (ça ne marche que pour les img)
... à moins que ça n'ait changé en HTML.5 ?
--
Stéphane Moriaux avec/with iMac-intel
> <http://studio.quatorze.free.fr/zoom_test/zoom_test.html>
>
> AU cas où vous pourriez m'apporter des lumières...
en première analyse rapide et sans vérif
>
> AU cas où vous pourriez m'apporter des lumières...
taka zoomer l'image
au lieu de zoomer son conteneur
(à mon idée, Safari a faux)
Le height: 100%
qui doit remplir l'écran (le view-port !)
ça ne peut fonctionner que si le body (et le html ?) remplis(sent) la
hauteur préliminairement.
mais ... d'augmenter le width d'un div ne lui accroit pas
proportionnellement la hauteur (ça ne marche que pour les img)
... à moins que ça n'ait changé en HTML.5 ?
--
Stéphane Moriaux avec/with iMac-intel
Une Bévue
Dec 9, 2012, 8:19:59 AM12/9/12
to
Le 09/12/2012 12:59, SAM a écrit :
>
>
> en première analyse rapide et sans vérif
> taka zoomer l'image
ben non, là c'est une maquette, l'image est là pour "simulation"...
>
>
> en première analyse rapide et sans vérif
> taka zoomer l'image
> au lieu de zoomer son conteneur
>
> (à mon idée, Safari a faux)
Firefox Aurora et Google Chrome, pour WebKit, utou...
> Le height: 100%
> qui doit remplir l'écran (le view-port !)
> ça ne peut fonctionner que si le body (et le html ?) remplis(sent) la
> hauteur préliminairement.
> mais ... d'augmenter le width d'un div ne lui accroit pas
> proportionnellement la hauteur (ça ne marche que pour les img)
new_size = "100%";
[...]
x3d_element.style.width = new_size;
x3d_element.style.height = new_size;
> ... à moins que ça n'ait changé en HTML.5 ?
j'ai passé tous mes essais de WebGL alias X3Dom en html5, ça roule mieux
que la soupe xhtml présentée en html.
SAM
Dec 9, 2012, 8:42:59 AM12/9/12
to
Le 09/12/12 10:04, Une B�vue a �crit :
> <http://studio.quatorze.free.fr/zoom_test/zoom_test.html>
cJoint ne veut plus de fichier web ...
voil� un truc : <http://cjoint.com/?BLjoLwT2GfC>
L'image zoom avec l'element
l'element remplit tout le body ou le 1/4 (toggle)
donc ...
l'image fait de m�me
et ...
on n'a plus de place pour le background de l'element :-/
--
St�phane Moriaux avec/with iMac-intel
> <http://studio.quatorze.free.fr/zoom_test/zoom_test.html>
cJoint ne veut plus de fichier web ...
voil� un truc : <http://cjoint.com/?BLjoLwT2GfC>
L'image zoom avec l'element
l'element remplit tout le body ou le 1/4 (toggle)
donc ...
l'image fait de m�me
et ...
on n'a plus de place pour le background de l'element :-/
--
St�phane Moriaux avec/with iMac-intel
SAM
Dec 9, 2012, 8:59:57 AM12/9/12
to
Le 09/12/12 14:19, Une Bévue a écrit :
hauteur : 100% de rien ça fait rien, hop!
je te rappelle que tu as mis x3d_element en "absolute"
donc ...
sa hauteur s'adapte à son contenu (à l'image quoi)
essayer ton fichier sans l'image
... zen, hein ?
Yvon lave plus blanc que blanc
>
> euh dans le js il y a :
> new_size = "100%";
>
> [...]
>
> x3d_element.style.width = new_size;
> x3d_element.style.height = new_size;
ben oui, et alors ?
> euh dans le js il y a :
> new_size = "100%";
>
> [...]
>
> x3d_element.style.width = new_size;
> x3d_element.style.height = new_size;
hauteur : 100% de rien ça fait rien, hop!
je te rappelle que tu as mis x3d_element en "absolute"
donc ...
sa hauteur s'adapte à son contenu (à l'image quoi)
essayer ton fichier sans l'image
... zen, hein ?
Yvon lave plus blanc que blanc
SAM
Dec 9, 2012, 9:22:59 AM12/9/12
to
Le 09/12/12 14:59, SAM a �crit :
> essayer ton fichier sans l'image
> ... zen, hein ?
> Yvon lave plus blanc que blanc
>
x3d_element est en relative,
il est de largeur 50 ou 100% du body,
mais sa hauteur est :
x% de la hauteur du body
Comme le body n'a pas de hauteur,
la hauteur de x3d_element est donc : 0
(le bouton en absolute n'influe pas sur son conteneur)
>
> je te rappelle que tu as mis x3d_element en "absolute"
> donc ...
Heu ... non c'est le bouton :-(
> je te rappelle que tu as mis x3d_element en "absolute"
> donc ...
> essayer ton fichier sans l'image
> ... zen, hein ?
> Yvon lave plus blanc que blanc
>
il est de largeur 50 ou 100% du body,
mais sa hauteur est :
x% de la hauteur du body
Comme le body n'a pas de hauteur,
la hauteur de x3d_element est donc : 0
(le bouton en absolute n'influe pas sur son conteneur)
Une Bévue
Dec 9, 2012, 2:14:23 PM12/9/12
to
Le 09/12/2012 14:59, SAM a �crit :
> hauteur : 100% de rien �a fait rien, hop!
>
ben d'abord je n'ai pas mis absolu mais relatif :
#the_element {
width: 50%;
height: 50%;
background-color:#000;
background-image:url(zoom_test_fichiers/starsbg.png);
background-size:100%, 100%;
border: none; /* remove the default 1px border */
position: relative;
}
en suite les x% sont relatifs au contenant pas au contenu.
> hauteur : 100% de rien �a fait rien, hop!
>
> je te rappelle que tu as mis x3d_element en "absolute"
> donc ...
> sa hauteur s'adapte � son contenu (� l'image quoi)
> je te rappelle que tu as mis x3d_element en "absolute"
> donc ...
>
ben d'abord je n'ai pas mis absolu mais relatif :
#the_element {
width: 50%;
height: 50%;
background-color:#000;
background-image:url(zoom_test_fichiers/starsbg.png);
background-size:100%, 100%;
border: none; /* remove the default 1px border */
position: relative;
}
en suite les x% sont relatifs au contenant pas au contenu.
Une Bévue
Dec 9, 2012, 2:20:09 PM12/9/12
to
Le 09/12/2012 15:22, SAM a �crit :
tu es sur du z�ro de la hauteur du body ?
--
L'homme est imparfait, mais ce n'est pas �tonnant
quand on pense � l'�poque o� il a �t� cr��.
� Alphonse Allais
> x3d_element est en relative,
> il est de largeur 50 ou 100% du body,
> mais sa hauteur est :
> x% de la hauteur du body
> Comme le body n'a pas de hauteur,
c'est d�bile alors pourquoi arler de pourcentage ?
> il est de largeur 50 ou 100% du body,
> mais sa hauteur est :
> x% de la hauteur du body
> Comme le body n'a pas de hauteur,
tu es sur du z�ro de la hauteur du body ?
--
L'homme est imparfait, mais ce n'est pas �tonnant
quand on pense � l'�poque o� il a �t� cr��.
� Alphonse Allais
Une Bévue
Dec 9, 2012, 2:24:45 PM12/9/12
to
Le 09/12/2012 14:42, SAM a �crit :
fait une hauteur z�ro, le bouton en "absolu" (en fait du relatif par
rapport au contenant) n'intervenant pas dans la hauteur.
ben oui, c'est pourquoi j'ai mis une image dans la div qui "simule" un
canvas pour le WebGL.
> L'image zoom avec l'element
> l'element remplit tout le body ou le 1/4 (toggle)
> donc ...
> l'image fait de m�me
> et ...
> on n'a plus de place pour le background de l'element :-/
>
ah oui, le background de l'�l�ment n'appara�t pas parce que l'�l�ment
> l'element remplit tout le body ou le 1/4 (toggle)
> donc ...
> l'image fait de m�me
> et ...
> on n'a plus de place pour le background de l'element :-/
>
fait une hauteur z�ro, le bouton en "absolu" (en fait du relatif par
rapport au contenant) n'intervenant pas dans la hauteur.
ben oui, c'est pourquoi j'ai mis une image dans la div qui "simule" un
canvas pour le WebGL.
Une Bévue
Dec 9, 2012, 2:30:19 PM12/9/12
to
Le 09/12/2012 14:42, SAM a �crit :
> voil� un truc : <http://cjoint.com/?BLjoLwT2GfC>
ok pig�, tu joues sur la taille de l'image en % sachant que la hauteur
de l'image suivra, et donc la hauteur du contenant.
tu as aussi supprim� :
position: absolute;
du #toggler
--
> voil� un truc : <http://cjoint.com/?BLjoLwT2GfC>
ok pig�, tu joues sur la taille de l'image en % sachant que la hauteur
de l'image suivra, et donc la hauteur du contenant.
tu as aussi supprim� :
position: absolute;
du #toggler
--
SAM
Dec 10, 2012, 3:11:00 AM12/10/12
to
Le 09/12/12 20:30, Une B�vue a �crit :
> Le 09/12/2012 14:42, SAM a �crit :
>> voil� un truc : <http://cjoint.com/?BLjoLwT2GfC>
> ok pig�, tu joues sur la taille de l'image en % sachant que la hauteur
je ne sais pas trop si c'est �a que tu cherchais.
Je t'ai mis aussi une option (� d�placer apr�s la 1�re r�gle de body)
qui doit permettre de se passer de l'image.
.... il reste qques effets de bords : ascenseur oui/non
> tu as aussi supprim� :
> position: absolute;
> du #toggler
Il est en float
et le float simule le absolute
> Le 09/12/2012 14:42, SAM a �crit :
>> voil� un truc : <http://cjoint.com/?BLjoLwT2GfC>
> ok pig�, tu joues sur la taille de l'image en % sachant que la hauteur
> de l'image suivra, et donc la hauteur du contenant.
Oui,
je ne sais pas trop si c'est �a que tu cherchais.
Je t'ai mis aussi une option (� d�placer apr�s la 1�re r�gle de body)
qui doit permettre de se passer de l'image.
.... il reste qques effets de bords : ascenseur oui/non
> tu as aussi supprim� :
> position: absolute;
> du #toggler
Il est en float
et le float simule le absolute
Une Bévue
Dec 10, 2012, 4:27:23 AM12/10/12
to
Le 10/12/12 09:11, SAM a écrit :
> Oui,
> je ne sais pas trop si c'est ça que tu cherchais.
oui, c'est ça, merci !
> Je t'ai mis aussi une option (à déplacer après la 1ère règle de body)
--
> Oui,
> je ne sais pas trop si c'est ça que tu cherchais.
oui, c'est ça, merci !
> Je t'ai mis aussi une option (à déplacer après la 1ère règle de body)
> qui doit permettre de se passer de l'image.
> .... il reste qques effets de bords : ascenseur oui/non
>
>> tu as aussi supprimé :
> .... il reste qques effets de bords : ascenseur oui/non
>
>> position: absolute;
>> du #toggler
>
> Il est en float
> et le float simule le absolute
AH, pigé, il faut retenir ce genre de choses...
>> du #toggler
>
> Il est en float
> et le float simule le absolute
--
Une Bévue
Dec 10, 2012, 7:54:20 AM12/10/12
to
Le 10/12/12 09:11, SAM a écrit :
> je ne sais pas trop si c'est ça que tu cherchais.
une page en WebGL (via X3Dom) :
<http://studio.quatorze.free.fr/zoom_test/HelloWorld.html>
--
SAM
Dec 10, 2012, 8:11:40 AM12/10/12
to
Le 10/12/12 13:54, Une Bévue a écrit :
Oui, Sympa.
Je vois enfin cet exemple en suffisamment grand.
Je ne comprenais pas pourquoi ça lambinait ...
- un png de 800ko
- un JS de 600 ko
1350 ko au total !!!
plus le temps d'agiter le JS ...
Oui, Sympa.
Je vois enfin cet exemple en suffisamment grand.
Je ne comprenais pas pourquoi ça lambinait ...
- un png de 800ko
- un JS de 600 ko
1350 ko au total !!!
plus le temps d'agiter le JS ...
Une Bévue
Dec 10, 2012, 10:34:41 AM12/10/12
to
Le 10/12/2012 14:11, SAM a écrit :
> Je ne comprenais pas pourquoi ça lambinait ...
> - un png de 800ko
> - un JS de 600 ko
> 1350 ko au total !!!
> plus le temps d'agiter le JS ...
oui, ça mon png, pas vraiment utilise ces étoiles;
> Je ne comprenais pas pourquoi ça lambinait ...
> - un png de 800ko
> - un JS de 600 ko
> 1350 ko au total !!!
> plus le temps d'agiter le JS ...
quand au js je vais m'en passer mais je devrai faire du WebGL au lieu de
passer par X3Dom et son js.
mais, mes figures qui sont obtenues par calcul feront de l'ordre de
500/1000 Ko...
j'arrive à utiliser HTML5, je ne fais plus de soupe xhtml présentée en
html.
juste un truc à savoir est que les balises auto-fermantes, en X3Dom, ne
marchent pas, par ex, au lieu de :
<Viewpoint position="..." />
il faut écrire (pour l'instant) :
<Viewpoint position="..."></Viewpoint>
perso j'utiliserai les Indexedfacecet :
<http://studio.quatorze.free.fr/zoom_test/Moebius.html>
0 new messages