Archivo para la Categoría "►Tutoriales"

Mostrar y ocultar elementos con JavaScript

Ya parezco revista semanal (por que solo posteo una vez a la semana). Pero como siempre intento mostrar cosas útiles, para que no batallen como yo buscando información.

Casi siempre es necesario ocultarle cosas al usuario por “X” razón, y esto parece muy complejo en ambiente web (por que no encontramos algo como en Visual Basic -modificando solo la propiedad visible=”false”), pero JavaScript nos facilitara esta tarea

¡Vallamos al grano!

Escenario: Tenemos que hacer un formulario en el cual guardaremos los clientes de una empresa, pero resulta ser que nuestros clientes pueden ser personas físicas(Una persona cualquiera) o personas morales (Empresas *grupo de personas), entonces dependiendo de lo que sean, tendremos que almacenar diferentes datos:

Personas Físicas:

-Apellido Paterno

-Apellido Materno

-Nombre(s)

Personas Morales:

-Razón Social (nombre de la empresa)

Como podemos ver, si un cliente es una persona física tendremos que mostrar los campos para introducir Apellido Paterno, Apellido Materno y Nombre(s), al mismo tiempo ocultar el campo de Razón Social, pero si un cliente es persona moral tendremos que mostrar el campo Razón Social y ocultar los campos Apellido Paterno, Apellido Materno y Nombre(s).

Para solucionar esto basta con poner un Grupo de opción (radio buttons) , para que cuando elijan el tipo de persona el script realice la acción de ocultar o mostrar dichos campos.

image

El código es muy fácil :

   1: <html>
   2: <head>
   3: <title>Muestra y oculta div</title>
   4:
   5: <script language="JavaScript">
   6:
   7: function oculta(id){
   8:      var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
   9:      elDiv.style.display='none'; //damos un atributo display:none que oculta el div     
  10:     }
  11:
  12: function muestra(id){
  13:      var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
  14:      elDiv.style.display='block';//damos un atributo display:block que  el div     
  15:     }
  16:
  17:
  18: window.onload = function(){/*hace que se cargue la función */
  19: /* "Mandamos como parametro el nombre de la Div para ocultar" */
  20: oculta('Pmoral'); /*Ocultamos Pmoral*/
  21: }
  22: </script>
  23:
  24: </head>
  25:
  26: <body>
  27:
  28: <!--Al hacer llamado de la función solo tienes que idicar el nombre del DIV entre parentesis-->
  29: <p>
  30:   <label>
  31:    <input type="radio" name="pers_cte" value="Fisica"  id="per_0" onClick="muestra('Pfisica'); oculta('Pmoral')" checked > <!-- Al cambiar "onClick" el valor del radio llamamos la funcion ocultando los campos de Pfisica y mostrando Pmoral-->
  32:     Fisica</label>
  33:   <br>
  34:   <label>
  35:    <input type="radio" name="pers_cte" value="Moral" id="per_1" onClick="muestra('Pmoral'); oculta('Pfisica')">
  36:     Moral</label>
  37:   <br>
  38: </p>
  39:
  40: <div id="Pfisica">
  41: <p>Este contenido es para persona Fisica</p>  <!--Div para ocultar o mostrar de Persona Fisica -->
  42: </div>
  43:
  44: <div id="Pmoral">
  45: <p>Este contenido es para persona Moral</p>   <!--Div para ocultar o mostrar de Persona moral -->
  46: </div>
  47: </body>
  48: </html>

*El código esta comentado =) para que no se espanten.

Demo[Espera a que cargué por completo la pagina]

Download Código

[Si, si lo se hay mucho código en internet que nos ayuda con esto, pero creo yo que este es muy fácil, sencillo y pequeño]

Inspirado| http://blogandweb.com/javascript/ocultar-o-mostrar-un-div-con-javascript/

Anuncios

Conexiones TCP/IP con PostgreSQL 8.3

Hola, ya hace un rato sin postear nada… pero como recompensa posteare algo útil.

Cuando trabajamos en equipo y deseamos hacer una base de datos “física”, necesitamos compartir el servidor de la Base de datos. Para esto pensamos, que es tan simple como hacer una conexión remota al servidor base (llamemos así al servidor que recibirá las conexiones entrantes) por medio de la IP, desde el cliente (llamemos así al Manejador de base de datos desde el cual nos conectaremos remotamente al servidor base). Pero en la versión 8.3  de PostgreSQL esta opción de conexión remota (TCP/IP) esta desactivada por default.

Ok dicho lo anterior, manos a la obra para configurar nuestro servidor base necesitamos hacer lo siguiente:

1.-Editar nuestro archivo postgresql.conf para aceptar conexiones TCP/IP.

a) Boton inicio –> PostgreSQL 8.3 –> Configuration files –> Edit postgresql.conf

image

b) En el archivo postgresql.conf buscamos la línea:

 # – Connection Settings –

Exactamente el texto :

#listen_addresses = ‘localhost’  

En esta línea borraremos el #(gato) y sustituiremos el texto localhost por *(asterisco), quedando de la siguiente forma:

listen_addresses = ‘*’   

image

Guardamos el archivo y listo. Con estos dos sencillos pasos esta configurado nuestro servidor base para recibir conexiones IP entrantes, pero aun nos falta dar de alta los usuarios que se podrán conectar a ella.

Para dar de alta usuarios de  conexión remota:

a) Boton inicio –> PostgreSQL 8.3 –> Configuration files –> Edit pg_hba.conf

image

b) En el archivo pg_hba.conf

Buscamos la línea

# IPv4 local connections:

y justamente en la línea:

———-

# TYPE  DATABASE    USER        CIDR-ADDRESS          METHOD

# IPv4 local connections:
host    all         all         127.0.0.1/32          md5

———–

Agregaremos un usuario mas, con la IP de la maquina cliente que accederá a nuestro servidor base quedando de la siguiente forma:

———-

# TYPE  DATABASE    USER        CIDR-ADDRESS          METHOD

# IPv4 local connections:
host    all         all         127.0.0.1/32          md5
host    all         all        192.168.1.103/32          md5

———–

El ultimo paso que nos queda es reiniciar el servicio de PostgreSQL en el servidor base para que los cambios sean aceptados y el cliente pueda conectarse.

*Esto lo hacemos desde Panel de control-> Herramientas Administrativas –>  Servicios-> PostgreSQL Database Server 8.3

image

Lo detenemos y lo iniciamos (es como reiniciarlo jajaja).

Ya con eso el cliente podrá conectarse desde su pgAdmin III

*Nota importante: SI tienes un firewall asegúrate de desactivarlo o bien colocar en las excepciones a postgreSQL con su respectivo puerto.

Orangoo Labs – Proyectos Open Source

Cuando queremos hacer un proyecto web , usualmente buscamos no hacer las cosas que ya están hechas 😉 , para esto buscamos herramientas open source que nos ayuden en la tarea.

En esta ocasión traigo la recomendación de una pagina: http://orangoo.com/ , en la pagina se presentan algunos proyectos como son:

 

image

Corrector ortográfico – Corrector ortográfico en línea. Simple, libre y fácil de usar, ¡27 idiomas soportados!.

En lo personal se me hace muy útil, no tengo que instalar NADA solo descomprimir y modificar el código a mi antojo.

Prueba en línea | Descarga 

 

image

GoogieSpell es un comprobador de ortografía que puedes utilizar en tu propia aplicación web

Características de GoogieSpell:

  • Soporta alrededor de 27 idiomas
  • Probado sobre IE 5.5, IE 6.0, IE 7, FF 1.0+, Safari, Opera etc.
  • Genérico, extensible y fácil instalar
  • Basado en AJAX (sin recargar la página)
  • Peso ligero (alrededor 50 KB)
  • Bien documentado

Prueba en línea | Descarga

 

image

Skeletonz es un nuevo sistema de gestión de contenidos (CMS) basado en Python. Se distingue de otros por ser simples, pero muy potente y extensible. El sistema es de código abierto y liberado bajo licencia GNU GPL.

Prueba en línea | Ver código en línea | Descarga

 

image

GreyBox se puede utilizar para exhibir las imágenes de los Web site de una manera llamativa (un marco superior con ventana semi-transparente)

Porqué usar GreyBox:

  • No está en conflicto con los móviles
  • ¡Pesa solamente 22 KB!
  • Es fácil de implementar
  • Es fácil de utilizar
  • Se puede alterar fácilmente el estilo CSS

Prueba en línea | Descargar

Algunas Caps:

image image

Corrector ortográfico

GreyBox

 

Si deseas saber mas sobre sus proyectos puedes entrar a: http://orangoo.com/labs/ ó bien ver sus mini proyectos http://orangoo.com/labs/Mini_projects/

-También recomiendo: http://www.dynarch.com/projects/htmlarea/

Nube de etiquetas