Autor Tema: HTML CSS JavaScript crear web donde incluimos contenidos de varias webs CU01172E (Leído 2842 veces)

bermartinv · « **en:** 10 de Marzo 2016, 15:30 »

Adjunto mi solución al ejercicio CU01172E del tutorial básico del programador web JavaScript desde cero.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #principal{
        margin:auto;
        width:90%;
        height:800px;
        border: solid thin black;
    }   
    
    #izquierda,#derecha{
        margin:10px;
        width: 45%;
        height:90%;
    }
    
    #izquierda{
        float:left;
    }
    
    #derecha{
        float:right;
    }
    
    #botones{
        
    }
    
    .boton{
        margin:10px;
        height:30px;
        width:200px;
        padding-top:10px;
        text-align: center;
        border:solid thin blue;
        background-color:aquamarine;
        border-radius: 10px;
        font-size: 20px;
        cursor:pointer; 
    }
    
    .frame{
        margin:18px;
        width:90%;
        height:500px;
    }
</style>
<script>
window.onload = function(){ 
    
    var enlaces = document.getElementsByClassName("boton");
    var left = document.getElementById('iframeleft');
    var right = document.getElementById('iframeright');
    
    enlaces[0].onclick = function (){left.src = 'http://www.clarin.com'};
                                   
    enlaces[1].onclick = function(){left.src = 'http://impresa.elmercurio.com/'};
                                   
    enlaces[2].onclick = function(){left.src = 'http://www.elespectador.com'};  
    enlaces[3].onclick = function(){right.src = 'http://www.eluniversal.com.mx'};
    enlaces[4].onclick = function(){right.src = 'http://www.elcomercio.pe'};
    enlaces[5].onclick = function(){right.src = 'http://www.elmundo.es/'};
    
}    
</script>
</head>
<body>
<div id='principal'>
    <div id='izquierda'>
        <div class='botones'>
            <div class='boton'>clarin.com</div>
            <div class='boton'>elmercurio.cl</div>
            <div class='boton'>elespectador.com</div>
        </div>
        <iframe class='frame' name='iframeleft' id='iframeleft' src=''></iframe>
    </div>
    <div id='derecha'>
        <div class='botones'>
            <div class='boton'>universal.com.mx</div>
            <div class='boton'>elcomercio.pe</div>
            <div class='boton'>elmundo.es</div>
        </div>       
        <iframe class='frame' name='iframeright' src='' id='iframeright'></iframe>
    </div>
</div>
</body>
</html>

Saludos!!!!

César Krall · « **Respuesta #1 en:** 11 de Marzo 2016, 09:14 »

Hola! Todo bien

Al comprobar el ejercicio vi que en el frame derecho me aparecían barras de scroll tanto vertical como horizontal mientras que en el izquierdo sólo vertical. Pensé que era algo relacionado con el código, pero al hacer más pruebas he visto que aparecen los scrolls según la web que se cargue en el iframe, no por algo en el código.

Al principio pones <html lang="en"> pero no sé muy bien por qué pones lang="en"

Saludos!

bermartinv · « **Respuesta #2 en:** 11 de Marzo 2016, 10:43 »

Hola César,
lo de <html lang="en"> , no me había dado ni cuenta, si quieres que te diga la verdad.
Respecto el sroll que hacen cada ventana es curioso, porque las izquierda hace scroll y , y la segunda hace scroll en x e y.
Sáludos y gracias

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: