Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Désactiver une page Html

26 réponses
Avatar
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

10 réponses

1 2 3
Avatar
ASM
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



Avatar
Laurent vilday
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.

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 :D

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 :D

à 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> :D

--
laurent



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


Malheureux. Tu devrais avoir honte :D

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

Avatar
Delf
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> :D


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

Avatar
ASM
En réponse à Laurent vilday qui écrivit, en date du : 18/08/07 3:36, le
message suivant :
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 :D

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 :D


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 !)



Avatar
ASM
En réponse à Laurent vilday qui écrivit, en date du : 18/08/07 3:49, le
message suivant :
<a href="javascript:voile()">voile oui/non</a>


Malheureux. Tu devrais avoir honte :D


Ben oui, c'est assez proche (et aussi mal testé : ne fonctionne qu'avec
mon FF) que ce que tu as posté pendant que je ne regardais pas et qui,
comme d'hab, était bp plus smart.
J'ai très grande 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 ?


Hé! Ho! au moins je propose qque chose pour activer le truc-bazar !
:-)

Dans la mesure où ce lien n'a à traiter que du JS, ça ne me gêne pas.
(pas pire, à mon sens, que <button ... > )

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


Pour la bôté de la chose ...
peut-être un style via JS qui dé-cacherait le bouton-lien ?

imo le mieux ce serait d'avoir le "return false;" dans la fonction et de
n'avoir qu'un simple onclick="return voile();"


toutafé et bien évidemment ! :)

mais c'est rien comparé à
ce "javascript:" que je ne saurais voir, c'est trop laid.

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


Meuh non, pas pire qu'un bouton esseulé ...
(ou n'importe quel spam ou autre assorti d'un onclick)

Néanmoins : bien sûr !

--


Avatar
ASM
En réponse à Delf qui écrivit, en date du : 18/08/07 9:59, le message
suivant :

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 :


body { margin-right: 20px; }
ou
body { width: 94%; }
par exemple ?

Avatar
Delf
Il se trouve que ASM a formulé :

body { margin-right: 20px; }
ou
body { width: 94%; }
par exemple ?


Ah, je vais tester, merci.

--
Delf

Avatar
Delf
C'est bon je couvre la taille de la page, je poste le code dans la nuit
ou demain...

--
Delf
Avatar
Delf
ASM a utilisé son clavier pour écrire :

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 :


C'était une mauvaise piste...

--
Delf

1 2 3