Clase para crear una estructura mediante dom

[caneva]

El objetivo es evitar el poner el mismo código cada vez que vaya a necesitar una "ventana emergente tipo css" y para ello quiero construir una clase javascript que sea una "ventana" (es decir un fondo semitransparente y encima, mediante posicionamiento, otro opaco con texto). Dicha clase tendrá dos métodos básicos: abrir (poner las capas en visible) y cerrar (en hidden).

Por tanto la estructura que buscamos en el objeto sería la siguiente:

Código PHP:

  <div id="ventana_form_nuevo_cliente">
  <div id="fondo_transparente"></div>
  <div id="contenido">Contenido de la ventana</div>
</div>  
   

Mi problema surge porque tengo muchas dudas respecto a DOM, por ejemplo ¿es correcto crear una etiqueta div de esta forma?

document.createElement(div)
div.setAttribute.ID = principal

En tal caso supongo que debería hacer algo parecido a esto para crear mi clase:

Código PHP:

  function ventana(nombre, ancho, alto, opacidad)
{
document.createElement(div)
this.setAttribute(Id)= nombre

//El resto de propiedades deben ser CSS, segun mi logica.
this.style.ancho = ancho
this.style.alto = alto
this.style.opacity = opacidad
//Abria que crear también los dos divs hijos aquí.

//Métodos:
this.abrir = mostrar
this.cerrar = ocultar
}

function mostrar()
{
 this.style.visibility = visible
}

function ocultar()
{
this.style.visibility = hidden
}  
   

Y ahora mi duda es:
¿Si utilizo "new ventana" para llamar al constructor como puedo hacer que esa función haga que ese elemento creado nuevo sean etiquetas divs como la estructura que pretendia conseguir al principio?

Bueno como podeís ver en la sintaxis también necesito que me echeis una mano.

mmm ahora que reviso lo que he escrito me pregunto si no sería mejor que las propiedades como alto, ancho y opacidad las estableciera mediante el nombre de la ventana en el archivo .css y no en la clase, por aquello de no tener que andar buscando cada creación de ventana en el código de la página sino irme directamente al .css ¿opiniones a esto tb por favor? gracias.

[caneva]

Como creo que mi planteamiento de utilizar una clase para solventar el problema es incorrecto he intentado otra sin clases, solo haría falta que me digaís donde he de corregir la sintaxis, pero creo que el concepto es correcto.

Código PHP:

  function crear_ventana(nombre, ancho, alto)
{
    divprincipal = document.createElement(div); //Creamos un elemento div
    divprincipal.setAttribute(Id) = nombre; //Le asignamos como Id el parámetro nombre.
    
    //Creamos sus dos divs hijos.
    hijoprincipal = divprincipal.appendChild(div);
    hijoprincipal.setAttribute(Id) = fondo;

//No se si esta forma es la adecuada para asignar propiedades de estilo css en un objeto dom.
    hijoprincipal.style.position = absolute;
    hijoprincipal.style.background-color = #CCCCCC;
    hijoprincipal.style.opacity = 0.5;
    hijoprincipal.style.filter = alpha(opacity=50);
    hijoprincipal.style.height = 100%;
    hijoprincipal.style.width = 100%;    
    
    hijosecundario = divprincipal.appendChild(div);
    hijosecundario.setAttribute(Id) = contenido;
hijosecundario.style.position = absolute;
hijosecundario.style.background-color = #FFFFFF;    
hijosecundario.style.height = alto px;
    hijosecundario.style.widht = ancho px;

//No se si esta es la forma sintacticamente correcta de añadir el simbolo menos y el px de pixeles a un valor de estilo mediante javascript :S
    hijosecundario.style.margin-left: -(ancho/2)px;
     hijosecundario.style.margin-top: -(alto/2) px;
}

function cerrar_ventana(nombre)
{
    ventana = document.getElementById(nombre);
    ventana.style.visibility = hidden;
}

function abrir_ventana(nombre)
{
    ventana = document.getElementById(nombre);
    ventana.style.visibility = visible;
}  
   

Suponiendo que lo anterior pudiera dejarse sintacticamente bien solo faltaría encontrar la forma de meter dentro del div "contenido" el codigo html que quisieramos, pero eso no se como hacerlo, me suena innetHtml o algo así, pero creo que no es la forma correcta de hacerlo, así que espero algo de ayuda :S

[zerokilled]

tienes que corregir varios errores. si tienes firefox, dejate llevar por la consola de errores. entre los errores:

• los valores de estilo deben ser tipo string, de lo contrario javascript lo puede interpretar como una sentencia, como es el caso de la linea
  Código:

     hijoprincipal.style.width = 100%;
  

  donde 100% indica la operacion cien modulo... y el segundo operando no existe.
• las propiedades css tienen una forma especifica de escribirse. donde quiera que hay un guion, este se elimina y el siguiente caracter se escribe en mayuscula. por ejemplo, la propiedad background-color se escribe backgroundColor. para una lista completa, style properties.
• setAttribute utiliza dos argumentos y ambos deben ser string, el primero siendo el nombre del atributo y el segundo siendo el valor para dicho atributo.

[caneva]

En primer lugar gracias por tu ayuda ¿Ahora esta correcto?

Código PHP:

  function crear_ventana(nombre, ancho, alto)
{
    divprincipal = document.createElement(div); //Creamos un elemento div
    divprincipal.setAttribute("id", nombre); //Le asignamos como Id el parámetro nombre.
    
    //Creamos sus dos divs hijos.
    hijoprincipal = divprincipal.appendChild(div);
    hijoprincipal.setAttribute("id", fondo);
    //Atributos de estilo CSS:
    hijoprincipal.style.position = "absolute";
    hijoprincipal.style.backgroundColor = "#CCCCCC";
    hijoprincipal.style.opacity = "0.5";
    hijoprincipal.style.filter = "alpha(opacity=50)";
    hijoprincipal.style.height = "100%";
    hijoprincipal.style.width = "100%";    
    
    hijosecundario = divprincipal.appendChild(div);
    hijosecundario.setAttribute("id", contenido);
    //Atributos de estilo CSS:
    hijosecundario.style.position = "absolute";
    hijosecundario.style.backgroundColor = "#FFFFFF";
    hijosecundario.style.height = alto + "px";
    hijosecundario.style.widht = ancho + "px";
    hijosecundario.style.marginLeft: "-"+ (ancho/2) + "px";
     hijosecundario.style.marginTop: "-" + (alto/2) + "px";
}

function cerrar_ventana(nombre)
{
    ventana = document.getElementById(nombre);
    ventana.style.visibility = "hidden";
}

function abrir_ventana(nombre)
{
    ventana = document.getElementById(nombre);
    ventana.style.visibility = "visible";
}  
   

Tengo algunas dudas respecto a si el + se puede utilizar para concatenar un string como puedes ver...

[zerokilled]

todavia te faltan valores css por escribir correctamente, el de position, los colores, y el visibility. como ya mencione, todos los valores css se escriben en tipo string. respecto a tu duda de concatenar string, el operador +, ademas de sumar numeros, tambien se puede utilizar para concatenar string. por otro lado, asegurate que la variable div sea un elemento y la variable fondo sea una variable definida. no he comprobado el codigo pero son las cosas que a simple vista veo que estan mal.

[caneva]

No veo que esta mal en el position, los colores y el visibility, según la guía de referencia que me diste esos estilos se escriben así y al estar los valores entre comillas son strings.

¿div no se supone que es la etiqueta html? Creía que con createElement(div) se conseguia crear un elemento div ¿cómo se hace entonces?

Fondo y contenido son simples strings, he modificado algunas cosas y he declarado con "var" divprincipal, hijoprincipal e hijosecundario, que no lo estaban... a ver que ves mal porque no me funciona y ya no se que puede ser :S

Código PHP:

  function crear_ventana(nombre, ancho, alto)
{
    var divprincipal = document.createElement("div"); //Creamos un elemento div
    divprincipal.setAttribute("id", nombre); //Le asignamos como Id el parámetro nombre.
    divprincipal.style.visibility = "visible";
    
    //Creamos sus dos divs hijos.
    var hijoprincipal = divprincipal.appendChild("div");
    hijoprincipal.setAttribute("id", "fondo");
    //Atributos de estilo CSS:
    hijoprincipal.style.position = "absolute";
    hijoprincipal.style.backgroundColor = "#CCCCCC";
    hijoprincipal.style.opacity = "0.5";
    hijoprincipal.style.filter = "alpha(opacity=50)";
    hijoprincipal.style.height = "100%";
    hijoprincipal.style.width = "100%";    
    hijoprincipal.style.top = "0";
    hijoprincipal.style.left = "0";
    hijoprincipal.zIndex = "1";
    
    var hijosecundario = divprincipal.appendChild("div");
    hijosecundario.setAttribute("id", "contenido");
    //Atributos de estilo CSS:
    hijosecundario.style.position = "absolute";
    hijosecundario.style.backgroundColor = "#FFFFFF";
    hijosecundario.style.height = alto + "px";
    hijosecundario.style.widht = ancho + "px";
    hijosecundario.style.marginLeft = "-"+ (ancho/2) + "px";
     hijosecundario.style.marginTop = "-" + (alto/2) + "px";
    hijosecundario.style.top = "50%";
    hijosecundario.style.left = "50%";
    hijosecundario.zIndex = "2";
}

