Utility
Home Messaggi odierni FAQ Ricerca avanzata Lo staff del forum Regolamento Utenti Archivio
Visualizzazione dei risultati da 1 a 6 su 6
  1. 09-10-2003, 21:52 #1
    Lollys
    Lollys non č in linea
    Utente di HTML.it
    Registrato dal
    Aug 2003
    Messaggi
    514

    offsetTop offsetLeft

    Devo realizzare uno script per rilevare la posizione di un'immagine nel documento una volta che questo č caricato.

    Ho guardato dei script e su vari libri ho letto del metodo offseTop - offsetLeft !!!

    Sono riuscito a fare lo script, una cavolata, ma se l'oggetto si trova all'interno di una tabella o di un div non lo rileva come mai ?
    Ne sapete qualcosa, o ci sono altri sistemi ?


    Praticamente č:

    function leggi(){
    document.write(document.all.immagine.offsetTop)
    }





    [img]immagine.gif[/img]


    Cosi mi rileva la coordinata in altezza nel documento, ma se lo metto nella tabella etc... non vā ?????
    Rispondi quotando Rispondi quotando
  2. 09-10-2003, 23:01 #2
    br1
    br1 non č in linea
    Moderatore di JavaScript L'avatar di br1
    Registrato dal
    Jul 1999
    Messaggi
    19,998
    <script>
    function getPageCoords (element) { // thanks to 'Martin Honnen' for this function
    var coords = {x: 0, y: 0};
    while (element) {
    coords.x += element.offsetLeft;
    coords.y += element.offsetTop;
    element = element.offsetParent;
    }
    return coords;
    }

    </script>
    ...



    <table border=1><tr><td></td><td>
    <img src=100x100.gif
    onload="p=getPageCoords(this);alert(p.x);alert(p.y );">
    </td></tr></table>

    ciao
    Il guaio per i poveri computers e' che sono gli uomini a comandarli.

    Attenzione ai titoli delle discussioni: (ri)leggete il regolamento
    Consultate la discussione in rilievo: script / discussioni utili
    Usate la funzione di Ricerca del Forum
    Rispondi quotando Rispondi quotando
  3. 22-10-2003, 22:18 #3
    gemello.it
    gemello.it non č in linea
    Utente di HTML.it L'avatar di gemello.it
    Registrato dal
    Nov 2001
    Messaggi
    320
    Belliiiiissimo!!!
    Mi ci voleva proprio questo codicillo.

    BR1 potresti aiutarmi?
    Ho provato ad applicare il codice su un link e funziona.
    Come faccio a recuperare p.x e p.y e ad inserirli nei valori di una tabella con posizionamento assoluto?

    <script>
    // Rilevo posizione del llink
    function getPageCoords (element) {// thanks to 'Martin Honnen' for this function
    var coords = {x: 0, y: 0};
    while (element) {
    coords.x += element.offsetLeft;
    coords.y += element.offsetTop;
    element = element.offsetParent;


    }
    return coords;
    }
    </script>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    // Questo fa apparire e sparire la tabella (preso da HTML :-)
    function showTip(obj)
    { if (document.layers)
    { if (document.layers[obj] != null) document.layers[obj].visibility = 'visible';
    }
    else
    if (document.all) document.all[obj].style.visibility = 'visible';
    }

    function hideTip(obj)
    { if (document.layers)
    { if (document.layers[obj] != null) document.layers[obj].visibility = 'hidden';
    }
    else
    if (document.all)
    document.all[obj].style.visibility = 'hidden';
    }

    //-->
    </SCRIPT>

    <table border=1 align="right"><tr><td>
    ciao
    </td></tr></table>
    <div align="right"></div><div align="center"></div></body>

    <DIV ID="tipuno" style="visibility: hidden; position: absolute; left: ????????; top: ?????????;">
    <TABLE BGCOLOR="yellow" WIDTH="200"><TR><TD>
    Grazie dell'aiuto!!
    </TD></TR></TABLE></DIV>
    </html>
    Se avessi voluto risolvere i problemi con la forza, sarei nato Jedi.
    Rispondi quotando Rispondi quotando
  4. 13-11-2003, 19:09 #4
    drainus
    drainus non č in linea
    Utente di HTML.it
    Registrato dal
    Nov 2003
    Messaggi
    1
    script molto utile...
    oltre all'evento onload dell'immagine, si puo fare in modo che restituisca i valori delle coordinate anche quando si fa il resize della pagina ?

    :adhone:
    Rispondi quotando Rispondi quotando
  5. 28-11-2008, 17:21 #5
    homezappa
    homezappa non č in linea
    Utente di HTML.it L'avatar di homezappa
    Registrato dal
    Oct 2006
    Messaggi
    1,434
    br1 docet, ma io aggiungo:
    Codice PHP:
    <html>
    <    head>
    <    title>Scroll</title>
    <    script type="text/javascript">
    function     getPageCoords (element) { // thanks to 'Martin Honnen' for this idea
    var myElement, coords = {x: 0, y: 0};
            // prendo lo scroll del body
            myElement = element; // salvo l'elemento: mi riserve dopo
            while (element) {
                coords.x -= element.scrollLeft;
                coords.y -= element.scrollTop;
                element = element.offsetParent;
        }
            element = myElement; // l'avevo salvato
        // ora prendo l'offset dell'elemento
            while (element) {
                coords.x += element.offsetLeft;
                coords.y += element.offsetTop;
                element = element.offsetParent;
        }
            // ritorno le coordinate dell'angolo in alto a sx
        // dell'elemento considerate rispetto all'angolo
        // in alto a sinistra della finestra visibile
            return coords;
    } 
    function     vediScroll(idObj) {
        var     obj, coords;
            obj=document.getElementById(idObj);
            coords = getPageCoords(obj);
            alert("x:" + coords.x + "  y:" + coords.y);
    }
    </script>
    </head>
    <body onscroll="vediScroll('miodiv');">



    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus. 
    </p>
    <div id="miodiv" style="border: 1px solid black">Il div &egrave; qua!</div>



    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus. 
    </p>



    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus. 
    </p>



    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus. 
    </p>



    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus. 
    </p>



    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec tortor. Nulla imperdiet risus quis mauris. Morbi nec felis ac ligula auctor volutpat. Ut nibh mi, lacinia ac, interdum ac, tempus non, lacus. Praesent hendrerit fringilla enim. Donec tellus. Donec eget pede ut felis commodo fringilla. Fusce aliquam. Morbi a felis a purus feugiat gravida. Donec condimentum est eget lorem. Aliquam placerat venenatis nisl. Sed volutpat, urna vel mollis cursus, lorem nulla elementum nulla, vitae viverra sapien lorem ut augue. Quisque lacus urna, gravida quis, lacinia non, porta vel, mi. In orci. Donec suscipit, lorem non interdum sagittis, enim urna aliquet eros, nec auctor tortor pede vel sem. Mauris commodo aliquet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat quam a lorem. Phasellus tellus lacus, luctus mattis, porta vel, vehicula a, metus. 
    </p>
    </body>
    </html> 
    Restituisce le coordinate dell'angolo in alto a sx di un elemento della pagina riferite all'angolo in alto a sx della parte visibile della pagina, attivabile onscroll.

    HTH
    Zappa
    [PC:Presario 2515EU][Cpu:P4@2.3GHz][Ram: 512M][HDU:80G@5400 RPM]
    [Wireless:LinkSys][OS: Ubuntu 9.04 - Jaunty Jackalope]
    Rispondi quotando Rispondi quotando
  6. 07-02-2011, 18:56 #6
    TrueLies
    TrueLies non č in linea
    Utente di HTML.it L'avatar di TrueLies
    Registrato dal
    Jul 2007
    Messaggi
    731
    Essendo in tema, ed esendo rubricato fra i thread utili, magari qualcuno potrā trovare utile (o trarne spunti) anche questa soluzione a problemi simili (posizionamento con scroll della pagina, e verifica anche degli overflow rispetto ai bordi o alle scrollbars quando si desidera posizonare un elemento dentro ad un altro elemento): Javascript Layers Positioning Detect Page Scroll, Box Border Scrollbars Overflow
    Rispondi quotando Rispondi quotando
« Discussione precedente | Prossima discussione »

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  

Regole del Forum

Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.