| |
| Voir le sujet précédent :: Voir le sujet suivant |
| Auteur |
Message |
Rivo
Inscrit le: 12 Fév 2007
Messages: 5
|
 Posté le: Sam Juil 14, 2007 12:56 am Sujet du message: masquer un champ select |
 |
|
Sous IE, les champs select s'affiche toujours en premier quelque soit la valeur z-index de l'élément que l'on veut afficher au dessus de champ select.
Il s'agit d'un bug de IE (6 en tous cas). Seules les iframe "passent" au-dessus.
Voici la raison du problème :
http://download.microsoft.com/download/f/e/a/fea64d9a-7658-4939-84e9-186b8d16d52a/IEPlansAffichage.doc
Par exemple, pour qu'un div apparaisse au dessus des champs select, il suffit donc de mettre en place une iframe au même niveau que le div. Cela permet au contenu du div d'être affiché au dessus du select.
| Code: |
function putFrame(){
var f = document.createElement("iframe");
var d = document.getElementById("theDiv");
with(f.style){
position = "absolute";
width = d.offsetWidth+"px";
height = d.offsetHeight+"px";;
top = d.offsetTop+"px";
left = d.offsetLeft+"px";
zIndex = "1";
}
document.body.appendChild(f);
} |
Pour ce qui est de la liste des champs select (quelque soit le navigateur, l'iframe s'affiche en dessous de la liste), je ne vois pas la solution appropriée sauf peut être de joué sur l'emplacement du div pour que celle-ci ne passe pas au dessus de la liste (je parle ici d'un cas où le div suit le mouvement de la souris).
Il y a le même problème avec les flash mais heureusement, il y a un parametre pour corriger cela :
| Code: | | <param name="wmode" value="transparent"> |
Si quelqu'un trouve une solution pour la liste des champs, ce serait intéréssant de le savoir. |
|
| Revenir en haut de page |
|
 |
mouarf
Medaille 2
Inscrit le: 10 Juil 2006
Messages: 24
Localisation: Montpellier - France
|
| Posté le: Ven Juil 20, 2007 4:09 am Sujet du message: |
|
|
Salut, désolé pas de solution. Par contre je patauge encore un peu en matière de graphisme évolué. Est ce que tu aurais un exemple d'utilisation de ta méthode 
Est ce que coder l'apparition du champ select en fonction de condition permet de résoudre le problème
_________________
quand il ya une erreur sur un ordinateur, l'origine se situe entre la chaise et le clavier
 |
