Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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!!!!
-
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!
-
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