function cerrar_ventana(nombre)
{
    ventana = document.getElementById(nombre);
    ventana.style.visibility = "hidden";
}

function abrir_ventana(nombre)
{
    ventana = document.getElementById(nombre);
    ventana.style.visibility = "visible";
}  
   

[zerokilled]

veo que editastes el codigo. lo que sucede es que si no haces los valores css como string, javascript lo interpreta como una expresion. y en este caso, una expresion tal #FFFFFF genera error porque no se considera una expresion o sintaxis correcta. o sea, javascript considera que FFFFFF podria ser una variable y # es otra cosa, pero como esa "otra cosa" no existe en el lenguaje, entonces se genera error. de ahi que, en javascript, los valores css siempre se escriben en forma de string.

en cuanto al div, javascript lo considera una variable. si esa variable no esta definida, entonces genera error. en todo caso, createElement espera como valor un string que indique el nombre de un elemento.

Código:

// es valido, porque la variable div contiene el string "div";
var div = "div";
document.createElement(div);

// pero si solo tuvieras esto, no seria valido porque no existe la variable div;
document.createElement(div);

[caneva]

Ya veo, el caso es que no consigo que funcione el código, no veo que cree el <div> con sus hijos, probé a añadir al final de la función crear_ventana esto:

Código PHP:

  var ancla = document.getElementById("cuerpocentral");
    ancla.appenChild(divprincipal);  
   

Donde "cuerpocentral" es el <div> que debería contener a los que genera la funcion, porque pense que a lo mejor lo estaba creando pero no lo ponía en ningún lado ya que no lo había especificado, pero nada, como si no respondiera ¿alguna idea?

El amigo IE me lanza el siguiente error: Tipo incorrecto.
En la línea 47: var hijoprincipal = divprincipal.appendChild("div");

Sería quizás así?
var hijoprincipal = createElement("div");
divprincipal.appenChild(hijoprincipal);

[zerokilled]

El amigo IE me lanza el siguiente error: Tipo incorrecto.
En la línea 47: var hijoprincipal = divprincipal.appendChild("div");

fijate que en mi respuesta anterior estaba hablando de createElement. en el caso de appendChild, el argumento tiene que ser un objeto tipo nodo. o sea, lo que devuelve createElement, pero en tu caso le estas pasando un string el cual evidentemente no es el mismo tipo de dato.

Código:

// almacena el elemento en una variable;
var nuevo_div = document.createElement('div');
// le pasamos la variable al metodo;
divprincipal.appendChild(nuevo_div);

[caneva]

Entiendo, gracias por la ayuda, a ver si ahora tira.

[zerokilled]

de nuevo, esta linea te esta dando problema

divprincipal.appendChild("div");

como ya te mencione, appendChild requiere que el argumento sea un nodo, no un string. supongo que en tu caso tienes que poner la variable hijoprincipal el cual contiene el elemento <div>.

[caneva]

Vale ya funciona, lo único que me falta por hacer es meter el contenido en uno de los divs, ¿sería correcto usar innerHTML para ello?

[zerokilled]

puede ser una opcion aunque no es estandar pero la mayoria de los navegadores lo admite. por otro lado, en mi opinion, tienes que tener cuidado en que tipo de contenido agregas porque algunos navegadores dan problema. exactamente no se que tipo de contenido son pero creo que de tipo javascript.

[caneva]

Iniciado por zerokilled

puede ser una opcion aunque no es estandar pero la mayoria de los navegadores lo admite. por otro lado, en mi opinion, tienes que tener cuidado en que tipo de contenido agregas porque algunos navegadores dan problema. exactamente no se que tipo de contenido son pero creo que de tipo javascript.

A ver la cuestión es que el objetivo de todo lo anterior era no tener que crear "ventanas" de las de tipo capas en css cada vez, vamos reutilizar código. Entonces la idea ahora es cargar el contenido de esas ventanas, por ejemplo un formulario sin incluirlo en la función, porque sino estaríamos eliminado la reutilización de código, es decir.. ¿hay alguna forma de incluir dentro de uno de los divs que antes he definido el contenido de un archivo donde se encuentre el código de por ejemplo el antes mencionado formulario?

Se me ocurríó innerHTML, pero por un lado ya sospechaba que no era muy estandar, por otro lado no se como llamar desde el a un archivo para que lo considere un string y lo pueda inyectar en el div... así que no se ¿qué alternativas hay para hacer esto?

[zerokilled]

me parece lo que tu dices mas bien es XHR (aka Ajax), donde haces una peticion a un archivo o contenido y lo incluyes al documento actual. te recomiendo que mires algun tutorial para que veas cual es el codigo necesario para realizar la peticion.

[caneva]

Creo que no eh, puesto que no quiero hacer una petición a un archivo que se ejecute y me devuelva un resultado, sino cargar el contenido de un archivo dentro de algun tipo de variable. Sería algo parecido a lo que hacen los include en php...

Solo que claro esto sería para hacer:
hijosecundario.innerHTML = "string"

Donde strign debería ser el codigo del formulario contenido en un archivo, claro que no se como hacer la llamada desde jscript...

Aun así me gustaría saber como hacerlo sin innerHTML.

[zerokilled]

pues con XHR puedes cargar cualquier documento, no necesariamente tiene que procesarse para producir un contenido. por ejemplo, puedes cargar un archivo .txt que contiene codigo HTML.

[caneva]

La verdad es que no veo la manera de hacerlo como dices, probé lo siguiente:

Código PHP:

 hijosecundario.innerHTML = "<?php include("nombre.php") ?>";  

Pero claro.. php no entiende que nombre es una variable de js y tampoco se como indicarle que la lea... así que estoy en las mismas :S

[zerokilled]

creo que ya voy viendo por donde va el asunto. primero debes entender que php se procesa antes de enviarse el documento al cliente. si bien estoy entendiendo tu caso, el elemento puede contener un contenido variable. si es asi, entonces include no te va a funcionar porque el script resultara siempre con el mismo contenido. la solucion en este caso es pedir el contenido mediante XHR.

si es el caso que siempre sera el mismo contenido, entonces debes velar que el contenido no haga conflicto con javascript. por ejemplo, el contenido no debe confligir con las comillas que utilices para declarar el string en javascript. en otras palabras, siguiendo tu ejemplo, nombre.php no puede contener comillas dobles, o si las va a contener deben estar escapado con un backslash (\).

[caneva]

Bien estamos en el caso de contenido variable, es decir que voy a tener que cargar el contenido de un formulario (ya que cada ventana tiene el suyo) mediante XHR (ajax según comentas). Pero no se ni por donde voy a empezar xD ¿alguna referencia de como podría hacerlo? Porque según tengo entendido ajax lo que hace es mediante js enviar unos datos a un archivo del lado del servidor (php) este los procesa y luego devuelve un resultado que es tratado nuevamente con js.

[zerokilled]

no necesariamente tiene que enviar datos para procesarlo, realmente el principio de XHR es realizar una peticion al servidor. la peticion puede ser enviando datos para ser procesado o simplemente para cargar contenido. honestamente no se que seria lo mas adecuado porque no trabajo con XHR. de momento lo que se me ocurre es tener el formulario en un archivo aparte que solo contenga el codigo HTML del formulario, puede ser un .htm o .txt. luego con XHR cargas el documento y este lo agregas al elemento.

Código:

var element = document.createElement('div');
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(this.readyState != 4)return;
element.innerHTML = this.responseText;
}
// asumiendo que form.txt contiene codigo HTML;
xhr.open('get', 'form.txt', true);
xhr.send(null);

me funciona en local con chrome y firefox bajo windows. en iexplorer8 me dice Acceso denegado, no estoy seguro porque es pero creo que si fuera en servidor no me daria problema. aclaro que este ejemplo solo funciona con navegadores que soportan XMLHttpRequest, las viejas versiones de iexplorer, creo que desde el 6 y mas viejo, utilizan otras funciones. para ello consulta el tutorial que antes te mostre.

[caneva]

Pues que puedo decir, funciona perfectamente. Gracias por la ayuda, me voy a poner a leer sobre ajax para poder entender todo lo que has codeado en el último post.

Solo tengo una duda... para que sea realmente dinámico, es decir, para que cargue un archivo distinto para cada ventana ¿cómo podría hacer que sintacticamente esto funcionara? entendiendo que "nombre" es un parámetro que se le pasa a la función principal (en mi código "crear_ventana") que contiene a tu código anterior.

xhr.open('get', 'nombre.txt', true);

[zerokilled]

pues tendrias que pasar un valor distinto segun el archivo que quieras cargar. si quieres usar el parametro nombre, el cual en tu caso se usa para darle un ID al elemento, puedes hacerlo. claro, tendrias que completar la ruta y el nombre del archivo segun el caso lo requiera. o sea, si fuera el caso y asumiendo que los documento estan en otro directorio, por ejemplo incluir, entonces tienes que completar la ruta concatenando el string necesario.

Código:

xhr.open('get', 'incluir/' + nombre + '.txt', true);

o bien puedes crear otro parametro en tu funcion exclusivamente para indicar el archivo que tiene que cargar. todo depende el diseño que tu quieras darle a tu aplicacion.

[zerokilled]

por si te interesa, otro tutorial mas de AJAX, http://www.librosweb.es/ajax/index.html
personalmente no lo he leido pero lo publican ocacionalmente en el foro y esta en español. procura tambien consultar la wiki de FDW