Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Div centrato verticalmente indipendente da lung pagina

    Ciao.
    attualmente visualizzo un livello centrato rispetto al 100% della pagina sia oriz che vert.
    Questa cosa mi va bene fino a che io ho un div id contenitore al 100%, ma se
    cambio layout e ho una pagina abbastanza lunga( tipo un blog) come posso fare per aprire un div che si posizioni sempre al centro indipendentemente da dove si trova lo scroll?

    Grazie, ciao

  2. #2
    ti conviene metterlo in position: absolute; poi fai una funzione per calcolare la dimensione della finestra:

    codice:
    function windowSize(){
     var s = {w : 0, h : 0};
      if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        s.w = window.innerWidth;
        s.h = window.innerHeight;
      } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        s.w = document.documentElement.clientWidth;
        s.h = document.documentElement.clientHeight;
      } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        s.w = document.body.clientWidth;
        s.h = document.body.clientHeight;
      }
      return s;
    }
    poi crei una funzione per modificare il top del div che ti interessa

    codice:
    var divH = 200; //L'altezza del DIV
    var divID = "MyDiv"; //L'ID del Div da modificare
    
    function AlterTop(){
       var s = windowSize();
       var top = Math.floor((s.h - divH)  / 2);
       var elem = document.all ? document.all[divID] : document.getElementById(divID);
       elem.style.top = top + "px";
    }
    infine applichi questa funzione agli eventi onload e onresize della pagina:

    codice:
    window.onload = AlterTop;
    window.onresize = AlterTop;
    I DON'T Double Click!

  3. #3

    grazie

    Ciao sono stato fuori ufficio,
    ti volevo ringraziare per l'esempio funziona perfettamente.
    Ciao

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.