Category Archives: Programación

Centrado absoluto horizontal y vertical en CSS

Sabemos que hacer “margin: 0 auto;” nos sirve para el centrado horizontal, pero “margin: auto;” no funciona para el centrado vertical… hasta ahora!

Porque tiene solución, el centrado absoluto requiere que el “height” sea declarado, además de los siguientes estilos:

Continue reading

Published by:

BxSlider – jQuery Content Slider

BxSlider es un plugin jQuery, que permite insertar contenido desplazable, adaptándose a cualquier tipo de dispositivo, ya sea pc, portátil, móvil, tablet, ipad, etc.

Características:

  • Permite transición vertical y horizontal
  • Las diapositivas pueden contener imágenes, videos o contenido HTML
  • Soporta manejo touch

Continue reading

Published by:

Propiedad ignore de SVN

SVN tiene propiedas, que permite indicar el manejo del repositorio. Una de éstas, es svn:ignore, que permite ignorar archivos (por nombre o patrón) o directorios a subir o actualizar. Para usarlo se debe utilizar el comando svn propset, posicionado en el directorio en cuestión. Por ejemplo:

svn propset svn:ignore *.log .

Aquí indicamos que los archivos que se encuentren en el directorio actual (.) con extensión .log sean ignorados.

Continue reading

Published by:

Visualizando código HTML

Si estamos programando en PHP y queremos ver como queda escrito un html que se arma dinámicamente, es decir, no queremos que el navegador lo interprete; podemos resolverlo de dos maneras.

  1. echo str_replace(“<“, “&lt;”, str_replace(“>”, “&gt;”, $html));
  2. echo htmlentities($html);
Published by:

JQuery UI Dialog se quita del formulario

Una ventana de diálogo de JQuery UI tiene la propiedad de ser modal (o no), lo que indica que es un objeto que se encuentra sobre todos los demás elementos de la misma aplicación, hasta que se cierra o se abre otro objeto.

Una característica que es muy útil, cuando queremos que el usuario interactúe con este objeto y no con el resto de la página.

Pero debido a la manera en que está implementada esta propiedad, genera un inconveniente que paso a explicar. Al crearse el objeto Dialog, se genera una capa (div), llamemosle “a”, al final de la página, hacia donde se mueve el Dialog (div también “b”) quitandolo de la ubicación original. De esta manera, al mostrarse en formato modal, la capa “a” ocupa toda la pantalla, y queda por debajo del Dialog. La función es “tapar” el resto de la página, para quitarle interactividad.

Por lo que si teníamos a “b” dentro de un formulario (form), dejará de estarlo, y al hacer submit, no se enviarán los datos que se encuentra en los input del Dialog.

Les muestro esta situación en código, aquí el form con el div “b”.

<form name="form1" method="post" action="">
...
<div id="divDialogo">...</div>
</form>

Y así queda una vez que indicamos a JQuery que la div “b” es un dialog:

<form name="form1" method="post" action="">
...
</form>
<div class="ui-dialog ui-widget ...">
<div class="ui-dialog-titlebar ...">...</div>
<div id="divDialogo">...</div>
</div>

¿De qué manera solucionamos este problema? Bueno, hay varias alternativas, acá les describiré las que encontré buscando subsanar el inconveniente.

1) El formulario dentro del div “b”, no es útil en determinadas situaciones, pero en otras es una solcuión sencilla. Ojo! no puede haber un form dentro de otro porque no tendrá el comportamiento esperado.
HTML

<div id="divDialogo">
<form name="form1" method="post" action="">
...
</form>
</div>

2) Dejarlo como está, y en el evento “close” del Dialog, pasar los valores de los input a objetos “hidden” que se encuentren dentro del formulario.
HTML

<form name="form1" method="post" action="">
   <input type="hidden" name="hidX" id="inpHiddenX" value="" />
...
</form>
<div class="ui-dialog ui-widget ...">
<div class="ui-dialog-titlebar ...">...</div>
<div id="divDialogo">
   <input type="text" name="txtX" id="inpTextX" value="" />
</div>
</div>

JavaScript

$("#divDialogo").dialog({
   height: 415,
   width: 405,
   modal: true,
   close: function() { $("#inpHiddenX").val($("#inpTextX").val()); },
   buttons: {
      "Guardar": function() {...},
      "Cancelar": function() {$(this).dialog("close");}
 });

3) Que el Dialog no sea modal, y moverlo a su lugar de origen luego de inicializarlo.
JavaScript

$("#divDialogo").dialog({...});
$("#divDialogo").parent().appendTo($("#divDialogo").parents("form"));
Published by:

JQuery UI Dialog sin botón Cerrar

El objeto Dialog de JQuery UI es una opción muy útil para presentar mensajes o formularios de manera modal, por encima de la página actual. Por supuesto que el uso lo determinan Uds…

En este caso, les voy a presentar la solución que usé, para evitar que salga el botón cerrar (con forma de X) en la parte superior derecha de la ventana de diálogo. Como se puede apreciar en la imagen que encabeza esta entrada.

open: function(event, ui) { $(this).parent().find(".ui-dialog-titlebar-close").remove(); },
closeOnEscape: false

Aquí les dejo un ejemplo completo, por si lo necesitan.

$("#divDialogo").dialog({
   autoOpen: false,
   resizable: false,
   height: 415,
   width: 405,
   modal: true,
   open: function(event, ui) { $(this).parent().find(".ui-dialog-titlebar-close").remove(); },
   buttons: {
      "Guardar": function() {...},
      "Cancelar": function(){$(this).dialog("close");}
 },
   closeOnEscape: false
 });
Published by:

JQuery UI datepiker

A la hora de agregar un objeto de fecha en un formulario dentro de una página web, el datepiker de JQuery UI es una buena opción. Sencilo de configurar, pero con algunas inconsistencias, que paso a describir para tener a mano.

Una de las opciones que integra, es establecer la fecha mínima, la máxima y el rango de años. Pero es necesario saber que si no se establece este último, la lista desplegable de los años, solo mostrará 10 años, y hay que elegir el último (o primero de la lista) para ver 10 años más.

Continue reading

Published by: