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 JavaScript jquery, NyroModal et ToolTip

jquery, NyroModal et ToolTip

11 réponses
Avatar
karpediem
Bonjour @ toutezéatous,

J'utilise le superbe outil NyroModal pour générer des "layers" => pas de pb.

J'utilise aussi toolTips pour faire des zooms sur mes images car je trouve que l'affichage est bien plus rapide qu'avec NyroModal.

Le problème est que lorsque je suis dans ma modale de NyroModal, le zoom appelé par toolTips se fait derrière la modale.

J'ai modifié les css de la façon suivante :
=> Dans toolTip.css
.toolTip-picture img,
.toolTip-thumbnail img {
border:2px solid #000;
z-index: 3000; <==
}

=> Dans nyroModal.css
div#nyroModalWrapper {
background: #fff;
border: 4px solid #777;
z-index:100; <==
}

Mais ça n'a eu aucune incidence, j'ai toujours mon zoom derrière ma NyroModal... Je me dis que ce n'est pas ça qu'il fallait faire ;o) Mais je ne sais pas quoi faire d'autre... Si quelqu'un avait une idée...

Merci @ toutezéatous et à bientôt !
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
Olivier Miakinen
Le 09/01/2009 20:07, karpediem a écrit :
Bonjour @ toutezéatous,



Beuah aussi.

J'utilise le superbe outil NyroModal pour générer des "layers" => pas de pb.

J'utilise aussi toolTips pour faire des zooms sur mes images car je trouve que
l'affichage est bien plus rapide qu'avec NyroModal.

Le problème est que lorsque je suis dans ma modale de NyroModal, le zoom appelé
par toolTips se fait derrière la modale.



Tout ceci n'est pas très clair pour qui ne connaît pas les outils
apparemment extraordinaires que tu utilises. ;-)

J'ai modifié les css de la façon suivante :
=> Dans toolTip.css
.toolTip-picture img,
.toolTip-thumbnail img {
border:2px solid #000;
z-index: 3000; <= > }

=> Dans nyroModal.css
div#nyroModalWrapper {
background: #fff;
border: 4px solid #777;
z-index:100; <= > }

Mais ça n'a eu aucune incidence, j'ai toujours mon zoom derrière ma
NyroModal...



Le z-index n'a d'influence que dans un contexte d'empilement donné. Si
les deux éléments qui t'intéressent ne sont pas dans le même contexte
d'empilement, ça n'aura aucun effet.

Cf <http://www.yoyodesign.org/doc/w3c/css2/visuren.html#z-index>.

Je me dis que ce n'est pas ça qu'il fallait faire ;o) Mais je ne
sais pas quoi faire d'autre... Si quelqu'un avait une idée...



Par exemple, tu pourrais avoir l'idée de nous donner l'URL de la page
qui pose problème ?
Avatar
karpediem
Olivier Miakinen a écrit le 09/01/2009 à 20h27 :
Le 09/01/2009 20:07, karpediem a écrit :
Bonjour @ toutezéatous,




Beuah aussi.

J'utilise le superbe outil NyroModal pour générer des
"layers" => pas de pb.

J'utilise aussi toolTips pour faire des zooms sur mes images car je trouve que
l'affichage est bien plus rapide qu'avec NyroModal.

Le problème est que lorsque je suis dans ma modale de NyroModal, le
zoom appelé
par toolTips se fait derrière la modale.




Tout ceci n'est pas très clair pour qui ne connaît pas les outils
apparemment extraordinaires que tu utilises. ;-)

J'ai modifié les css de la façon suivante :
=> Dans toolTip.css
.toolTip-picture img,
.toolTip-thumbnail img {
border:2px solid #000;
z-index: 3000; <= > }

=> Dans nyroModal.css
div#nyroModalWrapper {
background: #fff;
border: 4px solid #777;
z-index:100; <= > }

Mais ça n'a eu aucune incidence, j'ai toujours mon zoom derrière
ma
NyroModal...




Le z-index n'a d'influence que dans un contexte d'empilement donné. Si
les deux éléments qui t'intéressent ne sont pas dans le
même contexte
d'empilement, ça n'aura aucun effet.

Cf <http://www.yoyodesign.org/doc/w3c/css2/visuren.html#z-index>.

Je me dis que ce n'est pas ça qu'il fallait faire ;o) Mais je ne
sais pas quoi faire d'autre... Si quelqu'un avait une idée...




Par exemple, tu pourrais avoir l'idée de nous donner l'URL de la page
qui pose problème ?


Rebonjour,

Effectivement une petite précision s'impose...

Je suis dans ma fenêtre modale NyroModal qui est un genre "lightbox". Dans cette fenêtre modale, il y a une image. Au rollover de cette image, j'appelle toolTip... ça correspond bien à un empilement ?

