Visualizzazione risultati 1 fino 13 di 13

Discussione: [jQuery] Posizionare DIV sempre al centro dello schermo

  1. #1
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,224

    Predefinito [jQuery] Posizionare DIV sempre al centro dello schermo

    Buonasera,
    ho la necessità di posizionare un DIV sempre al centro dello schermo anche in caso di scroll.

    Il codice che attualmente uso è:
    Codice:
    function PosizionaWin(){
    $(document).ready(function(){
    $("#bga").css("height",$("body").height()+100);
     $(window).resize(function(){
      $("#bgm").css({
       position:'absolute',left:($(window).width()-$("#bgm").outerWidth())/2,top:70/*($(window).height()-$("#bgm").outerHeight())/2*/
      });
     });
    $(window).resize();
    });
    }
    Che però mi posiziona il DIV a 70px dal top pagina, mentre se uso il codice originale:
    Codice:
    function PosizionaWin(){
    $(document).ready(function(){
    $("#bga").css("height",$("body").height()+100);
     $(window).resize(function(){
      $("#bgm").css({
       position:'absolute',left:($(window).width()-$("#bgm").outerWidth())/2,top:($(window).height()-$("#bgm").outerHeight())/2
      });
     });
    $(window).resize();
    });
    }
    Mi posiziona il DIV a metà della pagina.

    Per lo scroll invece uso questo:
    Codice:
    $(document).ready(function(){
        $(window).scroll(function(){
            PosizionaWin();  
        })
    })
    Ora io ho bisogno che sia al centro dell'area che vedo e, se scrollo la pagina, il DIV deve essere sempre centrato.

    Come devo risolvere?
    Apprezzi l'aiuto? Offrimi un caffè!

  2. #2
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,639

    Predefinito

    Se ti serve che sia fermo rispetto alla viewport (che non scorra assieme al documento) devi usare il posizionamento fisso (position: fixed). Ad ogni modo, è possibile centrare il tutto senza scomodare JQuery, solamente con l'uso di CSS.

  3. #3
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,224

    Predefinito

    Si lo so. Uso CSS per fixare al centro dello schermo il mio DIV tuttavia in questo caso non conosco con precisione la dimensione (perchè varia) del DIV e quindi voglio utilizzare jQuery.

    Il sito non è mobile, è un'applicazione facebook quindi non uso template responsive. Ho bisogno solamente che il DIV sia sempre al centro di ciò che vedo a prescindere dallo scroll.
    Apprezzi l'aiuto? Offrimi un caffè!

  4. #4
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,639

    Predefinito

    Allora mi sfugge qualcosa, perché imposti un posizionamento assoluto nel tuo script?

  5. #5
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,224

    Predefinito

    E cosa dovrei usare? In locale funziona benissimo mentre su facebook tutto cambia :S
    Apprezzi l'aiuto? Offrimi un caffè!

  6. #6
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,639

    Predefinito

    Beh, il posizionamento fisso come ti ho suggerito prima, no? In questo modo non devi stare a riposizionare il box quando si scorre la pagina.
    Ultima modifica di karl94 : 02-12-2013 alle ore 22.31.53

  7. #7
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,224

    Predefinito

    Scusami ma proprio non ti seguo... non so se sarà la stanchezza o altro... ma ti riferisci alla position:absolute?
    Apprezzi l'aiuto? Offrimi un caffè!

  8. #8
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,639

    Predefinito

    Esattamente, perché non position: fixed;? In questo modo non devi fare nulla quando avviene lo scorrimento.

  9. #9
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,224

    Predefinito

    Ho provato. Ma absolute, fixed o relative si comportano tutti allo stesso modo!
    Apprezzi l'aiuto? Offrimi un caffè!

  10. #10
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,639

    Predefinito

    Allora credo sia necessario vedere la pagina in questione per capire cosa succede. Hai provato ad ispezionare l'elemento con gli strumenti di sviluppo messi a disposizione dal tuo browser?

  11. #11
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,224

    Predefinito

    Si. Ora sto leggendo su google diversi siti che parlano di questo problema il quale sembra essere legato a facebook tuttavia non riesco proprio ad uscirne!
    Apprezzi l'aiuto? Offrimi un caffè!

  12. #12
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,639

    Predefinito

    Potrebbe essere una precauzione presa per contrastare cose come il clickjacking, ma potrei anche aver scritto una grande boiata.

  13. #13
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,224

    Predefinito

    Citazione Originalmente inviato da Christoph Broeckmann
    Fixed positioning will only work if there actually is something to scroll – so you would have to set your canvas to a fixed height and not use FB.Canvas.setAutoGrow, because that would adapt the iframe height so that there would be no scrollbars at all.
    Dal Facebook Developers Group.
    Apprezzi l'aiuto? Offrimi un caffè!

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •