Scriptmatico.Com » Javascript http://www.scriptmatico.com Blog de tecnologia, programacion, articulos y mas... Fri, 05 Aug 2011 23:39:47 +0000 en hourly 1 http://wordpress.org/?v=3.2 Creando Una Interfaz de Tabs Usando jQuery y CSS http://www.scriptmatico.com/2009/10/07/creando-una-interfaz-de-tabs-usando-jquery-y-css/ http://www.scriptmatico.com/2009/10/07/creando-una-interfaz-de-tabs-usando-jquery-y-css/#comments Wed, 07 Oct 2009 16:28:30 +0000 admin http://www.scriptmatico.com/?p=305 Para aquellos que deseaban crear TABS para sus aplicaciones en esta ocacion usaremos una de las bibliotecas de jQuery denominada jQuery UI Library, que es la libreria para la creacion de Interfaz del usuario , nettuts ha preparado un extraordinario tutorial muy simple de seguir, y con el cual aprenderan a montarlo y conocer como diseñarlos desde cero.

A continuacion les pongo los links de descarga y demo de la aplicación.

Estoy seguros de que quedaran encantados.

Ver Demo - Descarga - Web Original Create A Tabbed Interface Using jQuery

Post to Twitter

]]> http://www.scriptmatico.com/2009/10/07/creando-una-interfaz-de-tabs-usando-jquery-y-css/feed/ 0 Blogroll Dinamico Usando jQUERY http://www.scriptmatico.com/2008/12/03/blogroll-dinamico-usando-jquery/ http://www.scriptmatico.com/2008/12/03/blogroll-dinamico-usando-jquery/#comments Wed, 03 Dec 2008 15:07:27 +0000 admin http://www.exodo999.phpnet.us/2008/12/03/blogroll-dinamico-usando-jquery/

La idea de contstruir este blog roll es usar las siguientes herramientas de desarrollo:

Puedes Bajar el codigo de ejemplo dando click aqui o ver el demo.

Puedes igual visitar la pagina del author original del articulo aqui.

Post to Twitter

]]> http://www.scriptmatico.com/2008/12/03/blogroll-dinamico-usando-jquery/feed/ 0 Accessible News Slider: Plugin para realizar sliders con jQuery http://www.scriptmatico.com/2008/10/07/accessible-news-slider-plugin-para-realizar-sliders-con-jquery/ http://www.scriptmatico.com/2008/10/07/accessible-news-slider-plugin-para-realizar-sliders-con-jquery/#comments Tue, 07 Oct 2008 23:10:15 +0000 admin http://www.exodo999.phpnet.us/2008/10/07/accessible-news-slider-plugin-para-realizar-sliders-con-jquery/

Accesible News Slider, es una libreria para crear Slide Horizontales basados en jquery. Esta fantastica herramienta puede tener bastantes usos y es muy sencilla de usar y personalizar.

Ver demo – Descarga – Mas Info Reindel

Post to Twitter

]]> http://www.scriptmatico.com/2008/10/07/accessible-news-slider-plugin-para-realizar-sliders-con-jquery/feed/ 0 Color Picker con JQuery http://www.scriptmatico.com/2008/09/08/color-picker-con-jquery/ http://www.scriptmatico.com/2008/09/08/color-picker-con-jquery/#comments Mon, 08 Sep 2008 16:08:34 +0000 admin http://www.exodo999.phpnet.us/2008/09/08/color-picker-con-jquery/ Color Picker – jQuery Plugin es un simple componente para seleccionar el color de la misma manera que sueles hacerlo en algun programa de diseño como photoshop o illustrator. Sin duda este pequeño componente estaria bien para implementarlo en alguna web.

Lo unico que hay que hacer es descargarlo de la pagina oficial y seguir los sencillos pasos de instalacion puedes ver un demo aqui.

Post to Twitter

]]> http://www.scriptmatico.com/2008/09/08/color-picker-con-jquery/feed/ 0 Pacman En CSS y Javascript http://www.scriptmatico.com/2008/08/18/pacman-en-css-y-javascript/ http://www.scriptmatico.com/2008/08/18/pacman-en-css-y-javascript/#comments Mon, 18 Aug 2008 23:04:48 +0000 admin http://www.exodo999.phpnet.us/2008/08/18/pacman-en-css-y-javascript/ A mi en lo personal sigue impresionandome las maravillas que se pueden hacer usando CSS y Javascript.

En esta ocacion me he topado con el juego de pacman totalmente echo con CSS y Javascript.

El desarrollador de esta interesante aplicacion nos dice que no se usaron imagenes para la creacion. Solo uso Estilos CSS,Javascript y Las fuentes del sistema.

Puedes ver esta aplicacion funcionando aqui

Aunque el juego no es totalmente funcional ya que cuando te toca un fantasma no pierdes y tampoco cambian de color es interesante lo que se puede hacer utilizando Css y javascript convinados con un poco de creatividad.

Post to Twitter

]]> http://www.scriptmatico.com/2008/08/18/pacman-en-css-y-javascript/feed/ 0 Spoiler Revealer – Ocultar y mostrar contenido adicional con jquery http://www.scriptmatico.com/2008/05/01/spoiler-revealer-%e2%80%93-ocultar-y-mostrar-contenido-adicional-con-jquery/ http://www.scriptmatico.com/2008/05/01/spoiler-revealer-%e2%80%93-ocultar-y-mostrar-contenido-adicional-con-jquery/#comments Thu, 01 May 2008 18:16:30 +0000 admin http://www.exodo999.phpnet.us/2008/05/01/spoiler-revealer-%e2%80%93-ocultar-y-mostrar-contenido-adicional-con-jquery/
Fade-in Spoiler Revealer, es una agradable técnica que veo en css-tricks, en la cual usando jQuery podremos ocultar o mostrar toda la parte de un texto y sustituirla por un ” revelar contenido adicional” o “seguir leyendo”. Inclusive al Mostar el contenido oculto, se produce un efecto desvanecimiento que lo hace ver muy bonito. Queda en ustedes, pensar en que proyecto en el cual trabajan podrá ser realmente útil. Ver Demo -

Mas Info css-tricks

Post to Twitter

]]> http://www.scriptmatico.com/2008/05/01/spoiler-revealer-%e2%80%93-ocultar-y-mostrar-contenido-adicional-con-jquery/feed/ 0 Asciible: Convierte tu Codigo HTML Con Caracteres Ascii Validos http://www.scriptmatico.com/2008/04/20/asciible-convierte-tu-codigo-html-con-caracteres-ascii-validos/ http://www.scriptmatico.com/2008/04/20/asciible-convierte-tu-codigo-html-con-caracteres-ascii-validos/#comments Mon, 21 Apr 2008 01:17:35 +0000 admin http://www.exodo999.phpnet.us/2008/04/20/asciible-convierte-tu-codigo-html-con-caracteres-ascii-validos/

Asciible es una sencilla aplicación que convierte los caracteres especiales de nuestro codigo HTML a codigo Ascii.
Si eres uno de muchos desarrolladores web que esta arto de escribir en cada momento el caracter & o á entre otros. Entonces Asciible es para ti.

Asciible no es la primera aplicacion de este tipo pero enpruebas, Firefox 2 es capaz de procesar una entrada de 250000 caracteres en menos de 700 milisegundos (Firefox 3 mejora esto). El altamente optimizado motor de expresiones regulares en Internet Explorer tiene menos de 70 milisegundos.

Pueden checar esta aplicacion aquí.

Post to Twitter

]]> http://www.scriptmatico.com/2008/04/20/asciible-convierte-tu-codigo-html-con-caracteres-ascii-validos/feed/ 0 “Select All” Seleccionando todos los elementos que se postean como un array http://www.scriptmatico.com/2008/04/18/select-all-seleccionando-todos-los-elementos-que-se-postean-como-un-array/ http://www.scriptmatico.com/2008/04/18/select-all-seleccionando-todos-los-elementos-que-se-postean-como-un-array/#comments Fri, 18 Apr 2008 15:26:06 +0000 admin http://www.exodo999.phpnet.us/2008/04/18/select-all-seleccionando-todos-los-elementos-que-se-postean-como-un-array/ Esta es una pequeña traduccion de un articulo que me encontre y se me hizo buena idea traducirlo y ponerlo a la dispocicion de todos.

El articulo se llama "Select All" JavaScript for Forms Posting to an Array

Bien este articulo nos explica lo siguiente:

El problema original es que al enviar nuestro formulario a un script PHP, con el fin de tener el resultado de una matriz de controles (cuando se utiliza una serie de casillas de verificación, por ejemplo), la forma más rápida de hacer esto es añadir "[]" para el nombre del elemento ( Por ejemplo 'name = "zona[]"). Luego, PHP puede acceder a $ _POST [ 'zona'] como una matriz en el script.

Pero lamentablemente, la adición de corchetes causas problemas con JavaScript, especialmente con una función "Seleccionar todo". El siguiente script funciona en torno a el uso de expresiones regulares, y puede ser útil a alguien que experimente este mismo problema más adelante.

PLAIN TEXT
HTML:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <title>Checkbox Fun</title>
  5. <script type="text/javascript"><!--
  7. var formblock;
  8. var forminputs;
  10. function prepare() {
  11.   formblock= document.getElementById('form_id');
  12.   forminputs = formblock.getElementsByTagName('input');
  13. }
  15. function select_all(name, value) {
  16.   for (i = 0; i <forminputs.length; i++) {
  17.     // regex here to check name attribute
  18.     var regex = new RegExp(name, "i");
  19.     if (regex.test(forminputs[i].getAttribute('name'))) {
  20.       if (value == '1') {
  21.         forminputs[i].checked = true;
  22.       } else {
  23.         forminputs[i].checked = false;
  24.   }
  25.     }
  26.   }
  27. }
  29. if (window.addEventListener) {
  30.   window.addEventListener("load", prepare, false);
  31. } else if (window.attachEvent) {
  32.   window.attachEvent("onload", prepare)
  33. } else if (document.getElementById) {
  34.   window.onload = prepare;
  35. }
  37. //--></script>
  38. </head>
  39.  
  41.  
  42. <form id="form_id" name="myform" method="get" action="search.php">
  43.  
  44.   <a href="#" onClick="select_all('area', '1');">Check All Fruit</a> | <a href="#" onClick="select_all('area', '0');">Uncheck All
  45. Fruit</a><br /><br />
  46.  
  47.   <input type="checkbox" name="area[]" value="1" />Apples<br />
  48.   <input type="checkbox" name="area[]" value="2" />Bananas<br />
  49.   <input type="checkbox" name="area[]" value="3" />Chickens<br />
  50.   <input type="checkbox" name="area[]" value="4" />Stoats
  51.  
  52.   <br /><br /><a href="#" onClick="select_all('location', '1');">Check All Locations</a> | <a href="#" onClick="select_all('location',
  53. '0');">Uncheck All Locations</a><br /><br />
  54.  
  55.   <input type="checkbox" name="location[]" value="1" />Brighton<br />
  56.   <input type="checkbox" name="location[]" value="2" />Hove<br />
  57.  
  58. </form>
  59.  
  60. </body>
  61. </html>

Post to Twitter

]]> http://www.scriptmatico.com/2008/04/18/select-all-seleccionando-todos-los-elementos-que-se-postean-como-un-array/feed/ 0 CSSTXT – Aplicando estilos CSS a nuestros Textos Rapido y Simple http://www.scriptmatico.com/2008/04/15/csstxt-aplicando-estilos-css-a-nuestros-textos-rapido-y-simple/ http://www.scriptmatico.com/2008/04/15/csstxt-aplicando-estilos-css-a-nuestros-textos-rapido-y-simple/#comments Wed, 16 Apr 2008 01:28:12 +0000 admin http://www.exodo999.phpnet.us/2008/04/15/csstxt-aplicando-estilos-css-a-nuestros-textos-rapido-y-simple/

CSSTXT es una sencilla aplicacion desarrollada en javascript, esta pequeña pero poderosa herramienta nos puede sacar de muchos apuros, principalmente a los que no estan familiarizados con los estilos CSS. Básicamente CSSTXT nos permite dar formato a nuestros párrafos o textos de la forma mas sencilla posible, tan solo deberemos ir configurando o seleccionando en las opciones la fuente a utilizar, color, espacios, etc. Para que automáticamente CSSTXT nos genere la estructura, y específicamente el código CSS para lograr la personalización deseada.

Enlace CSSTXT

Post to Twitter

]]> http://www.scriptmatico.com/2008/04/15/csstxt-aplicando-estilos-css-a-nuestros-textos-rapido-y-simple/feed/ 0 Window Growl 2.0 – Enviar mensajes emergentes mediante javascript http://www.scriptmatico.com/2008/04/15/window-growl-20-enviar-mensajes-emergentes-mediante-javascript/ http://www.scriptmatico.com/2008/04/15/window-growl-20-enviar-mensajes-emergentes-mediante-javascript/#comments Wed, 16 Apr 2008 00:51:50 +0000 admin http://www.exodo999.phpnet.us/2008/04/15/window-growl-20-enviar-mensajes-emergentes-mediante-javascript/

Window Growl es un bonito Script diseñado por Daniel Mota que nos permite enviar mensajes emergentes por medio de javascript. Es realmente muy fácil de emplear y sobre todo muy practico. Podemos usarlo creo que para cantidad de cosas, mostrar información personal o adicional, alertas, etc. Podemos configurar diversas cosas, por ejemplo: la cantidad de segundos que deseamos se muestren nuestros mensajes emergentes.

Este escript esta basado en mootools Mas informacion Window Growl .

Post to Twitter

]]> http://www.scriptmatico.com/2008/04/15/window-growl-20-enviar-mensajes-emergentes-mediante-javascript/feed/ 0