Sinon, j'ai bien une page, mais je vous préviens, elle est super moche car c'est en cours de dev ;o))
Donc voici le lien pour accéder à ma page :
http://www.katiajarne.eu/innobilier/ventes.php
et l'appel à la modal se fait pas le lien "détail" du centre de la page...

Merci pour cette première réponse et à bientôt !
Avatar
karpediem
Olivier Miakinen a écrit le 09/01/2009 à 20h27 :
Le 09/01/2009 20:07, karpediem a écrit :
Bonjour @ toutezéatous,




Beuah aussi.

J'utilise le superbe outil NyroModal pour générer des
"layers" => pas de pb.

J'utilise aussi toolTips pour faire des zooms sur mes images car je trouve que
l'affichage est bien plus rapide qu'avec NyroModal.

Le problème est que lorsque je suis dans ma modale de NyroModal, le
zoom appelé
par toolTips se fait derrière la modale.




Tout ceci n'est pas très clair pour qui ne connaît pas les outils
apparemment extraordinaires que tu utilises. ;-)

J'ai modifié les css de la façon suivante :
=> Dans toolTip.css
.toolTip-picture img,
.toolTip-thumbnail img {
border:2px solid #000;
z-index: 3000; <= > }

=> Dans nyroModal.css
div#nyroModalWrapper {
background: #fff;
border: 4px solid #777;
z-index:100; <= > }

Mais ça n'a eu aucune incidence, j'ai toujours mon zoom derrière
ma
NyroModal...




Le z-index n'a d'influence que dans un contexte d'empilement donné. Si
les deux éléments qui t'intéressent ne sont pas dans le
même contexte
d'empilement, ça n'aura aucun effet.

Cf <http://www.yoyodesign.org/doc/w3c/css2/visuren.html#z-index>.

Je me dis que ce n'est pas ça qu'il fallait faire ;o) Mais je ne
sais pas quoi faire d'autre... Si quelqu'un avait une idée...




Par exemple, tu pourrais avoir l'idée de nous donner l'URL de la page
qui pose problème ?


Rebonjour,

Effectivement une petite précision s'impose...

Je suis dans ma fenêtre modale NyroModal qui est un genre "lightbox". Dans cette fenêtre modale, il y a une image. Au rollover de cette image, j'appelle toolTip... ça correspond bien à un empilement ?

Sinon, j'ai bien une page, mais je vous préviens, elle est super moche car c'est en cours de dev ;o))
Donc voici le lien pour accéder à ma page :
http://www.katiajarne.eu/innobilier/ventes.php
et l'appel à la modal se fait pas le lien "détail" du centre de la page...

Merci pour cette première réponse et à bientôt !
Avatar
Olivier Miakinen
Le 09/01/2009 21:10, karpediem a écrit :

[ citation intégrale ]





Merci de lire les paragraphes 3a et 3b de
<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html>.

Par ailleurs il était inutile d'envoyer le même article deux fois à
une heure d'intervalle. Si ton accès aux news ne fonctionne pas,
n'hésite pas à aller voir du côté des fournisseurs gratuits :
<http://news.lacave.net/servers/reader/list>.

Effectivement une petite précision s'impose...

Je suis dans ma fenêtre modale NyroModal qui est un genre "lightbox". Dans
cette fenêtre modale, il y a une image. Au rollover de cette image, j'appelle
toolTip... ça correspond bien à un empilement ?



Je n'en sais rien, car visiblement c'est JavaScript qui se charge de
faire afficher l'image (sans JavaScript plus rien ne marche, hélas).

http://www.katiajarne.eu/innobilier/ventes.php
et l'appel à la modal se fait par le lien "détail" du centre de la page...



Voici l'empilement des éléments HTML conduisant à l'image sur laquelle
on peut passer la souris :

html > body > div#nyroModalFull > div#nyroModalWrapper > div.wrapper >
div#nyroModalContent > a.gallery > img

Pour l'image qui apparaît je ne peux pas obtenir les mêmes infos puisque
elle reste derrière et que je ne peux donc pas l'atteindre avec la
souris. Alors c'est à toi de les trouver. À priori, c'est à la première
divergence entre les deux que tu devrais appliquer des z-index -- du
moins je le suppose.

Merci pour cette première réponse et à bientôt !



Oui, mais seulement si tu cesses la porcinographie. ;-)
Avatar
SAM
Le 1/9/09 9:10 PM, karpediem a écrit :
J'ai modifié les css de la façon suivante :







à mon idée : ça ne sert à rien de rien !
les trucs-bazars peuvent bien te bazarder tous tes z-index !
De plus un z-index à 3000 ne doit avoir aucune signification !

=> Dans toolTip.css
.toolTip-picture img,
.toolTip-thumbnail img {
z-index: 3000; <= > }

