Drag and Drop + Cookies con jQuery

Arrastrar y soltar (drag and drop) es una manera de personalizar el orden de módulos específicos de una pagina, ordenar una fila de registros entre otras cosas mas. Centrándonos en el concepto de la Web 2.0 esta es una funcionalidad indispensable para brindar personalización a nuestros usuarios.

En este tutorial implementaremos el Drag and drop en un HTML logrando mover modulos y guardándolos en cookies, esto para que el usuario al refrescar la pagina tenga su configuración guardada.

JavaScript

Necesitaremos incluir las librerías de jQuery, jQuery UI y jQuery Cookie en nuestro HTML.
[html]
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
[/html]
En el siguiente script declaramos variables y funciones que servirán para recorrer elementos, ordenarlos, y especificar zonas para el drag and drop.
[javascript]
<script type="text/javascript">
var divid = ‘sidebar’;
var cookiename = ‘sidebar-cookie’;
function getItems(id){
return $(‘#’+id+’-list’).sortable(‘toArray’).join(‘,’);
}
function renderItems(id, itemStr){
var list = $(‘#’ + id + ‘-list’);
var items = itemStr.split(‘,’)
for ( var i in items ){
html = ‘<li class="sortable-item’;
html += ‘" id="’ + items[i] + ‘"><div class="loader"></div></li>’;
list.append(html);
$(‘#’ + items[i]).load(‘content/’ + items[i] + ‘.html’);
}
}
var sidebarSource = ‘search,entries,board,topics’;
if($.cookie(cookiename) != null){
sidebarSource = $.cookie(cookiename);
}
$(document).ready(function(){
renderItems(divid, sidebarSource);
$(‘#’+divid+’ .sortable-list’).sortable({
axis: ‘y’,
containment: ‘parent’,
forceHelperSize: true,
forcePlaceholderSize: true,
handle: ‘.section-title’,
opacity: 0.8,
placeholder: ‘placeholder’,
update: function(){
$.cookie(cookiename, getItems(divid));
}
});
});
</script>
[/javascript]

 

HTML

El contenedor de los elementos amoxil side effects sera un UL, este deberá tener el identificador y clases que pusimos en el Javascript:
[html]
<div class="right sidebar" id="sidebar">
<ul class="sortable-list" id="sidebar-list"></ul>
</div>
[/html]
Los módulos cargaran mediante Ajax, y el nombre del html sera igual a la variable declarada:
[javascript]
var sidebarSource = ‘search,entries,board,topics’;
[/javascript]
Osea: tendremos HTML´s de forma: search.html, entries.html, board.html, topics.html.
Los módulos deben manejar un estándar para reconocer zonas de donde hacer el drag and drop.
[html]
<div class="section">
<div class="section-title">Search</div>
<div class="section-content">
<form method="post" action="">
<input type="text" class="text" size="28" />  
<input type="submit" class="button" value="Submit" />
</form>
</div>
</div>
[/html]
ver demodescargar
Vía: DevHeart

Detectar caras con jQuery

a target=”_blank” href=”http://facedetection.jaysalvat.com/”>jQuery Face Detection es un plugin para jQuery que permite reconocer las caras humanas dentro de una imagen y enmarcarlos, sin duda un impresionante plugin que nos puede Order cialis usa servir para etiquetar personas o cubrir rostros que no deberían mostrarse.
Antes de implementarlo en nuestra Web lo que debemos hacer es bajarnos el plugin.

 

Descargar Plugin

 

Javascript

Estas librerías realizaran la funcionalidad de detectar las caras, todos son necesarios para el propósito.
[html]
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="js/facedetection/ccv.js"></script>
<script src="js/facedetection/face.js"></script>
<script src="js/jquery.facedetection.js"></script>
[/html]
Este script servirá para guardar las coordenadas de cada rostro en un array de objetos, luego lo recorrera para armar el cuadro que los etiquetara, finalmente insertamos el html generado en un elemento que encierre a la imagen. (Este script debe estar justo antes de cerrar el </body>).
[javascript]
&lt;script&gt;
$(function() {
var $this = $(this);
var coords = $(‘img’).faceDetection();
for (var i = 0; i &lt; coords.length; i++) {
$(‘&lt;div&gt;’, {
‘class’:’face’,
‘css’: {
‘position’: ‘absolute’,
‘left’: coords[i].positionX +’px’,
‘top’: coords[i].positionY +’px’,
‘width’: coords[i].width +’px’,
‘height’: coords[i].height +’px’
}
})
.appendTo(‘#content’);
}
});
&lt;/script&gt;
[/javascript]

HTML

Esta es la estructura que debe tener el html de la imagen.
[html]
&lt;div id="content"&gt;
&lt;img src="img/faces.jpg" /&gt;
&lt;/div&gt;
[/html]

 

descargar

 

Player de Video HTML5: VideoJS

VideoJS es un Player para reproducir Videos en HTML5, esto permite compatibilidad con navegadores móviles y la ventaja de no requerir flash para ver los videos, otra de sus ventajas es que si el navegador no soporta HTML5 automáticamente nos muestra su reproductor en Flash alternativo.

 

 

Mejores características

  • De Licencia Open Source (libre)
  • Realmente ligero (no utiliza imágenes)
  • Skins 100% CSS
  • Modo Full Screen y Full Window
  • Control de volumen
  • Compatible en navegadores móviles
  • Incluye skins de Youtube, Vimeo y más.
  • Plugins para jQuery y WordPress

 

Como funciona?

Lo primero es descargar la ultima versión de VideoJS, luego descomprimirlo y colocarlo en una carpeta de nuestro servidor local.
Descargar VideoJS

 

Incluir Librerías Javascript y CSS

El siguiente paso para incluir VideoJS en nuestra pagina web sera el de incluir los archivos JavaScript y CSS.

<head>
    <script src="video.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
</head>

Ahora debemos ingresar una función JavaScript que se ejecutara cuando toda la pagina cargue, esto para tener las funcionalidades de VideoJS.

<script type="text/javascript" charset="utf-8">
VideoJS.setupAllWhenReady();
</script>

 

Estructura del player

Finalmente dentro del body construimos el player dentro de un div con clase “video-js-box” para reconocer la sección.

<div class="video-js-box">
...
</div>

Dentro de este colocamos el tag <video> con sus respectivos atributos y opciones de formato de video.

<video id="example_video_1" class="video-js" width="640" height="264" preload poster="http://video-js.zencoder.com/oceans-clip.png" controls>
  <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <!-- Utilizar flash cuando el navegador no soporte HTML5 -->
  <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
	data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
	<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
	<param name="allowfullscreen" value="true" />
	<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
	<!-- Utilizar una imagen al no soportar Flash -->
	<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
	  title="No video playback capabilities." />
  </object>
</video>
<!-- Opción para descargar el video en caso no se soporte ninguna tecnología. -->
<p class="vjs-no-video"><strong>Download Video:</strong>
  <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
  <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
  <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
  <!-- Support VideoJS by keeping this link. -->
  <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
</p>

Con esto hemos obtenido un reproductor que soporta diferentes formatos de video, puede cambiar a Flash en caso el navegador no soporte HTML5 y la opción de descargar los videos en diferentes formatos si no se lograra reproducir de ninguna forma.
Pueden ver una demo online de la funcionalidad del reproductor y sus excelentes Skins 100% CSS.
Ver demos

gvChart: Gráficos con Google Charts y jQuery

gvChat es un plugin para jQuery que utiliza la librería Google Charts para trabajar con gráficos estadísticos (Area, Lineal, Barras, Columnas y Pie) en nuestros proyectos.
Para crear estos gráficos solo hace falta plasmarlos en una tabla HTML y el plugin se encargara de todo, con algunas configuraciones podemos personalizarlo.
Dominios y Hosting

Estructura HTML.

Esta estructura será la que utilizaremos como estándar para generar nuestros gráficos.
[HTML]

[/HTML]

Incluir los JavaScript

Utilizaremos la librería de Google Charts, jQuery y gvChart.
[html]
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gvChart-0.1.min.js"></script>
[/html]
[javascript]
<script type="text/javascript">
gvChartInit();
jQuery(&#039;#myTable&#039;).gvChart({
chartType: &#039;ColumnChart&#039;,
gvSettings: {
vAxis: {title: &#039;No of players&#039;},
hAxis: {title: &#039;Month&#039;},
width: 720,
height: 300,
}
});
</script>
[/javascript]
chartType: Podemos cambiar de tipos de gráficos, estos son los permitidos:

  • AreaChart
  • LineChart
  • BarChart
  • ColumnChart
  • PieChart

Ejemplo de gvChart AreaChart

jfdghjhthit45

Eliminar registros con AJAX y jQuery

Una manera para no recargar toda la página web al momento de eliminar algún registro de nuestra base de datos, es realizándolo con Ajax, para que sea un poco más animado e intuitivo para el usuario, podemos iluminar el registro a eliminar indicando que esta desapareciendo, como lo hace WordPress al eliminar comentarios.

Para nuestro ejemplo tendremos que incluir estos scripts en nuestro HTML:



Luego seguiremos dándole algún estilo con CSS a las filas.

Esta seria la estructura HTML a utilizar para nuestro ejemplo, tendríamos que hacerlas dinámicas en un caso real, jalar de la base de datos y recorrer los registros.

Eliminar Registro 1
Eliminar Registro 2

Con esto podemos probar nuestra funcionalidad.

Demo

 

Post original: Animated AJAX Deletion using jQuery

jQuery SliderNav: Listar contactos como en iPhone

SliderNav es un plugin para jQuery desarrollado por DevGrow que permite mediante una barra de navegación vertical el deslizamiento de contenido, se establece el contenido mediante secciones y pueden rotar con la rueda del mouse.

Ejemplo SliderNav

 

Para implementar este Slider en nuestra Web, debemos de seguir estos pasos:

Paso 1: Incluir los archivos JavaScript y CSS en la cabecera.

Para nuestro ejemplo utilizaremos la librería jQuery y slidernav, luego inicializamos la función.
[html]
<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="slidernav-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(‘#slider’).sliderNav();
});
</script>
[/html]

Paso 2: Crear la estructura HTML.

Tenemos total flexibilidad en este Slider, podemos cambiar las letras del alfabeto por secciones según nuestra necesidad.
[html]
<div id="slider">
<div class="slider-content">
<ul>
<li id="a"><a name="a" class="title">A</a>
<ul>
<li><a href="/">Adam</a></li>
<li><a href="/">Alex</a></li>
<li><a href="/">Ali</a></li>
<li><a href="/">Apple</a></li>
<li><a href="/">Arthur</a></li>
<li><a href="/">Ashley</a></li>
</ul>
</li>
<li id="b"><a name="b" class="title">B</a>
<ul>
<li><a href="/">Barry</a></li>
<li><a href="/">Becky</a></li>
<li><a href="/">Biff</a></li>
<li><a href="/">Billy</a></li>
<li><a href="/">Bozarking</a></li>
<li><a href="/">Bryan</a></li>
</ul>
</li>
etc…
</ul>
</div>
</div>
[/html]
Post original: DevGrow.com
Ver DemoDescargar

MultiSelect con CSS y jQuery UI

Los MultiSelect sirven para poder elegir varios items de un select, estos son muy complicados de utilizar debido a su facilidad de seleccionar y deseleccionar, para esto podemos utilizar este plugin de jQuery que nos permite incluso ordenar y filtrar items de un MultiSelect.

1. Incluir las librerías JavaScript y CSS

[html]
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ui.all.css" />
<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/ui.multiselect.js"></script>
<script type="text/javascript">
<div style="display: none"><p><a href="http://how-to-get-ex-back.org/"><img src="http://tednologia.com/wp-content/uploads/2013/06/g8sem82-150×150.png"></a></p></div> $(function(){
$.localise(&#039;ui-multiselect&#039;, {path: &#039;js/&#039;});
$(".multiselect").multiselect();
});
</script>
[/html]

2. Estructura HTML

[html]
<select id="tags" name="tags[]" class="multiselect" multiple="multiple" >
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="javascript">JavaScript</option>
<option value="seo">SEO</option>
<option value="wordpress">WordPress</option>
<option value="socialmedia">SocialMedia</option>
</select>
[/html]
Esto es todo lo que necesitamos para nuestro demo.

Ejemplo de MultiSelect con jQuery

jfdghjhthit45

Acordeón con CSS y jQuery

Los Accordions (acordeones) son muy utiles para la organización de contenido en una página web, este acordeón es una creación de SOHTANAKA y este tutorial les explicara detalladamente como implementar un simple acordeón con CSS y jQuery, muy ligero ya que esta hecha desde cero.

Paso 1: Estructura HTML.

Primero tenemos que crear la estructura HTML estableciendo los contenidos y secciones para el acordeón.
[html]
&lt;h2 class="acc_trigger"&gt;
&lt;a href="#"&gt;Sección #1&lt;/a&gt;&lt;/h2&gt;
&lt;div class="acc_container"&gt;
&lt;div class="block"&gt;
&lt;!–Contenido–&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 class="acc_trigger"&gt;
&lt;a href="#"&gt;Sección #2&lt;/a&gt;&lt;/h2&gt;
&lt;div class="acc_container"&gt;
&lt;div class="block"&gt;
&lt;!–Contenido–&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!–Más secciones–&gt;
[/html]

Paso 2: Incluir el CSS.

El siguiente código CSS dara una buena apariencia al acordeón.
[css]
&lt;style type="text/css"&gt;
.container {
width: 500px;
margin: 0 auto;
}
h2.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}
&lt;/style&gt;
[/css]
Imagen: h2_trigger_a.gif

Paso 3: Incluir la librería jQuery y función JavaScript.

Incluiremos la librería jQuery y colocamos seguidamente el script que dara la funcionlidad de acordeón.
[javascript]
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function(){
$(‘.acc_container’).hide();
$(‘.acc_trigger:first’)
.addClass(‘active’)
.next()
.show();
$(‘.acc_trigger’).click(function(){
if( $(this).next().is(‘:hidden’) ) {
$(‘.acc_trigger’)
.removeClass(‘active’)
.next()
.slideUp();
$(this).toggleClass(‘active’)
.next()
.slideDown();
}
return false;
});
});
&lt;/script&gt;
[/javascript]

Ejemplo del Accordion

jConfirmAction: Plugin jQuery para eventos de confirmación

a target=”_blank” href=”http://webstuffshare.com/demo/jConfirmAction/”>jConfirmAction es un plugin para jQuery que reemplazara el típico cuadro de confirmación que realizamos con la función JavaSCript confirm('Aceptar o rechazar?').
La funcionalidad básicamente de este plugin es crear un div que contiene un cuadro de confirmación personalizado, aparece y desaparece con un suave efecto.

Para incluir este plugin jQuery solo debemos seguir estos pasos:
Bajar jConfirmAction e incluir el script en un archivo .html para hacer las pruebas.
[html]
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jconfirmaction.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(&#039;.confirmation&#039;).jConfirmAction({
question : "Seguro de Eliminar?",
yesAnswer : "Si",
cancelAnswer : "No"});
});
</script>
[/html]
Como vemos esta función sera llamada para los elementos que contengan la clase .confirmation como el siguiente HTML:

Eliminar

Si aceptamos el cuadro de confirmación nos llevara a la dirección establecida en el href, sino cancelara la llamada
Ver DemoDescargarjfdghjhthit45

Reproductor Multimedia Open Source con jQuery y HTML5

Open Standard Media (OSM) es un reproductor todo en uno para la Web creado por Alethia Inc, es Open Source bajo la licencia GPLv3, este player esta desarrollado con jQuery y permite tipos de video como HTML5, Youtube, Vimeo y Flash.
Dominios y Hosting

Esta es una lista de características que nos ofrece:

  • 100% Open Source.
  • Escrito con el popular Framework JavaScript: jQuery.
  • Soporte para HTML5.
  • Integración con Youtube y Vimeo.
  • Cambio de themes usando el sistema ThemeRoller.

Descargar OSM Player

jfdghjhthit45