Désactiver une page Html

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...

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

Merci.

--
Delf

Problème, si j'ai déjà des contrôles désactivés, je les perds lors de la
réactivation...

Ben faut gérer ça.

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

Un div en absolute qui fait 100 % de la page. Mais ça, c'est plutôt à
voir sur <news:fr.comp.infosystemes.www.auteurs>

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org

J'ai des pages Web qui effectuent des traitements asynchrones lors de la
validation de leur formulaires.

Une fois le formulaire validé, j'affiche une DIV en haut à droite du
navigateur pour indiquer l'état du traitement. Cependant, la page peut être
revalidée ou les champs modifiés.

Je désactive donc les contrôles du formulaire via disabled. Cependant, je
suis *fatigué* de devoir coder tout ça pour chaque page.

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...

function desactive(frm)
{
var i, E;
for ( i = frm.elements.length; i--; )
{
E = frm.elements[i];
// si l'élément a la classe "keepActive"
// alors ne rien faire
if ( /bkeepActiveb/.test(E.className) ) { continue; }
E.oldDisabled = E.disabled || null;
E.disabled = true;
}
}

function active(frm)
{
var i, E;
for ( i = frm.elements.length; i--; )
{
E = frm.elements[i];
if ( /bkeepActiveb/.test(E.className) ) { continue; }
E.disabled = E.oldDisabled;
}
}

<form>
<input type="button" onclick="desactive(this.form)" class="keepActive"
value="Deactivate">
<input type="button" onclick="active(this.form)" class="keepActive"
value="Activate">
<br>
<input type="text">
<input type="text" disabled="disabled">
<br>
<textarea></textarea>
<textarea disabled="disabled"></textarea>
<br>
<input type="checkbox" name="y" value="1">
<input type="checkbox" name="y" value="2" disabled="disabled">
<br>
<input type="radio" name="x" value="1">
<input type="radio" name="x" value="2" disabled="disabled">
<br>
<select><option>0</option></select>
<select disabled="disabled"><option>1</option></select>
</form>

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; };
dS.opacity = 0.25;
// opacité pour IE
/*@cc_on dS.filter = 'alpha(opacity%)'; @*/
dS.backgroundColor = 'black';
dS.position = 'absolute';
dS.top = '0px';
dS.left = '0px';
dS.width = '100%';
dS.zIndex = 1e6;
// 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';
// détermine la hauteur du div, cf fonction suivante
dS.height = getViewportHeight() + 'px';
// 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()
{
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;
}

--
laurent

Laurent vilday a utilisé son clavier pour écrire :

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.

Merci de ton aide, je vais voir ce que donne ces functions.

--
Delf

dB.style.overflow = 'hidden';

J'ai écris : document.body.style.overflow = 'hidden';

Ca fonctionne sous Firefox mais pas sous IE7 :|
Une idée ? Pourtant ça devrait, je trouve rien sur le Net...

Merci.

--
Delf

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...

--
Delf

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 ?

Merci.

--
Delf

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@)';
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 :

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%)'; @*/
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;
}