=> Dans nyroModal.css
div#nyroModalWrapper {
z-index:100; <= > }

Mais ça n'a eu aucune incidence, j'ai toujours mon zoom derrière
ma NyroModal...







Tu n'as qu'à ranger tes p'tites affaires dans l'ordre :
dans le Head
intervertir les appels scripts et css des 2 plug-ins de jQuey

comme ça ...
sans rien connaitre à ces fabulosités ni regardé de très près


Le z-index n'a d'influence que dans un contexte d'empilement donné. Si
les deux éléments qui t'intéressent ne sont pas dans le
même contexte d'empilement, ça n'aura aucun effet.





vu que tooltip appende son machin au body
(c a d le jette à la fin du flux html)(du moins je suppose)
normalement le machin doit passer par dessus le reste
sans s'occuper des z-indexes

sauf si ... l'autre truc surveille les lieux et interdit quoi que ce
soit de venir le recouvrir ... ? !


Je suis dans ma fenêtre modale NyroModal qui est un genre "lightbox". Dans
cette fenêtre modale, il y a une image. Au rollover de cette image, j'appelle
toolTip... ça correspond bien à un empilement ?



??? j'en sais rien ... que fait exactement NyroModal ?
(ne se rempile t-il pas en continu lui même en fin de pile ?)

Sinon, j'ai bien une page, mais je vous préviens, elle est super moche car
c'est en cours de dev ;o))
Donc voici le lien pour accéder à ma page :
http://www.katiajarne.eu/innobilier/ventes.php



Bon, si de remettre les plug-ins dans l'ordre ne donne pas le résultat
escompté
essayer que tooTip soit appendé dans NyroModal

dans 'jquery.tooltips.js' à la ligne 59 on a :

aToolTip.appendTo("body").hide().css( ... blablabla

voir si à la place de 'body'
on ne peut mettre le div principal de NyroModal
(en vérifiant la syntaxe en rapport avec celle de jQuery)

et l'appel à la modal se fait par le lien "détail" du centre de la page...



C'est pas l'tout de vouloir faire du "joli", faudrait que ce soit
fonctionnel et ergonomique (temps d'attente des images et poids des JS)


--
sm
Avatar
karpediem
Olivier Miakinen a écrit le 09/01/2009 à 23h18 :
Le 09/01/2009 21:10, karpediem a écrit :

[ citation intégrale ]







Merci de lire les paragraphes 3a et 3b de
<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html>.

Par ailleurs il était inutile d'envoyer le même article deux fois
à
une heure d'intervalle. Si ton accès aux news ne fonctionne pas,
n'hésite pas à aller voir du côté des fournisseurs
gratuits :
<http://news.lacave.net/servers/reader/list>.

Effectivement une petite précision s'impose...

Je suis dans ma fenêtre modale NyroModal qui est un genre
"lightbox". Dans
cette fenêtre modale, il y a une image. Au rollover de cette image,
j'appelle
toolTip... ça correspond bien à un empilement ?




Je n'en sais rien, car visiblement c'est JavaScript qui se charge de
faire afficher l'image (sans JavaScript plus rien ne marche, hélas).

http://www.katiajarne.eu/innobilier/ventes.php
et l'appel à la modal se fait par le lien "détail" du
centre de la page...




Voici l'empilement des éléments HTML conduisant à l'image
sur laquelle
on peut passer la souris :

html > body > div#nyroModalFull > div#nyroModalWrapper >
div.wrapper >
div#nyroModalContent > a.gallery > img

Pour l'image qui apparaît je ne peux pas obtenir les mêmes infos
puisque
elle reste derrière et que je ne peux donc pas l'atteindre avec la
souris. Alors c'est à toi de les trouver. À priori, c'est
à la première
divergence entre les deux que tu devrais appliquer des z-index -- du
moins je le suppose.

Merci pour cette première réponse et à bientôt !




Oui, mais seulement si tu cesses la porcinographie. ;-)


Bonsoir Olivier,

Je suis désolée de cette mise en forme "porcinographique" ;o) totalement involontaire, mais je n'ai pas réussit à supprimer le message d'origine dans ma réponse, ni a faire de belles "incrustations" dans ton message comme toi...
Je dois être très sotte, mais vraiment, même en allant sur http://www.usenet-fr.net/ et en lisant différents articles, je n'ai pas trouver de "mode d'emploi" sur le "comment faire" ;-( J'ai même changé de navigateur pour le cas où une option serait invisible... Définitivement, ce sont mes neurones qui sont invisibles ;o( Si tu pouvais m'indiquer où trouver l'info, ce serait super car du coup, je n'ose plus répondre...

Merci pour ta réponse, je vais continuer mes tests avec tooltip...
Avatar
SAM
Le 1/10/09 2:48 AM, karpediem a écrit :

