Delf avait prétendu :

> j'ai rajouté ceci :
>
> [...]

Et j'ai gardé la balise DOCTYPE.

--
Delf

En réponse à Delf qui écrivit, en date du : 17/08/07 18:33, le message
suivant :
> Delf a couché sur son écran :
>
>> Est-il possible d'écrire une fonction générique désactivant tous les
>> INPUT (textbox, textarea, radiobutton, checkbox, etc) ? Genre, elle
>> parcourt tous les contrôles de la page et les désactive...
>
> Problème, si j'ai déjà des contrôles désactivés, je les perds lors de la
> réactivation...

Ben ! suffit de les re-désactiver dans la foulée, non ?

> Autre question : comment mettre un voile transparent sur l'ensemble de
> la page ?

<script type="text/javascript">
function voile() {
if(document.getElementById) {
if(document.getElementById('voile')) {
var voil = document.getElementById('voile').style;
voil.display = voil.display=='block'? 'none' : 'block';
}
else {
var voil = document.createElement('DIV');
voil.id = 'voile';
voil.style.display = 'block';
voil.style.position = 'absolute';
voil.style.top = '0px';
voil.style.left = '0px';
voil.style.width = '100%';
voil.style.height = '100%';
voil.style.backgroundColor = '#555';
voil.style.opacity = '0.4';
voil.style.khtmlOpacity = '0.4';
voil.style.mozOpacity = '0.4';
voil.style.filter = 'alpha(opacity=40)';
voil.onclick = voile;
document.body.appendChild(voil);
}
}
}
</script>

<a href="javascript:voile()">voile oui/non</a>

En réponse à Laurent vilday qui écrivit, en date du : 17/08/07 21:02,
le message suivant :
> Delf a écrit :
>
>> Autre question : pensez-vous qu'il soit judicieux de désactiver aussi
>> les liens ?
>
> Dans ce cas autant mettre un gros div qui intercepte les clicks par
> dessus tout le monde plutot que de s'embêter avec chaque élément. Parce
> que après les liens, ca va être les éléments avec un event mouseover,
> click ou autre qu'il va falloir tracker. Trop fatiguant imo.
>
> function divAntiClick()
> {
> var
> div = document.createElement('div'),
> dS = div.style,
> dB = document.body;
> // interdit les clicks
> div.onclick = function() { return false; };

Oui, pas bête ... mais ... et comment revient-on à la "normale" ?

> dS.opacity = 0.25;
> // opacité pour IE
> /*@cc_on dS.filter = 'alpha(opacity=25)'; @*/
> dS.backgroundColor = 'black';
> dS.position = 'absolute';
> dS.top = '0px';
> dS.left = '0px';
> dS.width = '100%';
> dS.zIndex = 1e6;

Pourquoi un z-index ?
(dans la mesure où on insère ce div qu'en fin de body, en fin du flux)

> // enregistre l'état d'overflow avant modif
> dB.oldOverflow = dB.style.overflow;
> // supprime l'overflow pour empêcher le user
> // de servir des scrollbars. Ne pas oublier
> // lors de la réactivation de replacer l'overflow
> // à sa valeur initiale stockée dans oldOverflow
> dB.style.overflow = 'hidden';

dB.style.overflow = dB.style.overflow==''? 'hidden' : '';

> // détermine la hauteur du div, cf fonction suivante

et pourquoi ?
dS.height = '100%';
ne suffit-il pas ?
Tiens ? ça n'a lair de fonctionner qu'avec FF !

> dS.height = getViewportHeight() + 'px';

ça ne mesure finalement que le l'aire de vue ... pas le document.

> // ajoute enfin le div
> dB.appendChild(div);
> }
>
> /**
> * Returns the current height of the viewport.
> * @return {Int} The height of the viewable area
> * of the page (excludes scrollbars).
> */
> function getViewportHeight()

finalement, c'est ce getViewportHeight qui ne fonctionne pas chez moi
(avec mon test)
Safari 2.02
Opera 9.0
à moins que ce ne soit le body overflow qui n'y fasse pas grand' chose ?
(la molette continue de scroller, et de ttes façons le dS ne remplit que
le 1er écran alors que le bouton actionnant le divAntiClick est au 3ième
écran).

> {
> var
> IE = /*@cc_on !@*/false,
> height = -1;
>
> // IE, Gecko
> if ( ( document.compatMode || IE ) && !window.opera )
> {
> // Standards mode
> if ( document.compatMode === 'CSS1Compat' )
> {
> height = document.documentElement.clientHeight;
> }
> // Quirks
> else { height = document.body.clientHeight; }
> }
> // Safari, Opera
> else { height = self.innerHeight; }
>
> return height;
> }
>

En réponse à Delf qui écrivit, en date du : 17/08/07 22:19, le message
suivant :
> Delf avait énoncé :
>> Il se trouve que Delf a formulé :
>>
>>> Ca fonctionne sous Firefox mais pas sous IE7 :|
>>> Une idée ? Pourtant ça devrait, je trouve rien sur le Net...
>>
>> Si je retire la balise DOCTYPE, c'est bon...
>
> j'ai rajouté ceci :
>
> <style ...>
> html
> {
> overflow:hidden;
> }
> </style>
>
> et apparemment, ça fonctionne. Je ne risque pas d'avoir de soucis avec
> d'autres browsers ?

Ce truc bloque mon Firefox sur le 1er écran et je n'ai plus de scroll.
Ce truc supprime les ascenseurs de mon Safari et de mon Opera mais
n'empêche pas de croller (à la molette).

Si c'est OK pour IE, il faut donc le réserver à IE :

<!--[if lte IE 6]>
<style type="text/css">
html { overflow: hidden; }
</style>
<![endif]-->

Mais je ne vois pas comment tu peux être certain qu'une seule hauteur de
fenêtre (ou d'aire de vue ou de view port) suffise à afficher ta page
.... ? !

à moins qu'elle ne fasse qu'une ligne ?

--
Stéphane

ASM a écrit :
> En réponse à Laurent vilday qui écrivit, en date du : 17/08/07 21:02,
> le message suivant :
>> Delf a écrit :
>>
>>> Autre question : pensez-vous qu'il soit judicieux de désactiver aussi
>>> les liens ?
>>
>> Dans ce cas autant mettre un gros div qui intercepte les clicks par
>> dessus tout le monde plutot que de s'embêter avec chaque élément.
>>
>> function divAntiClick()
>> {
>> var
>> div = document.createElement('div'),
>> dS = div.style,
>> dB = document.body;
>> // interdit les clicks
>> div.onclick = function() { return false; };
>
> Oui, pas bête ... mais ... et comment revient-on à la "normale" ?

Bahh bahh, stéphane, voyons

var gestionnaire = function()
{
var active = null;
return {
show:function()
{
active = document.createElement('div');
....
document.body.appendChild(active);
},
hide:function{}
{
document.body.removeChild(active);
active = null;
}
};
}();

>> dS.zIndex = 1e6;
>
> Pourquoi un z-index ?
> (dans la mesure où on insère ce div qu'en fin de body, en fin du flux)

Tout simplement parce bien qu'il soit ajouté en fin de body, rien
n'indique que d'autres éléments en absolute avec un z-index n'existent
déjà sur la page. Alors dans le doute ....

>> // enregistre l'état d'overflow avant modif
>> dB.oldOverflow = dB.style.overflow;
>> // supprime l'overflow pour empêcher le user
>> // de servir des scrollbars. Ne pas oublier
>> // lors de la réactivation de replacer l'overflow
>> // à sa valeur initiale stockée dans oldOverflow
>> dB.style.overflow = 'hidden';
>
> dB.style.overflow = dB.style.overflow==''? 'hidden' : '';

Ben non malheureusement. Quid des 'auto', 'visible' et autre 'scroll' de
la propriété ?

>> // détermine la hauteur du div, cf fonction suivante
>
> et pourquoi ?
> dS.height = '100%';
> ne suffit-il pas ?
> Tiens ? ça n'a lair de fonctionner qu'avec FF !

Parce que je suis idiot et que j'ai rien testé. C'est l'idée que j'ai
suivi, j'avais un bout de code qui me semblait approprié et qui trainait
- inutilisé, peut être à raison - dans son coin, alors hop puisque
ça semblait collé et que j'avais pris le temps de commencer le post...
Mea culpa, j'aurais du tester.

>> dS.height = getViewportHeight() + 'px';
>
> ça ne mesure finalement que le l'aire de vue ... pas le document.

Vi, d'ou "l'astuce" (hurmm de changer le body.style.overflow

>> // ajoute enfin le div
>> dB.appendChild(div);
>> }
>>
>> /**
>> * Returns the current height of the viewport.
>> * @return {Int} The height of the viewable area
>> * of the page (excludes scrollbars).
>> */
>> function getViewportHeight()
>
> finalement, c'est ce getViewportHeight qui ne fonctionne pas chez moi
> (avec mon test)
> Safari 2.02
> Opera 9.0

Après test, ca passe pour IE7, FX2, Opera 9.22 et Safari (win) 3.0.2
beta. Je sais que tu le fais exprès rien que pour m'embêter

> à moins que ce ne soit le body overflow qui n'y fasse pas grand' chose ?
> (la molette continue de scroller, et de ttes façons le dS ne remplit que
> le 1er écran alors que le bouton actionnant le divAntiClick est au 3ième
> écran).

Satanée molette. Pourtant depuis le temps je devrais le savoir qu'il
faut tester... Bon tant pis, pas trop le temps pour plus. Pour l'OP,
peut être oublier l'idée du gros <div>

--
laurent

ASM a écrit :
> <a href="javascript:voile()">voile oui/non</a>

Malheureux. Tu devrais avoir honte

Pas vraiment besoin, still imo, d'un <a> ici, un simple <span>
suffirait, mais bon au pire disons un <a>. Mais au delà de ça, qu'est-ce
que ce "javascript:" vient faire ici ?

<a href="#" onclick="voile(); return false;">voile oui/non</a>

imo le mieux ce serait d'avoir le "return false;" dans la fonction et de
n'avoir qu'un simple onclick="return voile();" mais c'est rien comparé à
ce "javascript:" que je ne saurais voir, c'est trop laid.

<a href="pageNonJS.html" onclick="return voile();">

--
laurent

Le 18/08/2007, Laurent vilday a supposé :

> Satanée molette. Pourtant depuis le temps je devrais le savoir qu'il faut
> tester... Bon tant pis, pas trop le temps pour plus. Pour l'OP, peut être
> oublier l'idée du gros <div>

A partir de l'exemple, j'ai réussi à mettre la div 'voile', recouvrir
la zone visible et retirer la scrollbar sous IE, FF et OP.

Par contre, du fait que la scrollbar disparaisse et réapparaisse, ça
fait une sorte de visuel-décalage bien chiant :\

--
Delf

En réponse à Laurent vilday qui écrivit, en date du : 18/08/07 3:36, le
message suivant :
> ASM a écrit :
>> En réponse à Laurent vilday qui écrivit, en date du : 17/08/07 21:02,
>> le message suivant :
>>>
>>> // interdit les clicks
>>> div.onclick = function() { return false; };
>>
>> Oui, pas bête ... mais ... et comment revient-on à la "normale" ?
>
> Bahh bahh, stéphane, voyons
>
> var gestionnaire = function()
> {
> var active = null;
> return {
> show:function()
> {
> active = document.createElement('div');
> ....
> document.body.appendChild(active);
> },
> hide:function{}
> {
> document.body.removeChild(active);

Là je comprends rien ... ?!

Comment, au repassage vers "normal",
le brouteur reconnait cette variable 'active'
alors qu'elle ne me semble pas globale ?

> active = null;
> }
> };
> }();

Je dois avoir à me renseigner sur cette notation
truc = function() { blabla }();
---------------------------^^^^

>> dB.style.overflow = dB.style.overflow==''? 'hidden' : '';
>
> Ben non malheureusement. Quid des 'auto', 'visible' et autre 'scroll' de
> la propriété ?

Ma! què cè què qu'il a bricolé del body dè sa page cè webmaster ? Caramba!

>> finalement, c'est ce getViewportHeight qui ne fonctionne pas chez moi
>> (avec mon test)
>> Safari 2.02
>> Opera 9.0

Enfin si, ça fonctionne.
Mais pas mieux que height= '100%';
(me semble t-il ... je n'ai pas IE)

> Après test, ca passe pour IE7, FX2, Opera 9.22
> et Safari (win) 3.0.2 beta.

Je suis déjà bien assez bêta sans tenter d'utiliser des softs de ma
confrérie :-)

> Je sais que tu le fais exprès rien que pour m'embêter

Ben non ... sinon j'aurais sorti mon NC4.5 et mon IE-Mac :-)

>> à moins que ce ne soit le body overflow qui n'y fasse pas grand' chose ?
>> (la molette continue de scroller, et de ttes façons le dS ne remplit
>> que le 1er écran alors que le bouton actionnant le divAntiClick est au
>> 3ième écran).

Comme dit + haut, c'est bien l'overflow du body qui règle la question,
mais chez moi (je radotte) seulement avec mon FF2

> Satanée molette. Pourtant depuis le temps je devrais le savoir qu'il
> faut tester... Bon tant pis,

et en plus, les ascenseurs, une fois enlevés, mon Opera 9.0 n'arrive
plus à les remettre même au rechargement !!!
(je hais cet Opera presqu'autant que IE)

D'ailleurs :
http://www.huddletogether.com/projects/lightbox2/
y fonctionne mal (bien que le 'voile' recouvre tout le document)
Mais ici :
http://www.huddletogether.com/projects/lightbox2/
c'est OK
(mais ça se mérite ! 43ko de JS compressé + 11ko de CSS !)