problema iframe e footer

Chry1991

salve amici

ho una homepage che contiene al suo interno un iframe che tramite menù richiama altre pagine e funziona tutto perfettamente.
il problema sta di fatto che i miei capi ora vogliono un footer con dentro delle intestazioni e che compaia solo alla fine della pagina quando ho finito di scrollare l'iframe.

però ho un problema riesco a farlo comparire senza problemi ma il footer si sovrappone all'iframe invece di comparire sotto di esso.

vi posto il codice css e html degli oggetti

CSS:

Codice: Seleziona tutto

 

 #retailbox{
                height :100%;
                display: table-row;
                width:100%;
                position : fixed;
                left: 0;          
        }

        #frame{
                height :85%;
                width:100%;
                position:relative;
                left: 0;
                bottom :0;
                top: -30px;  
        }

       .footer{
                
                width:100%;
                height:400px;
                left: 0;
                background:#003366;
                clear:both;
                margin-top:auto;
               
                color: white;
                display: table-row;
                display:none;
               
                
       }

funzione che vede se finisce lo scroll

Codice: Seleziona tutto

function scrolling() {
               $(document).ready(function () {
                   var frm = document.getElementById("frame").contentWindow;

                   $(frm).scroll(function () {

                       if ($(frm).scrollTop() + $(frm).height() == $(frm.document).innerHeight()) {
                           //alert("bottom raggiunto")
                           $('#footer').slideDown(300);
                           
                       } else {
                           $('#footer').slideUp(300);
                           
                       }

                     
                   });
               });
               }

html code

Codice: Seleziona tutto

 <div id="retailbox">
            <iframe id="frame" name="I1" src="Moduli/MenuGenerale2/MenuGenerale.aspx" style="border:0;" scrolling="yes"  runat="server"></iframe>
                <script>
                    document.getElementById('frame').onload = function() {
                    RadAjaxLoadingPanel2.hide("frame");
                    };
                </script>
            
        <div id="footer" class="footer">
		
	    </div>
       </div>

grazie a chiunque mi possa aiutare a risolvere questo fastidio

Marco-Sarti

In teoria quando visualizzi il footer (che deve essere in position absolute) devi impostare il suo top a iframe top + frame height.

$('#footer').css("top", parseInt($("#frame").offset().top) + parseInt($("#frame").height()) + "px";

ho messo i parseInt perchè non mi ricordo in che formato ti arrivano i dati, potrebbero essere superflui, ma così va. Mettilo prima di scrollDown

Forum Ubuntu-it