Imprimir Página - Capas CSS con javascript invisibles.

Título: Capas CSS con javascript invisibles.
Publicado por: NetJava en 3 Junio 2011, 17:31 pm

Buenas,

Tengo un problema, en mi pag web tengo un menú y en función del botón que presione quiero que se hagan invisibles las capas que no corresponden y que se haga visible la que corresponde, la idea es que sea como una aplicación de ordenador.
Para ello estoy utilizando javascrip, lo había conseguido en su momento, era un proyecto olvidado... pero he perdido el código que hice en su momento XD.

Código:

function VisibilidadCapas(String tipo = "") {
	if(ocument.getElementById("PrincipalInicio").style == true){
		document.getElementById("PrincipalInicio").style.visibility  = "visible"; 
		document.getElementById("AltaLibros").style.visibility  = "hidden";
	}
}

De javascrip no controlo mucho, se supone que tengo que identificar el id del div, y después hacer visible e invisible.
Me dais alguna pista XD. Saludos y gracias!!!

Título: Re: Capas CSS con javascript invisibles.
Publicado por: moyo18 en 3 Junio 2011, 17:50 pm

proba esto.

Código:

function VisibilidadCapas(String tipo = "") {
	if(document.getElementById("PrincipalInicio").style == true){
		document.getElementById("PrincipalInicio").style.display  = "block"; 
		document.getElementById("AltaLibros").style.display  = "none";
	}
}

podes poner none, block o inline.

Ademas le agregue d a ocument.getElementById, talvez eso t este dando un error.

Título: Re: Capas CSS con javascript invisibles.
Publicado por: NetJava en 4 Junio 2011, 14:16 pm

Buenas,
Ya he solucionado el problema, os lo dejo puesto, la idea es que según el botón que se presione desde la web se vayan cambiando las capas.

Código

function show(item)
{
	var PrincipalInicio=document.getElementById("PrincipalInicio")
	var AltaLibros = document.getElementById("AltaLibros")
	var BuscarLibros = document.getElementById("BuscarLibros")
	var BajaLibros = document.getElementById("BajaLibros")
	var RelacionarLibros = document.getElementById("RelacionarLibros")
	var Clasificacion = document.getElementById("Clasificacion")
	var Usuario = document.getElementById("Usuario")
 
	if(item == 'PrincipalInicio')
	{
		PrincipalInicio.style.visibility='visible'
		AltaLibros.style.visibility='hidden'
		BuscarLibros.style.visibility='hidden'
		BajaLibros.style.visibility='hidden'
		RelacionarLibros.style.visibility='hidden'
		Clasificacion.style.visibility='hidden'
		Usuario.style.visibility='hidden'
	}
	if(item == 'AltaLibros')
	{
		AltaLibros.style.visibility='visible'
		PrincipalInicio.style.visibility='hidden'
		BuscarLibros.style.visibility='hidden'
	    BajaLibros.style.visibility='hidden'
		RelacionarLibros.style.visibility='hidden'
		Clasificacion.style.visibility='hidden'
		Usuario.style.visibility='hidden'
	}
	if(item == 'BuscarLibros')
	{
		BuscarLibros.style.visibility='visible'
		PrincipalInicio.style.visibility='hidden'
		AltaLibros.style.visibility='hidden'
		BajaLibros.style.visibility='hidden'
		RelacionarLibros.style.visibility='hidden'
		Clasificacion.style.visibility='hidden'
		Usuario.style.visibility='hidden'
	}
	if(item == 'BajaLibros')
	{
		BajaLibros.style.visibility='visible'
		PrincipalInicio.style.visibility='hidden'
		AltaLibros.style.visibility='hidden'
		BuscarLibros.style.visibility='hidden'
		RelacionarLibros.style.visibility='hidden'
		Clasificacion.style.visibility='hidden'
		Usuario.style.visibility='hidden'
	}
	if(item == 'RelacionarLibros')
	{
		RelacionarLibros.style.visibility='visible'
		PrincipalInicio.style.visibility='hidden'
		AltaLibros.style.visibility='hidden'
		BuscarLibros.style.visibility='hidden'
		BajaLibros.style.visibility='hidden'
		Clasificacion.style.visibility='hidden'
		Usuario.style.visibility='hidden'
	}
	if(item == 'Clasificacion')
	{
		Clasificacion.style.visibility='visible'
		PrincipalInicio.style.visibility='hidden'
		AltaLibros.style.visibility='hidden'
		BuscarLibros.style.visibility='hidden'
		BajaLibros.style.visibility='hidden'
		RelacionarLibros.style.visibility='hidden'
		Usuario.style.visibility='hidden'
	}
		if(item == 'Usuario')
	{
		Usuario.style.visibility='visible'
		PrincipalInicio.style.visibility='hidden'
		AltaLibros.style.visibility='hidden'
		BuscarLibros.style.visibility='hidden'
		BajaLibros.style.visibility='hidden'
		RelacionarLibros.style.visibility='hidden'
		Clasificacion.style.visibility='hidden'
	}
}

Gracias por la respuesta, aunq era algo diferente al final, por lo menos lo que me salio claro. XD Saludos!!!

Título: Re: Capas CSS con javascript invisibles.
Publicado por: Cicklow en 7 Junio 2011, 08:19 am

Con Jquery no es mas rapido y menos codigo?

Saludos

Título: Re: Capas CSS con javascript invisibles.
Publicado por: NetJava en 7 Junio 2011, 16:27 pm

jejejeje no lo se, soy novatillo en web... pero lo comprobaré XD Aunq no se a que nivel se puede medir la rapidez en este tema. Saludos!

Título: Re: Capas CSS con javascript invisibles.
Publicado por: Cicklow en 7 Junio 2011, 16:36 pm

Puedes usar la funcion Toggle de Jquery. o Show y Hide...

http://www.designgala.com/demos/collapse-expand-jquery.html
http://api.jquery.com/toggle/

Título: Re: Capas CSS con javascript invisibles.
Publicado por: NetJava en 7 Junio 2011, 17:09 pm

Lo he estado mirando y esta genial aunq me va a costar trabajar con las funciones... pero bueno, merecerá la pena supongo. Me he bajado la librería versión 1.3 creo que se ha llegado hasta la 1.6 (eso dice wiki). En la segunda url he mirado los ejemplos, y tira de http://code.jquery.com/jquery-latest.js (http://code.jquery.com/jquery-latest.js), es lo mismo que descargar y utilizar la librería¿?¿?

Un saludo y gracias!!!

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: NetJava en 3 Junio 2011, 17:31 pm