Désactiver une page Html

En réponse à Laurent vilday qui écrivit, en date du : 18/08/07 3:36, le
message suivant :

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

Javascript module pattern
<http://yuiblog.com/blog/2007/06/12/module-pattern/>

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

Oui, c'est les 2 parenthèses qui font la "magie".

google trouvera plein d'explications avec "javascript module pattern".

en gros, ca repose sur 2 trucs.
1) appel de la function lors de sa déclaration grace aux () de fin.

var autorun = function() { alert('run'); }();

2) retour d'un objet qui a accès grace au système des "closures" a des
variables "privées"

var myobj = function()
{
var privVar = null;
return {
set:function(val) { privVar = val; },
get:function(val) { return privVar; }
};
}();

ici "privVar" est une variable inaccessible en dehors de myobj, donc
privée, mais myobj expose des "méthodes" publiques pour y accéder dans
le return {} final.

myobj.set(25);
alert(myobj.get()); // == 25

Désolé, j'ai pas les mots corrects pour bien expliquer comment ça
marche, le mieux c'est de se laisser guider par google toujours sur
"javascript module pattern"

--
laurent

En réponse à Laurent vilday qui écrivit, en date du : 18/08/07 3:49, le
message suivant :

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

J'aimerai bien voir ça :D

(ou n'importe quel spam ou autre assorti d'un onclick)

lol, les spams assortis d'un onclick. Bouhhh les vilains :)

--
laurent

HTmeuleu :
----------

<script language="javascript" type="text/javascript"
src="scripts/ajax.top-loader.js"></script>

...

<div id="topLoader" style="top:0; right:0; background-color:#CF4342;
color:#fff; position:fixed; display:none">
<table border="0">
<tr>
<td>&nbsp;<img src="images/top-loader.gif" alt="Loading..."
/></td>
<td valign="middle">&nbsp;Loading...&nbsp;</td>
</tr>
</table>
</div>

Javascript :
------------

