Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Ocultar Div y enlaces que lo llaman

 Estas en el tema de Ocultar Div y enlaces que lo llaman en el foro de Javascript en Foros del Web. Buenas tardes. Para empezar inicio diciendo que me encontre este codigo y que no se mucho de javascript, el codigo funciona perfecto para ocultar y ...
  #1 (permalink)  
Antiguo 13/02/2013, 13:59
Avatar de Sherly  
Fecha de Ingreso: septiembre-2008
Ubicación: Valles
Mensajes: 58
Antigüedad: 16 años, 4 meses
Puntos: 1
Ocultar Div y enlaces que lo llaman
Buenas tardes.
Para empezar inicio diciendo que me encontre este codigo y que no se mucho de javascript, el codigo funciona perfecto para ocultar y mostrar el div. Lo explico mejor
al hacer click en "leer mas" muestra el div oculto con la información, en el div oculto esta una x que es para volver a ocultar el div. El problema que tengo es que no me oculta el Leer mas me lo deja ahi les paso el codigo.

Código: 
<script type="text/javascript">
function showLightbox() {
	document.getElementById('over').style.display='block';
	document.getElementById('fade').style.display='block';
	document.getElementById('mas').style.display='none';

}
function hideLightbox() {
	document.getElementById('over').style.display='none';
	document.getElementById('fade').style.display='none';
	document.getElementById('mas').style.display='block';
}	

</script>
<style>.fadebox {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
.overbox {
	display: none;
	/*position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;*/
	z-index:1002;
	
}
.leerover{display:block;}
#mas a{
	
	color:#EE8E22;
	background-repeat:no-repeat;
	height:20px;
	width:80px;
	float:left;
	font-size:11px;
	line-height:20px;
	text-align:center;
	margin-top:10px;
	margin-bottom: 10px;
	}
#mas a:hover{
	color: #D3620E;
	background-repeat: no-repeat;
	height: 20px;
	width: 80px;
	float: left;
	line-height: 20px;
	text-align: center;
	margin-top: 10px;
	font-size: 11px;
	margin-bottom: 10px;
	}
#box {
	background: #FFFFFF;
	padding: -10px;
	text-align: justify;
}
</style>
<div id="mas" class="leerover"><a href="javascript:showLightbox();">Ver Más...</a></div>
      	  <div id="over" class="overbox">
	     <div id="box"><a style="float:right" href="javascript:hideLightbox();"><img src="images/close.gif" width="14" height="14"></a>
<p>Hemos trabajado en 16 Países Latinoamericanos así como en la Unión Europea.</p></div>
Asigno el ID del div que contiene el enlace al script y le coloco que al hacer la llamada lo oculte y viceversa, ya busque la solucion por todos lados y no la encontro temo que no se pueda.

Espero alguien pueda hecharme la mano.

de antamano muchas gracias
  #2 (permalink)  
Antiguo 13/02/2013, 22:15
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 6 meses
Puntos: 1567
Respuesta: Ocultar Div y enlaces que lo llaman
a mi me funciona
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.  
  8. <script type="text/javascript">
  9. function showLightbox() {
  10.     document.getElementById('over').style.display='block';
  11.     document.getElementById('fade').style.display='block';
  12.     document.getElementById('mas').style.display='none';
  13.  
  14. }
  15. function hideLightbox() {
  16.     document.getElementById('over').style.display='none';
  17.     document.getElementById('fade').style.display='none';
  18.     document.getElementById('mas').style.display='block';
  19. }   
  20.  
  21. </script>
  22. <style>.fadebox {
  23.     display: none;
  24.     position: absolute;
  25.     top: 0%;
  26.     left: 0%;
  27.     width: 100%;
  28.     height: 100%;
  29.     background-color: #000;
  30.     z-index:1001;
  31.     -moz-opacity: 0.8;
  32.     opacity:.80;
  33.     filter: alpha(opacity=80);
  34. }
  35. .overbox {
  36.     display: none;
  37.     /*position: absolute;
  38.     top: 25%;
  39.     left: 25%;
  40.     width: 50%;
  41.     height: 50%;*/
  42.     z-index:1002;
  43.     
  44. }
  45. .leerover{display:block;}
  46. #mas a{
  47.     
  48.     color:#EE8E22;
  49.     background-repeat:no-repeat;
  50.     height:20px;
  51.     width:80px;
  52.     float:left;
  53.     font-size:11px;
  54.     line-height:20px;
  55.     text-align:center;
  56.     margin-top:10px;
  57.     margin-bottom: 10px;
  58.     }
  59. #mas a:hover{
  60.     color: #D3620E;
  61.     background-repeat: no-repeat;
  62.     height: 20px;
  63.     width: 80px;
  64.     float: left;
  65.     line-height: 20px;
  66.     text-align: center;
  67.     margin-top: 10px;
  68.     font-size: 11px;
  69.     margin-bottom: 10px;
  70.     }
  71. #box {
  72.     background: #FFFFFF;
  73.     padding: -10px;
  74.     text-align: justify;
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <div id="mas" class="leerover"><a href="javascript:showLightbox();">Ver Más...</a></div>
  80.           <div id="over" class="overbox">
  81.          <div id="box"><a href="javascript:hideLightbox();">cerrar</a>
  82. <p>Hemos trabajado en 16 Países Latinoamericanos así como en la Unión Europea.</p></div>
  83. </body>
  84. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 14/02/2013, 03:01
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.511
Antigüedad: 16 años, 4 meses
Puntos: 188
Respuesta: Ocultar Div y enlaces que lo llaman
Posibilidades:

