Deplacement de calque

Alain Avignon · Message par **Alain Avignon** » 13 déc. 2004, 11:27

J'ai créé avec Dreamweaver un calque qui se déplace sans contrainte.
Cela marche avec IE, mais pas avec Firefox.

Merci de votre aide

FF_Olivier · Message par **FF_Olivier** » 13 déc. 2004, 11:52

Dreamweaver a dû produire du code javascript spécifique à IE, càd non standard, que FF ne comprend pas.

PS : je pense que ce sujet a plus sa place dans le forum «Développement web».

Gillou · Message par **Gillou** » 13 déc. 2004, 12:11

Excuse mon "inculture"...

mais

Alain Avignon a écrit :un calque qui se déplace sans contrainte

c'est quoi ?

Invité · Message par **Invité** » 21 janv. 2005, 15:01

Alain Avignon a écrit :J'ai créé avec Dreamweaver un calque qui se déplace sans contrainte.
Cela marche avec IE, mais pas avec Firefox.

Merci de votre aide

---------------
J'ai exactement le même problème, ça marche avec Explorer, Netscape, Opéra mais pas avec FF ni Mozilla.

Dans certains cas problème aussi avec les : onMouseOver="showHideLayers... Là je suspecte un lien vers une ancre (#ancre) car dans le cas de liens courants vers un Url ou un mailto, je n'ai pas constaté de disfonctionnement.

J'ai du mal à trouver une réponse dans ce forum. C'est bien ici " Développement web", non?

jv2759 · Message par **jv2759** » 21 janv. 2005, 15:08

oui, mais avec le code c'est plus simple car la tes explication sous plutot legere, donne nous un lien avec ton code, ainsi on pouras tester dans ie et netscape pour voir ce qui ne vas pas...

PS : regard la console javascripte cette derniére doit surment indiquer des probléme...

GregK84 · Message par **GregK84** » 21 janv. 2005, 15:28

le probleme vient tout simplement du fait que dreamweaver cré un code totalement indigeste avec des teste a la volée sur ns4, ns6, ie ... MAIS PAS SUR FF. pour ceux qui voudrait lire un exemple de code voir ci dessous mais je vous souhaite a tous bon courrage

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01
  //Copyright 1998 Macromedia, Inc. All rights reserved.
  var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
  var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
  retVal = true; if(IE && event) event.returnValue = true;
  if (MM_dragLayer.arguments.length > 1) {
    curDrag = MM_findObj(objName); if (!curDrag) return false;
    if (!document.allLayers) { document.allLayers = new Array();
      with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
        for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
          with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
      } else {
        if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div"); 
          for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
        for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i]; 
    } }
    curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
    curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
    curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
    curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
    curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
    curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
    curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft; 
    if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
    curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop; 
    if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
    curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
    curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
    curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
    document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
    if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  } else {
    var theEvent = ((NS)?objName.type:event.type);
    if (theEvent == 'mousedown') {
      var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
      var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
      var maxDragZ=null; document.MM_maxZ = 0;
      for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
        var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
        if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
        var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
        if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
          var parentL=0; var parentT=0;
          if (NS6) { parentLayer = aLayer.parentNode;
            while (parentLayer != null && parentLayer.style.position) {             
              parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
              parentLayer = parentLayer.parentNode;
          } } else if (IE) { parentLayer = aLayer.parentElement;       
            while (parentLayer != null && parentLayer.style.position) {
              parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
              parentLayer = parentLayer.parentElement; } }
          var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
          var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);
          if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
          var tmpW = MM_hWidth;  if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
          var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
          if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
              || maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
      if (curDrag) {
        document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
        curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
        curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
        if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
        MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
        document.MM_curDrag = curDrag;  curDrag.MM_SNAPPED=false;
        if(curDrag.MM_toFront) {
          eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
          if (!curDrag.MM_dropBack) document.MM_maxZ++; }
        retVal = false; if(!NS4&&!NS6) event.returnValue = false;
    } } else if (theEvent == 'mousemove') {
      if (document.MM_curDrag) with (document.MM_curDrag) {
        var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
        var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
        newLeft = mouseX-MM_oldX; newTop  = mouseY-MM_oldY;
        if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
        if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
        if (MM_bT!=null) newTop  = Math.max(newTop ,MM_bT);
        if (MM_bB!=null) newTop  = Math.min(newTop ,MM_bB);
        MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
        if (NS4) {left = newLeft; top = newTop;}
        else if (NS6){style.left = newLeft; style.top = newTop;}
        else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
        if (MM_dragJS) eval(MM_dragJS);
        retVal = false; if(!NS) event.returnValue = false;
    } } else if (theEvent == 'mouseup') {
      document.onmousemove = null;
      if (NS) document.releaseEvents(Event.MOUSEMOVE);
      if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
      if (document.MM_curDrag) with (document.MM_curDrag) {
        if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
            (Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
             Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol) {
          if (NS4) {left = MM_targL; top = MM_targT;}
          else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
          else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
          MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
        if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
        if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
        retVal = false; if(!NS) event.returnValue = false; }
      document.MM_curDrag = null;
    }
    if (NS) document.routeEvent(objName);
  } return retVal;
}
//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:38px; top:49px; width:233px; height:146px; z-index:1" onClick="MM_dragLayer('Layer1','',0,0,0,0,true,false,-1,-1,-1,-1,38,49,50,'',false,'')">calque 1 </div>
</body>
</html>

