Que falla? Quiero tener un div al centro de la pantalla..

[djkiku]

Hola, bueno tras ser aconsejado por un compañero de aqui, me puse a montar un invento.. que seria algo como:

Cuando clickas el Boton "comprar", aparesca un div al medio de la pantalla diciendo, las formas de pagar.. paypal, tranfrecencia, visa etc...


Así es como lo tengo montado y no funciona:


CSS:

Código HTML:

 .contenido_a_mostrar {
width:400px;
height:500px;
position:fixed;
top:50%;
left:50%;
margin-left: -200px;
margin-top: -250px;
background:url() center no-repeat transparent;

background-color: #999999;
	}

JavaScript:

Código HTML:

<script language='JavaScript'>

function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable &quot;el&quot; igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('contenido_a_mostrar');/* &quot;contenido_a_mostrar&quot; es el nombre que le dimos al DIV */
}
</script> 

DIV:

Código HTML:

<div class="contenido_a_mostrar">
<p>Este contenido tiene que mostrarse con el link

<a style='cursor: pointer;' onclick="muestra_oculta('contenido_a_mostrar')" title="">Mostrar / Ocultar</a>

</p>
</div>


<a style='cursor: pointer;' onclick="muestra_oculta('contenido_a_mostrar')" title="">Mostrar / Ocultar</a> 

El problema es que el script me funciona con ID, y el div al medio de la pantalla me funciona solo con CLASS, hago por separado? y.. si tengo una ID, la podre usar en otras paginas ?


Muchisimas gracias anticipadas!

[djaevi]

El problema es que estas llamando a una funcion por ID cuando tu div no tiene ID sino un class, si vas a usar muchos popups de ese estilo en efecto quiza te convenga utilizar un class pero si solo usaras ese popup tranquilamente puedes usar un ID, si usaras un class para obtener el div deberias hacer esto:

<script type="text/javascript">
var div = document.getElementsByClassName("claseDelDiv");
</script>

esto te generara un array con todos los elementos que contengan esta clase, si solo tienes uno y quieres hacer referencia a ese div solo debes agregar esta linea.

<script type="text/javascript">
div = div[0];
</script>

Tambien debo comentarte que el document.getElementsByClassName no es del todo estandar por lo cual en algunos navegadores da problemas lo mas estandar que he hayado para obtener elementos por clase lo he conseguido via jQuery, incluso para manipular nodos y popups tiene muchas herramientas que aceleran enormemente tu trabajo.

Si tienes mas dudas me avisas.

Un Saludo!

[djkiku]

Muchisimas Gracias djaevi!

pero lo pongo de esta manera:

<script language='JavaScript'>
var div = document.getElementsByClassName("claseDelDiv");
function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable &quot;el&quot; igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('contenido_a_mostrar');/* &quot;contenido_a_mostrar&quot; es el nombre que le dimos al DIV */
}
</script>

Y no me hace ningun cambio, también lo probe de manera individual y nada.. que hago mal ?


Y otra cosa al respecto, me preocupa que este sistema no funcione en todos navegadores.. hay alguna alternativa para hacer el mismo funcionamiento pero que si funciona en todos o casi todos navegadores?

Muuuyy per que muy agradecido!!!

[ClubIce]

No entendi muy bien tu codigo debido a que esta un poco "sucio" (utiliza Highlight la proxima vez)

sin embargo, si entendi muy bien lo que quieres hacer: no es necesario que el elemento DOM tenga un id o un class para poderlo modificar, solo basta con un referencia directa, ejemplo:

Código HTML:

<div>Este es el div Padre
  <div style="display:none">Este es el div oculto
    <a onclick="muestra_oculta(this.parentNode)">Ocultar</a>
  </div>
  <a onclick="muestra_oculta(this.parentNode.firstNode)">Mostrar</a>
</div>
 

Explicación:

