Navegando… más bien pen@##@ por la red, me encontré este interesante efecto de scrolling echo con javascript, la verdad me latió mucho este efecto.

Este efecto consisten que dentro de un div utilizándolo como contenedor de texto podemos agregarle una scrollbar a su costado y dándole clic a las fechas de arriba o abajo el texto se moverá consecutivamente, Es interezante pro que podemos personalizar la scrollbar a nuestro antojo, poniéndole un skin de imagenes y quedaría cool.

Aqui les dejo los ejemplo y el archivo a descargar.

Ver Ejemplo

Descargar el Script

Curl.js 1.3 es un efecto echo en javascript para que puedes voltear la pestaña de una imagen, dandole animación y presencia a las imagenes que tienes agregadas a tu web.

Es soportado por varios tipos de navegadores web, aquí les en listo cuales.
+ Mozilla Firefox 1.5+
+ Opera 9+,
+ Safari
+ IE6+

Ver Ejemplo

Con este código puedes obtener una lista periódica de vídeos de Youtube, tienes que descargar Jquery para poder utilizar este código.

Ver Demo

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.youtubeplaylist.js"></script> 
 
<script type="text/ecmascript"> 
 
		$(function() {
			$("ul.demo1").ytplaylist({
				addThumbs:true, 
				autoPlay: false, 
				playerWidth: '320',
				playerHeight: '240',
				thumbSize: 'large',
				showInline: true
				});
		});
 
</script>

Agregar a favoritos con javascript

Si deseas que tus usuarios agreguen tu web a favoritos facilmente, seria mejor si les das la opción con un solo click.

Este es el codigo:

<a href="javascript:window.external.AddFavorite('http://www.zoneartcss.com','Titulo del sitio');">Añadir esta página a mis favoritos</a>

Deshabilitar o configurar click derecho

Este script esta excelente por que podemos personalizar el menú que sale cuando damos clic secundario en nuestra web, asi podemos hasta evitar que nos fusilen nuestras imagenes, tambien si estamos desarrollado una aplicación podemos personalizarla más con opciones propias.

Coloca este codigo en cualqueir parte dentro de body

 
<div id="menu" style="visibility:hidden; position:absolute;"> 
   <div class="opcion" onclick="javascript:funcion();">Mi funcion</div> 
   <div class="opcion" onclick="javascript:funcion();">Mi funcion</div> 
   <div class="opcion" onclick="javascript:funcion();">Mi funcion</div> 
   <div><hr /></div> 
   <div class="opcion" onclick="javascript:funcion();">Mi funcion</div> 
</div>

Descarga la hoja de estilo
Descarga el javascript

VER EJEMPLO

Desactivar tecla enter con jQuery

Te preguntaras

¿Pa’que chin…. me sirve esto?

A veces suele suceder que estas llenando un formulario y sin querer presionas ENTER y se envían los datos incompletos… y nuevamente debes de en pesar a llenar el form con tus datos. y la verdad se es molesto.

Con este script puedes evitar el enter en formularios con jquery

<script language="javascript" src="js/jquery.js"></script> 
// remplaza el src por la ubicacion de tu jscript 
 
<script language="javascript"> 
$(document).ready(function() { 
 
  $('form').keypress(function(e){    
    if(e == 13){ 
      return false; 
    } 
  }); 
 
  $('input').keypress(function(e){ 
    if(e.which == 13){ 
      return false; 
    } 
  }); 
 
}); 
</script>

Recuerda descargar el Jquery!!

Desactivar seleccionar texto con JS

Con JavaScript es fácil desactivar para la selección de texto de tu web, para poder evitar el fusile de contenidos veamos el código este lo pegarías en tu pagina web.

window.onload = function()
{
     document.onselectstart = function()
     {
          return false;
     } 
// Firefox
     document.onmousedown = function()
     {
          return false;
     }
}

Espero que les ayude en algo!!

Modal Box

ModalBox es una técnica de JavaScript para la creación de modernos cuadros de diálogo modal o incluso mensajes de error, sin necesidad de utilizar ventanas emergentes convencionales y cargar nueva página para ejecutarlo. Está inspirado en Mac diálogos OS X modal. Y sí, también puede ser útil para mostrar versiones más grandes de las imágenes.

ModalBox se construye con JavaScript puro y se basa en la excelente Sam Stephenson Prototype Framework, script.aculo.us y válido XHTML / CSS. ModalBox utiliza AJAX para cargar contenido.

Esta es una excelente herramienta para tu web o sistema web que implementes, en lugar de mostrar los mensajes de error con los tradicionales cuadros de dialogo del explorador mejor los muestras de esta manera.

Es muy fácil deimplementar.

Descarga Aqui desde la web de Autor

Pasos de implementación
Ya descargado el archivo, en una pagina php o html agregas los javascript de la siguiente manera.

<script type="text/javascript" src="includes/prototype.js"> </ script> <script type = "text / javascript" src = "includes / scriptaculous.js? ¬ 
      = carga de los constructores, los efectos "> </ script> 
<script type="text/javascript" src="includes/modalbox.js"> </ script>

Luego Agregas la hoja de estilo.

]]>
			http://www.zoneartcss.com/webdevelopment/ajax/modalbox-cuadros-de-dialogo-en-javascript/feed/
		0
		
		
		
		http://www.zoneartcss.com/general/generador-de-popups/
		http://www.zoneartcss.com/general/generador-de-popups/#comments
		Wed, 09 Sep 2009 16:09:33 +0000
		Liz Palacios
				
		
		
		
		
		
		
		

		http://www.zoneartcss.com/?p=727
		
			

Aplicacion web para generar popups
Hola de nuevo!!!
Esta pagina es similar al POST anterior solo que esta es para popUP’s!!
Te es util si no tienes mucha idea de como hacer una Ventana Emergente o popUP’s.
Esta chida la pagina ya que le puede pasar muchos parametros (URL de la ventana, Tamaño, Nombre de la ventana, etc…) y de ahi generar el codigo que aplicaras en tu pagina.


Los chido es que te dice para que te sirve cada parametro.
Les dejo el LINK
]]>
			http://www.zoneartcss.com/general/generador-de-popups/feed/
		1
		
		
		
		http://www.zoneartcss.com/webdesign/css/menu-con-javascript-y-jquery-efecto-sombra/
		http://www.zoneartcss.com/webdesign/css/menu-con-javascript-y-jquery-efecto-sombra/#comments
		Tue, 04 Aug 2009 19:37:22 +0000
		miguelortega
				
		
		
		
		
		
		
		
		
		
		
		

		http://www.zoneartcss.com/?p=449
		
			

Menu deslizable
Este es un efecto de sombra exelente de un menu sencillo hecho con javascript y las librerias del JQuery, en donde logramos un efecto de movimiento de una sobra para enfocar una sección.



Paso 1: El HTML
Dado que la mayoría de los desarrolladores creen que la interfaz de usuario una lista desordenada (ul) representa la correcta estructura semántica de un menú / barra Navbar, vamos a comenzar por escribir precisamente eso.

1
2
3
4
5
6
<ul class="lavaLamp"> 
             <li><a href="#">Home</a></li> <li> <a href="#"> Inicio </ a> </ li> 
             <li><a href="#">Plant a tree</a></li> <li> <a href="#"> Planta un árbol </ a> </ li> 
             <li><a href="#">Travel</a></li> <li> <a href="#"> Viajes </ a> </ li> 
             <li><a href="#">Ride an elephant</a></li> <li> <a href="#"> paseo un elefante </ a> </ li> 
         </ul> </ ul>

Paso 2 : El Css
Puede esta css de muchas maneras diferentes lograr su propio menú personalizado. La siguiente hoja de estilo no es más que una posibilidad.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/ * Estilos para la totalidad del menú LavaLamp * / 
 .lavaLamp { . lavaLamp ( 
     position: relative; posición: pariente; 
     height: 29px; width: 421px; altura: 29px; ancho: 421px; 
     background: url("../image/bg.gif") no-repeat top; fondo: url ("../ imagen / bg.gif ") no-repeat top; 
     padding: 15px; margin: 10px 0; padding: 15px; margin: 10px 0; 
     overflow: hidden; desbordamiento: oculto; 
 } ) 
     /* Force the list to flow horizontally */ / * Fuerza de la lista para el flujo horizontal * / 
     .lavaLamp li { . lavaLamp li ( 
         float: left; flotador: izquierda; 
         list-style: none; lista de estilo: ninguno; 
     } ) 
         /* Represents the background of the highlighted menu-item. / * Representa el fondo del menú resaltado. */ * / 
         .lavaLamp li.back { . lavaLamp li.back ( 
             background: url("../image/lava.gif") no-repeat right -30px; fondo: url ("../ imagen / lava.gif ") no se repita la derecha 30px; 
             width: 9px; height: 30px; anchura: 9PX; altura: 30px; 
             z-index: 8; z-index: 8; 
             position: absolute; position: absolute; 
         } ) 
             .lavaLamp li.back .left { . lavaLamp li.back. izquierda ( 
                 background: url("../image/lava.gif") no-repeat top left; fondo: url ("../ imagen / lava.gif ") de no repetir parte superior izquierda; 
                 height: 30px; altura: 30px; 
                 margin-right: 9px; margen derecha: 9PX; 
             } ) 
         /* Styles for each menu-item. / * Estilos para cada menú. */ * / 
         .lavaLamp li a { . lavaLamp una li ( 
             position: relative; overflow: hidden; posición: pariente; desbordamiento: oculto; 
             text-decoration: none; text-decoration: none; 
             text-transform: uppercase; texto-transformar: mayúsculas; 
             font: bold 14px arial; font: 14px Arial negrita; 
             color: #fff; outline: none; color: # fff; esbozo: ninguno; 
             text-align: center; alinear texto: centro; 
             height: 30px; top: 7px; altura: 30px; arriba: 7px; 
             z-index: 10; letter-spacing: 0; z-index: 10; carta de espaciamiento: 0; 
             float: left; display: block; flotador: izquierda; pantalla: bloque; 
             margin: auto 10px; margin: 10px auto; 
         } )



