advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

pablazo on 09/18/06


Tagged

iframe javascript select html capas


Versions (?)


Who likes this?

3 people have marked this snippet as a favorite

luman
meth
Hirmine


capas que tapan selects mediante iframe

Published in: JavaScript 

URL: http://www.forosdelweb.com/showthread.php?t=105325&page=8

Plain TextExpand 
  1. <html>
  2. <head>
  3. <script>
  4. function mostrar_ocultar(idCapa) {
  5. 		var obj_iframe_oculto = document.getElementById("iframe_oculto");
  6. 		capa = document.getElementById(idCapa);           		
  7.  
  8. 		// Quitamos al Iframe TODA la opacidad para que sea totalmente transparente y se vea el fondo
  9. 		obj_iframe_oculto.style.filter="alpha(opacity=0)"; // Opacidad para IE
  10. 		obj_iframe_oculto.style.opacity="0.00"; // Ocapacidad para Netscape
  11.  
  12. 	              // Definimos que el contenido del IFRAME esté VISIBLE
  13. 		obj_iframe_oculto.style.display = "block"; // ESTA ES LA LINEA MAS IMPORTANTE
  14.  
  15. 	              // Definimos el ancho del IFRAME igual que el ancho de la capa, para que no se le vea
  16. 		obj_iframe_oculto.style.width = capa.offsetWidth;
  17. 		obj_iframe_oculto.style.height = capa.offsetHeight;                                                
  18. 		// Bajamos de Z-index el IFRAME, para que esté debajo de la capa
  19. 		obj_iframe_oculto.style.zIndex = capa.style.zIndex - 1;                                                            
  20.  
  21. 		capa.style.display = "block";
  22.  
  23. 		if (capa.style.visibility == 'hidden')		{
  24. 			capa.style.visibility = 'visible';
  25. 		} else {
  26. 			capa.style.visibility = 'hidden';             
  27. 			obj_iframe_oculto.style.display = "none"; 
  28. 		}
  29. }           
  30. </script>
  31. </head>
  32. <body>
  33.         <!-- capa ayuda position: absolute; left: 515px; top: 41px;z-index: 1 -->
  34. <div id="capaAyuda" style="position: absolute; left: 10px; top: 41px;z-index: 100; visibility: hidden; margin-bottom: -10;"> 
  35. <!--------- PRINCIPIO DE LA LEYENDA -------------->
  36. <table width="357" height="10" border="0" cellpadding="0" cellspacing="0">
  37.   <tr>
  38.     <td width="23" height="10"><img src="Images/esquina_IzqSup.gif" alt="" width="23" height="10" /></td>
  39.     <td width="100%" height="10" background="Images/fondoEsquinas.gif"><img src="Images/pixel.gif" alt="" width="1" height="10" /></td>
  40.     <td width="25" height="10"><img src="Images/esquina_DrhSup.gif" alt="" width="25" height="10" /></td>
  41.   </tr>
  42. </table>
  43. <table width="357" border="0" cellpadding="0" cellspacing="0">
  44.   <tr>
  45.     <td width="23" background="Images/fondoLateralIzq.gif"><img src="Images/pixel.gif" alt="" width="23" height="1" /></td>
  46.     <td width="100%" valign="top" background="Images/fondoCaja.gif"><label><img src="Images/checkRojo.gif" alt="" width="11" height="11" vspace="4" align="absmiddle" /> Promo: No Vigente<br />
  47.     <img src="Images/checkNaranja.gif" alt="" width="11" height="11" vspace="4" align="absmiddle" /> Promo: Vigente, sin cambios en &uacute;ltimos 15 d&iacute;as<br />
  48.     <img src="Images/checkAmarillo.gif" alt="" width="11" height="11" vspace="4" align="absmiddle" /> Promo: Vigente, iniciada en los &uacute;ltimos 15 d&iacute;as<br />
  49.     <img src="Images/checkVerde.gif" alt="" width="11" height="11" vspace="4" align="absmiddle" /> Promo: Vigente, modificada en los &uacute;ltimos 15 d&iacute;as</label></td>
  50.     <td width="25" background="Images/fondoLateralDrh.gif"><img src="Images/pixel.gif" alt="" width="25" height="1" /></td>
  51.   </tr>
  52. </table>
  53. <table width="357" height="19" border="0" cellpadding="0" cellspacing="0">
  54.   <tr>
  55.     <td width="23" height="19"><img src="Images/esquina_IzqInf.gif" alt="" width="23" height="19" /></td>
  56.     <td width="100%" height="19" background="Images/fondoFin.gif"><img src="Images/pixel.gif" alt="" width="1" height="19" /></td>
  57.     <td width="25" height="19"><img src="Images/esquina_DrhInf.gif" alt="" width="25" height="19" /></td>
  58.   </tr>
  59. </table>
  60. <!--------- FINAL DE LA LEYENDA -------------->                                      
  61. </div>                                                                                               
  62. <a href="javascript:mostrar_ocultar('capaAyuda');">Mostrar/Ocultar</a>                 <br>
  63. <select id="selectTipo" name="selectTipo">
  64.               <option value="uno" selected >uno</option>
  65.               <option value="dos" >dos</option>
  66. </select>                                               
  67. <iframe id="iframe_oculto" scrolling="no" frameborder="0" style="position:absolute; top:41px; left:0px; display:none;"></iframe>
  68. </body>
  69. </html>

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: section31 on September 18, 2006

You need to login to post a comment.