1) encierro todo en un div padre para tener mejor control de sus hijos.
2) coloco el div que se va a esconder.
3) dentro de div que se va a esconder coloco el link que hace que se oculte de nuevo
4) el link que oculta el div, llama a la función muestra_oculta y le pasa el nodo padre (el div oculto) del elemento actual (el link que oculta), de tal forma que dentro de la función muestra_oculta recibiremos un elemento DOM en vez de un id o un class, por lo que nos ahorramos el identificarlo.
5) después del div oculto coloco el link que lo muestra
6) el link que muestra el div llama a la función muestra oculta y le pasa el primer nodo (el div escondido) del nodo padre (el div padre) del elemento actual (el link que muestra). igual que en el link que oculta, este pasa un elemento DOM en vez de un id o un class.

finalmente la función muestra_oculta recibiría directamente el elemento que va a mostrar o ocultar, por lo que no es necesario una identificación por id o class. debes tener en cuenta que el div oculto debe definirse inmediatamente después comenzar el div padre, por que estamos utilizando firstNode (primer Nodo), ya que cualquier otra cosa colocada antes del div podría arruinar el código. En ese caso seria necesario hacer una referencia DOM un poco mas complicada.

Con esta técnica puedes colocar tantos pop-ups que quieres sin interferir ninguno sobre el otro, simplemente utilizando la misma función para mostrarse/ocultarse. ademas de que puedes especificar un class para definir los estilos propios del div.

EDIT:

te me adelantaste djaevi mientras escribia xD
PD: este script es valido para cualquier navegador.

[djkiku]

Muchisimas Gracias a los dos! El simple script de clublce me ha gustado, el problema es que no hay forma de hacerlo funcionar...

Aquí hice el ejemplo, pero nada! Ojala alguien me pueda echar una mano:

http://www.comprarportatilbarato.com...g-post_23.html

[djkiku]

No hay manera....... de hacer que esto funcione, no entiendo por que

Tengo el Javascript (un codigo algo largo, pero ya me vale, mientras funcione):

Código HTML:

<div class="divspoiler">
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>


<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Comprar ▼▲</a> 

También tengo el CSS, lo aplique a un nuevo DIV, y no funciona el script deja de funcionar.. luego hago un div nuevo, que envuelva el contenido que aparesca y desaparesca, y igual no funciona... aqui dejo el CSS (quizá es el CSS que no deja funcionarlo o nose :( )

Código HTML:

 .spoiler {
width:400px;
height:500px;
position:fixed;
top:50%;
left:50%;
margin-left: -200px;
margin-top: -250px;
background:url() center no-repeat transparent;

background-color: #999999;
	}

Si alguien me puede salvar!!! le agradeceria mucho!!!!

[ClubIce]

Iniciado por djkiku

Muchisimas Gracias a los dos! El simple script de clublce me ha gustado, el problema es que no hay forma de hacerlo funcionar...

Aquí hice el ejemplo, pero nada! Ojala alguien me pueda echar una mano:

http://www.comprarportatilbarato.com...g-post_23.html

Tienes que tener en cuenta que para que mi script funcione tienes que adaptar la funcion muestra_oculta para que haga uso de un elemento en vez de un id. Te quedaria algo como esto:

Código Javascript:

function muestra_oculta (obj) {
  obj.style.display = obj.style.display == "none" ? "block" : "none"
}
 

tambien puedes hacerlo disrectamente desde el HTML:

Código HTML:

<div>Este es el div Padre
  <div style="display:none">Este es el div oculto
    <a onclick="this.parentNode.style.display='none'">Ocultar</a>
  </div>
  <a onclick="this.parentNode.firstNode.style.display='block'">Mostrar</a>
</div>
 

[djaevi]

Otra herramienta muy interesante para mostrar y ocultar div internos es el slideToggle de jquery que hace lo mismo pero te abstrae mucho mas del codigo y ademas lo hace de forma animada.

Saludos