Salut à tous !
Je voudrais rendre le design d'un div quelconque extensible VERS LE BAS. Je voudrais savoir comment on fait svp ?
Peut-être avec un <hr id="hr" /> en position absolute et offset.Top = height, et le hr.onmouseover = le curseur + la modification...

EDIT : je pensais faire ça avec un event.clientX et Y mais je ne sais pas concrètement comment faire...

Inspire-toi d'exemples existants.

Par exemple le resizable de jQuery UI, où les zones de redimensionnement sont des divs :

et on le trouve ou ?

Euh, y'a un site, je sais pas si tu connais :

http://tinyurl.com/26vzhaf

Je précise que je ne veux pas le faire avec jQuery, mais avec onmousedown, onmousemove et onmouseup

J'ai pas dit de le faire avec jQuery. J'ai dit de t'inspirer de son fonctionnement.

Notamment la présence des trois zones montrées sur les images de mon précédent post.

Donc tu crées ces zones, tu leur affectes les events listeners qui vont bien, tu fais tes petits calculs avec e.clientX, e.clientY, element.offsetLeft, element.offsetTop et peut-être d'autres si besoin, tu modifies les attributs CSS de ton éléments en fonction de tes calculs... et le tour est joué.

oui mais ça je savais le pb c'est le calcul

T'as pris le temps de choper une feuille de de faire un dessin ?

Pour faire un redimensionnement vertical, la nouvelle hauteur de ton élément est égale à la position Y de la souris mois la position Y de ton élément (les deux étant calculés depuis le haut du document).


Il faut donc calculer la position Y de ton élément. C'est la seule et unique "difficulté" :

var elmt = ton_element;
var top = 0;
do {
    top += elmt.offsetTop;
} while (elmt = elmt.offsetParent);

Voilà, le plus dur est fait.

c'est quoi ce qu'il y a dans le while ? (exxuse moi mais je cherche toujours a comprendre ce que je copie )

Crois-moi que je ne te reprocherai pas ça

Le do/while se charge d'additionner tous les offsetTop de l'élément et de ses parents.

Dans la conditionnelle, on affecte à elmt son offsetParent. S'il existe, la boucle continue, sinon la boucle s'arrête.

ok

Alors tu t'en sors ?

Ba je ferais sa se soir si j'ai un problème je te dis

Ok.

Est-ce que c'est un truc du genre
document.getElementById("tchat").style.height = event.clientY - document.getElementById("tchat").offsetTop
?

Ouais... sauf que le top de l'élément, tu dois le calculer à l'aide du code que j'ai posté précédemment...

Et faut rajouter +"px" à la fin.

ok j'essaierais ce soir

Ok.

Sa marche presque ! regarde : http://www.la-carte-du-maraudeur.webou [...] at/tchat2.php

EDIT : Nan en fait ça déconne
Regarde mon code :