|
| Revenir en haut de page |
|
|
Rivo
Inscrit le: 12 Fév 2007
Messages: 5
|
| Posté le: Ven Sep 28, 2007 10:36 pm Sujet du message: masquer un champ select |
|
|
Voici un exemple d'utilisation qui permet d'afficher un info-bull sur les champs input/textarea/select.
J'ai pris la code source dans http://www.web-graphics.com/mtarchive/001717.php (site intéréssant à voir www.miniajax.com où il y a d'autres types de graphismes) ou www.miniajax.com et j'ai fais quelque modif car à l'origine, il était prévue pour afficher un info-bull sur les liens.
| Code: |
var x=1,y=1;
function enableTooltips(id){
var links,i,h,f;
if(!document.getElementById || !document.getElementsByTagName) return;
AddCss();
//création du div pour l'affichage de l'info-bull
//le texte à afficher sera dans l'attribut "title" de la balise
//ex : <input title="message info-bull">
h=document.createElement("div");
h.id="btc";
h.setAttribute("id","btc");
h.style.position="absolute";
h.style.zIndex="100000000";
document.getElementsByTagName("body")[0].appendChild(h);
document.getElementById("btc").style.display="";
//création du iframe qui sera placé en-dessous du div => cela grace à z-index
f = document.createElement("iframe");
f.id="btc_frame";
f.setAttribute("id","btc_frame");
f.setAttribute("scrolling","no");
//il y a encore un problème sous IE, les bordures de l'iframe s'affiche toujours
f.style.border="none";
f.setAttribute("frameborder","0");
f.style.position="absolute";
f.style.zIndex="10000000";
document.getElementsByTagName("body")[0].appendChild(f);
document.getElementById("btc_frame").style.display="";
//premet de definir les code html où on met les info-bull => il suffit de reproduire le bout de code et de préciser la balise html. On peut tout y mettre table/div/a/...
if(id==null) links=document.getElementsByTagName("select");
else links=document.getElementById(id).getElementsByTagName("select");
for(i=0;i<links.length;i++){
Prepare(links[i]);
}
if(id==null) links=document.getElementsByTagName("input");
else links=document.getElementById(id).getElementsByTagName("input");
for(i=0;i<links.length;i++){
Prepare(links[i]);
}
if(id==null) links=document.getElementsByTagName("textarea");
else links=document.getElementById(id).getElementsByTagName("textarea");
for(i=0;i<links.length;i++){
Prepare(links[i]);
}
}
function Prepare(el){
var tooltip,t,b,s,l,frame;
l="Demande de conseil : ";
t=el.getAttribute("title");
if(t==null || t.length==0) t="name:";
el.removeAttribute("title");
tooltip=CreateEl("div","tooltip");
s=CreateEl("div","top");
s.appendChild(document.createTextNode(l));
tooltip.appendChild(s);
b=CreateEl("b","bottom");
b.appendChild(document.createTextNode(t));
tooltip.appendChild(b);
setOpacity(tooltip);
el.tooltip=tooltip;
el.onmouseover=showTooltip;
el.onmouseout=hideTooltip;
el.onmousemove=Locate;
}
function showTooltip(e){
document.getElementById("btc").appendChild(this.tooltip);
document.getElementById("btc_frame").style.display="";
Locate(e);
}
function hideTooltip(e){
var d=document.getElementById("btc");
if(d.childNodes.length>0) d.removeChild(d.firstChild);
//permet de cacher l'iframe
document.getElementById("btc_frame").style.display="none";
}
function setOpacity(el){
el.style.filter="alpha(opacity:85)";
el.style.KHTMLOpacity="0.85";
el.style.MozOpacity="0.85";
el.style.opacity="0.85";
}
function CreateEl(t,c){
var x=document.createElement(t);
x.className=c;
x.style.display="block";
return(x);
}
function AddCss(){
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","bt.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}
function Locate(e){
var posx=0,posy=0;
if(e==null) e=window.event;
if(e.pageX || e.pageY){
//alert(1);
if (posx==0||posy==0)
{
posx=x+e.pageX; posy=y+e.pageY;
}
else
{
x=e.pageX;y=e.pageY;
posx=e.pageX; posy=e.pageY;
}
}
else if(e.clientX || e.clientY){
if(document.documentElement.scrollTop){
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else{
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
var f = document.getElementById("btc_frame");
var d = document.getElementById("btc");
f.style.width=d.offsetWidth+"px";
f.style.height=d.offsetHeight+"px";
//le div ne bouge plus lorsque le pointeur passe au dessus de la liste des champs select
if (posx>400)
{
f.style.top=(posy-45)+"px";
f.style.left=(posx-195)+"px";
d.style.top=(posy-45)+"px";
d.style.left=(posx-195)+"px";
}
}
|
Au niveau de la page html, il suffit d'inserer le code suivant :
| Code: |
<script type="text/javascript" src="emplacement_du_script au_dessus.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("id_du balise_où_les_champ_se_trouve")};
</script>
<!-- si on ne met pas de paramettre("id_du balise_où_les_champ_se_trouve"), c'est la basile <body> qui sera pris par défaut donc tous les champs dans la balise body aura un info-bull-->
|
Pour ce code, il reste donc un problème au niveau de l'affichage de l'iframe (comment le caher sous IE????? ).  Ce n'est pas vraiment un gros problème car on peut toujours cacher la bordure de l'iframe avec la bordure du div de l'info-bull mais si quelqu'un trouve une solution:idea:, je suis preneur. |
|
| Revenir en haut de page |
|
|
Rivo
Inscrit le: 12 Fév 2007
Messages: 5
|
| Posté le: Ven Sep 28, 2007 11:00 pm Sujet du message: masquer un champ select |
|
|
J'ai oublié de préciser le style utilisé pour l'info-bull qui est déclaré dans dans le code javascript :
| Code: |
...
x.style.display="block";
return(x);
}
function AddCss(){
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
//c'est ici qu'on met le nom du style à utiliser
l.setAttribute("href","bt.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}
function Locate(e){
var posx=0,posy=0;
...
|
Voici un exemple du style :
| Code: |
.tooltip
{
width: 200px; color:#1D38AE;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;
text-align:center;
z-index:0;
}
.tooltip div.top
{
z-index:0;
padding-top:5px;
background: url(chemin_de_l_image_utiliser_pour_le_haut_de_l_info_bull) no-repeat top;
}
.tooltip b.bottom
{
z-index:0;
padding-bottom:5px;
color: #548912;
background: url(chemin_de_l_image_utiliser_pour_le_bas_de_l_info_bull) no-repeat bottom;
} |
Pour plus de détail, voir l'exemple du code source : http://www.web-graphics.com/mtarchive/001717.php |
|
| Revenir en haut de page |
|
|
tsiry
Inscrit le: 12 Déc 2006
Messages: 5
|
| Posté le: Ven Oct 19, 2007 8:39 pm Sujet du message: |
|
|
Pour résoudre ton problême sous IE concernant l'affichage de l'iframe, il suffit juste d'ajouter dans le style associé à l'iframe le type visibility="hidden".
Tu auras comme ceci dans ton le style
| Code: | h=document.createElement("div");
h.id="btc";
h.setAttribute("id","btc");
h.style.position="absolute";
h.style.visibilty="hidden"; |
Allez bon développement. |
|
| Revenir en haut de page |
|
|
|
|
Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum
|
| |
|
FAQ
Rechercher
Liste des Membres
Groupes d'utilisateurs
Profil
S'enregistrer
Connexion
Se connecter pour vérifier ses messages privés
