Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 2015
-
26 août 2009 à 06:55
Utilisateur anonyme -
31 oct. 2011 à 13:11
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
UP
Salut, j'aimerais en savoir plus, j'ai limpression que la discussion du sujet n'est pas fini!
Sinon est ce que le code est terminé?
Merci
cs_saadellaoui
Messages postés11Date d'inscriptionvendredi 7 mai 2010StatutMembreDernière intervention31 mai 2011 30 mai 2011 à 14:16
oui merci bien sa fonctionne,mais j'ai remarquer qu'on ne peut pas deplacer les div dans tous les sens
en faite ce que je ve,c'est redimensionner les div proportionellement et les deplacer ou je veux dans tous les sens
Merci d'avance
sitajony
Messages postés103Date d'inscriptionjeudi 6 novembre 2008StatutMembreDernière intervention 9 juin 2010 30 mai 2011 à 14:11
J'ai mis à jour mon code pour le problème du "body", ça venait d'une erreur de syntaxe, sinon j'ai remarqué un problème dans mon code, je corigerais la prochaine fois mais sinon il n'ya plus de problème avec "body"...
cs_saadellaoui
Messages postés11Date d'inscriptionvendredi 7 mai 2010StatutMembreDernière intervention31 mai 2011 30 mai 2011 à 14:06
en faite j'ai testé le code sur google chrome et jarrive pas a le faire fonctionner pa de deplacement pas de redimenstionnement, je l'ai testé sous chrome firefox,et ie et sa marche pas, a propo je suis sous windows7
c'est le code que j'utilise
<!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" lang="fr">
<head>
<script language="javascript">
//Ici se sont les variables pour stocker toute les données des objets lors du survole ou du clique (onmousedown)...
var x=0;
var y=0;
var deplacable=0;
var objet="";
var gauche="";
var haut="";
var plan=0;
var mode=0;
function bouger(e){
if(navigator.appName=="Microsoft Internet Explorer"){x=e.clientX;y=e.clientY}
else{x=e.pageX;y=e.pageY} //Récupération de la position du curseur suivant la compatibilité du navigateur...
x=x+eval(document.body.scrollTop);
y=x+eval(document.body.scrollLeft);
if(deplacable){ //Si un objet est déplacable/redimmensionnable alors le déplacer ou redimmensionner...
if(mode==1)
{ //Si on redimensionne par la droite...
gauchea=document.getElementById(objet).style.left;
gauchea=gauchea.replace("px","");
gauchea=gauchea.replace("pt","");
if(x-gauchea>=0){ //Simple vérification que l'objet ne passe pas en dessous de 0 sa ne peut pas exister un objet avec une valeur négative en taille...
document.getElementById(objet).style.width=x-gauchea;
}
}
else if(mode==2)
{ //Si on redimmensione par le bas...
hauta=document.getElementById(objet).style.top;
hauta=hauta.replace("px","");
hauta=hauta.replace("pt","");
if(y-hauta>=0)
{
document.getElementById(objet).style.height=y-hauta;
}
}
else if(mode==3){ //Si on redimensionne par le coin bas gauche...
hauta=document.getElementById(objet).style.top;
hauta=hauta.replace("px","");
hauta=hauta.replace("pt","");
gauchea=document.getElementById(objet).style.left;
gauchea=gauchea.replace("px","");
gauchea=gauchea.replace("pt","");
if(y-hauta>=0 && x-gauchea>=0){
document.getElementById(objet).style.width=x-gauchea;
document.getElementById(objet).style.height=y-hauta;
}
}
else{ //Déplacer l'objet...
document.body.style.cursor='move';
document.getElementById(objet).style.left=x-gauche;
document.getElementById(objet).style.top=y-haut;
}
}
}
function position(nom){ //On récupère la position du curseur par rapport à l'objet...
objet=nom;
deplacable=1 //On dit que l'objet est maintenant déplacable...
document.getElementById(nom).style.zIndex=plan; //On positionne l'objet en premier plan...
plan=plan+eval(1);
gauche=document.getElementById(nom).style.left;
gauche=gauche.replace("px","");
gauche=gauche.replace("pt","");
gauche=x-gauche;
}
function curseur(nom){ //Vérification, changement du cuseur par rapport à l'objet...
if(deplacable==false){ //Si l'objet n'est pas en train d'être déplacé ou redimensionné...
haut=document.getElementById(nom).style.top; //Vérification de la position verticale...
haut=haut.replace("px","");
haut=haut.replace("pt","");
haut=y-haut; //Position du cuseur sur l'objet verticalement...
gauche=document.getElementById(nom).style.left; //Vérification de la position verticale...
gauche=gauche.replace("px","");
gauche=gauche.replace("pt","");
gauche=x-gauche; //Position du cuseur sur l'objet verticalement...
longeur=document.getElementById(nom).style.width; //On récupère la longeur de l'objet...
longeur=longeur.replace("px","");
longeur=longeur-5;
largeur=document.getElementById(nom).style.height; //On récupère la largeur (hauteur de l'objet...
largeur=largeur.replace("px","");
largeur=largeur-5;
if(gauche>longeur){ //Si le curseur est positionné à droite de l'objet...
mode=1;
document.body.style.cursor="e-resize";
}
else if(haut>largeur){ //Si le curseur est positionné en bas de l'objet...
mode=2;
document.body.style.cursor="s-resize";
}
else{ //Si le curseur est positionné au cente de l'objet...
mode=0;
document.body.style.cursor="default";
}
if(haut>largeur && gauche>longeur){ //Si le curseur est positionné en bas à gauche...
mode=3;
document.body.style.cursor="se-resize";
}
}
}
</script>
</head>
</html>
sitajony
Messages postés103Date d'inscriptionjeudi 6 novembre 2008StatutMembreDernière intervention 9 juin 2010 30 mai 2011 à 13:44
Quel est votre navigateur? Normalement cela fonctionne sur n'importe quel navigateur mais si vous avez moyen d'indiquer la ligne où se trouve l'erreur ça serait mieux pour répondre.
Essayez de taper "javascript:alert(document.body)" sur la barre d'adresse de votre navigateur, si aucune boite de dialogue s'affiche alors le problème doit venir de votre navigateur.
cs_saadellaoui
Messages postés11Date d'inscriptionvendredi 7 mai 2010StatutMembreDernière intervention31 mai 2011 30 mai 2011 à 11:37
je n'arrive pas a faire fonctionner ce script il maffiche comme erreur body undefini
quelqu'un peut maider?
Merci d'avance
jdmcreator
Messages postés647Date d'inscriptionsamedi 30 décembre 2000StatutMembreDernière intervention20 juillet 20127 29 août 2009 à 15:02
Kazma n'avait pas démontré dernièrement que offsetLeft ne donne pas le même résultat sur IE et les autres navigateurs ?
sitajony
Messages postés103Date d'inscriptionjeudi 6 novembre 2008StatutMembreDernière intervention 9 juin 2010 29 août 2009 à 13:51
Ah oui je n'avais pas pensé au scroll... De toute façon ya juste à ajouter document.body.scrollTop à la valeur de la position Y du curseur... Je vais faire un update du script ya beaucoup de correction à faire apparament mais Windows 7 ne s'est pas fait en une fois lol donc c'est normal si vous voyez des bugs et autres correctifs à faire...
@karamel
Messages postés1855Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention18 avril 2024153 29 août 2009 à 12:46
bonjour
pourquoi ne pas utilise offset au lieux de style (ex : style.left devient offsetLeft ) sa evite de faire un replace et le script sera largement plus court
tu ne gère pas le scroll
sur ff tu a un rond barre car le drag ne se fait pas
sinon sa marche quand meme c'est deja pas mal
jdmcreator
Messages postés647Date d'inscriptionsamedi 30 décembre 2000StatutMembreDernière intervention20 juillet 20127 27 août 2009 à 02:14
Personnellement, je préfère les scripts où l'on n'est pas obligé de mettre l'ID. Par exemple dans ta fonction, simplement utilisé "this".
sitajony
Messages postés103Date d'inscriptionjeudi 6 novembre 2008StatutMembreDernière intervention 9 juin 2010 26 août 2009 à 16:52
Je n'est pas testé sur Safari par contre... J'ai testé sur Opéra et il ya un bug pour redimensioner... Mais safari j'ai pas vérifié...
jdmcreator
Messages postés647Date d'inscriptionsamedi 30 décembre 2000StatutMembreDernière intervention20 juillet 20127 26 août 2009 à 14:19
Il manque les "px" aussi dans les DIV du . Sinon, cela ne marche pas chez moi sur Safari.
Bon essai tout de même ;)
JDMCreator
sitajony
Messages postés103Date d'inscriptionjeudi 6 novembre 2008StatutMembreDernière intervention 9 juin 2010 26 août 2009 à 13:54
Oui je vous avais prévenue pour les fautes d'orthographe... Sinon pour la normalisation w3c je ne l'ai pas mis c'est juste une page exemple il suffit juste de copier le code sur la page où l'on veut utiliser cette source...
Oui pour la fonction parseInt sa peut réduire quelques lignes de code... Sinon j'ai plus fait en sorte que sa fonctionne pas que sa soit normalisé, court...
Mais merçi des commentaires peut être que je ferais une mis à jour du code pour le rendre le plus simple et court... Là j'ai pas le temp mais peut être un jour...
Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 201516 26 août 2009 à 07:07
j'ai oublié de dire "px" dans les tailles, positions....
exemple :
if( mode==1 )
{ gauchea=parseInt(document.getElementById(objet).style.left,10);
if( x-gauchea >= 0 )
{ document.getElementById(objet).style.width=x-gauchea+"px"; }
}
et que probablement manque var ( var gauchea... )
@+
Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 201516 26 août 2009 à 06:55
après un 1er coup d'oeil :
_ manque doctype, par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
_ <script type="text/javascript"> vaut mieux
_ replace px et pt : mieux vaut aussi parseInt, exemple :
...gauchea=parseInt(document.getElementById(objet).style.left,10);
if(x-gauchea>=0)...
_ pour le curseur, et que ça fonctionne de la même
manière avec les navigateurs :
<body ... onmousemove="bouger(event); return false;" ...
_ ça aurait sans doute été bien (mieux ?) de faire ça en POO.
_ fautes d'orthographe
faut prendre un correcteur d'orthographe.
@+
31 oct. 2011 à 13:11
Salut, j'aimerais en savoir plus, j'ai limpression que la discussion du sujet n'est pas fini!
Sinon est ce que le code est terminé?
Merci
30 mai 2011 à 14:16
en faite ce que je ve,c'est redimensionner les div proportionellement et les deplacer ou je veux dans tous les sens
Merci d'avance
30 mai 2011 à 14:11
30 mai 2011 à 14:06
c'est le code que j'utilise
<!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" lang="fr">
<head>
<script language="javascript">
//Ici se sont les variables pour stocker toute les données des objets lors du survole ou du clique (onmousedown)...
var x=0;
var y=0;
var deplacable=0;
var objet="";
var gauche="";
var haut="";
var plan=0;
var mode=0;
function bouger(e){
if(navigator.appName=="Microsoft Internet Explorer"){x=e.clientX;y=e.clientY}
else{x=e.pageX;y=e.pageY} //Récupération de la position du curseur suivant la compatibilité du navigateur...
x=x+eval(document.body.scrollTop);
y=x+eval(document.body.scrollLeft);
if(deplacable){ //Si un objet est déplacable/redimmensionnable alors le déplacer ou redimmensionner...
if(mode==1)
{ //Si on redimensionne par la droite...
gauchea=document.getElementById(objet).style.left;
gauchea=gauchea.replace("px","");
gauchea=gauchea.replace("pt","");
if(x-gauchea>=0){ //Simple vérification que l'objet ne passe pas en dessous de 0 sa ne peut pas exister un objet avec une valeur négative en taille...
document.getElementById(objet).style.width=x-gauchea;
}
}
else if(mode==2)
{ //Si on redimmensione par le bas...
hauta=document.getElementById(objet).style.top;
hauta=hauta.replace("px","");
hauta=hauta.replace("pt","");
if(y-hauta>=0)
{
document.getElementById(objet).style.height=y-hauta;
}
}
else if(mode==3){ //Si on redimensionne par le coin bas gauche...
hauta=document.getElementById(objet).style.top;
hauta=hauta.replace("px","");
hauta=hauta.replace("pt","");
gauchea=document.getElementById(objet).style.left;
gauchea=gauchea.replace("px","");
gauchea=gauchea.replace("pt","");
if(y-hauta>=0 && x-gauchea>=0){
document.getElementById(objet).style.width=x-gauchea;
document.getElementById(objet).style.height=y-hauta;
}
}
else{ //Déplacer l'objet...
document.body.style.cursor='move';
document.getElementById(objet).style.left=x-gauche;
document.getElementById(objet).style.top=y-haut;
}
}
}
function position(nom){ //On récupère la position du curseur par rapport à l'objet...
objet=nom;
deplacable=1 //On dit que l'objet est maintenant déplacable...
document.getElementById(nom).style.zIndex=plan; //On positionne l'objet en premier plan...
plan=plan+eval(1);
haut=document.getElementById(nom).style.top;
haut=haut.replace("px","");
haut=haut.replace("pt","");
haut=y-haut;
gauche=document.getElementById(nom).style.left;
gauche=gauche.replace("px","");
gauche=gauche.replace("pt","");
gauche=x-gauche;
}
function curseur(nom){ //Vérification, changement du cuseur par rapport à l'objet...
if(deplacable==false){ //Si l'objet n'est pas en train d'être déplacé ou redimensionné...
haut=document.getElementById(nom).style.top; //Vérification de la position verticale...
haut=haut.replace("px","");
haut=haut.replace("pt","");
haut=y-haut; //Position du cuseur sur l'objet verticalement...
gauche=document.getElementById(nom).style.left; //Vérification de la position verticale...
gauche=gauche.replace("px","");
gauche=gauche.replace("pt","");
gauche=x-gauche; //Position du cuseur sur l'objet verticalement...
longeur=document.getElementById(nom).style.width; //On récupère la longeur de l'objet...
longeur=longeur.replace("px","");
longeur=longeur-5;
largeur=document.getElementById(nom).style.height; //On récupère la largeur (hauteur de l'objet...
largeur=largeur.replace("px","");
largeur=largeur-5;
if(gauche>longeur){ //Si le curseur est positionné à droite de l'objet...
mode=1;
document.body.style.cursor="e-resize";
}
else if(haut>largeur){ //Si le curseur est positionné en bas de l'objet...
mode=2;
document.body.style.cursor="s-resize";
}
else{ //Si le curseur est positionné au cente de l'objet...
mode=0;
document.body.style.cursor="default";
}
if(haut>largeur && gauche>longeur){ //Si le curseur est positionné en bas à gauche...
mode=3;
document.body.style.cursor="se-resize";
}
}
}
</script>
</head>
</html>
30 mai 2011 à 13:44
Essayez de taper "javascript:alert(document.body)" sur la barre d'adresse de votre navigateur, si aucune boite de dialogue s'affiche alors le problème doit venir de votre navigateur.
30 mai 2011 à 11:37
quelqu'un peut maider?
Merci d'avance
29 août 2009 à 15:02
29 août 2009 à 13:51
29 août 2009 à 12:46
pourquoi ne pas utilise offset au lieux de style (ex : style.left devient offsetLeft ) sa evite de faire un replace et le script sera largement plus court
tu ne gère pas le scroll
sur ff tu a un rond barre car le drag ne se fait pas
sinon sa marche quand meme c'est deja pas mal
27 août 2009 à 02:14
26 août 2009 à 16:52
26 août 2009 à 14:19
Bon essai tout de même ;)
JDMCreator
26 août 2009 à 13:54
Oui pour la fonction parseInt sa peut réduire quelques lignes de code... Sinon j'ai plus fait en sorte que sa fonctionne pas que sa soit normalisé, court...
Mais merçi des commentaires peut être que je ferais une mis à jour du code pour le rendre le plus simple et court... Là j'ai pas le temp mais peut être un jour...
26 août 2009 à 07:07
exemple :
if( mode==1 )
{ gauchea=parseInt(document.getElementById(objet).style.left,10);
if( x-gauchea >= 0 )
{ document.getElementById(objet).style.width=x-gauchea+"px"; }
}
et que probablement manque var ( var gauchea... )
@+
26 août 2009 à 06:55
_ manque doctype, par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
_ <script type="text/javascript"> vaut mieux
_ replace px et pt : mieux vaut aussi parseInt, exemple :
...gauchea=parseInt(document.getElementById(objet).style.left,10);
if(x-gauchea>=0)...
_ pour le curseur, et que ça fonctionne de la même
manière avec les navigateurs :
<body ... onmousemove="bouger(event); return false;" ...
_ ça aurait sans doute été bien (mieux ?) de faire ça en POO.
_ fautes d'orthographe
faut prendre un correcteur d'orthographe.
@+