a) Que Sherly tenga algo en caché que haga que no le funcione correctamente. Para eso tienes que limpiar la caché del navegador y probar de nuevo.
b) Que hayais usado navegadores diferentes con diferente comportamiento.

:|
__________________
if (fuzzy && smooth) {
fuzzylog = "c00l";
return true;
}
  #4 (permalink)  
Antiguo 14/02/2013, 10:31
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 16 años
Puntos: 36
Información Respuesta: Ocultar Div y enlaces que lo llaman
Del codigo que tienes originalmente y que es el que pegaste primero veo dos cosas;
  1. Tienes comentado algunos atributos de la clase 'overbox.
  2. Al div con el id 'over' le falta el tag </div> que lo cierra.

    Tambien:
  3. En el css tienes una clase llamada 'fadebox' que no la estas usando y esta es la que pone el fondo en negro. Para esto le agregue ese div que faltaba y lo puse antes que el div con id 'mas'
  4. Por estandarizacion no le estas asignado el atributo type en el style del css 'type="text/css"'
  5. En tu javascript estas buscando un id que se llama 'fade' el cual no existe en tu Dom.
  6. La clase overbox en el css le falta tener un atributo de fondo 'background-color> #ffffff' para que la puedas visualizar completamente, si no solo queda el fondo blanco de tu texto.


A continuacion te pego el codigo con las correciones pertinentes, es muy importante que lo veas y compares con el que tenias
anteriormente para que puedas analalizar bien tus errores, saludos y por favor da el tema como solucionado.

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8" />
  4.         <meta name="author" content="reedyseth"/>
  5.         <meta name="myBlog" content="www.behstant.com/blog"
  6.         <title>Empty</title>
  7.         <script type="text/javascript">
  8.             function showLightbox() {
  9.                 document.getElementById('over').style.display = 'block';                
  10.                 document.getElementById('mas').style.display = 'none';
  11.                 // codigo agregado
  12.                 document.getElementById('fadebox').style.display = 'block';
  13.             }
  14.  
  15.             function hideLightbox() {
  16.                 document.getElementById('over').style.display = 'none';
  17.                 document.getElementById('mas').style.display = 'block';             
  18.                 // codigo agregado
  19.                 document.getElementById('fadebox').style.display = 'none';
  20.             }
  21.  
  22.         </script>
  23.         <style type="text/css">          
  24.             #fadebox {
  25.                 display: none;
  26.                 position: absolute;
  27.                 top: 0%;
  28.                 left: 0%;
  29.                 width: 100%;
  30.                 height: 100%;
  31.                 background-color: #000;
  32.                 z-index: 1001;
  33.                 -moz-opacity: 0.8;
  34.                 opacity: .80;
  35.                 filter: alpha(opacity=80);
  36.             }
  37.             .overbox {
  38.                 display: none;
  39.                 position: absolute;
  40.                 top: 25%;
  41.                 left: 25%;
  42.                 width: 50%;
  43.                 height: 50%;
  44.                 z-index: 1002;
  45.                 background-color: #ffffff;
  46.             }
  47.             .leerover {
  48.                 display: block;
  49.             }
  50.             #mas a {
  51.  
  52.                 color: #EE8E22;
  53.                 background-repeat: no-repeat;
  54.                 height: 20px;
  55.                 width: 80px;
  56.                 float: left;
  57.                 font-size: 11px;
  58.                 line-height: 20px;
  59.                 text-align: center;
  60.                 margin-top: 10px;
  61.                 margin-bottom: 10px;
  62.             }
  63.             #mas a:hover {
  64.                 color: #D3620E;
  65.                 background-repeat: no-repeat;
  66.                 height: 20px;
  67.                 width: 80px;
  68.                 float: left;
  69.                 line-height: 20px;
  70.                 text-align: center;
  71.                 margin-top: 10px;
  72.                 font-size: 11px;
  73.                 margin-bottom: 10px;
  74.             }
  75.             #box {
  76.                 background: #FFFFFF;
  77.                 padding: -10px;
  78.                 text-align: justify;
  79.             }
  80.         </style>
  81.     </head>
  82.     <body>  
  83.         <div id="fadebox"></div>
  84.         <div id="mas" class="leerover">
  85.             <a href="javascript:showLightbox();">Ver Más...</a>
  86.         </div>
  87.         <div id="over" class="overbox">
  88.             <div id="box">
  89.                 <a style="float:right" href="javascript:hideLightbox();"><img src="images/close.gif" width="14" height="14"></a>
  90.                 <p>
  91.                     Hemos trabajado en 16 Países Latinoamericanos así como en la Unión Europea.
  92.                 </p>
  93.             </div>
  94.         </div>
  95.     </body>
  96. </html>

