Désactiver une page Html

Le
Delf
Salut.

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

Autre question : pensez-vous qu'il soit judicieux de désactiver aussi les
liens ?

En vous remerciant.

--
Delf
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 3
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Delf
Le #750713
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

Mickaël Wolff
Le #750712

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
--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org

Laurent vilday
Le #750711
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

Delf
Le #750710
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

Delf
Le #750709

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

Delf
Le #750708
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
Le #750707
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 :

html
{
overflow:hidden;
}
</style>

et apparemment, ça fonctionne. Je ne risque pas d'avoir de soucis avec
d'autres browsers ?

Merci.

--
Delf


Delf
Le #750706
Delf avait prétendu :

j'ai rajouté ceci :

[...]


Et j'ai gardé la balise DOCTYPE.

--
Delf

ASM
Le #750705
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>


ASM
Le #750407
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;
}




Publicité
Poster une réponse
Anonyme