Trucsweb.com

Trucsweb 1997-2017

Le site des Trucsweb a maintenant 20 ans! 20 ans de gratuit mur-à-mur, peu importe que vous soyez à Montréal, Paris ou Ouagadougou, que vous soyez riche, pauvre ou éducateur ; -). « C’est un endroit que chacun peut visiter pour apprendre et partager ses connaissances » pour paraphraser Wikipédia. C’est aussi des milliers de dollars déboursés pour les couts d’un serveur Web. La publicité c’est bien, mais trop peu pour payer les frais d’hébergement toujours plus cher.

Il va sans dire que je m'adresse beaucoup aux institutions d'enseignement et aux corporations, particulièrement les géants de ce monde qui bénéficie de PROMOTION GRATUITE sur les sites des webmestres comme celui des Trucweb! Les Google et Microsoft de ce monde. Le fournisseur d'hébergement des Trucsweb qui a bénéficié d'une grande visibilité certainement pas étrangère a son succès. Mais aussi l'Organisation internationale de la Francophonie par exemple. Car la majorité des visiteurs des Trucsweb proviennent de l'ensemble des pays de la francophonie. Pays pour la plupart, outre la France, du berceau de l'humanité et surtout des plus pauvres de notre brillante civilisation.

Où va votre don : essentiellement pour payer la carte de crédit (surtout les intérêts) utilisée pour payer le serveur et la bande passante. Le maintien et le développement étant absolument bénévole, avec grand plaisir, depuis 1997!

jours restants pour la campagne de financement 2017-2037 ;- )
Objectif : 5000 €

Je vous remercie d’envisager de faire un don afin de perpétuer cette longue tradition francophone qui a maintenant 20 ans.

Merci,
Django Blais, L’Isle-Verte (Québec)

DHTML

Compatibilité du DHTML

RDFFav

Régler le problème des menus déroulants vs calques - Compatibilité à 100%

À part Netscape 6, toutes les versions de navigateurs ont un problème de z-index avec les formulaires, les modules externes (plug-in) comme un Flash, et les applets. Toujours placé au-dessus des autres layer, un objet comme un menu déroulant cachera vos menus DHTML. Les navigateurs sont en fait incapable de mettre ce type d’objet dans un z-index.dhtml formulaire sélection menu déroulant selection list liste form compatibilité au-dessus au dessus par over cacher clip layer div z-index visibility visible hidden

  • · Niveau : INTERMÉDIAIRE
  • · Compatibilité : IE4+ / IE6 / NS4+ / NS6 / Mozilla 0.9

À part Netscape 6, toutes les versions de navigateurs ont un problème de "z-index" avec les formulaires, les modules externes (plug-in) comme un Flash, et les applets. Toujours placé au-dessus des autres "layer", un objet comme un menu déroulant cachera vos menus DHTML. Les navigateurs sont en fait incapable de mettre ce type d’objet dans un "z-index".

La solution
Il suffit de mettre votre menu déroulant dans un "layer" (div) et de spécifier un "z-index". Ensuite il faut jouer avec la visibilité de l’objet afin de cacher le menu déroulant lorsqu’un autre "layer" vient à passer au-dessus, et au lieu de faire "visible/hidden" il faut "tronquer" le "layer". Dans mon exemple j’ai fait un menu DHTML standard avec affichage d’un sous-menu lors du passage de la souris. Je vais donc profiter de ces deux événements "onmouseover" et "onmouseout" pour cacher puis rétablir le menu déroulant.

 

Exemple
J’ai ici deux "layers", le premier sera utilisé pour un menu DHTML et l’autre pour mettre le menu déroulant du formulaire. La technique consiste à capturer l’événement "onmouseover" et "onmouseout" pour changer les dimensions du "layer" du menu déroulant. De cette façon il n’est plus visible et donc le menu DHTML peut être vu sans problème. Noter le petit détail pour Netscape 4+ qui construit sa propre fonction seulement si le navigateur est Netscape 4+, dans l’événement "onload".

Code complet

<html>
<head>

<style>
.menu { color: white; background-color: black; }
#menuDhtml {
  position: absolute;
  z-index: 10;
  left: 10px;
  visibility: hidden;
}
#menuForm {
  position: absolute;
  z-index: 5;
  left: 10px;
}
</style>

<script type="text/javascript" language="javascript">
// Fonction normal pour afficher et
// effacer un "layer" DHTML
function Aff_layer (id) {
  if (document.layers)
    document[id].visibility = ’show’;
  else if (document.all)
    document.all[id].style.visibility = ’visible’;
  else if (document.getElementById)
    document.getElementById(id).style.visibility = ’visible’;
}
function Cache_layer (id) {
  if (document.layers)
    document[id].visibility = ’hide’;
  else if (document.all)
    document.all[id].style.visibility = ’hidden’;
  else if (document.getElementById)
    document.getElementById(id).style.visibility = ’hidden’;
}

// Fonction spécial pour effacer et
// réafficher un "layer" avec la technique
// du "tronquage" de "layer"
function Trunc_select () {
  if (document.layers) {
    document.menuForm.vieuxClipWidth = document.menuForm.document.width;
    document.menuForm.clip.width = 0;
  }
  else if (document.all)
    document.all.menuForm.style.clip = ’rect(auto 0px auto auto)’;
}
function Replace_select () {
  if (document.layers)
    document.menuForm.clip.width = document.menuForm.vieuxClipWidth;
  else if (document.all)
    document.all.menuForm.style.clip = ’rect(auto auto auto auto)’;
}

// Spécifique à Netscape 4+
// pour ça propre capture du "onmouseout"
function init () {
  if (document.layers)
    document.menuDhtml.onmouseout = function () {
      Cache_layer(this.id);
      Replace_select();
    };
}
</script>
</head>

<body onload="init()">

<a href="javascript: void 0" onmouseover="Aff_layer(’menuDhtml’); Trunc_select();">Langages de programmation</a>
<br />

<!-- "Layer" du menu DHTML -->
<div id="menuDhtml"
onmouseout="if (document.all) {
  if (!this.contains(event.toElement)) {
    Cache_layer(this.id);
    Replace_select();
  }
}
  else if (document.getElementById) {
    window.tid = setTimeout(’Cache_layer(\’’ + this.id + ’\’)’, 20);
}"
onmouseover="if (document.getElementById)
  clearTimeout(window.tid);"
>

<table border="0">
<tr><td class="menu">
<a href="http://www.trucsweb.com/Javascript/" class="menu">JavaScript</a>
</td></tr><tr><td class="menu">
<a href="http://www.trucsweb.com/DHTML" class="menu">HTML dynamique</a>
</td></tr><tr><td class="menu">
<a href="http://www.trucsweb.com/aSP" class="menu">Active server pages</a>
</td></tr></table>
</div>

<!-- "Layer" du champ selection ou menu déroulant -->
<div id="menuForm">
<form name="nomForm">
<select name="Selection" width="150" style="width: 150px;">
<option>Choix 1</option>
<option>Choix 2</option>
<option>Choix 3</option>
</select>
</form>
</div>

</body>
</html>

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

9/10 sur 1 revues.
       Visites : 1422 - Pages vues : 27007
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@