Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP effet de zoom

effet de zoom

14 réponses
Avatar
Une Bévue
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
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
SAM
Le 09/12/12 10:04, Une Bévue a écrit :
<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
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
Avatar
Une Bévue
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"...

au lieu de zoomer son conteneur

(à mon idée, Safari a faux)



oui, je pense aussi, je le trouve particulièrement lent comparé à
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.



c'est sûr ça ?

mais ... d'augmenter le width d'un div ne lui accroit pas
proportionnellement la hauteur (ça ne marche que pour les img)



euh dans le js il y a :
new_size = "100%";

[...]

x3d_element.style.width = new_size;
x3d_element.style.height = new_size;

... à moins que ça n'ait changé en HTML.5 ?



non je ne pense pas.
j'ai passé tous mes essais de WebGL alias X3Dom en html5, ça roule mieux
que la soupe xhtml présentée en html.

--
L'homme est imparfait, mais ce n'est pas étonnant
quand on pense à l'époque où il a été créé.
— Alphonse Allais
Avatar
SAM
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
Avatar
SAM
Le 09/12/12 14:19, Une Bévue a écrit :

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 ?

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

--
Stéphane Moriaux avec/with iMac-intel
Avatar
SAM
Le 09/12/12 14:59, SAM a écrit :

je te rappelle que tu as mis x3d_element en "absolute"
donc ...



Heu ... non c'est le bouton :-(

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)

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Une Bévue
Le 09/12/2012 14:59, SAM 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)




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.
Avatar
Une Bévue
Le 09/12/2012 15:22, SAM a écrit :
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 ?
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
Avatar
Une Bévue
Le 09/12/2012 14:42, SAM a écrit :
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
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.
Avatar
Une Bévue
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


--
L'homme est imparfait, mais ce n'est pas étonnant
quand on pense à l'époque où il a été créé.
— Alphonse Allais
Avatar
SAM
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
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



--
Stéphane Moriaux avec/with iMac-intel
1 2