Ayuda - Búsqueda - Miembros - Calendario
Versión Completa: HTML y CSS
Hard2Mano > Foros Misceláneos > Software / Sistemas Operativos / Programación
alvarITO
Buenas,

tengo que realizar una transición entre pantallas y había pensado mostrar una capa en toda la ventana mediante CSS y ocultarla en el onload del Body.. Lo he hecho, pero no me respeta la barra de desplazamiento, esto es, que si tiene una barra de desplazamiento la pantalla y la movemos mientras se carga, ya no tiene el efecto deseado.

¿Alguna idea?

Gracias.
alvarITO
¿Ninguna idea feliz? Aunque sea con un pequeño js externo... icon_confused.gif
alvarITO
Up ! icon_sad.gif
alvarITO
No one?
alvarITO
¡ Venga esos maquetadores !
tacho
¿Te refieres a este efecto?

http://www.panic.com/coda/
alvarITO
Me refiero a ese efecto sí, a cuando pinchas sobre el enlace ese que se pone un pop-up a modo de ventana modal... Luego ya se modificaría para adaptarlo a nuestro cliente icon_smile.gif
alvarITO
Parece que lo hacen con estas funciones:
CÓDIGO
function showLargePopup(elem) {

    var popFullscreen = document.getElementById('fullscreen');
    var popLarge = document.getElementById('largepopup');

    // Put the correct content in the pop-up

    //if (navigator.platform.indexOf('Mac') != -1) {
    //    document.getElementById('start-download').className = 'show';
    //    document.getElementById('wrong-os').className = 'hide';
    //} else {
    //    document.getElementById('start-download').className = 'hide';
    //    document.getElementById('wrong-os').className = 'show';
    //}

    document.getElementById('start-download').className = 'show';
    // document.getElementById('wrong-os').className = 'hide';
    
    // Make fullscreen thing really full screen, and show it
    getSize();
    popFullscreen.style.height = myScrollHeight + 'px';
    popFullscreen.style.display = 'block';
    
    // Position pop-up
    popLarge.style.left = ((myWidth - popLarge.offsetWidth) / 2) + 'px';
    popLarge.style.top = (((myHeight - popLarge.offsetHeight) / 2) + myScroll) + 'px';
    popLarge.style.visibility = 'visible';
    
    refreshTimer = setTimeout("setLocation('"+elem.getAttribute("href")+"')", 1500);

}

function setLocation(loc) {
    window.location = loc;
}

function hideLargePopup() {
    var popFullscreen = document.getElementById('fullscreen');
    var popLarge = document.getElementById('largepopup');
    
    popLarge.style.visibility = 'hidden';
    popFullscreen.style.display = 'none';
}


Para este HTML:

CÓDIGO
        <!-- Large Popup Dialog Thing -->    
        
        <div id="largepopup">
            
            <!-- Wrong OS Dialog -->
            <!-->
            <div id="wrong-os" class="hide">
                <div class="largepopup-content">
                    <h3>Coda is for Mac OS X only.</h3>
                    <p>Are you sure you want to download it?</p>                
                </div>
                <div class="largepopup-footer">
                    <ul>        
                        <li id="button-cancel"><a href="#" onclick="hideLargePopup(); return false"><img src="./img/button-cancel.png" alt="cancel-button" title="Cancel" onmouseover="this.src = 'img/button-cancel-rollover.png'" onmouseout="this.src = 'img/button-cancel.png'" onmousedown = "this.src = 'img/button-cancel-pressed.png'" onmouseup="this.src = 'img/button-cancel.png'" /></a></li>
                        <li id="button-ok"><a href="#" onclick=""><img src="./img/button-ok.png" alt="ok-button" title="OK" onmouseover="this.src = 'img/button-ok-rollover.png'" onmouseout="this.src = 'img/button-ok.png'" onmousedown = "this.src = 'img/button-ok-pressed.png'" onmouseup="this.src = 'img/button-ok.png'" /></a></li>
                    </ul>
                </div>
            </div> <--><!-- end Wrong OS dialog -->
            
            
            <!-- Start Download dialog -->

            <div id="start-download" class="hide">
                <div class="largepopup-content">
                    <h3>Your download has begun!</h3>
                    <p>You'll find Coda in your downloads folder. It's both the demo and the full version: try it out, then enter a serial number to unlock it.</p>
                </div>
                <div class="largepopup-footer">
                    <ul>
                        <li id="button-ok"><a href="#" onclick="hideLargePopup(); return false"><img src="./img/button-ok.png" alt="ok-button" title="OK" onmouseover="this.src = 'img/button-ok-rollover.png'" onmouseout="this.src = 'img/button-ok.png'" onmousedown = "this.src = 'img/button-ok-pressed.png'" onmouseup="this.src = 'img/button-ok.png'" /></a></li>

                    </ul>
                </div>
            </div><!-- end Start Download dialog -->


A ver si mañana desde el curro le puedo echar un ojo, gracias.

Yo lo que había intentado era hacer una pequeña "ñapa", que era crear una capa muy grande 10.000 x 10.000, ponerla como modal y ocultar e inhabilitar las barras de desplazamiento icon_razz.gif
alvarITO
tacho, muchas gracias, me sirvió.

Finalmente el código queda de la siguiente forma:

Función que setea el tamaño de la pantalla
CÓDIGO
var myWidth,myHeight,myScroll,myScrollWidth,myScrollHeight;
function getSize() {
     if (self.innerHeight) { // NO IE
             myWidth = window.innerWidth;
             myHeight = window.innerHeight;
             myScroll = window.pageYOffset;
     } else if (document.documentElement && document.documentElement.clientHeight) { // IE6
             myWidth = document.documentElement.clientWidth;
             myHeight = document.documentElement.clientHeight;
             myScroll = document.documentElement.scrollTop;
     } else if (document.body) { // Other IE, such as IE7
             myWidth = document.body.clientWidth;
             myHeight = document.body.clientHeight;
             myScroll = document.body.scrollTop;
     }
     if (window.innerHeight && window.scrollMaxY) {
             myScrollWidth = document.body.scrollWidth;
             myScrollHeight = window.innerHeight + window.scrollMaxY;
     } else if (document.body.scrollHeight > document.body.offsetHeight) { // No Explorer Mac
             myScrollWidth = document.body.scrollWidth;
             myScrollHeight = document.body.scrollHeight;
     } else { // Explorer Mac... ¿Explorer 6 Strict, Mozilla y Safari?
             myScrollWidth = document.body.offsetWidth;
             myScrollHeight = document.body.offsetHeight;
     }
}


Función que crea la capa de transición
CÓDIGO
// Llegados a este punto, ha pasado todas las validaciones, por lo que crearemos
     // una capa llamada cargando y la mostraremos
     try{
         var newdiv = document.createElement('div');
         newdiv.setAttribute('id', "cargando");
         newdiv.className ="cargando";
         getSize();
         newdiv.style.height = myScrollHeight + 'px';
         document.body.appendChild(newdiv);
         document.getElementById("cargando").style.display = "block";
     } catch(e){
         alert("Error al mostrar la capa de cargando - Consulte al Administrador\n"+e);
     }


CSS de la capa de transición
CÓDIGO
.cargando {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: #000 url(../images/cargando.gif) no-repeat;
    background-position:center;
    filter:alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}


Para la imagen cargando
Esta es una versión -reducida (lo-fi)- de nuestro contenido. Para ver la versión completa con mas información, formato e imágenes, por favor haz click aquí.
Invision Power Board © 2001-2010 Invision Power Services, Inc.