IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[POO] modif graphique div


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Inscrit en
    Janvier 2006
    Messages
    716
    Détails du profil
    Informations forums :
    Inscription : Janvier 2006
    Messages : 716
    Par défaut [POO] modif graphique div
    Bonjour,
    je souhaite pouvoir agrandir des blocs div en horizontale (à gauche et à droite).
    J'ai fait cela :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
     
    html>
    <head>
    <style type="text/css">
    #dim1{
    	border:1px solid red;
    	position:absolute;
    	left:100px;
    	width:100px;
    	top:100px;
    	height:100px;
    }
    #dim2{
    	border:1px solid blue;
    	position:absolute;
    	left:300px;
    	width:100px;
    	top:100px;
    	height:100px;
    }
    div:hover{
    	cursor:move;
    }
    body{
    	cursor:n-resize;
    }
    </style>
    <script>
    var xinit; // position de la souris au clic sur le div
    var yinit;
    var x; // position de l'élément au départ
    var y;
    var initier = false; // si on est en train de cliquer
    var gauche = false; // si on a cliqué sur un bord gauche
    var droite = false; // si on a cliqué sur un bord droit
    var haut = false; // si on a cliqué sur un bord haut
    var bas = false; // si on a cliqué sur un bord bas
    var idEnCours; // id du div qui est en cours de modif
     
    function init(e, id){
    	idEnCours = id;
    	initier = true;
    	xtmp = document.getElementById(id).offsetLeft;
    	ytmp = document.getElementById(id).offsetTop;
    	x = document.getElementById(id).offsetLeft;
    	y = document.getElementById(id).offsetTop;
    	xinit = e.clientX;
    	yinit = e.clientY;
     
    	// on test la position de la souris
    	if(e.clientX >= xtmp && e.clientX <= xtmp+2){
    		gauche = true;
    		if(e.clientY >= ytmp && e.clientY <= ytmp+2){
    			haut = true;
    		}
    		else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
    			bas = true;
    		}
    	}
    	else if(e.clientX >= xtmp + document.getElementById(id).offsetWidth-2 && e.clientX <= xtmp + document.getElementById(id).offsetWidth){
    		droite = true;
    		if(e.clientY >= ytmp && e.clientY <= ytmp+2){
    			haut = true;
    		}
    		else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
    			bas = true;
    		}
    	}
    	else if(e.clientY >= ytmp && e.clientY <= ytmp+2){
    		haut = true;
    	}
    	else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
    		bas = true;
    	}
    }
     
    function bouge(e){
    	// si on a cliqué et qu'on bouge
    	if(initier){
    		xtmp = document.getElementById(idEnCours).offsetLeft;
    		ytmp = document.getElementById(idEnCours).offsetTop;
    		if(gauche){
    			document.getElementById(idEnCours).style.left = e.clientX;
    			document.getElementById(idEnCours).style.width = document.getElementById(idEnCours).offsetWidth + (xtmp - e.clientX);
    			if(haut){
    				document.getElementById(idEnCours).style.top = e.clientY;
    				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (ytmp - e.clientY);
    			}
    			else if(bas){
    				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight);
    			}
    		}
    		else if(droite){
    			document.getElementById(idEnCours).style.width = document.getElementById(idEnCours).offsetWidth + (e.clientX - x - document.getElementById(idEnCours).offsetWidth);
    			if(haut){
    				document.getElementById(idEnCours).style.top = e.clientY;
    				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (ytmp - e.clientY);
    			}
    			else if(bas){
    				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight);
    			}
    		}
    		/*else if(haut){
    			document.getElementById(idEnCours).style.top = e.clientY;
    			document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (ytmp - e.clientY);
    		}
    		else if(bas){
    			document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight);
    		}
    		else{
    			document.getElementById(idEnCours).style.left = e.clientX - (xinit-x);
    			document.getElementById(idEnCours).style.top = e.clientY - (yinit-y);
    		}*/
    	}
    	chercheCurseur(e, 'dim1');
    	chercheCurseur(e, 'dim2');
    }
     
    function chercheCurseur(e, id){
    	xtmp = document.getElementById(id).offsetLeft;
    	ytmp = document.getElementById(id).offsetTop;
    	// cherche le curseur adapté
    	if(e.clientX >= xtmp && e.clientX <= xtmp+2){
    		document.getElementById('body').style.cursor = "w-resize";
    		if(e.clientY >= ytmp && e.clientY <= ytmp+2){
    			document.getElementById('body').style.cursor = "nw-resize";
    		}
    		else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
    			document.getElementById('body').style.cursor = "sw-resize";
    		}
    	}
    	else if(e.clientX >= xtmp + document.getElementById(id).offsetWidth-2 && e.clientX <= xtmp + document.getElementById(id).offsetWidth){
    		document.getElementById('body').style.cursor = "e-resize";
    		if(e.clientY >= ytmp && e.clientY <= ytmp+2){
    			document.getElementById('body').style.cursor = "ne-resize";
    		}
    		else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
    			document.getElementById('body').style.cursor = "se-resize";
    		}
    	}
    	/*else if(e.clientY >= ytmp && e.clientY <= ytmp+2){
    		document.getElementById('body').style.cursor = "n-resize";
    	}
    	else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
    		document.getElementById('body').style.cursor = "s-resize";
    	}*/
    	else{
    		document.getElementById('body').style.cursor = "move";
    	}
    }
     
    function fin(e){
    	initier = false;
    	gauche = false;
    	droite = false;
    	haut = false;
    	bas = false;
    }
     
    function reset(){
    	document.getElementById('body').style.cursor = "auto";
    }
     
    </script>
    </head>
    <body id="body" onmousemove="bouge(event);" onmouseup="fin(event);">
    <div id="dim1" onmouseout="reset();" onmousedown="init(event, 'dim1');">bla</div>
    <div id="dim2" onmouseout="reset();" onmousedown="init(event, 'dim2');">bla</div>
    </body>
    </html>
    Cependant dans un cas le curseur se modifie quand on passe sur le div bleu mais pas pour le rouge.
    Pourquoi cela ne fonctionne pas? Dois je faire autrement?

    Merci pour votre aide.

  2. #2
    Membre éclairé
    Inscrit en
    Janvier 2006
    Messages
    716
    Détails du profil
    Informations forums :
    Inscription : Janvier 2006
    Messages : 716
    Par défaut
    Est ce que quelqu'un pourrait m'aider?

    C'est si compliquer que ça que de changer la forme de curseur pourtant sur de nombreux site il y arrive...

    AIdez moi s'il vous plait

    Merci pour votre aide

  3. #3
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    sans trop regarder le code :

    => au moment de ton mouseover, regarde ou te trouves tu dans ton élément , si tu te trouve à 0 du bord gauche = curseur de redimenssionement ( je mettrais même une valeur minimum de 10, si tu est a 10 du bord droit = curseur , sinon rien ...

    voila pour l'algo

  4. #4
    Membre éclairé
    Inscrit en
    Janvier 2006
    Messages
    716
    Détails du profil
    Informations forums :
    Inscription : Janvier 2006
    Messages : 716
    Par défaut
    Cependant, je n'ai pas de mouseover...
    C'est la fonction chercheCurseur qui modifie le curseur
    Cela fonctionne très bien pour un objet, mais pas pour l'autre

  5. #5
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    travaille plutôt sur tes objets que sur l'écran global

  6. #6
    Membre éclairé
    Inscrit en
    Janvier 2006
    Messages
    716
    Détails du profil
    Informations forums :
    Inscription : Janvier 2006
    Messages : 716
    Par défaut
    J'ai essayer de déplacer le code suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onmousemove="bouge(event);" onmouseup="fin(event);">
    dans mes 2 bloc div mais cela ne change rien. Ca ne fonctionne toujours pas.

    Pourriez vous m'expliquer comment faire stp?
    Ou connaissez vous un site qui expliquer la gestion graphique des div en javascript?

    Merci pour votre aide

Discussions similaires

  1. [POO] onmouseover et DIV
    Par diva_69 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 27/05/2008, 12h03
  2. [POO] modification de value
    Par Greatmangaka dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 22/05/2008, 15h51
  3. Modification Graphique Access par code
    Par p935754 dans le forum VBA Access
    Réponses: 3
    Dernier message: 29/02/2008, 22h31
  4. modif graphique access
    Par sunwind dans le forum IHM
    Réponses: 0
    Dernier message: 02/09/2007, 09h36
  5. Modification graphique ACCESS
    Par sunwind dans le forum Requêtes et SQL.
    Réponses: 1
    Dernier message: 15/08/2007, 07h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo