Propiedad visibility & height

gorkamu89 · #1 (**permalink**) 16/04/2010, 02:27

Por fin he conseguido lo que buscaba, hacer unas tarjetas de noticias que al darle a un link y mediante una funcion mostrase contenido oculto, lo podria dejar tal y como esta pero eso de tener que recurrir a IDs me parece poco profesional sobre todo cuando se va a tener gran cantidad de informacion, puede resultar muy lioso, ahora bien os dejo el codigo para que lo checkeis, existe alguna manera de formalizar todo esto? ahorrar lineas de codigo o simplificarlo, busco vuestra opinion y consejo.Gracias

Por cierto existe un getElementById pero no hay nada para las clases sin tener que recurrir a una funcion la tira de larga? Aun no se ha implantado el getElementByClass? porque la verdad eso seria lo que optimizaria mi script(creo yo)

Código HTML:

<script type="text/javascript">
	
	function mostrar_noticia(id){
		document.getElementById(id).style.visibility="visible";
	}
	function ampliar(id){
		document.getElementById(id).style.height="auto";
	}
	function ocultar_noticia(id){
		document.getElementById(id).style.visibility="hidden";
	}
	function cerrar(id){
		document.getElementById(id).style.height="170px";
	}
</script>
</head>

<body>
<!--Plantilla de tarjeta de notcias-->
<div class="contenedor_principal" id="contenedor_principal">
	<div name="contenedor_fecha/titular">
    	<!--Principio del subcontenedor de la fecha-->
        <div class="contenedor_fecha">
        	<div class="dia">dd</div>
            <div class="mes">mm</div>
            <div class="año">aaaa</div>
        </div>
        <!--Fin del subcontenedor de fecha-->
        <!--Principio del subcontenedor de titulares-->
        <div class="contenedor_titular">
        	<div class="titular">titular</div>
            <div class="subtitular">subtitular</div>
        </div><!--Fin subcontenedor del titular-->
    </div>
    <!--Final contenedor fecha/titular-->
    <!--Principio contenedor de noticia-->
    <div class="contenedor_noticia">
    El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - <a href="javascript:mostrar_noticia('not_oculta'); ampliar('contenedor_principal')" class="link_leermas">leer mas</a></div>
<!--Resto de la noticia oculta-->
    <div id ="not_oculta" class="noticia_oculta" style="visibility:hidden">
    El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - <a href="javascript:ocultar_noticia('not_oculta'); cerrar('contenedor_principal')" class="link_leermenos">cerrar</a>
    </div><!--Final de la noticia oculta-->
    <!--Final del contenedor de la noticia principal-->
</div>
<!--Fin de plantilla-->
&nbsp;
<!--Plantilla de tarjeta de notcias-->
<div id="contenedor_principal2" class="contenedor_principal">
	<div name="contenedor_fecha/titular">
    	<!--Principio del subcontenedor de la fecha-->
        <div class="contenedor_fecha">
        	<div class="dia">dd</div>
            <div class="mes">mm</div>
            <div class="año">aaaa</div>
        </div>
        <!--Fin del subcontenedor de fecha-->
        <!--Principio del subcontenedor de titulares-->
        <div class="contenedor_titular">
        	<div class="titular">titular</div>
            <div class="subtitular">subtitular</div>
        </div><!--Fin subcontenedor del titular-->
    </div>
    <!--Final contenedor fecha/titular-->
    <!--Principio contenedor de noticia-->
    <div class="contenedor_noticia">
    El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - <a href="javascript:mostrar_noticia('not_oculta2'); ampliar('contenedor_principal2')" class="link_leermas">leer mas</a> </div>
    <!--Resto de la noticia oculta-->
  <div id ="not_oculta2" class="noticia_oculta" style="visibility:hidden">
    El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - El texto de la noticia aqui - <a href="javascript:ocultar_noticia('not_oculta2'); cerrar('contenedor_principal2')" class="link_leermenos">cerrar</a>
  </div><!--Final de la noticia oculta-->
    <!--Final del contenedor de la noticia principal-->
</div>
</body>

alna · #2 (**permalink**) 16/04/2010, 04:02

Tal vez no es lo que buscas pero te puedes ahorrar el "document.getElementById(id)" con la siguiente funcion.

function $(id){
return document.getElementById(id)
}

de esta forma solo tienes que poner :

alna · #3 (**permalink**) 16/04/2010, 04:08

Upsssss

te decia que de esta forma solo tienes que poner

$(id).style.visibility="visible";

Quedaria algo asi ..

function mostrar_noticia(id){
$(id).style.visibility="visible";
}
function ampliar(id){
$(id).style.height="auto";
}
function ocultar_noticia(id){
$(id).style.visibility="hidden";
}
function cerrar(id){
$(id).style.height="170px";
}

En fin, que no se si esto te ayuda mucho pero ahi te lo dejo. De todas formas, puedes usar este sistema en todos tus codigos y te ahorraras el tedioso tecleo de "document.getElementById".

Un saludo

gorkamu89 · #4 (**permalink**) 16/04/2010, 13:21

Muchas gracias, la cosa seria poner una funcion mas no? como si fuera una funcion-variable es correcto? Por lo cual todo eso quedaria asi puede ser?

function $(id){
return document.getElementById(id)
}
function mostrar_noticia(id){
$(id).style.visibility="visible";
}
function ampliar(id){
$(id).style.height="auto";
}
function ocultar_noticia(id){
$(id).style.visibility="hidden";
}
function cerrar(id){
$(id).style.height="170px";
}

alna · #5 (**permalink**) 16/04/2010, 15:58

CORRECTO!!!

Como ves te ahorras el "document.getElementById".

Un saludo