[ un desarrollo de PATAGONIA CREATIVE ]
Email Facebook Rss

Archivos en Categoria: Javascript

  • CSS | Diseño Web | Javascript | Scripts

    27 /04 / 2009 - 12:33 am

    Publicado por Nikko.

    • 15
    • 8.006

    Social Link

    8 Javascript para solucionar los problemas más comunes de CSS

    8csssoluciones.jpg

    El CSS es definitivamente una gran técnica para los diseñadores y desarrolladores web. Sin embargo, entre los problemas del navegador y la falta de apoyo CSS3 en los navegadores modernos, suelen transformarse en un verdadero problema. En catswhocode han recopilado 8 Javascript que les permitirá solucionar los problemas más comunes. Por ejemplos Transparencias, incluir clases diferentes para los diferentes navegadores, solucionar los problemas de alturas de las columnas, Solucionar la vista de las esquinas redondeadas, Fixing IE overflow problema, Los alineamientos verticales, las precargas de imágenes, Matar IE6 (colgará automáticamente una vez que la página se carga)

    Enlace  8 Javascript solutions to common CSS problems

  • Diseño Web | Javascript | Scripts

    13 /04 / 2009 - 12:49 am

    Publicado por Nikko.

    • 15
    • 16.615

    Social Link

    Ext Core – Muchos efectos para tus páginas web

    extcore.jpg

    Ext Core is a cross-browser, una completa biblioteca Java Script para la construcción de páginas web. Resultados reamente bellos, muy liviano, con un código muy limpio y muy sencillo de utilizar.

    Mas Informacion – Descarga Completa Ext Core (Incluye ejemplos)

    Podremos construir cosas como:

    Carrusel – Ver Demo

    Carrusel con el cual poder navegar por una serie de objetos. El cual puede ser configurado para satisfacer cualquier necesidad específica. Auto-play, animaciones, navegación y mucho más

    Lightbox – Ver Demo

    Los efectos tradicionales generados por los Lightbox, muy simple de configurar mediante css.

    Menú – Ver Demo

    Menu con efectos atractivos que convierte una lista de enlaces en un menú horizontal o vertical. Posee muchas opciones para ser configurado, incluyendo diferentes tipos de animaciones, fijar el elemento activo, los retrasos etc.

    Simple Tabs – Ver Demo

    Simple Tabs, una opción para implementar pestañas animadas que actúen como navegación de gran alcance, con sólo unas pocas líneas de código usando Ext. Core

  • Javascript | Scripts

    21 /03 / 2009 - 12:10 am

    Publicado por Nikko.

    • 15
    • 3.175

    Social Link

    TinyTable – Script de tan solo 2.5KB para crear Tablas personalizadas

    tinytable.jpg

    TinyTable, otro script de tan solo 2.5KB con el cual podremos crear tablas muy personalizadas. Incluye características muy interesantes como la opción de destacar columnas, opción de paginación, añadir enlaces y fechas, Ordenamiento, reconocimiento automático de datos, y demás. Testeado en Firefox 2/3, IE 6/7/8, Opera, Safari y Chrome.

    Ver Demo – Descarga - Mas Info TinyTable

  • Javascript | jQuery

    24 /02 / 2009 - 11:01 pm

    Publicado por Nikko.

    • 15
    • 2.514

    Social Link

    Mensajes personalizados según la URL de referencia

    jQuery Fun: Greeting Your Site Referrals, un articulo donde encontraran una bonita practica en javascript para detectar desde donde provienen tus visitas y personalizar masajes o saludos sobre la base de la dirección URL de referencia. El estilo del ejemplo notaran que no es muy bonito, pero basándose en este idea pueden hacerlos mucho mas atractivos por su cuenta.

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
         // URLs usando expresiones regulares que quieres que detecte
       var msgs = [
       // null url : tráfico directo
       {'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
      // Mi url!
       ,{'url':/^http:\/\/(\w+\.)?midominio\.com/, 'msg':null}
       // Otras
       ,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
       ,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
       ,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
       ,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
       //generic pattern: to show generic message for referrers that you did not specify one for
       // URL genéricas
       ,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
       ];
       function DetectReferrer(){
          var div = $('#WelcomePlaceHolder');
          // Si no existe la capa no se muestra el mensaje
          if (!div.length) return;
          var ref = document.referrer.toLowerCase();
          var msg = findMatch(ref);
         // Si existe mensaje
          if(msg) {
         // Añade un botón para cerrar
         div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
        $('.CloseButton',div).click(function(){ div.hide() })
         });
          }
       }
       function findMatch(ref) {
          for(var i=0; i<msgs .length; i++)
         if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
        return msgs[i].msg;
          return null;
       }
       
       // Llama al detector de referrers cuando se carga en DOM
       $(DetectReferrer);
    </msgs></script>

    Agregamos el siguiente codigo donde mostraremos los mensajes

    PLAIN TEXT
    HTML:
    <div id="WelcomePlaceHolder"></div>

    Leer MAS →

  • Javascript | jQuery | Scripts

    04 /02 / 2009 - 7:43 pm

    Publicado por Nikko.

    • 15
    • 7.562

    Social Link

    Accesible News Slider 2 (v1.4 ) – Noticias Accesible con jQuery

    newslide2.jpg

    Ya hemos hablado de Accesible News Slider, hace largos meses, pero hace días he notado que se ha lanzado la nueva versión Accesible News Slider 2 con muchas mejoras que vale la pena observar. Para aquellos que no han leído el artículo en su momento, Accesible News Slider 2 es una alternativa para montar Slide Horizontales basados en jquery en espacios reducido, ya que nos permite esconder gran parte de los post dejando a la vista solo los últimos 3. Encontraremos un botón que nos dará acceso al resto de los artículos, acompañado de un simple efecto, que lo hace aun más atractivo. Su diseño también ha sido mejorado, lo que es una ventaja para aquellos un poco flojos que escapan al trabajo pesado. Accesible News Slider 2 ha sido testeado en IE 6+, FF 2+, Opera 9+, Safari 3+ | Mac: (I'm looking for testers.)

    Enlace Accesible News Slider 2  - Ver demo - Descarga

  • Diseño Web | Javascript | Scripts

    23 /01 / 2009 - 12:14 am

    Publicado por Nikko.

    • 15
    • 2.810

    Social Link

    $fx() – JavaScript animation library

    animationjavascript.jpg

    $fx() ver 0.1 un pequeño y realmente muy flexible JavaScript para animar elementos HTML. Permite alterar cualquier propiedad CSS, combinar efectos en cadena o en paralelo, también tiene capacidad para establecer diferentes llamadas que le da aún más flexibilidad.
    Los ejemplos y las ideas de cómo implementarlos me ha fascinado, asique dediquen un poco de tiempo para ver de qué se trata.

    Enlace  $fx() ver 0.1 -Ejemplos yManual de uso - Descarga

  • Diseño Web | Javascript | Scripts

    11 /01 / 2009 - 8:52 pm

    Publicado por Nikko.

    • 15
    • 4.620

    Social Link

    Botón Ampliar tamaño de texto en nuestros artículos

    ampliartextoifx.jpg

    Si suelen leer periódicos Online, seguramente habrán notado que la gran mayoría de ellos nos brinda en cada uno de los artículos que leemos, la opción para ampliar el texto, función que podemos utilizar en caso de desearlo. Si bien utilizo los Periódicos como referencia, ya que es por lo general donde suelo verlos, no significa que solo deba utilizarse cada vez que llevemos adelante este tipo de proyectos (Periódicos). Si deseamos facilitar la lectura de cada uno de nuestros usuarios, no sería mala idea comenzar a implementar este tipo de opciones en nuestros blogs o web empresariales. Justamente hoy recordé que Mauricio había realizado un simple tutorial (el cual busque hasta encontrar), muy fácil de seguir, que les permitirá llevar esta idea a sus proyectos online.

    Uso:

    Realizar las llamadas a los script

    PLAIN TEXT
    JavaScript:
    <script language="javascript" src="js/dw_cookies.js" type="text/javascript"></script>

          <script language="javascript" src="js/dw_sizerdx.js" type="text/javascript"></script>

    Seleccionamos que partes (DIV) son las que queremos que se modifique el tamaño del texto.

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript">
          dw_fontSizerDX.setDefaults( "px", 11, 11, 14, ['div.post p' , 'blockquote'] );
          dw_fontSizerDX.set(10, 10, 10, ['div#fontSize'] );
          dw_fontSizerDX.init();
          </script>

    Agregamos los Botones

    PLAIN TEXT
    HTML:
    <div id="fontSize">
            <ul>
              <li id="more"><a href="#" onClick="dw_fontSizerDX.adjust(1); return false" title="Aumenta el tama&ntilde;o de texto"> Aumentar tama&ntilde;o </a></li>
              <li id="less"><a href="#" onClick="dw_fontSizerDX.adjust(-1); return false" title="Disminuye el tama&ntilde;o de texto">Disminuir tama&ntilde;o</a></li>
            </ul>
          </div>


Pagina 2 de 13«1234567891011»...Ultima »