Problème de replacement de <div>

Sujet résolu

28 novembre 2010 à 0:14:23

Salut à tous !
J'ai un problème :euh:

J'ai une fenêtre de tchat que je peux fermer en appuyant sur la croix. Je peux aussi agrandir la fenêtre de tchat au maximum, ainsi que la bouger. Je voudrais faire deux trucs :
1) Ne pas pouvoir bouger la fenêtre quand la fenêtre de tchat est au maximum
2) Replacer le bloc à l'endroit où il était avant d'appuyer sur le bouton agrandir

Voici mon code :

<!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>Bienvenue sur mon Tchat !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
		body {
		background-color: red;
		}
		.barre {
		background-color: blue;
		width: 100%;
		height: 8%;
		border-bottom: 1px solid black;
		color: white;
		font-family: "Comic Sans MS", serif;
		}
		.tchat {
		border: black 1px solid;
		position: fixed top right;
		width: 500px;
		height: 325px;
		background-color: white;
		}
		label {
		width: 20%;
		display: block;
		float: left;
		}
		.messages {
		overflow: scroll;
		width: 100%;
		height: 62%;
		font-size: 10px;
		overflow-x: hidden;
		border-bottom: 1px solid black;
		}
		</style>
   </head>
   <body>
   <div id="tchat" class="tchat">
   <div class="barre" id="barre" onmousedown="start_drag(document.getElementById('tchat'), event);">
   <span style="padding-left: 5px;display: block;">Mon super tchat !
   <button style="float: right;" id="X">X</button>
   <button style="float: right;" id="[]">[]</button>
   <button style="float: right;display: none;" id="][">][</button>
   </span></div>
   <div id="messages" class="messages">
	
	<?php
	$adresse = "";
	$pseudo = "";
	$mdp = "";
	$bdd = "";
	mysql_connect($adresse, $pseudo, $mdp);
	mysql_select_db($bdd);
	if(isset($_POST['submit'])){
	if(empty($_POST['pseudo']) AND empty($_POST['message'])){
	echo 'Votre pseudo et votre message sont vides !';
	}
	else if(empty($_POST['pseudo'])){
	echo 'Votre pseudo est vide !';
	}
	else if(empty($_POST['message'])){
	echo 'Votre message est vide !';
	}
	else{
	mysql_query("INSERT INTO tchat VALUES('','".$_POST['pseudo']."','".$_POST['message']."', NOW())");
	}
	}
	$reponse = mysql_query("SELECT pseudo, message, DATE_FORMAT(date_message, '%Hh%i le %d/%m/%Y') AS date  FROM tchat ORDER BY ID DESC LIMIT 0, 15");
	while ($donnees = mysql_fetch_array($reponse))
		{
			echo '<p><strong>' . htmlspecialchars($donnees['pseudo']) . '</strong> <em>à '.$donnees['date'].'</em> : ' . htmlspecialchars($donnees['message']) . '</p>';
		}
	?>
	</div>
	<form action="tchat2.php" method="post">
    <p>
        <label for="pseudo">Pseudo :</label> <input type="text" name="pseudo" id="pseudo" style="margin-bottom: 5px;width: 200px;"/><br />
        <label for="message">Message :</label> <input type="text" name="message" id="message" style="width: 375px;margin-bottom: 5px;"/><br/>
        <input type="submit" value="Envoyer" name="submit" />
	</p>
	</form>
	</div>
		<script>
		document.getElementById("X").onclick = function() {
		document.getElementById("tchat").style.display = "none";
		}
		
		
		

		var dragged = null;

var dX, dY;

function start_drag(objet,event)
{
  dragged = objet;
	
	event.returnValue = false;
	if( event.preventDefault ) event.preventDefault();
	
	//Coordonnées de la souris
  var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
  var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
	

	//Coordonnées de l'élément
  var eX = 0;
  var eY = 0;
  var element = objet;
  do
  {
    eX += element.offsetLeft;
    eY += element.offsetTop;
    element = element.offsetParent;
  } while( element && element.style.position != 'absolute');

	//Calcul du décallage
  dX = x - eX;
  dY = y - eY;


}

function drag_onmousemove(event) 
{
  if( dragged ) 
  {
    var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
		
		//On applique le décalage
		x -= dX;
		y -= dY;

    dragged.style.position = 'absolute';
    dragged.style.left = x + 'px';
    dragged.style.top = y + 'px';
  }
}

function drag_onmouseup(event) 
{
  dragged = null; //On arrête le drag&drop
}

function addEvent(obj,event,fct)
{
  if( obj.attachEvent)
     obj.attachEvent('on' + event,fct);
  else
     obj.addEventListener(event,fct,true);
}

addEvent(document,'mousemove',drag_onmousemove);
addEvent(document,'mouseup',drag_onmouseup);

var width = document.getElementById("tchat").style.width;
		var height = document.getElementById("tchat").style.height;
		var left = document.getElementById("tchat").style.left;
		var top = document.getElementById("tchat").style.top;
		
		document.getElementById("[]").onclick = function() {
		document.getElementById("tchat").style.width = "100%";
		document.getElementById("tchat").style.height = "100%";
		document.getElementById("tchat").style.position = "absolute";
		document.getElementById("tchat").style.left = "0";
		document.getElementById("tchat").style.top = "0";
		document.getElementById("tchat").style.border = "none";
		document.getElementById("barre").style.height = "25px";
		document.getElementById("[]").style.display = "none";
		document.getElementById("][").style.display = "inline";
		}
		document.getElementById("][").onclick = function() {
		document.getElementById("tchat").style.width = width;
		document.getElementById("tchat").style.height = height;
		document.getElementById("tchat").style.position = "fixed";
		document.getElementById("tchat").style.left = left;
		document.getElementById("tchat").style.top = top;
		document.getElementById("tchat").style.border = "1px solid black";
		document.getElementById("barre").style.height = "25px";
		document.getElementById("[]").style.display = "inline";
		document.getElementById("][").style.display = "none";
		}
		</script>
   </body>
</html>

PS : Il n'y a aucun problème au niveau du contenu de la div principale

Merci de votre aide

Golmote

28 novembre 2010 à 0:25:55

<!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>Bienvenue sur mon Tchat !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
		body {
		background-color: red;
		}
		.barre {
		background-color: blue;
		width: 100%;
		height: 8%;
		border-bottom: 1px solid black;
		color: white;
		font-family: "Comic Sans MS", serif;
		}
		.tchat {
		border: black 1px solid;
		position: fixed top right;
		width: 500px;
		height: 325px;
		background-color: white;
		}
		label {
		width: 20%;
		display: block;
		float: left;
		}
		.messages {
		overflow: scroll;
		width: 100%;
		height: 62%;
		font-size: 10px;
		overflow-x: hidden;
		border-bottom: 1px solid black;
		}
		</style>
   </head>
   <body>
   <div id="tchat" class="tchat">
   <div class="barre" id="barre">
   <span style="padding-left: 5px;display: block;">Mon super tchat !
   <button style="float: right;" id="X">X</button>
   <button style="float: right;" id="[]">[]</button>
   <button style="float: right;display: none;" id="][">][</button>
   </span></div>
   <div id="messages" class="messages">
	
	<?php
	$adresse = "";
	$pseudo = "";
	$mdp = "";
	$bdd = "";
	mysql_connect($adresse, $pseudo, $mdp);
	mysql_select_db($bdd);
	if(isset($_POST['submit'])){
	if(empty($_POST['pseudo']) AND empty($_POST['message'])){
	echo 'Votre pseudo et votre message sont vides !';
	}
	else if(empty($_POST['pseudo'])){
	echo 'Votre pseudo est vide !';
	}
	else if(empty($_POST['message'])){
	echo 'Votre message est vide !';
	}
	else{
	mysql_query("INSERT INTO tchat VALUES('','".$_POST['pseudo']."','".$_POST['message']."', NOW())");
	}
	}
	$reponse = mysql_query("SELECT pseudo, message, DATE_FORMAT(date_message, '%Hh%i le %d/%m/%Y') AS date  FROM tchat ORDER BY ID DESC LIMIT 0, 15");
	while ($donnees = mysql_fetch_array($reponse))
		{
			echo '<p><strong>' . htmlspecialchars($donnees['pseudo']) . '</strong> <em>à '.$donnees['date'].'</em> : ' . htmlspecialchars($donnees['message']) . '</p>';
		}
	?>
	</div>
	<form action="tchat2.php" method="post">
    <p>
        <label for="pseudo">Pseudo :</label> <input type="text" name="pseudo" id="pseudo" style="margin-bottom: 5px;width: 200px;"/><br />
        <label for="message">Message :</label> <input type="text" name="message" id="message" style="width: 375px;margin-bottom: 5px;"/><br/>
        <input type="submit" value="Envoyer" name="submit" />
	</p>
	</form>
	</div>
		<script>
document.getElementById("X").onclick = function () {
    document.getElementById("tchat").style.display = "none";
};




var dragged = null;

var dX, dY;

function start_drag(objet, event) {
    dragged = objet;

    event.returnValue = false;
    if (event.preventDefault) event.preventDefault();

    //Coordonnées de la souris
    var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);


    //Coordonnées de l'élément
    var eX = 0;
    var eY = 0;
    var element = objet;
    do {
        eX += element.offsetLeft;
        eY += element.offsetTop;
        element = element.offsetParent;
    } while (element && element.style.position != 'absolute');

    //Calcul du décallage
    dX = x - eX;
    dY = y - eY;


}

function drag_onmousedown(event) {
    start_drag(this, event);
}

function drag_onmousemove(event) {
    if (dragged) {
        var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
        var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);

        //On applique le décalage
        x -= dX;
        y -= dY;

        dragged.style.position = 'absolute';
        dragged.style.left = x + 'px';
        dragged.style.top = y + 'px';
    }
}

function drag_onmouseup(event) {
    dragged = null; //On arrête le drag&drop
}

function addEvent(obj, event, fct) {
    if (obj.attachEvent) obj.attachEvent('on' + event, fct);
    else obj.addEventListener(event, fct, false);
}

function removeEvent(obj, event, fct) {
    if (obj.detachEvent) obj.detachEvent('on' + event, fct);
    else obj.removeEventListener(event, fct, false);
}
addEvent(document.getElementById('tchat'), 'mousedown', drag_onmousedown);
addEvent(document, 'mousemove', drag_onmousemove);
addEvent(document, 'mouseup', drag_onmouseup);

var width = document.getElementById("tchat").style.width;
var height = document.getElementById("tchat").style.height;
var left = document.getElementById("tchat").style.left;
var top = document.getElementById("tchat").style.top;

document.getElementById("[]").onclick = function () {
    removeEvent(document.getElementById('tchat'), 'mousedown', drag_onmousedown);
    removeEvent(document, 'mousemove', drag_onmousemove);
    removeEvent(document, 'mouseup', drag_onmouseup);
    width = document.getElementById("tchat").style.width;
    height = document.getElementById("tchat").style.height;
    left = document.getElementById("tchat").style.left;
    top = document.getElementById("tchat").style.top;
    document.getElementById("tchat").style.width = "100%";
    document.getElementById("tchat").style.height = "100%";
    document.getElementById("tchat").style.position = "absolute";
    document.getElementById("tchat").style.left = "0";
    document.getElementById("tchat").style.top = "0";
    document.getElementById("tchat").style.border = "none";
    document.getElementById("barre").style.height = "25px";
    document.getElementById("[]").style.display = "none";
    document.getElementById("][").style.display = "inline";
};
document.getElementById("][").onclick = function () {
    addEvent(document.getElementById('tchat'), 'mousedown', drag_onmousedown);
    addEvent(document, 'mousemove', drag_onmousemove);
    addEvent(document, 'mouseup', drag_onmouseup);
    document.getElementById("tchat").style.width = width;
    document.getElementById("tchat").style.height = height;
    document.getElementById("tchat").style.position = "fixed";
    document.getElementById("tchat").style.left = left;
    document.getElementById("tchat").style.top = top;
    document.getElementById("tchat").style.border = "1px solid black";
    document.getElementById("barre").style.height = "25px";
    document.getElementById("[]").style.display = "inline";
    document.getElementById("][").style.display = "none";
};
		</script>
   </body>
</html>

Je te laisse constater les changements et en tirer les apprentissages nécessaires.

cornedrue

28 novembre 2010 à 0:51:02

Merci beaucoup déjà, et ensuite je ne vois pas ce que tu as fait pour résoudre mon deuxième problème, même si ça marche, pourrais-tu me l'expliquer stp ? merci

Golmote

28 novembre 2010 à 0:53:32

Il s'agit simplement des lignes 171 à 174

cornedrue

28 novembre 2010 à 0:56:51

AH oui merci beaucoup j'avais pas vu qu'il était "en double"