BOITE DE DIALOGUE (AVEC GRISEMENT DE LA PAGE)

Commentaire de nicomilville le 17/08/2008 11:58:58

Merci a pysco68 pour son aide !

a++

Commentaire de nicomilville le 17/08/2008 15:47:44

Merci coucou :-)

Oui, je vais penser a pousser, mais pour l'instant je vais remettre le scroll car la il est bloqué et je le remet quand on ferme la boite mais bultez m'a dit en privé que ce serai mieu de ne pas le bloquer comme code source mais que la boite s'adapte plutot au scroll...

J'ai toujours entendu parler d'API sans savoir ce que c'est, peus tu m'éclairer ?

a++

PS : merci de ton commentaire, ça fait plaisir d'avoir un commentaire comme ça, il faut dire que je n'ai pas l'habitude dans la mesure ou mes autres sources sont inutiles...

Commentaire de nicomilville le 17/08/2008 19:56:26

Merci pour le commentaire et la note fulmine !

J'ai fait cette source parce que bultez et moi on en a mare de donnée des exemple de boite comme ça a chaque question sur le forum, maintenant on peut les rediriger vers cette source...

Sinon, la je suis en train de changer ça en API javascript, j'ai fait plein de nouvelle fonctions et l'appelle sera carement différent, c'est a dire que c'est vous qui construirez votre propre boite a travers plusieurs methodes et propriétés...

Bon ba je retourne a mes methodes...

Je suis content de voir que ça vous plais (c'est ma première source qui me rapporte un 10/10 au deuxième commentaire) franchement je ne m'attendais pas a ce que ça vous plaise autant...

a++

Commentaire de nicomilville le 18/08/2008 11:55:16

Salut younes371,

Pour IE6 ba je suis en train de voir mais qu'es ce qui ne marche pas exactement ?

Je pari que c'est pour griser la fenêtre et aussi le positionement...

Comme bultez me l'a di ça doit étre a cause de la position fixed qui n'est pris en compe que par les navigateurs récent...

Bultez m'a mis sur une piste (scrollHeight, scrollWidth et les truc de ce genre)...

Comme tu as due le lire, je suis en train de transformer les fonctions javascript en API, je suis en ce moment même en train de rajouer des fonctions et aussi et possibilité du genre laisser le scroll ou le cacher...

Donc si tu le permet pour le moment, je me penche un peut sur l'API, en même temps je vais tester un peut les position qui ne posent pas de problème sur IE6...

a++

Commentaire de nicomilville le 18/08/2008 13:02:04

De rien,

Les modification, il y en aura plusieurs...

Par exemple :

- La version normal (simple) sera mise a jourpour qu'elle marche sous IE6...

- Il y aura bientot une version API (complexe) avec plein d'options... Merci a couco747 pour l'idée...

- Il y aura bientot une version Mootool faite avec le framework mootool... Merci a pysco68 pour l'idée et l'aide apportée...

a++

Commentaire de kgilbert le 18/08/2008 14:22:01

Note, ça ne fonctionne pas sous Internet Explorer 6, je n'ai pas testé sous Internet Explorer 7.

Commentaire de kgilbert le 18/08/2008 14:45:16

Salut,

le width et le height fonctionne bien si ma fenêtre est maximisée, si elle ne l'est pas, ton width est calculé avec la largeur maximal possible, il est possible de calculer la largeur réelle et la largeur maximal possible. De plus, il est même possible de recalculer à chaque modifications de grandeur de la fenêtre.

Penses à ça, bonne prog.

Commentaire de nicomilville le 18/08/2008 14:48:00

ok, je l'implémente dabord dans l'API et après dans la version standard si ça marche...

a++

Commentaire de nicomilville le 18/08/2008 14:51:21

>>on voit que t pas info-graphiste ou webmaster : quelle faute de goût !!
   Que veus tu dire ?
   Pour ton information je suis actuellement webmaster de plusieurs sites...


>>mais bon même si l'intérêt, je l'avais bien compris, n'était pas là, l'harmonie des couleurs, ça existe ;-)
   C'est une blague ?
   De toute façon rien ne t'oblige a utiliser cette image, tu peus utiliser une autre image en background image...
   Cette image n'est la que pour donner un exemple...

a++

Commentaire de Gatsu35 le 18/08/2008 23:14:27

Franchement des pavés de code comme celui-ci :
# function griserInterface() {
# document.getElementById('griser').style.margin = "0px";
# document.getElementById('griser').style.top = "0";
# document.getElementById('griser').style.left = "0";
# document.getElementById('griser').style.height = "100%";
# document.getElementById('griser').style.width = "100%";
# document.getElementById('griser').style.position = "fixed";
# document.getElementById('griser').style.backgroundColor = "black";
# document.getElementById('griser').style.zIndex = "50";
# document.documentElement.style.overflow = "hidden";
# Obj_SetOpacity("griser", 70);
# init_dialogue();
# }
yen a plein ton code, tu voudrais pas déclarer une variable qui ferait référence à ton élémetn. Car là tu répètes un peu inutiliment la même chose.

var s = document.getElementById('griser').style;
s.backgroundColor = 'black'
s.position = 'relative';

et tu auras surtout mieux fait de mettre tout ça dans une CSS

Commentaire de kgilbert le 19/08/2008 13:29:45

Salut,
pour le css, tu met:

var doc = document.getElementById('griser').style;
doc.className = 'taClasse';

Non ?
et pour gérer les événements, tu le fait par la suite, je n'ai peut-être pas
tout compris, mais ça me semble facile à comprendre.

CSS:

.taClasse{

margin: 0px;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
position: fixed;
background-color: #000000;
zindex = 50;

}

pour la gestion du overflow du document, tu laisses la ligne comme ça:

document.documentElement.style.overflow = "hidden";


En espérant t'avoir aidé.

Commentaire de djack69 le 19/08/2008 16:36:30

Bonjour je trouve très bien d'avoir fait une source comme celle ci cela permettra d'avoir un site un peu plus dynamique ;)

Commentaire de maradona68 le 19/08/2008 18:27:25

Très bon initiative nicomilville.

Commentaire de nicomilville le 20/08/2008 12:33:11

La source normalement maintenant compatible IE6...

Nouveautés a venir :

- API

- Version Mootool

- Peut être une mise a jour pour que le div suive le scroll...

a++

Commentaire de nicomilville le 23/08/2008 09:51:47

Merci pour ta solution, par contre j'ai pas bien compis le problème...

a++

Commentaire de nicomilville le 23/08/2008 11:24:12

a oui, exelente remarque !

Mais le problème c'est que je ne sais pas comment y remèdier...

Je crois qu'il y a un évènement onresize, j'ai essayé de l'utiliser mais ça ne marche pas...

a++

Commentaire de nicomilville le 23/08/2008 14:08:45

Merci, ce n'est pas grave dans la mesure ou j'utilise plutot offsetHeight...

a++

Commentaire de nicomilville le 24/08/2008 18:36:08

Tu es sur que ça marche avec la position absolute ? (pas sur)...

a++

Commentaire de nicomilville le 24/08/2008 20:34:08

ok, mais en fait j'ai exclu c'est solution por deux choses :

- Quand tu scroll avant de griser, tuas une partie blanche et une partie noir...

- Je n'est pas de problème avec le div qui grise la page, j'en est un avec clientHeight que je n'arrive pas a résoudre, en fait j'utilise a la place de client height, offsetHeight et ça ne comprend pas que la ou le div s'affiche mais ça contient aussi les parties que l'ont pet scroller, ce qui veut dire que si tu as une page de 10000px de hauteur, le div se positionera a 5000px...

Et j'ai un second problème que je suis en train de résoudre avec bultez (que le div suive le scroll)...

a++

PS : merci de l'intéret que tu porte a cette source !

Commentaire de aladeuil le 25/08/2008 07:11:41

Hello,
Dis, il se passe quoi quand la page est trés longue ? Le "griser" s'allonge ou pas ?
Et ça serait top si la boite était centrée non ?
Aller, y'a des solutions... > www.highview.fr
Relance moi pour la solution, ça sera avec plaisir.
Anthony

Commentaire de Dure le 25/08/2008 12:03:56

Salut Nicomilville,
Je sais pas si tu as souvenir de moi ...

Malgrés les remarques que l'on peut te faire, je trouve que c'est une trés jolie source... Dans ta version API comment le contenue sera délivré? Car je vois que dans celle-ci le contenue et encré dans la fonction, vu que tu nous dis qu'une multitude de fonction sera dispo, je pense que c'est par ce biais que l'on fournira le contenue, mais pense tu que l'on pourra délivrer un code HTML (je pense surtout à un formulaire, qui par une fenêtre dynamique rend cela plus attrayant)?
Depuis le dernier post ou tu m'as beaucoup aidé, j'ai trouvé quelque fonction prédéfinie, si tu as besion n'hésite pas.

Thomas

PS:
>>>J'ai fait cette source parce que bultez et moi on en a mare de donnée des exemple de boite comme ça a chaque question sur le forum
Je prend ça pour moi ;)

Commentaire de Dure le 25/08/2008 14:48:18

Je ne peux rien dire d'autre que:
ok et bon courage ;)

Commentaire de XtremDuke le 25/08/2008 16:24:53

Même remarques :

- Le calque gris ne prend pas toute la zone de la fenêtre. Ta fonction griserInterface() me laisse perplexe...
- La boite affichée n'est pas centrée. Normale tu centre avec des valeurs en dure.

Attention a ne pas rajouter trop d'options, tu risques de réinventer la roue..

Commentaire de XtremDuke le 26/08/2008 10:02:46

Si tu cherches une source d'inspiration :

http://www.wildbit.com/labs/modalbox/

Commentaire de marsbidon le 15/09/2008 22:43:25

Bonsoir,

Cela faisait longtemps que je cherchais un script comme celui, très bonne source...
J'ai quelques commentaire sur son fonctionnement :
- Le grisé ne prend pas toute le hauteur de la fenêtre (largeur ok mais il manque une bonne partie de la page en bas)
- La boite du coup n'est pas centrée
- Si on clique sur "griser" puis que l'on ferme la boite, la div (<div id="taille_page"></div>) n'est pas supprimée du code html et le reste de la page reste désactivé.

Suggestion :
- Ajouter la possibilité de passer le titre et le contenu en paramètre depuis l'appel de la fonction init_div()

Voilà!

A plus

Commentaire de Gatsu35 le 16/09/2008 09:14:40

affiche ton navigateur en mode fenetré (un peu plus petit)
Affiche ta popup
Redimensionne ton navigateur. Et pouf tu verras le problème.

Et aussi, je ne pense pas que tu gères, au vu du code, le fait que ta page fasse 100km de haut et que l'utilisateur ira scroller dans la page.

PS : suis mes conseil, j'ai un layer qui fonctionne mieux que le tiens (en tout cas qui gère la plupart des problématiques rencontrées sur un projet) pour le meme poids mais tout dans un namespace.

Bonne chance à toi

Commentaire de Gatsu35 le 16/09/2008 16:18:25

Non c'était juste pour dire que j'ai déjà travaillé plus d'une fois sur le genre de problème que tu as rencontré, et oui j'ai aussi un truc mieux. Mais je ne ferai pas de pub, c'est un truc perso pour lequel je n'ai pas encore fait de doc. ET puis pas envie de le refourguer pour l'instant

Commentaire de marsbidon le 16/09/2008 19:04:26

Salut,

Suite à mon commentaire :

pour le grisé qui ne prend pas toute la page : j'ai un écran plat widescreen, et en bas j'ai une bande blanche :
http://www.zimagez.com/zimage/apercu43.php

Je suis sur FF2, idem sur IE7 et safari.

Voilà, @+

Commentaire de scorpion201183 le 23/09/2008 00:48:04

bonjour

après avoir cliqué sur "griser" on aura la fenêtre. et après avoir fermé la fenêtre, on pourra plus cliqué sur le bouton "griser", il est comme bloqué et impossible de cliqué dessus.
Ce problème est sur FF 3.1 mais par contre sur IE7 ca marche bien.

Commentaire de kazma le 11/03/2009 21:58:19 administrateur CS

bonjour
la modif a faire pour que sa fontionne

dans la fonction dialogue() a la fin
il faut rajouter ces deux lignes

var tp = document.getElementById('taille_page')
document.body.removeChild(tp);

car le div taille_page n'est pas suprimer d'ou le probleme

ce qui donne

var griser = document.getElementById('griser');
var boite = document.getElementById('boite');
var tp = document.getElementById('taille_page')
document.body.removeChild(griser);
document.body.removeChild(boite);
document.body.removeChild(tp);