Paso 3: El Javascript
Este JavaScript lo colocaras en el Head

1
2
3
4
5
6
7
8
 <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jquery.js"> </ script> 
 <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script> <script type="text/javascript" src="path/to/jquery.lavalamp.js"> </ script> 
 <!-- Optional --> <! - Opcional -> 
 <script type="text/javascript" src="path/to/jquery.easing.js"></script> <script type="text/javascript" src="path/to/jquery.easing.js"> </ script> 
 
 <script type="text/javascript"> <script type="text/javascript"> 
     $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })}); $ (function () ($ ( ". lavaLamp"). lavaLamp ((fx: "backout", velocidad: 700 })}); 
 </script> </ script>

y listo tenemos nuestro menu en css.
Para descargar:

Librerias JQuery

Plugin Facil

LavaLamp Plugin
Ver el Demo Aquí
]]>
			http://www.zoneartcss.com/webdesign/css/menu-con-javascript-y-jquery-efecto-sombra/feed/
		0
		
		
		
		http://www.zoneartcss.com/webdesign/css/efecto-page-peel-con-jquery-css/
		http://www.zoneartcss.com/webdesign/css/efecto-page-peel-con-jquery-css/#comments
		Fri, 31 Jul 2009 02:28:03 +0000
		Liz Palacios
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		http://www.zoneartcss.com/?p=411
		
			

Hola les mostrare como crear el efecto de paginacion en tu Web. La mayoria de las veces esto lo crean con flash, pero les voy a mostrar una manera mas rapida y sencilla de hacerlo.

Les muestro como:


1ro vamos a crear el contenedor de nuestra esquina paginada.

1
2
3
4
5
6
<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span class="msg_block">Subscribe via RSS</span>
	</a>
</div>

Ahora creamos nuestro style css, establecemos nuestra imagen de la esquina a un tamaño pequeño (50px por 50px) por defecto y establecemos el posicionamiento absoluto de nuestro span en la esquina superior derecha.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top; /* Imagen oculta a mostrar */
	text-indent: -9999px;
}

Y por ultimo nuestro codigo js, antes debemos llamar a nuestro archivo jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ // Animacion de nuestro div (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '50px'
		}, 200);

Les dejo el link de la DEMO EL LINEA
]]>
			http://www.zoneartcss.com/webdesign/css/efecto-page-peel-con-jquery-css/feed/
		3
		
		
		
		http://www.zoneartcss.com/general/cortar-imagenes-desde-tu-pagina/
		http://www.zoneartcss.com/general/cortar-imagenes-desde-tu-pagina/#comments
		Fri, 31 Jul 2009 01:32:08 +0000
		Liz Palacios
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		http://www.zoneartcss.com/?p=396
		
			

Hola!! Esta vez les voy a mostrar como utilizar Jcrop es una libreria que junto a Jquery te permite cortar imagenes online (cortar imagenes tipo facebook   ). La libreria es muy facil de usar!!

Les muestro como: 


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

1
2
3
4
5
6
7
8
9
10
11
12
13
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
      $targ_w = $targ_h = 150; // Es el tamaño que tendra nustra imagen al momento de cortarla.
      $jpeg_quality = 90;// Es la calidad que tendra nuestra Imagen.
      $src = 'demo_files/raphaxx3.jpg'; //En este paso seleccionamos que imagen vamos a cargar para luego cortarla.
      $img_r = imagecreatefromjpeg($src);
      $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
      imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
      $targ_w,$targ_h,$_POST['w'],$_POST['h']);
      header('Content-type: image/jpeg');
      imagejpeg($dst_r,null,$jpeg_quality);
      exit;
      }

Paso2 : Incluimos los archivos JavaScript y css de la libreria entre las etiquetas “head”. Sin esto obviamente no va a funcionar:

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 -->

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

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

Bueno eso fue todo!!!

Les paso el link del DEMO EN LINEA

Y el LINK de descarga de los Archivos.
]]>
			http://www.zoneartcss.com/general/cortar-imagenes-desde-tu-pagina/feed/
		0