JavaScript - Cambiar fondo de layout con botón

   
Vista:
Imágen de perfil de carlina

Cambiar fondo de layout con botón

Publicado por carlina (30 intervenciones) el 26/02/2014 02:27:26
Hice dos layouts con javascript. Sin Html. Sólo javascript y css. Esos contenedores tienes otros más, como secciones, divs, etec.

Están bien, pero necesito una funcion que cuando yo le de click a un boton me cambie por layout 1 o por layout 2

Javascript


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//esconder div
document.getElementById('divLayoutGenerdo').style.display = 'none';
document.getElementById('btnMostrar').onclick = validarRadios;
document.getElementById('btnCamiarLayout').onclick =CamiarLayout;
 
//Primero valido los radios para elegir un layout 
function validarRadios(){
var r1 = document.getElementById("radio1");
var r2 = document.getElementById("radio2")
		if (r1.checked) {
			layout1();
		}
		else if (r2.checked) {
			layout2();
		}
		else{
			alert('falta un radio');
		};
//alert('hola');
}
 
// función del Layout 1
function layout1(){}
 
// función del Layout 2
function layout2(){}

Ésta es la función para cambiar los layous

1
2
3
4
5
function CamiarLayout(){
 
	document.getElementById('divLayoutGenerdo').style.display = 'none';
 
}

HTML


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
		<header class="mainHead">
			<h2>Examen 1 Mejorado<small>Carolina Azofeifa Chinchilla</small></h2>
		</header>
		<div id="divContent" class="divContent cf">
		   <form>
				 <fieldset>
					<a href="#"><img src="img/Layout1.png" alt="Layout1" width="400" height="500" class="imgL1"></a>
					<a href="#"><img src="img/Layout2.jpg" alt="Layout2" width="400" height="500" class="imgL2"></a>
					<p class="radios">
					 <input type="radio" id="radio1" class="myRadio">
					 <label for="male">Layout 1</label>
					 <input type="radio" id="radio2">
					 <label for="male">Layout 2</label>
					</p>
				 </fieldset>
			</form>
			<p class="choose">Elija el Layout que desea.</p>
			<button id="btnMostrar" class="btn">Mostrar</button>
	    </div>
		<div id="divLayoutGenerdo" class="divLG cf">
			<div id="divBtnCambio"><button id="btnCamiarLayout" class="btn">Cambiar Layout</button></div>
		</div>
    </body>

No puse el contenido de las funciones layout 1 y layout 2 porque es muy largo, pero se sobre entiende que ahí están dibujados los contenedores.

saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Cambiar fondo de layout con botón

Publicado por bathorz (10 intervenciones) el 26/02/2014 18:44:40
Puedes sacar una idea de aquí:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
window.onload = function() {
 
        var r = document.getElementsByName("radio");
        var cont = document.getElementById('divContent');
        var rst = document.getElementById("rst");
 
        function foo() {
          if (r[0].checked) {
            //layout1();
            rst.innerHTML = 'Mostrar Layout 1';
          }
          if (r[1].checked) {
            //layout2();
            rst.innerHTML = 'Mostrar Layout 2';
          }
        }
 
        cont.addEventListener('change', function(e) {
          //e.preventDefault();
          foo();
        });
 
      }
 
<div id="divContent" class="divContent cf">
  <input type="radio" name="radio" id="radio1" class="myRadio">
  <label for="male">Layout 1</label>
  <input type="radio" name="radio" id="radio2">
  <label for="male">Layout 2</label>
</div>
<div id="rst">rst</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Cambiar fondo de layout con botón

Publicado por chinodf (1 intervención) el 28/02/2014 15:25:10
Has intentado utilizar jQuery ? es mucho mas facil que javascript y tiene metodos que nos ayudan mucho por ejemplo.
Mira te dejo esta pagina yo ahi aprendi y la verdad son muy buenos.
http://www.grupocodesi.com/cursos/curso-de-javascript.html
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar