Discussion :

[Samax]

Salut,
voilà ma question est quasiment dans le titre: j'aimerais rendre inactive une zone div qui contient des liens et des zones de textes pendant le chargement d'une autre div (afin d'éviter les conflits).
J'aimerais donc faire apparaître cette zone en grisé, et la rendre inactive à toute interaction.
En sachant que j'utilise des float et des tailles en % pour placer cette div, je ne peux donc pas utiliser de position: absolute pour placer une div par-dessus...

Je précise que j'utilise prototype (inclus dans le framework php symfony).

Merci!

[Bovino]

Mets les zones de saisie en disabled et ajoute un return false aux liens pendant le chargement (via Event.observe) puis supprime ces événements lorsque ton contenu est chagé (Event.stopObserving).

[gwyohm]

Ou bien positionne une div en absolu par dessus ta div à protéger. Tu peux mettre ta div "protectrice" avec un fond noir et une opacité de 0.2

Ca ressemblerait à ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var protectDiv = new Element("div", {style: "display:none;position:absolute;background-color:#000;z-index:1000;"});
protectDiv.setOpacity(0.2);
$(document.body).insert(protectDiv);
function protectDiv(divToProtect) {
  var dim = divToProtect.getDimensions();
  var pos = divToProtect.cumulativeOffset();
  protectDiv.setStyle({
    width : dim.width + "px",
    height : dim.height+"px",
    top : pos.top + "px",
    left : pos.left + "px"
  });
  protectDiv.show();
}
function hideProtectDiv(){
  protectDiv.hide();
}

[gwyohm]

Désolé j'ai lu trop vite le postulat de base comme quoi une div par dessus n'était pas envidagéable. Cependant, je me demande pourquoi ca ne marcherait pas quitte à observer le redimensionnement de la fenêtre pour repositionner et redimensionner la div protectrice.

[RapotOR]

Je rejoins gwyohm!
Si tu mets ta div principale en position relative.
Une div en position absolute dans la div principale devrait fonctionner en farfouillant un peu...

Cédric