document.getElementById("tchat").style.width = "500px";
        document.getElementById("tchat").style.height = "325px";
		
		
		// fermeture
		document.getElementById("X").onclick = function() {
		document.getElementById("tchat").style.display = "none";
		}
		document.getElementById("X2").onclick = function() {
		document.getElementById("tchat").style.display = "none";
		}
		
		
		
		function curseur(element, event) {
		var appui = null;
		dY = event.clientY - element.offsetTop;
                dX = event.clientX - element.offsetLeft;
		if (document.getElementById("tchat").style.width != "100%") {
		if (dY <= "3") {
		appui = "ok";
		if(dX <= "3") {
		var fleche = "diagonale";
		document.getElementById("tchat").style.cursor  = "nw-resize";
		document.getElementById("barre").style.cursor = "nw-resize";
		}
		else if (dX >= "497") {
		var fleche = "diagonale";
		document.getElementById("tchat").style.cursor  = "ne-resize";
		document.getElementById("barre").style.cursor = "ne-resize";
		}
		else {
		var fleche = "haut-bas";
		document.getElementById("tchat").style.cursor  = "n-resize";
		document.getElementById("barre").style.cursor = "n-resize";
		}
		}
		
		else if (dY >= "323") {
		appui = "ok";
		if (dX <= "3") {
		var fleche = "diagonale";
		document.getElementById("tchat").style.cursor  = "sw-resize";
		document.getElementById("barre").style.cursor = "sw-resize";
		}
		else if (dX >= "497") {
		var fleche = "diagonale";
		document.getElementById("tchat").style.cursor  = "se-resize";
		document.getElementById("barre").style.cursor = "se-resize";
		}
		else {
		var fleche = "haut-bas";
		document.getElementById("tchat").style.cursor  = "s-resize";
		document.getElementById("barre").style.cursor = "s-resize";
		}
		}
		
		else if (dX <= "3") {
		appui = "ok";
		var fleche = "gauche-droite";
		document.getElementById("tchat").style.cursor  = "w-resize";
		document.getElementById("barre").style.cursor = "w-resize";
		}
		
		else if (dX >= "497") {
		appui = "ok";
		var fleche = "gauche-droite";
		document.getElementById("tchat").style.cursor  = "e-resize";
		document.getElementById("barre").style.cursor = "e-resize";
		}
		
		else {
		appui = null;
		document.getElementById("tchat").style.cursor = "auto";
		document.getElementById("barre").style.cursor = "move";
		} }
		
		
if (appui == "ok" && down == "ok") {
var elmt = tchat;
if (fleche == "haut-bas" || fleche == "diagonale") {
elmt.style.height = event.clientY - elmt.offsetTop;
}
if (fleche == "gauche-droite" || fleche == "diagonale") {
elmt.style.width = event.clientX - elmt.offsetLeft;
}		
		}
		
		}

var down = null;
document.getElementById("tchat").onmousedown = function () {
down = "ok";
}

document.getElementById("tchat").onmouseup = function () {
down = null;
}

Pour résumer, regarde sur le lien, j'ai un bloc qui se redimensionne si tu bouge la souris et si tu reste enfoncé dessus, et si le curseur est une fleche. Mais la redimension déconne

Problèmes :
1) Quand on réduit la fenêtre, on ne peut la réduire que jusqu'à sa taille d'origine maximum.
2) Quand on veut agrandir vers le bas, il faut faire très doucement
3) Vers la gauche et vers la droite ne marche pas
4) Vers le haut sa déconne
Merci de m'aider car je vois pas du tout comment faire

Euh... On avait pas parlé de créer un <div> servant de zone de redimensionnement et tout et tout ?

<div id="test" style="position:absolute;width:150px;height:150px;overflow-y:scroll;border:1px solid black;">
    Suspendisse elit enim, feugiat vitae gravida ac, egestas ut massa. Vivamus
    auctor varius sodales. Fusce pellentesque, urna quis dignissim posuere,
    erat risus semper odio, eu rutrum turpis nisl et ligula. Suspendisse vulputate
    malesuada eleifend. Cras bibendum nulla non dolor ullamcorper laoreet.
    Aliquam scelerisque malesuada enim eu pellentesque. Vestibulum non elit
    at lectus consectetur eleifend ac et felis. Sed quis adipiscing quam. Sed
    magna eros, commodo sed scelerisque ut, rhoncus ut sem. Cras at nisl eget
    purus mollis porta. Praesent blandit, justo quis aliquam dapibus, sapien
    sem feugiat tellus, quis laoreet nibh metus ac enim. Aliquam a sem id diam
    tempus accumsan eu eget nisi. Pellentesque nulla tellus, viverra interdum
    mattis at, facilisis non erat. Nunc molestie, metus scelerisque dignissim
    volutpat, ligula leo porttitor risus, sed venenatis nunc urna ac ante.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos. Nunc nibh diam, porta non facilisis vitae, porttitor
    eu lacus. Proin scelerisque convallis vehicula. Integer quis magna et metus
    pharetra tincidunt sit amet cursus dui.
    <div id="test_resize_bottom" style="position:absolute;bottom:-5px;width:100%;height:10px;cursor:s-resize;">
    </div>
</div>
<script type="text/javascript">
    function addEvent(obj, event, fct) {
        if (obj.attachEvent) obj.attachEvent('on' + event, fct);
        else obj.addEventListener(event, fct, true);
    }

    window.onload = function() {

        // div est l'élément redimensionnable
        var div = document.getElementById('test'),
        // resizeBottom est la zone de redimensionnement située en bas (cf code HTML)
        resizeBottom = document.getElementById('test_resize_bottom'),
        // top sera utilisée pour stocker la position absolue du div
        top,
        // down sera utilisée pour représenter le mousedown de la souris
        down = false,

        // La fonction resize se base sur l'objet Event pour redimensionner l'élément
        resize = function(e) {
            // 50 est la hauteur minimum et 250 la hauteur maximum
            div.style.height = Math.min(Math.max(e.clientY - top, 50), 250) + 'px';
        };

        // Au mousedown sur la zone de redimensionnement
        addEvent(resizeBottom, 'mousedown', function(e) {
            e = e || window.event;
            // On empêche le comportement par défaut du mousedown
            if (e.preventDefault) {
                e.preventDefault();
            }
            else {
                e.returnValue = false;
            }

            // On applique le cursor sur le body, pour plus d'esthétique
            document.body.style.cursor = 's-resize';

            // On initialise le top à 0
            top = 0;
            // On va calculer le top absolu de l'élément, comme déjà vu.
            var el = div;
            do {
                top += el.offsetTop;
            } while (el = el.offsetParent);

            // On met down à true
            down = true;
        });

        // Au mousemove sur le document
        addEvent(document, 'mousemove', function(e) {
            e = e || window.event;
            // On empêche le comportement par défaut du mousemove
            if (e.preventDefault) {
                e.preventDefault();
            }
            else {
                e.returnValue = false;
            }
            // Si on est en train de redimensionner
            if (down) {
                // On redimensionne
                resize(e);
            }
        });

        // Au mouseup sur le document
        addEvent(document, 'mouseup', function(e) {
            // Si on est en train de redimensionner
            if (down) {
                // On réinitialise le curseur du body
                document.body.style.cursor = '';
                // Et on repasse down à false
                down = false;
            }
        });
    };
</script>

Et je suis considérablement déçu de constater que le code que j'avais ajouté pour tes deux précédents problèmes a disparu... et qu'il a été remplacés par des trucs tout à fait douteux... Autrement dit "RAF que t'essayes de m'aider, je ferai quand même ça à ma sauce, et je le ferai mal !"... Youpi.

C'est pourquoi j'arrête ici ma tentative pour t'aider, et je te laisse terminer ça tout seul. Comme ça, tu peux faire ce que tu veux de ce code, je ne serai pas là pour constater l'étendue des dégâts.


Note : Si ce code est censé servir dans la partie 2 de ton tutoriel... t'as intérêt à le repenser dans sa totalité. Sincèrement.

Ne mélange pas l'HTML et le JS : mets tes événements dynamiquement. Tous.

Evite la répétition de code : crée des variables pour contenir tous tes éléments récupérés avec gEBI().

Aies une structure logique : déclare les variables au début des fonctions dans la mesure du possible, organise et ordonne ton code, indente-le !

Déjà, ce sera un bon début.


Voilà, c'était mes derniers conseils. Je te souhaite une bonne continuation.

Je ne l'ai pas suprimé, le code que je t'ai envoyé était entre 2 essais, dans lequel ta boucle n'y etait pas , voila tout

Je ne parlais pas de la boucle de calcul du top, mais de ton précédent problème.

Va voir dans agrandussement j'ai gardé le principal

Non, j'avais ajouté une fonction removeEvent, permettant de retirer de manière propre et efficace la possibilité de drag sur la barre de titre.

Toi tu préfères apparemment switcher entre deux barres (qui dit deux barres dit deux fois le même code (à peu de choses près)).


Si tu n'es pas en mesure de tenir compte des conseils ou fragments de code que je fais l'effort de te donner, je ne vois vraiment pas pourquoi je continuerais.

Quelqu'un d'autre s'en chargera peut-être.

Ba je vais le mettre ton code tkt

Sinon merci de ton code je l'étudie en détail

EDIT : Comment ça se fait que l'espace blanc entre le bouton Envoyer et la bordure du bas augmente si j'agrandis la fenêtre ?