Jquery

jQuery slider, pura artesania manual

Despues de muchos intentos fallidos ya sean por css, o por requerimientos que uno necesita no encontre un plugin que se adecuara a mis necesidades, de ahi la mala costumbre de hacer artesania manual, las ventajas esque podemos cambiar los eventos de forma inmediata.
Les dejo el codigo y hagan preguntas, script compatible con  explorer, firefox, chrome, safari y opera.
Script para el slider
function avanzar(imagenes,div){ var largo = $(div).css('left'); if(parseInt(largo) != 0){ if(parseInt(largo) < 1 ){ $(div).animate({left: '+=medida_de_tu_imagen'},800); } } } function retroceso(imagenes, div){ var imgCont = imagenes - 1; var limite = (imgCont * medida_de_tu_imagen) * -1; var largo = $(div).position().left; if(parseInt(largo) > parseInt(limite) ){ $(div).animate({left: '-=medida_de_tu_imagen'},800); } }
 div class="Este_sera_el_marco"  tiene que llevar su overflow:hidden para k no se les salga nada de la pantalla que designen
 a id="trigger" onclick="avanzar('3','#retail')" el lanzador que va en el link

 


img src="/images/prev.png" border="0"/ /a  la imagen que gusten de botoncillo

div class="items" esta clase es muy importante, deben poner el ancho calculado de sus imagenes o en auto para que se despliegue a tantos pixeles como sea necesario, como la capa anterior es el contenedor, esta no se vera aunque este mas grande que la pantalla.

 


La pila de imagenes dentro de un div cada una, los divs deben ir con floa left
 div><img src="/images/1.jpg"/ /div
div><img src="/images/2.jpg"//div
div><img src="/images/3.jpg"/ /div
/div

 


Y elboton para regresar el slider
onclick="retroceso('3','#retail')" id="triggerR">
img src="/images/next.png" border="0"/></a
/div  

 


Ejemplo en funcionamiento, de los slides ya aplicado con jqueryScrollTo

 


http://proyectos.mirrorlinux.net/sugar/

 


salu2

Comment (0) Hits: 4362

Otra de selects dependientes jQuery

Como ya hay una nota anterior solo les dejo el codigo de la posible otra forma, que es lo mismo que la pasada pero esta esta difernete la condicion


      jQuery(document).ready(function(){
        
        jQuery("#select1").change(function(){

            if(jQuery("#select1 option:selected").val() == 'opcion seleccionada'){
                opciones = "<option>1</option><option>2</option><option>3</option>";
            }else{
                opciones = "<option>NADA</option>";
            }
            jQuery("#select2").html(opciones);
        });
        
      });

 

Estaria bien le dieran un repaso a la funcion  .html( ), .val(). de jquery, de ahi posteriormente veremos como se usa  .append( ) y .remove( ), recuerden que en jQuery el elemento o respuesta se asigna al tag por medio del identificador.

 

Estos son los principales, aunque podemos ocupar varios mas.

# id

. class


Asi como se pueden utilizar para jquery, tambien aplica para CSS

Comment (0) Hits: 5460

Jquery editable, has un div una seccion para editar.

Como pa que se usa ?

Tener un texto editable en una tabla te ahorra una gran secuencia de busqueda y edicion que a veces es tediosa, asi pues simplemente a la hora de programar editas quien sera el bueno y listo, edicion instantanea en accion.

 

Las ventajas de tener un campo editable, independientemente de lo dinamico de tu sistema te ofrece un gran recorte en formularios de editar, esto hablando en tiempos de programacion.

Read More Comment (0) Hits: 8048

Listbox dependientes php + jQuery

img2En algunos casos necesitamos tener comobos o lisbox anidados, que seleccionemos una opcion 1, y nos de todas las opciones 1,x, asi mismo de la 1,x que salgan las 1,x,y.

 

Esto se puede resolver de varias maneras, get, ajax, jQuery, entre otras, aki les dejo un codigo jquery que almenos a mi me sirvio probado en iEZplorer, Firefox, Chrome.

 

jQuery("#select_1").change(function(event){
         var id = jQuery("#select_1").find(':selected').val();                         

         jQuery("#select_2").load('busquedas.php?seccion=elementos&itemId='+id);

});

 

Y el html pues suber basico

 

<select id="select_1">

<option value=1>1</option>

<option value=2>2</option>

</select>

 

<select id="select_2">

</select>

Comment (0) Hits: 5088

Jquery Scroll horizontal, movemos el cuadrito ?

 

jquery_logo Caido desde la referencia oficial:

.animate( properties, options )

propertiesA map of CSS properties that the animation will move toward.

optionsA map of additional options to pass to the method.

 

Y eso a mi que ?

Bueno pues, para mover el cuadrito en este minimanual usaremos l apropiedad animate, el ejemplo sera el mismo de la referencia pero vamos a verlo un poquito mas detallado.

Read More Comment (1) Hits: 4838