Foros del Web » Programando para Internet » Javascript »

Problemas con opacidad (raro...)

 Estas en el tema de Problemas con opacidad (raro...) en el foro de Javascript en Foros del Web. Buenas! Tengo el siguiente HTML: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div id = "G_I_Error" >< / div > < div class = "main" ...
  #1 (permalink)  
Antiguo 23/01/2013, 05:04
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años, 1 mes
Puntos: 33
Problemas con opacidad (raro...)
Buenas!

Tengo el siguiente HTML:

Código HTML: 
Ver original
  1. <div id="G_I_Error"></div>
  2. <div class="main" id="main">
  3.     <div class="content">
  4.         <!--AQUÍ CONTENIDO...-->
  5.     </div>
  6.     
  7.     <div class="footer">
  8.         <span class="footerL"><span>Contact Us</span><span> | </span><span>FAQ</span><span> | </span><span>Web Map</span><span> | </span><span>Privacy</span><span> | </span><span>Legal Adverstiment & ToS</span><span> | </span><span>About Us</span><span> | </span><span>English</span></span>
  9.         <span class="footerC">Copyright 2012</span>
  10.     </div>
  11.     <div id="G_I_Calendar"></div>
  12. </div>

Entonces, al cargar la página compruebo los datos GET, para en caso de haber cierto valor, llamo a la siguiente función JS:

Código Javascript: 
Ver original
  1. function launchError(c){
  2.   if(c==1){
  3.     document.getElementById('G_I_Error').innerHTML='Texto';
  4.     setOpacity(document.getElementById('main'), 50);
  5.     document.re.d.setAttribute('onclick', 'voidFunction()');
  6.   }
  7. }
  8.  
  9. function setOpacity(e,o){
  10. e.style.opacity=o/100;
  11. e.style.MozOpacy=o/100;
  12. e.style.filter='alpha(opacity='+o+')';
  13. }

El problema que tengo es que en IE8 (cambiando la versión desde IE10) al lanzar la función el contenido se descentra...

Código CSS: 
Ver original
  1. .main{
  2.     margin-left:auto;
  3.     margin-right:auto;
  4.     margin-top:auto;
  5.     width:1000px;
  6. }

Esta es la clase "main"...

¿Qué está pasando para que se descentre?

Gracias.
  #2 (permalink)  
Antiguo 23/01/2013, 07:58
Avatar de maycolalvarez
Colaborador
  
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 9 meses
Puntos: 1532
Respuesta: Problemas con opacidad (raro...)
¿incluiste adecuadamente el DOCTYPE en la página?, para IE es muy importante, así desactivas el modo quirks
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 23/01/2013, 13:22
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años, 1 mes
Puntos: 33
Respuesta: Problemas con opacidad (raro...)
Tengo esto:

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" lang="en_US" xml:lang="en_US">
  4. <head>
  5.     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

¿Puede ser porque lo tenga en local? Por que (por ejemplo) firefox me da problemas con los CSS porque no los vincula bien (temas con "/" y "\")...
  #4 (permalink)  
Antiguo 23/01/2013, 15:06
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Problemas con opacidad (raro...)
El problema es con la opacidad o con el centrado?
Bueno, de todas maneras a falta de más datos hice esto

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. <style type="text/css">
  8. /*<![CDATA[*/
  9. .main{
  10.     margin-left:auto;
  11.     margin-right:auto;
  12.     margin-top:auto;
  13.     width:1000px;
  14.     background: lime;
  15. }
  16.  
  17. /*]]>*/
  18. </style>
  19.  
  20. <script type="text/javascript">
  21. //<![CDATA[
  22. function launchError(c){
  23.   if(c==1){
  24.     document.getElementById('G_I_Error').innerHTML='Texto';
  25.     setOpacity(document.getElementById('main'), 50);
  26.     document.re.d.setAttribute('onclick', 'voidFunction()');
  27.   }
  28. }
  29.  
  30. function setOpacity(e,o){
  31. e.style.opacity=o/100;
  32. e.style.MozOpacy=o/100;
  33. e.style.filter='alpha(opacity='+o+')';
  34. }
  35.  
  36.  
  37. //]]>
  38. </script>
  39. </head>
  40. <body onload="launchError(1);">
  41. <div id="G_I_Error"></div>
  42. <div class="main" id="main">
  43.     <div class="content">
  44.         <!--AQUÍ CONTENIDO...-->
  45.     </div>
  46.     
  47.     <div class="footer">
  48.         <span class="footerL"><span>Contact Us</span><span> | </span><span>FAQ</span><span> | </span><span>Web Map</span><span> | </span><span>Privacy</span><span> | </span><span>Legal Adverstiment & ToS</span><span> | </span><span>About Us</span><span> | </span><span>English</span></span>
  49.         <span class="footerC">Copyright 2012</span>
  50.     </div>
  51.     <div id="G_I_Calendar"></div>
  52. </div>
  53. </body>
  54. </html>

El div main (al que le di un background: lime para diferenciarlo, aparece centrado horizontalmente (margin-left:auto; margin-right:auto;) tanto en IE9 como IE/8/7 (tecla F12).
Lo que no aparece centrado es el contenido del div .main, habría que agregarle text-align: center; ni tampoco la palabra texto generada por la script, que por supuesto está fuera de .main.
En definitiva, no veo el problema
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 24/01/2013, 00:10
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años, 1 mes
Puntos: 33
Respuesta: Problemas con opacidad (raro...)
El problema lo tengo con el centrado.

Mientras no cambio la opacidad (es decir, no llamo a la función JS) el contenido me sale todo centrado.

En cuanto llamo a la función... se me descentra el contenido.

El div de error se que está fuera de "main". Lo hice para que al aplicar la opacidad éste quedara opaco completamente.

Para centrar el Error tengo algo similar a la clase main:

Código XML: 
Ver original
  1. #G_I_Error{
  2.     top:100px;
  3.     width:900px;
  4.     height:0px;
  5.     position:relative;
  6.     text-align:center;
  7.     z-index:1;
  8.     color:#FFF;
  9.     margin-left:auto;
  10.     margin-right:auto;
  11. }

Pero lo que me pasa es lo que te comento... en los otros navegadores al mostrar el error el contenido queda centrado; con IE8 se descentra (queda para la izquierda, como si fallara el margin)...

Gracias por responder.
  #6 (permalink)  
Antiguo 24/01/2013, 04:58
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Problemas con opacidad (raro...)
Te repito, no importa el caso

<body onload="launchError(1);">
ó
<body onload="launchError(0);">
ó
<body>

El centrado se mantiene
SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 24/01/2013, 06:49
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años, 1 mes
Puntos: 33
Respuesta: Problemas con opacidad (raro...)
Vale, acabo de ver dónde fallaba:

Al colocar el texto dentro de G_I_Error, se descuadraba todo por el margin-left y margin-right de G_I_Error.

He quitado esos margin, y ya funciona bien... ahora solo me falta que funcione la opacidad en todas las versiones de IE (no ser porqué no funciona...)

De nuevo gracias por tu tiempo
  #8 (permalink)  
Antiguo 24/01/2013, 12:27
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Problemas con opacidad (raro...)
Cita:
Iniciado por DoHITB Ver Mensaje
Vale, acabo de ver dónde fallaba:

Al colocar el texto dentro de G_I_Error, se descuadraba todo por el margin-left y margin-right de G_I_Error.

He quitado esos margin, y ya funciona bien... ahora solo me falta que funcione la opacidad en todas las versiones de IE (no ser porqué no funciona...)

De nuevo gracias por tu tiempo
Aqui dejo una guía para conseguir opacidad "crossbrowser", incluyendo IE7/8. IE6 ni idea, ya que no dispongo
http://foros.emprear.com/css/opacity.html
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 25/01/2013, 00:45
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años, 1 mes
Puntos: 33
Respuesta: Problemas con opacidad (raro...)
Hola,

Si, así tengo puesta la opacidad... el problema es que los child no me la heredan...

Primero pensaba que no aplicaba bien la opacidad, pero le puse un fondo de color y si cambia... pero solo el color de fondo!

El resto se mantiene igual... ¿Tú sabes qué podría ser?

Gracias
  #10 (permalink)  
Antiguo 25/01/2013, 05:36
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Problemas con opacidad (raro...)
Cita:
Iniciado por DoHITB Ver Mensaje
Hola,

Si, así tengo puesta la opacidad... el problema es que los child no me la heredan...

Primero pensaba que no aplicaba bien la opacidad, pero le puse un fondo de color y si cambia... pero solo el color de fondo!

El resto se mantiene igual... ¿Tú sabes qué podría ser?

Gracias
Date cuenta que así no se puede analizar, al igual que con lo del centrado, a partir de tus datos vistos en forma aislada, no se podía reproducir el problema,
tendrías que postear todo el html y css en un solo código para ver el contexto

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: html, js, opacidad
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 10:59.