Archivos en Categoria: Javascript

• Diseño Web | Javascript | jQuery | Scripts

  03 /10 / 2008 - 7:44 pm

  Publicado por Nikko.

  • 15
  • 7.808

  
  

  Social Link

  Twittea el post

  Guardar post

  Compartir

  Subscribe via RSS

  Subscribe via Email

  Comentar

  Jump to the top

  Accesible News Slider

  

  Accesible News Slider, otra alternativa para montar Slide Horizontales basados en jquery. Puede ser una buena forma de resaltar post, si se animan a adaptarlo a worpdress o para montar una sección de productos que se encuentren ofreciendo desde sus blogs.Ver demo - Descarga - Mas Info Reindel

  Uso.

  Descargar todos los archivos, alojarlos en nuestro servidor y realizar la llamada a ellos, copiando y pegando el siguiente código dentro de nuestra etiqueta < head >…

  PLAIN TEXT

  JavaScript:

  <link rel="stylesheet" href="jquery.accessible-news-slider.css" type="text/css" media="screen, projection" />

  <script language="javascript" type="text/javascript" src="jquery-1.1.3.1.pack.js"></script>
  <script language="javascript" type="text/javascript" src="jquery.accessible-news-slider.js"></script>
  <script language="javascript" type="text/javascript">
  $(function() {

      $(".computers_technology").accessNews({
          newsHeadline: "Computers &amp; Technology",
          newsSpeed: "normal"
      });

     
      /*

      newsHeadline: "Top Stories"  (String)          |  Each unique slider (id) or set of sliders (class) can receive a headline.
      newsSpeed: "normal"          (String/Integer)  |  "slow","normal","fast", or an integer, with 1 being the fastest animation.

      */

  });
  </script>

  Nuestra estructura

  PLAIN TEXT

  HTML:

  <div class="news_slider computers_technology">
              <div class="messaging">
                  Please Note: You may have disabled JavaScript and/or CSS. Although this news content will be accessible, certain functionality is unavailable.
              </div>
              <a href="#skip_to_news_1" class="skip">Skip to news content.</a>
              <a href="#" class="prev"><img src="images/prev.gif" width="16" height="16" alt="Previous" title="Previous" env="images" /></a>
              <a href="#" class="next"><img src="images/next.gif" width="16" height="16" alt="Next" title="Next" env="images" /></a>
              <div class="news_items">
                  <a name="skip_to_news_1"></a>
                  <div class="container fl">
                      <div class="item fl">
                          <a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
                          <div class="fl">
                              <a href="/">Titulo Producto o articulo</a><br />
                              Descripcion detallada del post o articulo...etc etc etc
                          </div>
                      </div>
                     
                       <div class="item fl">
                          <a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
                          <div class="fl">
                              <a href="/">Titulo Producto o articulo</a><br />
                              Descripcion detallada del post o articulo...etc etc etc
                          </div>
                      </div>
                     
                     
                     
                  </div>
              </div>
          </div>

  El aspecto lo pueden modificar por completo, desde la hoja de estilo que acompaña a los archivos.