Je suis désolée de cette mise en forme "porcinographique" ;o)
totalement involontaire,
J'ai même changé de navigateur
pour le cas où une option serait invisible...
Si tu pouvais m'indiquer où trouver l'info,



Est-ce vraiment une bonne idée d'aller sur des news-groupes avec un
Navigateur ?
En passant par : <https://fr.giganews.com/>
(payant ! ! !)

alors qu'avec un simple courrierleur(*) gratuit !
les bons usages usenet sont pour la plupart gérés automatiquement par le
e-maileur (ou mieux : news-reader)

Sans compter que ça va bp plus vite avec un soft adapté !

Sinon, simplement utiliser Google, par exemple ?
Ça se passe ici:
<http://groups.google.com/group/fr.comp.lang.javascript/browse_thread/thread/b96f6d49aae0ff47/149429f47a6f23c5?#149429f47a6f23c5>



(*) OutLook, Thunderbird, Mail, Opera(en mode mail) pour les principaux
Pour PC Win :
MesNews <http://www.mesnews.net/> gratis
Fortè <http://www.forteinc.com/google/> 30$
Pour Mac :
MT-NewsWatcher <http://www.smfr.org/mtnw/> free
MacSoup <http://home.snafu.de/stk/macsoup/> 20$
sinon, ils devraient être tous ici :
<http://www.newsreaders.info/recommended-newsreaders.htm>

--
sm
Avatar
karpediem63
On 10 jan, 12:40, SAM
wrote:
Est-ce vraiment une bonne idée d'aller sur des news-groupes avec un
Navigateur ?



C'est la première fois que je participe à un news-groupes, alors je
l'utilisais comme un simple forum...

Sinon, simplement utiliser Google, par exemple ?



C'est ce que j'ai fait d'autant qu j'ai un compte gmail ;o))

Merci SM, je vais maintenant pouvoir répondre normalement !
Avatar
karpediem63
On 10 jan, 01:53, SAM
wrote:
Le 1/9/09 9:10 PM, karpediem a écrit :

>>> J'ai modifié les css de la façon suivante :

à mon idée : ça ne sert à rien de rien !



Tu as raison car j'ai trouvé d'où venait mon problème !

Tu n'as qu'à ranger tes p'tites affaires dans l'ordre :
dans le Head
intervertir les appels scripts et css des 2 plug-ins de jQuey



C'est ça qui m'a mis sur la voie... Je les ai intervertis, puis
supprimés, puis j'ai trouvé !

Je vais expliquer le plus clairement possible des fois que d'autres
personnes rencontrent le même problème...

Au départ, je suis sur ma page Liste.php
=> qui affiche la liste de mes biens immobiliers.
=> qui appelle NyroModal pour visualiser le détail d'un bien au
travers de Detail.php
=> qui appelle ToolTip pour zoomer l'image

Click sur le lien "afficher le détail"
=> Affiche la modale appelée par NyroModal
=> Charge le contenu de Detail.php
=> Dans Detail.php, j'appelle ToolTip pour zoomer l'image dans le
détail

Sauf que lorsque je suis sur la modale, l'url affichée est toujours
Liste.php, donc le Tooltip intercepté n'est pas celle de Detail.php
mais celle de Liste.php d'où le zoom affiché derrière la modale.

La solution est d'afficher le Detail.php dans NyroModal via une
iframe. Dans NyroModal, il suffit de mettre target="_blank".

Trop cool ces outils jquery et trop cool tous ces développeurs qui les
mettent à notre disposition !

C'est pas l'tout de vouloir faire du "joli", faudrait que ce soit
fonctionnel et ergonomique (temps d'attente des images et poids des JS)



Je suis tout à fait d'accord avec toi, on fait des sites web pour
qu'ils soient non seulement vus, mais surtout utilisés ! Il est vrai
que les outils jquery apporte beaucoup de fluidité dans la navigation
au prix d'une surcharge pondérale "kOctique" ;o) Tout a un prix, il
faut trouver le bon compromis...

Encore un très grand MERCI pour votre participation et vos réponses,
ça permet d'enrichir la réflexion. Lorsque l'on est tout seul devant
son écran, on tourne très vite en rond et on a du mal à changer
d'orientation.

Excellente journée et à très bientôt
Avatar
stm.asm
On 10 jan, 13:58, ""
wrote:
On 10 jan, 12:40, SAM
wrote:

> Sinon, simplement utiliser Google, par exemple ?

C'est ce que j'ai fait d'autant qu j'ai un compte gmail ;o))



Tiens ? et si j'en ouvrai un ?

Merci SM, je vais maintenant pouvoir répondre normalement !



Ça a l'air de fonctionner normalement ;-)

--
sm
1 2