Griser une div et la rendre inactive aux interactions

Version imprimable

15/05/2009, 20h22
Samax

Griser une div et la rendre inactive aux interactions

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!
15/05/2009, 20h30
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).

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:

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();
}

16/05/2009, 14h33
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.
27/05/2009, 23h11
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