• Diseño Web | Javascript | jQuery | php | Scripts

  21 /09 / 2008 - 4:39 pm

  Publicado por Nikko.

  • 15
  • 8.645

  
  

  Social Link

  Twittea el post

  Guardar post

  Compartir

  Subscribe via RSS

  Subscribe via Email

  Comentar

  Jump to the top

  Contenido deslizante con Auto-Reproducción

  

  Auto playing featured Content Slider, una divertida forma para mostrar gran cantidad de contenido en una pequeña área. Estaremos usando XHTML / CSS para la construcción y el estilo de widgets. Junto con las librerías jQuery y Coda Slider plugin para los efectos de animación. Este featured Content Slider, posee un contenido principal (grupos), que se desliza de izquierda a derecha mostrando cada uno de ellos un contenido único. Hay enlaces que actúan como menú de navegación que nos permitirá saltar rápidamente a cualquier grupo en particular. Estos vínculos pueden estar formados por hipervínculo de texto, miniatura, etc.

  • Diferentes tipos de contenido personalizado en los paneles. Se puede poner lo que queramos en los paneles, pero para que sea más fácil para nosotros mismos, habrá un par de diferentes formatos a respetar. Una imagen de fondo cubriéndolo por completo, pero con una superposición de textos.
  • Auto-play. Podemos hacer click en los paneles para saltar a cada grupo especifico, o dejar que las transiciones se produzcan de forma automática.
  • Flecha indicador. Sirve como indicador visual para resaltar el panel que estamos viendo actualmente, algo así como una pequeña flecha sobre las miniaturas que apunta en el panel.

  Ver demo - Mas informacion y descarga Auto playing featured Content Slider - By css-tricks
  Instalacion:

  PLAIN TEXT

  JavaScript:

  <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
      <script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
      <script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
      <script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
      <script type="text/javascript">
          var theInt = null;
          var $crosslink, $navthumb;
          var curclicked = 0;
          theInterval = function(cur){
              clearInterval(theInt);
              if( typeof cur != 'undefined' )
                  curclicked = cur;
              $crosslink.removeClass("active-thumb");
              $navthumb.eq(curclicked).parent().addClass("active-thumb");
                  $(".stripNav ul li a").eq(curclicked).trigger('click');
              theInt = setInterval(function(){
                  $crosslink.removeClass("active-thumb");
                  $navthumb.eq(curclicked).parent().addClass("active-thumb");
                  $(".stripNav ul li a").eq(curclicked).trigger('click');
                  curclicked++;
                  if( 6 == curclicked )
                      curclicked = 0;
              }, 3000);
          };
          $(function(){
              $("#main-photo-slider").codaSlider();
              $navthumb = $(".nav-thumb");
              $crosslink = $(".cross-link");
              $navthumb
              .click(function() {
                  var $this = $(this);
                  theInterval($this.parent().attr('href').slice(1) - 1);
                  return false;
              });
              theInterval();
          });
      </script>

  Agregando estilo

  PLAIN TEXT

  CSS:

  /*
      SLIDER
  */
  .slider-wrap                                { width: 419px; position: absolute; top: 87px; left: 40px; }
  .stripViewer .panelContainer
  .panel ul                     { text-align: left; margin: 0 15px 0 30px; }
  .stripViewer                                { position: relative; overflow: hidden; width: 419px; height: 285px; }
  .stripViewer .panelContainer                { position: relative; left: 0; top: 0; }
  .stripViewer .panelContainer .panel   { float: left; height: 100%; position: relative; width: 419px; }
  .stripNavL, .stripNavR, .stripNav       { display: none; }
  .nav-thumb      { border: 1px solid black; margin-right: 5px; }
  #movers-row   { margin: -43px 0 0 62px; }
  #movers-row div  { width: 20%; float: left; }
  #movers-row div a.cross-link             { float: right; }
  .photo-meta-data                            { background: url(images/transpBlack.png); padding: 10px; height: 30px;
                                                margin-top: -50px; position: relative; z-index: 9999; color: white; }
  .photo-meta-data span          { font-size: 13px; }
  .cross-link   { display: block; width: 62px; margin-top: -14px;
                                                position: relative; padding-top: 15px; z-index: 9999; }
  .active-thumb             { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

  Contenido

  PLAIN TEXT

  HTML:

  <div class="slider-wrap">
      <div id="main-photo-slider" class="csw">
          <div class="panelContainer">
              <div class="panel" title="Panel 1">
                  <div class="wrapper">
                      <!-- REGULAR IMAGE PANEL -->
                      <img src="images/tempphoto-1.jpg" alt="temp" />
                      <div class="photo-meta-data">
                          Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
                          <span>"Free Tibet" Protest at the Olympic Torch Rally</span>
                      </div>
                  </div>
              </div>
              <div class="panel" title="Panel 2">
                  <div class="wrapper">
                      <!-- PANEL CONTENT -->
                  </div>
              </div>
              <div class="panel" title="Panel 3">
                  <div class="wrapper">
                      <!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
                      <img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
                      <h1>How to Cook a Scotch Egg</h1>
                      <ul>
                          <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
                          <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
                          <li>1/2 cup AP flour</li>
                          <li>1-2 eggs, beaten</li>
                          <li>3/4 cup panko-style bread crumbs</li>
                          <li>Vegetable oil for frying</li>
                      </ul>
                  </div>
              </div>
              <div class="panel" title="Panel 4">
                  <div class="wrapper">
                      <!-- PANEL CONTENT -->
                  </div>
              </div>
              <div class="panel" title="Panel 5">
                  <div class="wrapper">
                      <!-- PANEL CONTENT -->
                  </div>
              </div>
              <div class="panel" title="Panel 6">
                  <div class="wrapper">
                      <!-- PANEL CONTENT -->
                  </div>
              </div>
          </div>
      </div>
      <!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
            AND THE CLASS="CROSS-LINK" ARE REQUIRED -->
      <a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
      <div id="movers-row">
          <div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
          <div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
          <div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
          <div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
          <div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
      </div>
  </div>

  Ver demo - Mas informacion y descarga Auto playing featured Content Slider - By css-tricks

• Diseño Web | Galerias | Javascript | jQuery | Programacion | Scripts

  31 /08 / 2008 - 5:25 pm

  Publicado por Nikko.

  • 15
  • 8.673

  
  

  Social Link

  Twittea el post

  Guardar post

  Compartir

  Subscribe via RSS

  Subscribe via Email

  Comentar

  Jump to the top

  Interface Slideshow

  

  Interface Slideshow, otra agradable alternativa para mostrar nuestras imágenes en diapositivas y con desvanecimiento. Sin duda la cantidad de opciones que se nos suelen presentar son tantas, que hace muy difícil la elección de uno a la hora de implementarlo en nuestros proyectos. Soy de esos que creen, que aunque suelan verse muy similar a otros, todos poseen diversas ventajas y pequeñas cosas que llamaran más la atención uno de otro. Sea en la forma de implementarse, la librería en la cual se basa, las diferentes opciones que nos presenta y demás. Interface Slideshow utiliza jquery y un poco de css para dar el estilo que veremos en el ejemplo. Creo que les gustara.
  Ver Demo -Interface Slideshow

  Uso:

  Lo primero será descargar ambas librerías, jQuery 1.1.2 19 kb junto con Interface 1.2 146kb alojarlo en nuestro servidor o la carpeta que contiene todas nuestras librerías y realizar la llamada a ellos desde nuestro encabezado. Dentro de nuestras etiquetas < Head >…

  PLAIN TEXT

  JavaScript:

  <script src="jquery.js" type="text/javascript"></script>
  <script src="interface.js" type="text/javascript"></script>

  Un poco de CSS

  PLAIN TEXT

  CSS:

  #slideShow1
  {
  width: 300px;
  height: 280px;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
  margin: 10px;
  }
  #slideShow2
  {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
  margin: 10px;
  }
  .pagelinks a
  {
  font-weight: bold;
  color: #666;
  }
  .slideCaption
  {
  background-color: #FFFFCC;
  padding: 4px;
  text-align: center;
  font-weight: bold;
  }
  .pagelinks a.activeSlide
  {
  color: #f90;
  }
  /* this is for IE so the prev/next links can be hovered*/
  .nextSlide,.prevSlide
  {
  background-image: url(images/spacer.gif);
  }
  .nextSlide:hover
  {
  background-image: url(images/nextslide.jpg);
  background-repeat: no-repeat;
  background-position: right bottom;
  }
  .prevSlide:hover
  {
  background-image: url(images/prevslide.jpg);
  background-repeat: no-repeat;
  background-position: left bottom;
  }
  .inputsTooltip
  {
  border: 1px solid #ccc;
  background-color: #eee;
  padding: 4px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  filter:alpha(opacity=70);
  -moz-opacity:.70;
  opacity:.70;
  }
  #tooltipURL
  {
  display: none;
  }

  Estructura de ambos ejemplos

  PLAIN TEXT

  HTML:

  <div id="slideShow1">
  <div class="slideshowLoader"></div>
  <div class="slideshowHolder"></div>
     
     
  <div class="slideshowLinks pagelinks"></div>

  <div class="slideshowCaption slideCaption"></div>
  </div>

  <div id="slideShow2"><div class="slideshowLoader"></div>
  <div class="slideshowHolder"></div>
     
     
  <div class="slideshowLinks pagelinks"></div>
  <div class="slideshowCaption slideCaption"></div>
  </div>

  PLAIN TEXT

  JavaScript:

  <script type="text/javascript">
  $(document).ready(
      function()
      {
          $.slideshow(
              {
                  container : 'slideShow1',
                  loader: 'slideshow_files/slideshow_loader.gif',
                  linksPosition: 'top',
                  linksClass: 'pagelinks',
                  linksSeparator : ' | ',
                  fadeDuration : 400,
                  activeLinkClass: 'activeSlide',
                  nextslideClass: 'nextSlide',
                  prevslideClass: 'prevSlide',
                  captionPosition: 'bottom',
                  captionClass: 'slideCaption',
                  autoplay: 5,
                  random: true,
                  images : [
                      {
                          src: 'slideshow_files/Dynamic.jpg',
                          caption: 'Panda Dynamic'
                      },
                      {
                          src: 'slideshow_files/Active.jpg',
                          caption: 'Panda Actual'
                      },
                      {
                          src: 'slideshow_files/Dynamic.jpg',
                          caption: 'Fiat Panda'
                      },
                      {
                          src: 'slideshow_files/Active.jpg',
                          caption: 'Panda Active'
                      }
                  ]
              }
          )
          $.slideshow(
              {
                  container : 'slideShow2',
                  loader: 'images/slideshow_loader.gif',
                  linksPosition: 'top',
                  linksClass: 'pagelinks',
                  linksSeparator : ' | ',
                  fadeDuration : 400,
                  activeLinkClass: 'activeSlide',
                  nextslideClass: 'nextSlide',
                  prevslideClass: 'prevSlide',
                  captionPosition: 'bottom',
                  captionClass: 'slideCaption',
                  autoplay: 5,
                  images : [
                      {
                          src: 'slideshow_files/Dynamic.jpg',
                          caption: 'Fiat Panda'
                      },
                      {
                          src: 'slideshow_files/Dynamic.jpg',
                          caption: 'Panda Active'
                      },
                      {
                          src: 'slideshow_files/Dynamic.jpg',
                          caption: 'Panda Actual'
                      },
                      {
                          src: 'slideshow_files/Dynamic.jpgg',
                          caption: 'Panda Dynamic'
                      }
                  ]
              }
          )
         
          $('a').ToolTip(
              {
                  className: 'inputsTooltip',
                  position: 'mouse'
              }
          );
      }
  );
  </script>

  Ver Demo -Mas info Interface Slideshow

• Diseño Web | Javascript | Scripts

  10 /08 / 2008 - 3:50 pm

  Publicado por Nikko.

  • 15
  • 2.685

  
  

  Social Link

  Twittea el post

  Guardar post

  Compartir

  Subscribe via RSS

  Subscribe via Email

  Comentar

  Jump to the top

  Unit PNG Fix – Para seguir solucionando transparencias en IE

  

  Unit PNG Fix, otro compacto javascript de tan solo 1kb que nos permitirá seguir solucionando los tradicionales errores producidos por IE6. Transparencias, corrección de atributos de filtros, etc.

  Descarga - Mas Info Unit PNG Fix

  PLAIN TEXT

  JavaScript:

  <!--[if lt IE 7]>
          <script type="text/javascript" src="unitpngfix.js"></script>
  <![endif]-->

• Color | Diseño Web | Javascript | Scripts

  21 /07 / 2008 - 12:00 am

  Publicado por Nikko.

  • 15
  • 4.381

  
  

  Social Link

  Twittea el post

  Guardar post

  Compartir

  Subscribe via RSS

  Subscribe via Email

  Comentar

  Jump to the top

  Color Picker – jQuery plugin

  

  Color Picker - jQuery plugin, un simple componente para seleccionar el color de la misma manera que sueles hacerlo en Adobe Photoshop. Sin duda vendrá muy bien para montarlo en alguna aplicación web en la cual trabajes.

  Ver demo - Mas info y descarga Color Picker - jQuery plugin

  Instalacion:
  Realizamos las llamadas correspondientes desde nuestro encebado, copiando y pegando el siguiente código dentro de nuestra etiqueta < head >

  PLAIN TEXT

  JavaScript:

  <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript" src="js/colorpicker.js"></script>
      <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />

  y agregamos al contenido nuestro selector de colores de esta forma.

  PLAIN TEXT

  HTML:

  <p id="colorpickerHolder">
                  </p>

• Diseño Web | Galerias | Javascript | Scripts

  15 /07 / 2008 - 11:55 pm

  Publicado por Nikko.

  • 15
  • 3.629

  
  

  Social Link

  Twittea el post

  Guardar post

  Compartir

  Subscribe via RSS

  Subscribe via Email

  Comentar

  Jump to the top

  DhoniShow – Otra alternativa para montar slideshows a tus proyectos Web

  

  DhoniShow otro script desarrollado para montar slideshows a tus proyectos Web. Utilizarlo es realmente simple, requiere para su buen funcionamiento prototype 1.5+ y Script.aculo.us (opcional), sin olvidar el script "dhonishow.js". Algo interesante, es que si als transiciones que realizara Dhonishow por defecto consideras que no son suficientes, podrás manipular algunos parámetros dentro del script o por supuesto todo el archivo CSS.

  Ver Demos

  Instalación: Descargamos DhoniShow y prototype 1.5+. Opcional: Script.aculo.us. Realizamos la llamada a ellos desde nuestro encabezado.

  PLAIN TEXT

  JavaScript:

  <script src="prototype.js" type="text/javascript"></script>
  <script src="scriptaculous.js" type="text/javascript"></script>
  <script src="dhonishow.js" type="text/javascript"></script>

  <link rel="stylesheet" href="dhonishow.css" type="text/css"
  media="screen" />

  la estructrura

  PLAIN TEXT

  HTML:

  <div class="dhonishow">
    <img src="img/fotoNumero1.jpg" alt="Numero1" />
    <img src="img/fotoNumero2.jpg" alt="Numero2" />
    <img src="img/fotoNumero3jpg" alt="Numero3" />
  </div>

  Algunos parametros que podremos configurar :
  Transition style: Permite configurar el estilo de los efectos que se generaran para las transiciones.

  PLAIN TEXT

  HTML:

  <div class="dhonishow effect_appear">

  <!-- Choose between effect_appear, effect_blind,
  effect_slide, effect_horizontal -->

  Transition duration: La duracion de cada transicion.

  PLAIN TEXT

  HTML:

  <div class="dhonishow duration_0dot6">
  <!-- For 0.6 seconds -->

  Autoplay: Auto comenzar animación a los segundos estipulados

  PLAIN TEXT

  HTML:

  <div class="dhonishow autoplay_5">
  <!-- For 5 seconds -->

  Hide things: Ocultar elementos, ej: Navegacion, etc

  PLAIN TEXT

  HTML:

  <div class="dhonishow hide_paging">
  <!-- Choose between hide_paging, hide_alt (Sublines),
  hide_navigation -->

• Diseño Web | Javascript | Scripts

  02 /07 / 2008 - 11:58 pm

  Publicado por Nikko.

  • 15
  • 3.039

  
  

  Social Link

  Twittea el post

  Guardar post

  Compartir

  Subscribe via RSS

  Subscribe via Email

  Comentar

  Jump to the top

  Easy Scroll – Añadir mucho contenido en espacios reducidos

  

  Easy Scroll es un bonito script capaz de desplazar cualquier tipo de contenido dentro de el mediante el uso de un discreto JavaScript. Mediante los botones de desplazamiento podremos desplazar el contenido hacia arriba o abajo, o resetear a la posición original. Aunque también posee la opción de dejar que Easy Scroll desplace todo el contenido por si solo, dejando a nosotros la aceleración de ese afecto mediante los botones de navegación. Sinceramente Easy Scroll me pareció muy curioso y útil ya que puede ser una buena alternativa a los tradiciones TAB cuando necesitamos añadir mucho contenido en un espacio muy reducido.

  Ver Demo - Mas info Easy Scroll
  Instalación:

  • Crear un div (o cualquier otro elemento contenedor)
  • Asignar un “id” a los contenedores (por defecto es "myContent")
  • Ajustar la altura indagando dentro del javascript
  • Poner todo el contenidos en el interior del contenedor.

  Descargamos el script, y realizamos la llamada correspondiente a el, copiando y pegando el siguiente código dentro de nuestras etiquetas < head >..

  PLAIN TEXT

  JavaScript:

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

  Añadimos un poco de estilo

  PLAIN TEXT

  CSS:

  /* easyscroll */

  #easyscroll{
      background:#eee;
      margin:1em 0;
      /* add additional styling */
      }   

      /* easyscroll navigation buttons */ 

      #easyscrollnav, #easyscrollnav li{
          height:28px;
          line-height:28px;
          margin:0;   
          padding:0;
          }   
      #easyscrollnav{
          margin:1em 0;   
          }         
      #easyscrollnav li{
          list-style:none;
          float:left;
          background:#eee;
          margin-right:10px;   
          padding:0 10px;
          color:#333;
          cursor:pointer;
          }               
      #easyscrollnav li.over{
          color:#999;
          text-decoration:underline;
          }                     

      /* // easyscroll navigation buttons */ 

  /* // end easyscroll */

  Comenzamos a llenar nuestro scroll de contenido

  PLAIN TEXT

  HTML:

  <div id="myContent">
      <!--  YOUR CONTENT HERE -->
  </div>

• 

  Suscribete Vía RSS

  Siguenos desde tu lector de feeds favorito.

• 

  Suscribete Vía E-mail

  Recibe los artículos en tu casilla de correo electrónico.

Espacio Publicitario

Cómo hacer una Página

Espacio Publicitario

Categorias

Patrocinadores 160px

Sitios que nos Gustan

Freebies by Xyberneticos

• 
• PORFOLIO
• SERVICIOS
• QUIENES SOMOS
• CONTACTO
• MARKETING POLITICO
• BLOG CORPORATIVO
• VSITANOS EN FACEBOOK
• o LINKEDIN

• Categorias destacadas en Xyberneticos
• Scripts
• Wordpress
• Wp-plugin
• jQuery
• Diseño Web
• CSS
• Iconos y mas
• Fuentes
• Themes
• Patterns
• Galerias
• Tutoriales