var jsTopLoaderAjax {
blockDiv : null,

showLoader : function()
{
jsTopLoaderAjax.showBlockDiv();

var handle = document.getElementById('topLoader');

handle.style.display = 'block';
},

hideLoader : function()
{
var handle = document.getElementById('topLoader');

handle.style.display = 'none';

jsTopLoaderAjax.hideBlockDiv();
},

showBlockDiv : function()
{
blockDiv = document.createElement('blockDiv');

blockDiv.onclick = function()
{
return false;
};

blockDiv.style.opacity = 0.15;
blockDiv.style.khtmlOpacity = '0.15';
blockDiv.style.mozOpacity = '0.15';
blockDiv.style.filter = 'alpha(opacity = 15)';

blockDiv.style.backgroundColor = 'black';
blockDiv.style.position = 'absolute';
blockDiv.style.top = '0px';
blockDiv.style.left = '0px';
blockDiv.style.width = '100%';
blockDiv.style.zIndex = 1e6;

var pageInfo = jsTopLoaderAjax.getPageInfo();

blockDiv.style.height = pageInfo[0] + 'px';

document.body.appendChild(blockDiv);
},

hideBlockDiv : function()
{
blockDiv.style.display = 'none';

document.body.removeChild(blockDiv);

blockDiv = null;
},

getPageInfo : function()
{
var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY)
{
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
}
else if (document.body.scrollHeight > document.body.offsetHeight)
{
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
}
else
{
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;

if (self.innerHeight)
{
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
}
else if (document.documentElement &&
document.documentElement.clientHeight)
{
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
}
else if (document.body)
{
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

if (yScroll < windowHeight)
{
pageHeight = windowHeight;
}
else
{
pageHeight = yScroll;
}

if (xScroll < windowWidth)
{
pageWidth = windowWidth;
}
else
{
pageWidth = xScroll;
}

arrayPageSize = new Array(pageHeight, pageWidth, windowHeight,
windowWidth);

return arrayPageSize;
}
}

Par contre, on voit le DIV noir avant que la transparence lui soit
appliqué... c'est possible de faire qqchose ?

Merci.

--
Delf

Delf a utilisé son clavier pour écrire :

Par contre, on voit le DIV noir avant que la transparence lui soit
appliqué... c'est possible de faire qqchose ?

Personne ne peut m'aider sur ce point ? En plus je suis HS vu que c'est
lié au CSS...

--
Delf

HTmeuleu :
----------

<script language="javascript" type="text/javascript"
src="scripts/ajax.top-loader.js"></script>

....

<div id="topLoader" style="top:0; right:0; background-color:#CF4342;
color:#fff; position:fixed; display:none">
<table border="0">
<tr>
<td>&nbsp;<img src="images/top-loader.gif" alt="Loading..." /></td>
<td valign="middle">&nbsp;Loading...&nbsp;</td>
</tr>
</table>
</div>

Javascript :
------------

var jsTopLoaderAjax > {
blockDiv : null,

showLoader : function()
{
jsTopLoaderAjax.showBlockDiv();

var handle = document.getElementById('topLoader');

handle.style.display = 'block';
},

hideLoader : function()
{
var handle = document.getElementById('topLoader');

handle.style.display = 'none';

jsTopLoaderAjax.hideBlockDiv();
},

showBlockDiv : function()
{
blockDiv = document.createElement('blockDiv');

blockDiv.onclick = function()
{
return false;
};

blockDiv.style.opacity = 0.15;
blockDiv.style.khtmlOpacity = '0.15';
blockDiv.style.mozOpacity = '0.15';
blockDiv.style.filter = 'alpha(opacity = 15)';

blockDiv.style.backgroundColor = 'black';
blockDiv.style.position = 'absolute';
blockDiv.style.top = '0px';
blockDiv.style.left = '0px';
blockDiv.style.width = '100%';
blockDiv.style.zIndex = 1e6;

var pageInfo = jsTopLoaderAjax.getPageInfo();

blockDiv.style.height = pageInfo[0] + 'px';

document.body.appendChild(blockDiv);
},

hideBlockDiv : function()
{
blockDiv.style.display = 'none';

document.body.removeChild(blockDiv);

blockDiv = null;
},

getPageInfo : function()
{
var xScroll, yScroll;

Manque plusieurs variables non déclarées qui polluent le scope global.
Plus les deux variables (windowWidth et windowHeight) déclarées en plein
milieu de la fonction, c'est pas très très propre :) A défaut de
propreté du code (somme toute relative dès qu'on parle javascript), j'ai
pris l'habitude, et je pense sincèrement que c'est une bonne habitude,
de déclarer absolument *toutes* mes variables en début de block, ça
évite les surprises des variables qui ne sont pas dans le bon scope
d'éxécution.

var
xScroll, yScroll,
pageWidth, pageHeight,
windowWidth, windowHeight;

[cut]

arrayPageSize = new Array(pageHeight, pageWidth,
windowHeight, windowWidth);
return arrayPageSize;

autant retourner directement le tableau sans créer de variable
intermédiaire, d'autant qu'on vient de voir qu'elle polluait :)

return [pageHeight, pageWidth, windowHeight, windowWidth];

}
}

Par contre, on voit le DIV noir avant que la transparence lui soit
appliqué... c'est possible de faire qqchose ?

Peut être à cause du
blockDiv = document.createElement('blockDiv');

parce que ça existe pas l'élément HTML <blockDiv> :)

Toujours sur blockDiv (mais la variable JS cette fois), elle est
déclarée dans l'objet jsTopLoaderAjax (jsTopLoaderAjax.blockDiv) hors en
faisant

blockDiv = docu.....;

ça va créer une variable globale - puisque pas de var devant - au lieu
d'utiliser la propriété de l'objet (désolé pour le vocabulaire, ca
s'appelle peut être pas une propriété, désolé les puristes)

Donc faudrait faire :
jsTopLoaderAjax.blockDiv = docu....;

Comme ça, pas de pollution du scope global.

Sinon, je vois que "showLoader" et "hideLoader" font toutes les deux
appels en permanence au même D::gEBI('topLoader'); Peut être (j'en sais
rien) serait-il préférable de garder une référence une fois trouvée au
lieu d'aller la rechercher à chaque fois.

Pareil (ou presque) pour "showBlockDiv" et "hideBlockDiv" dans l'un
(showBlockDiv) l'élément "blockDiv" n'arrete pas de se récréer et dans
l'autre il arrête pas d'être nullifier. Peut être (encore une fois j'en
sais rien) serait-il toujours préférable de garder la référence une fois
crée et l'insérée/supprimée au besoin.

Et BTW, pourquoi avoir créé les fonctions "showBlockDiv" et
"hideBlockDiv" ? Elle semblent faire doublon (au vu du nommage et du
code) en ayant un rôle complètement similaire à "showLoader" et
"hideLoader". J'aurais tendance à ne pas séparer des fonctions
interdépendantes.

var jsTopLoaderAjax = function()
{
// variable privée
var
handle,
// pour ceux que ça intéresse,
// même si c'est pas indispensable
// de faire comme ça :D
// "javascript lazy pattern"
getBlockDiv = function()
{
var div = document.createElement('div');
div.onclick = function() { return false; };
div.style..... // sauf le style.height
getBlockDiv = function() { return div; };
return getBlockDiv();
};
// function privée
function getPageInfo()
{
// copié/collé de la méthode originale
// si elle convient
}
// interface publique
return {
show:function()
{
var div = getBlockDiv();
handle = handle || document.getElementById('topLoader');
div.style.height = getPageInfo()[0] + 'px';
document.body.appendChild(div);
handle.style.display = 'block';
},
hide:function()
{
if ( !handle ) { return ; }
handle.style.display = 'none';
document.body.removeChild(getBlockDiv());
}
};
}(); // auto invocation de la fonction

--
laurent

Laurent vilday vient de nous annoncer :

Manque plusieurs variables non déclarées qui polluent le scope global.
[...]

Ouais... remarques pertinentes, va falloir que je regarde ç de plus
près dès que j'en aurai le temps... déménagement...

Merci.

--
Delf