Reedyseth
http://behstant.com/blog
  #5 (permalink)  
Antiguo 14/02/2013, 11:12
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 6 meses
Puntos: 1567
Respuesta: Ocultar Div y enlaces que lo llaman
Yo esperaría que la usuaria conteste.
Según mi lógica, esto
http://foros.emprear.com/javascript/..._detalles.html
funciona correctamente, el botón cerrar "cierra el contenido", no cierra ni tendría porque ocultar el "ver más"

Es cierto que su script no es muy eficiente en cuanto a optimización, pero funciona

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 14/02/2013, 17:24
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 16 años
Puntos: 36
Respuesta: Ocultar Div y enlaces que lo llaman
Cita:
Iniciado por emprear Ver Mensaje
Yo esperaría que la usuaria conteste.
Según mi lógica, esto
http://foros.emprear.com/javascript/..._detalles.html
funciona correctamente, el botón cerrar "cierra el contenido", no cierra ni tendría porque ocultar el "ver más"

Es cierto que su script no es muy eficiente en cuanto a optimización, pero funciona

Saludos

Tienes razon emprear pero como puedes apreciar en el CSS esta intentando hacer un lightbox.

Por este tipo de usuarios es que no contestamos sus dudas, ni las gracias dan !!
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #7 (permalink)  
Antiguo 26/02/2013, 13:33
Avatar de Sherly  
Fecha de Ingreso: septiembre-2008
Ubicación: Valles
Mensajes: 58
Antigüedad: 16 años, 4 meses
Puntos: 1
Respuesta: Ocultar Div y enlaces que lo llaman
Una disculpa por el atraso en contestar me salio mas trabajo y tuve que dejar este a un lado por un tiempo y hoy retomando, voy a empezar a probar y checar las respuestas.
de antemano muchas gracias.
Realmente el código me funciona bien, solo que me salia de la estética que el ver mas se quedara ahí y no se ocultara


Reedyseth... relax compañero no se moleste
  #8 (permalink)  
Antiguo 26/02/2013, 13:45
Avatar de Sherly  
Fecha de Ingreso: septiembre-2008
Ubicación: Valles
Mensajes: 58
Antigüedad: 16 años, 4 meses
Puntos: 1
Respuesta: Ocultar Div y enlaces que lo llaman
mi error, cosas que no dije, ese código fue editado de un lightbox y que a mi se me hizo muy útil para ocultar y mostrar un ver mas .
así que hice algunas modificaciones para que no saliera el lightbox por eso es que algunas cosas del código no las utilizaba.

Lo que tengo es algo así como el que publico emprear yo lo tengo trabajando aquí http://camarabinacionaldenegocios.com/

al revisar el codigo de Reedyseth me doy cuenta que a él si se le oculta el ver mas, así que utilizare ese y lo modificare para que salga como ver mas y no lightbox.


pd. el codigo faltante fue error al copiar pues lo tengo en diferentes archivos una disculpa por eso.

saludos, y en cuanto tenga el codigo funcionando lo subo para que este completo :)
  #9 (permalink)  
Antiguo 26/02/2013, 15:29
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 16 años
Puntos: 36
Respuesta: Ocultar Div y enlaces que lo llaman
Viendo tu pagina se me ocurre una sugerencia, que tal si cuando le das ver mas le das un scroll para que el usuario no tenga que hacerlo manualmente ??

P.D. Ya ando relax :p
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #10 (permalink)  
Antiguo 27/02/2013, 10:18
Avatar de Sherly  
Fecha de Ingreso: septiembre-2008
Ubicación: Valles
Mensajes: 58
Antigüedad: 16 años, 4 meses
Puntos: 1
Respuesta: Ocultar Div y enlaces que lo llaman
buena idea, no lo había pensado jaja
  #11 (permalink)  
Antiguo 27/02/2013, 10:48
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 16 años
Puntos: 36
Respuesta: Ocultar Div y enlaces que lo llaman
Es que se cuando le di click pensando como usuario se me hizo algo molesto que se expande y luego tengo que ir manualmente al scroll para ajustarlo, es un plus para tu site.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.

Etiquetas: enlaces, funcion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:20.