Invité · Message par **Invité** » 21 janv. 2005, 15:37

jv2759 a écrit :oui, mais avec le code c'est plus simple car la tes explication sous plutot legere, donne nous un lien avec ton code, ainsi on pouras tester dans ie et netscape pour voir ce qui ne vas pas...

PS : regard la console javascripte cette derniére doit surment indiquer des probléme...

-----------------------------

Merci d'une réaction aussi rapide

http://www.abacq.net/insecta/ecaille.htm

En passant la souris sur le quatrième papillon à coté de " 4 - 6 cm" on doit faire apparaître un calque invisible. Dans le site il y a beaucoup d'autres cas, certains assez gênants en cas de non fonctionnement. J'ai l'habitude de pointer le lien mort vers une ancre pour empêcher la page de remonter complètement.

Pour le déplacement du calque voir page http://www.abacq.net/insecta/paon.htm le petit Paon animé doit se déplacer vers le haut de la page. Je dois avoir un cas aussi dans autre site.

C'est depuis très peu de temps que j'utilise FF et Mozilla, je dois dire que FF m'épate vraiment. C'est un peu dommage qu'il soit si pointu avec certains JS, mais bon, j'ai un peu l'habitude faisant régulièrement des tests avec Netscape (4.7) et Opéra. Mais il faut absolument que j'arrive à une certaine compatibilité dans les cas cités plus haut.

La console JS m'indique :

Erreur : uncaught exception: [Exception... "'[JavaScript Error: "elem.ownerDocument.defaultView has no properties" {file: "chrome://browser/content/pageInfo.js" line: 477}]' when calling method: [nsIDOMNodeFilter::acceptNode]" nsresult: "0x80570021 (NS_ERROR_XPC_JAVASCRIPT_ERROR_WITH_DETAILS)" location: "JS frame :: chrome://browser/content/pageInfo.js :: doGrab :: line 458" data: yes]

Mmh déjà je ne parle pas anglais

Merci encore

SB · Message par SB » 21 janv. 2005, 16:19

Code : Tout sélectionner

function showHideLayers() { //v3.0
  var i,p,v,obj,args=showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }

Et dire qu'il y en a qui ont du travailler des heures pour sortir ce code.
Là je m'absente mais si dans quelques heures personne ne t'a donné un équivalent qui fonctionne je le ferai.
A+.

SB · Message par SB » 22 janv. 2005, 01:17

Bon comme il semble que personne ne s'est dévoué.

Code : Tout sélectionner

function showHideLayers(iden, a, action) {
if (action=='show') {document.getElementById(iden).style.visibility='visible';}
else {document.getElementById(iden).style.visibility='hidden';}
}

Mirovinben · Message par **Mirovinben** » 22 janv. 2005, 09:34

SB a écrit :function showHideLayers(iden, a, action) {
if (action=='show') {document.getElementById(iden).style.visibility='visible';}
else {document.getElementById(iden).style.visibility='hidden';}
}

Perso j'utilise deux scripts différents, un pour le "hidden", un pour le "visible"... Ca évite le test de "action"...

La question que je me pose dans ces cas-là c'est

"quelle est, en terme d'efficacité, la meilleur méthode : une seule fonction un peu plus complète et universelle ou plusieures petites fonctions" ? En d'autres termes, "nombre d'octets ou temps d'exécution" ?

Votre avis ?

Au fait, SB, à quoi sert le paramètre "a" ?

Invité · Message par **Invité** » 22 janv. 2005, 12:03

Un point de plus pour Firefox la qualité de réponses dans ce forum (Essayez de trouver ailleurs comment désinstaller la dernière barre à la mode chez IE6)

Merci de vos interventions. Bon, je ne suis pas du tout un expert en JS, même si je m'en sers souvent. J'ai pu constater que :

function showHideLayers() { //v3.0
var i,p,v,obj,args=showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=findObj(args))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }

fonctionne chez Firefox + Mozilla dans certains cas. Dans le site http://www.abacq.net/insecta/ cela dépendrait de, disons, la syntaxe de l'appel de la fonction ?

page http://www.abacq.net/insecta/ecaille.htm ligne 148 :
<a href="#01" onMouseOver="showHideLayers('ensemble','','show')" onMouseOut="showHideLayers('ensemble','','hide')"><img src="images/chinee2.jpg" width="171" height="131" border="0"></a>

Ne fonctionne pas Par contre page http://www.abacq.net/insecta/grandpa.htm ligne 246

<a href="epeire.htm" onMouseOut="swapImgRestore();showHideLayers('spider','','hide')" onMouseOver="swapImage('Image17','','etc/tard3.gif',1);showHideLayers('spider','','show')"><img name="Image17" border="0" src="images/tard.gif" width="120" height="30"></a>

ça marche

Je vais essayer d'approfondir cela ce week-end

SB · Message par SB » 22 janv. 2005, 14:31

Mirovinben a écrit :Au fait, SB, à quoi sert le paramètre "a" ?

Strictement à rien si ce n'est que son code d'appel est

Code : Tout sélectionner

showHideLayers('ensemble','','show')

Donc c'était pour éviter d'avoir également à le rectifier.

Geckozone

Deplacement de calque

Deplacement de calque

Re: Deplacement de calque

Re: Deplacement de calque

Qui est en ligne ?