InfoBulle toujours ...
gryzzly
Messages postés
5220
Date d'inscription
Statut
Contributeur
Dernière intervention
-
RAD ZONE Messages postés 5362 Statut Contributeur -
RAD ZONE Messages postés 5362 Statut Contributeur -
Bsoir,
Toujours en galere. Plus j'avance, plus j'ai d'idées.. mais ca bloque, à cause du mot "html" dans mon doctype.
Situation :
Page :
Avec ce doctype, la fonction de drag ne fonctionne pas. SI j'enleve le mot html (souligné, en gras) du doctype, ca fonctionne. Quelqu'un saurait me débogguer ca ? J'y arrive pas ... ou me donner des pistes ...
Vous allez me dire : avec un © de 2003, c'est codé à l'ancienne. Oui, mais les usines a gaz ajax & co avec 50 fonctions dont j'ai pas besoi ... ben, j'en ai pas besoin ... trop complexe, trop difficiles a comprendre leur fonctionnement ... donc il faudrait juste mettre à jour avec les nouvelles normes de language ??
Ou alors m'orienter sur du neuf, dont le codage passe au validateur... mais qui se limite a mes besoins ;-)
Merci !
PS : si il existe un déboggueur de js, je suis preneur aussi ...
Toujours en galere. Plus j'avance, plus j'ai d'idées.. mais ca bloque, à cause du mot "html" dans mon doctype.
Situation :
Page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>ma page</title>
<script language="JavaScript1.2">
// Script Source: CodeLifter.com
// Copyright 2003
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;
function ddInit(e){
topDog=isIE ? "BODY" : "HTML";
whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");
hotDog=isIE ? event.srcElement : e.target;
while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="titleBar"){
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}
function dd(e){
if (!ddEnabled) return;
whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}
function ddN4(whatDog){
if (!isN4) return;
N4=eval(whatDog);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown=function(e){
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e){
if (isHot){
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function(){
N4.releaseEvents(Event.MOUSEMOVE);
}
}
function hideMe(){
if (isIE||isNN) whichDog.style.visibility="hidden";
else if (isN4) document.theLayer.visibility="hide";
}
function showMe(){
if (isIE||isNN) whichDog.style.visibility="visible";
else if (isN4) document.theLayer.visibility="show";
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
</script>
</head>
<body>
<br/>s<br/>c<br/>r<br/>o<br/>l<br/>l<br/>
<br/>s<br/>c<br/>r<br/>o<br/>l<br/>l<br/>
<br/>s<br/>c<br/>r<br/>o<br/>l<br/>l<br/>
<br/>s<br/>c<br/>r<br/>o<br/>l<br/>l<br/>
<br/>s<br/>c<br/>r<br/>o<br/>l<br/>l<br/>
<br/>s<br/>c<br/>r<br/>o<br/>l<br/>l<br/>
<br/>s<br/>c<br/>r<br/>o<br/>l<br/>l<br/>
<br/>s<br/>c<br/>r<br/>o<br/>l<br/>l<br/>
<br/>s<br/>c<br/>r<br/>o<br/>l<br/>l<br/>
<!-- BEGIN FLOATING LAYER CODE //-->
<div id="theLayer" style="position:fixed;width:250px;left:40;top:150;visibility:visible">
<table border="0" width="250" bgcolor="#FF6000" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
<tr>
<td id="titleBar" style="cursor:move" width="100%">
<ilayer width="100%" onSelectStart="return false">
<layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
<font face="Arial" color="#FFFFFF">Draggable Layer</font>
</layer>
</ilayer>
</td>
<td style="cursor:hand" valign="top">
<a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial style="text-decoration:none">X</font></a>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
<!-- PLACE YOUR CONTENT HERE //-->
This is where your content goes.<br>
It can be any html code or text.<br>
Remember to feed the reindeer.<br>
Avoid chewable giblet curtains.
<!-- END OF CONTENT AREA //-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END FLOATING LAYER CODE //-->
</body>
</html>
Avec ce doctype, la fonction de drag ne fonctionne pas. SI j'enleve le mot html (souligné, en gras) du doctype, ca fonctionne. Quelqu'un saurait me débogguer ca ? J'y arrive pas ... ou me donner des pistes ...
Vous allez me dire : avec un © de 2003, c'est codé à l'ancienne. Oui, mais les usines a gaz ajax & co avec 50 fonctions dont j'ai pas besoi ... ben, j'en ai pas besoin ... trop complexe, trop difficiles a comprendre leur fonctionnement ... donc il faudrait juste mettre à jour avec les nouvelles normes de language ??
Ou alors m'orienter sur du neuf, dont le codage passe au validateur... mais qui se limite a mes besoins ;-)
Merci !
PS : si il existe un déboggueur de js, je suis preneur aussi ...
7 réponses
SALUT
PASSE CE DOCTYPE
PASSE CE DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>mais je ne suis pas sur que ton script passe sur IE7???????
ET OUI chez moi ce code passe nickel sur ffx mais pas de drag sur IE7 !!
ps ; j ai fais quelque correction html !
ps ; j ai fais quelque correction html !
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> ma page
</title>
<script language="JavaScript1.2" type="text/javascript">
// Script Source: CodeLifter.com
// Copyright 2003
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;
function ddInit(e)
{
topDog=isIE ? "BODY" : "HTML";
whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");
hotDog=isIE ? event.srcElement : e.target;
while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog)
{
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="titleBar")
{
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}
function dd(e)
{
if (!ddEnabled)
return;
whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}
function ddN4(whatDog)
{
if (!isN4)
return;
N4=eval(whatDog);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown=function(e)
{
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e)
{
if (isHot)
{
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function()
{
N4.releaseEvents(Event.MOUSEMOVE);
}
}
function hideMe()
{
if (isIE||isNN)
whichDog.style.visibility="hidden";
else if (isN4)
document.theLayer.visibility="hide";
}
function showMe()
{
if (isIE||isNN)
whichDog.style.visibility="visible";
else if (isN4)
document.theLayer.visibility="show";
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
</script>
</head>
<body>
<br>s
<br>c
<br>r
<br>o
<br>l
<br>l
<br>
<br>s
<br>c
<br>r
<br>o
<br>l
<br>l
<br>
<br>s
<br>c
<br>r
<br>o
<br>l
<br>l
<br>
<br>s
<br>c
<br>r
<br>o
<br>l
<br>l
<br>
<br>s
<br>c
<br>r
<br>o
<br>l
<br>l
<br>
<br>s
<br>c
<br>r
<br>o
<br>l
<br>l
<br>
<br>s
<br>c
<br>r
<br>o
<br>l
<br>l
<br>
<br>s
<br>c
<br>r
<br>o
<br>l
<br>l
<br>
<br>s
<br>c
<br>r
<br>o
<br>l
<br>l
<br>
<!-- BEGIN FLOATING LAYER CODE //-->
<div id="theLayer" style="position:fixed;width:250px;left:40;top:150;visibility:visible">
<table border="0" width="250" bgcolor="#FF6000" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
<tr>
<td id="titleBar" style="cursor:move" width="100%">
<layer width="100%" onmouseover="isHot=true;if (isN4) ddN4(theLayer)" onmouseout="isHot=false">
<ilayer width="100%" onselectstart="return false">
<font face="Arial" color="white">
Draggable Layer
</font>
</ilayer>
</layer></td>
<td style="cursor:hand" valign="top">
<a href="#" onclick="hideMe();return false">
<font color="white" size="2" face="arial" style="text-decoration:none">
X
</font></a></td>
</tr>
<tr>
<td width="100%" bgcolor="white" style="padding:4px" colspan="2">
<!-- PLACE YOUR CONTENT HERE //-->
This is where your content goes.
<br>It can be any html code or text.
<br>Remember to feed the reindeer.
<br>Avoid chewable giblet curtains.
<!-- END OF CONTENT AREA //--></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!-- END FLOATING LAYER CODE //-->
</body>
</html>
debugger toolbar pour IE
https://www.debugbar.com/download.php
et un firebug pour IE
https://www.my-debugbar.com/wiki/CompanionJS/HomePage
https://www.debugbar.com/download.php
et un firebug pour IE
https://www.my-debugbar.com/wiki/CompanionJS/HomePage
Salut, RAD.
Merci du temps passé dessus. DIs donc, est ce que tu connais la cause du non fonctionnement avec le doctype strict ? C'après ce que je vois, il n'y a pas eu de correction du js. C'est exclusivement lié à sa facon de coder l'html ? y'a pas d'erreur dans l'html ? DOnc en soit, c'est censé pouvoir passer sous tous les navigateurs avec un doctype 1 stric (j'y tiens..)
Qu'est ce qui, avec le code que tu as corrigé, fait que ca ne fonctionne pas sous IE (tout umero de version confondu) ? là j'ai pas compris ... alors que ca fonctionnait encore hier.
Bref... au final, ca veut dire que ca me convient pas comme script, car je souhaite un comportement identique pour tous les navigateurs, avec un doctype strict :s
Merci du temps passé dessus. DIs donc, est ce que tu connais la cause du non fonctionnement avec le doctype strict ? C'après ce que je vois, il n'y a pas eu de correction du js. C'est exclusivement lié à sa facon de coder l'html ? y'a pas d'erreur dans l'html ? DOnc en soit, c'est censé pouvoir passer sous tous les navigateurs avec un doctype 1 stric (j'y tiens..)
Qu'est ce qui, avec le code que tu as corrigé, fait que ca ne fonctionne pas sous IE (tout umero de version confondu) ? là j'ai pas compris ... alors que ca fonctionnait encore hier.
Bref... au final, ca veut dire que ca me convient pas comme script, car je souhaite un comportement identique pour tous les navigateurs, avec un doctype strict :s
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
LA CA PASSE AUSSI IE MAIS TOUJOURS PAS EN XHTML!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> ma page
</title>
<script language="JavaScript1.2" type="text/javascript">
// Script Source: CodeLifter.com
// Copyright 2003
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;
function ddInit(e)
{
topDog=isIE ? "BODY" : "HTML";
whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");
hotDog=isIE ? event.srcElement : e.target;
while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog)
{
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="titleBar")
{
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}
function dd(e)
{
if (!ddEnabled)
return;
whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}
function ddN4(whatDog)
{
if (!isN4)
return;
N4=eval(whatDog);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown=function(e)
{
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e)
{
if (isHot)
{
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function()
{
N4.releaseEvents(Event.MOUSEMOVE);
}
}
function hideMe()
{
if (isIE||isNN)
whichDog.style.visibility="hidden";
else if (isN4)
document.theLayer.visibility="hide";
}
function showMe()
{
if (isIE||isNN)
whichDog.style.visibility="visible";
else if (isN4)
document.theLayer.visibility="show";
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
</script>
</head>
<body>
<br> s
<br> c
<br> r
<br> o
<br> l
<br> l
<br>
<br> s
<br> c
<br> r
<br> o
<br> l
<br> l
<br>
<br> s
<br> c
<br> r
<br> o
<br> l
<br> l
<br>
<br> s
<br> c
<br> r
<br> o
<br> l
<br> l
<br>
<br> s
<br> c
<br> r
<br> o
<br> l
<br> l
<br>
<br> s
<br> c
<br> r
<br> o
<br> l
<br> l
<br>
<br> s
<br> c
<br> r
<br> o
<br> l
<br> l
<br>
<br> s
<br> c
<br> r
<br> o
<br> l
<br> l
<br>
<br> s
<br> c
<br> r
<br> o
<br> l
<br> l
<br>
<!-- BEGIN FLOATING LAYER CODE //-->
<div id="theLayer" style="position:absolute;width:250px;left:100;top:100;visibility:visible">
<table border="0" width="250" bgcolor="#ff7c11" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
<tr>
<td id="titleBar" style="cursor:move" width="100%">
<ilayer width="100%" onSelectStart="return false">
<layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
<font face="Arial" color="#000000"> Layer Title
</font>
</layer>
</ilayer></td>
<td style="cursor:hand" valign="top">
<a href="#" onClick="hideMe();return false">
<font color=#ffffff size=2 face=arial style="text-decoration:none"> X
</font></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFEE" style="padding:4px" colspan="2">
<!-- PLACE YOUR CONTENT HERE //--> This is where your content goes.
<br> It can be any html code or text.
<br> Remember to feed the reindeer.
<br> Avoid chewable giblet curtains.
<!-- END OF CONTENT AREA //--></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!-- END FLOATING LAYER CODE //-->
</body>
</html>
Salut rad,
Bon, tu peux arrêter de te prendre la tête avec tout ca. J'ai trouvé mon bonheur, valide xhtml.
http://www.quirksmode.org/js/dragdrop.html
J'en profite pour signaler un légère erreur dans ce script (enfin, il manque des informations dans le tuto, et donc on galère pour comprendre pourquoi ça ne fonctionne pas) :
1)
il est nécessaire de rajouter une fonction javascript à celles présentées dans le tuto :
Sans ce code, vous arriverez à rien.
:-) ca avance (-:
Bon, tu peux arrêter de te prendre la tête avec tout ca. J'ai trouvé mon bonheur, valide xhtml.
http://www.quirksmode.org/js/dragdrop.html
J'en profite pour signaler un légère erreur dans ce script (enfin, il manque des informations dans le tuto, et donc on galère pour comprendre pourquoi ça ne fonctionne pas) :
1)
il est nécessaire de rajouter une fonction javascript à celles présentées dans le tuto :
window.onload = function () {
if (self.init)
init();
}
Sans ce code, vous arriverez à rien.
:-) ca avance (-:
