Inicio   |    About   |    Contacto
 

Mostrar y ocultar div con javascript

Bueno hoy vamos a armar un pequeño ejemplo de como con javascript podemos mostrar y ocultar una div. Tambien vamos a ver la forma de implementar prototype en nuestro codigo. Para entender mejor lo que es prototype.. ya que no vamos a explicar lo que es en este ejemplo.. pueden darse una vuelta por este articulo escrito por iGeek.

1º Este es nuestro codigo javascript sin prototype para mostrar una div:

PLAIN TEXT
  1. <script type="text/javascript"><!--
  2. function ShowDiv(id){
  3.     if(document.getElementById(id).style.display=='none'){
  4.     document.getElementById(id).style.display='';
  5.     }else{
  6.     document.getElementById(id).style.display='none';
  7.     }
  8. }
  9. // --></script>

2º Ahora lo primero q tenemos que hacer es incluir el js de prototype dentro de nuestro archivo html. De la siguiente manera:

PLAIN TEXT
  1. <script src="prototype.js" type="text/javascript"></script>

3º Nuestro codigo con prototype nos quedaria algo asi:

PLAIN TEXT
  1. <script type="text/javascript"><!--
  2. function ShowDiv(id){
  3.     if($(id).style.display=='none'){
  4.         $(id).style.display='';
  5.     }else{
  6.         $(id).style.display='none';
  7.     }
  8. }
  9. // --></script>

La diferencia que vemos entre los 2 codigos seria el uso de la funcion $ con prototype, ya que esta nos simplifica escribir document.getElementById.
Espero que este pequeño ejemplo les sirva de algo. Les recomiendo que se den una vuelta por las siguientes paginas, van a poder encontrar mucho mas contenido de ajax, javascript y de este muy buen framework como en prototye.

Por ultimo aca les dejo el ejemplo y el codigo de fuente final:

27/09/2008
Ajax, JavaScript
Cortar imagenes online con Jcrop

Jcrop es una libreria que junto a Jquery, nos permite cortar en tiempo real una seleccion de una imagen, muy util y muy facil de utilizar:

Jcrop cortar imagen

Como instalar e utilizar:

Paso 1: En nuestro archivo tenemos que colocar este codigo php para generar la imgen que vamos a recortar luego:

PLAIN TEXT
  1. /*
  2. *** Codigo Php
  3. */
  4. if ($_SERVER['REQUEST_METHOD'] == 'POST')
  5. {
  6. $targ_w = $targ_h = 150;
  7. $jpeg_quality = 90;</p>
  8. $src = 'demo_files/raphaxx3.jpg'; //En este paso seleccionamos que imagen vamos a cargar para luego cortarla
  9. $img_r = imagecreatefromjpeg($src);
  10. $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
  11.  
  12. imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
  13. $targ_w,$targ_h,$_POST['w'],$_POST['h']);
  14.  
  15. header('Content-type: image/jpeg');
  16. imagejpeg($dst_r,null,$jpeg_quality);
  17.  
  19. }
  20. ?&gt;

En este codigo podemos ver q en la linea $targ_w = $targ_h = 150; nos dice el tamaño que va a tener la imgan luego de ser recortada, es decir que si es mas grande o pequeña el sistema la va a redimensionar. Despues en la linea $jpeg_quality = 90; es la calidad de la imgane, por ultimo entre lo mas destacado tenemos $src = 'demo_files/raphaxx3.jpg'; esto es fundamental aca tenemos q seleccionar la ruta de la imgaen que luego vamos a cortar.

Paso2 : Incluimos los archivos JavaScript y css de la libreria entre las etiquetas <header>. Sin esto obviamente no va a funcionar:

PLAIN TEXT
  1. <script src="js/jquery.pack.js"></script> <!-- Incluimos la libreria de jQuery --> <script src="js/jquery.Jcrop.pack.js"></script> <!-- Incluimos la libreria de jQuery - Jcrop -->
  2.  
  3. <!-- Css de Jcrop -->
  4.  
  5. <!-- Css de nuestro test -->

Paso3: Tambien dentro de nuestro archivo en el <header> del archivo pegamos este codigo javascript para generar nuestro archivo para luego cortarlo:

PLAIN TEXT
  1. <script type="text/javascript"><!--
  2.             jQuery(function(){
  3.  
  4.                 jQuery('#cropbox').Jcrop({
  5.                     aspectRatio: 1,
  6.                     onSelect: updateCoords
  7.                 });
  8.  
  9.             });
  10.  
  11.             function updateCoords(c)
  12.             {
  13.                 jQuery('#x').val(c.x);
  14.                 jQuery('#y').val(c.y);
  15.                 jQuery('#w').val(c.w);
  16.                 jQuery('#h').val(c.h);
  17.             };
  18.  
  19.             function checkCoords()
  20.             {
  21.                 if (parseInt(jQuery('#x').val())) return true;
  22.                 alert('Porfavor seleccione un area de la imagen.'); <!  Configuramos msj de error si no seleccionamos que parte de la imagen vamos a cortar -->
  23.                 return false;
  24.             };
  25. // --&gt;
  26. // --&gt;
  27. // --&gt;
  28. // --&gt;</script>

Bueno esto es todo aca les dejo un ejemplo online y para que se descarguen el codigo de fuente.

Demo Online

Descargar Archivos

12/09/2008
Ajax, JavaScript
15 Sitios AJAX

Esta es un recopilacion de 15 sitios con contenido dedicado ah la tecnologia del momento, la verdad que yo estoy decidido a aprender ajax, me parece muy interesante a la hora de utilizarlo, los pocos proyectos que realize con CSS+PHP+AJAX, la verdad quedan con muy buen aspecto.. asi q bueno, espero q ustedes tambien se decidan y empiezen a estudiar un poco de esta tecnologia. Algunos o la mayoria de los sitios estan en ingles, pero eso no es problema, porque les dejo un link hacia un post de iGeek q nos enseña a utilizar la API Traslator de google.

1° Rasmus 30 second AJAX Tutorial (Ingles)

2° Instant Tutorial (Ingles)

3° Ajax Toolbox / XMLHttpRequest AjaxRequest Library Examples (Ingles)

4° Tutorial: Ajax con Prototype.js (Español)

5° How To: Learn AJAX in 20 minutes (Ingles)

6° Ajax Tutorial (Ingles)

7° Ajax Hello World (Ingles)

8° A Simpler Ajax Path (Ingles)

9° Step by Step to AJAX (Ingles)

10° The AJAX Revolution. Join in (Ingles)

11° Ajax from Scratch: Implementing Mutual Exclusion in JavaScript (Ingles)

12 ° Creating Huge Bookmarklets (Ingles)

13° Drag & Drop Sortable Lists with JavaScript and CSS (Ingles)

14° Easy Ajax in symfony (Ingles)

15° Ajax Dynamic Content (Ingles)

Saludos!!

7/07/2008
Ajax
TomCoote recursos ajax.

TomCoote es otro sitio con recursos ajax, no cuenta con una gran cantidad pero los pocos que tienen son muy utiles y con muy buena pinta.

visitar tomcoote

28/05/2008
Ajax
AjaxLoad - generador de gifs

Ajaxload es un sitio, que nos brinda la opcion de crear gif animados, para poder utilizar en los proyectos web como load de archivos.estos son algunos de los resultados:

28/05/2008
Ajax
AjaxDaddy - recursos ajax

AjaxDaddy es un sitio en el que podran una cantidad inmensa de recursos ajax para que puedan utilizar en todos su proyectos web, una de las ventajas es que el sitio esta dividido por categorias eso facilita mucho la busqueda, y algunos script tienen un demo para poder ver como funciona.

enlace a AjaxDaddy

27/05/2008
Ajax
Banner 1 
    TwitterCounter for @Maxi_
wGeek esta gestinado por Wordpress - 2008 - Powered by nBlak Studios