iframe ridimensionabile ocn il mouse

**ghini76** · 06-01-2007, 14:17

Ciao a tutti,
ma gli iframe non si possono ridimensionare con il mouse come soliti frame?
Vorrei fare qualcosa come sul sito MSDN ed ho visto che usano gli iframes per separare il TreeView dal testo e l'iframe è ridimensionabile trascinando il bordo con il mouse.
Mi date una dritta per creare una pagina strutturata tipo MSDN?

Grazie a tutti

**Dardino** · 16-01-2007, 13:27

Per poter ridimensionare un iframecon il mouse devi crearel'iframe dentro un tag DIV e dargli un nome es:

codice:

    <div id="frameridimensionabile" style="width: 250px; height: 250px; padding-right: 2px; padding-left: 0px; padding-bottom: 3px; padding-top: 0px; cursor: se-resize; background-color: darkblue;">
        <iframe src="mypage.htm" id="myframe" style="width:100%; height: 100%"></iframe>
    </div>

a questo punto devi crearti 3 script in java:

il primo (su mouse down nel documento) controlla se l'oggetto destinatario del click è l'oggetto "frameridimensionabile" in caso positivo registri in variabili globali le dimesioni vecchie (ti servono per calcolare l'offset dal puntatore) e imposti una variabile globale a true (es. ridimensiona=true) per ricordarti che puoi ridimensionare.

il secondo (su mouse up nel documento) devi terminare il resize per cui azzeri le variabili globali.

il terzo, quello + importante, serve per ridimensionare per cui l'evento del documento da intercettare sarà su mouse move. qui fai il controllo che se ho già impostato la variabile globale allora calcolo le nuove dimensioni a partire dalle vecchie + l'offset che c'è con il mouse; se invece non l'ho impostata allora non faccio niente.

mi dispiace che non ho tempo ora di scriverti il codice per il movimento ma appena posso te lo invio

**Dardino** · 16-01-2007, 14:17

Ecco lo script per ridimensionare gli oggetti:

codice:

<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
        var ridimensiona = false;
        var mywidth = 1;
        var myheight = 1;
        var oldX = 1;
        var oldY = 1;
        var objToResize = null;
        
        function startRedim(e) {
            if (!e) var e = window.event; /* mi serve per catturare i parametri dell'evento */
            myObj = (e.target)? e.target : e.srcElement; /* prelevo l'oggetto destinatario del click */
            if (myObj.id=="frameridimensionabile") {
                ridimensiona = true;
                oldX = e.clientX
                oldY = e.clientY
                mywidth = myObj.style.width.replace("pt", "").replace("px", "");
                myheight = myObj.style.height.replace("pt", "").replace("px", "");
                objToResize = myObj;
            }
        }
        
        function endRedim(e) {
            if (!e) var e = window.event; /* mi serve per catturare i parametri dell'evento */
            /* se smetto di premere il tasto allora smetto di ridimensionare */
            ridimensiona = false;
        }
        
        function formRedim(e) {
            if (!e) var e = window.event; /* mi serve per catturare i parametri dell'evento */
            if (ridimensiona==true) {
                newX = e.clientX
                newY = e.clientY
                offX = Number(newX) - Number(oldX);
                offY = Number(newY) - Number(oldY);
                newW = Number(mywidth) + Number(offX);
                newH = Number(myheight) + Number(offY);
                /* controllo su una misura minima ad es. 100x100 */
                if (Number(newW) > Number(100)) {
                    document.getElementById(objToResize.id).style.width = newW + "px";
                }
                if (Number(newH) > Number(100)) {
                    document.getElementById(objToResize.id).style.height = newH + "px";
                }
            }
        }
        
        document.onmousedown = startRedim;
        document.onmouseup = endRedim;
        document.onmousemove = formRedim;
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="frameridimensionabile" style="position:relative; width: 250px; height: 250px; padding-right: 5px; padding-left: 0px; padding-bottom: 5px; padding-top: 0px; cursor: se-resize; background-color: darkblue;">
        <iframe src="mypage.htm" id="myframe" style="width:100%; height: 100%"></iframe>
    </div>
    <div id="coordinate"></div>
    </form>
</body>
</html>

Discussione: iframe ridimensionabile ocn il mouse

Strumenti discussione

Ricerca discussione

Visualizza

iframe ridimensionabile ocn il mouse

Permessi di invio