Mostrando entradas con la etiqueta JQuery. Mostrar todas las entradas
Mostrando entradas con la etiqueta JQuery. Mostrar todas las entradas

viernes, 22 de agosto de 2014

Marcar como activa una pestaña con JQuery

En este ejemplo muestro como marcar una pestaña u otra
Para ello uso el siguiente código JQuery:
$(document).on('click', 'ul li', function(){ 
    var $this= $(this);

    $('ul li').removeClass('active');
    $this.addClass('active');
});
Mediante el evento on de JQuery le pido que ejecute este códogo al hacer click sobre uno de los <li> en ese momento le pido que borre la clase 'active' de todos los <li> anteriores, y se la asigno al que lanza la petición, es decir al que ha sido pulsado.
Para hacerlo mas atractivo me he servido de los css de bootstrap, pero la idea es usar nuestros propios CSS y JS


Repositorio GitHub con el ejemplo de este artículo

lunes, 4 de agosto de 2014

JQuery jugar con capas


Hoy os traigo algunas funciones utiles en JQuery para interactuar con las capas


  •     $(capa).after(contenido);
La funcion After te deja colocar un contenido despues del selector
  •     $(capa).before(contenido);
Igual que la anterior, pero esta coloca el contenido antes del selector
  •     $(capa).html(contenido);
Sirve para sustituir el valor del contenido
  •     $(capa).animate(animacion, duraccion, funcion al finalizar);
Anima un selector
  •     $(capa).addClass(clase);
Añade una clase al selector
  •     $(capa).removeClass(clase);

Este la elimina


JQuery tiene muchas mas funciones interesantes, pero he seleccionado estas por considerarla las mas utiles y usadas, cuales echais de menos???

Os dejo un ejemplo de todas las anteriores en mi GitHub

viernes, 4 de abril de 2014

Llevar el scroll abajo - JQuery

Os propongo un caso práctico relacionado con el último articulo que os escribí:
http://www.rogamainformatica.es/2014/04/obtener-el-alto-total-de-la-pagina.html

En el os explicaba como obtener el alto total de la pagina, para hacerlo un poco mas útil vamos a hacer que nuestra pagina nada mas cargar se desplace hasta la parte inferior.

Con estas 3 sencillas lineas podremos mover el scroll de nuestra página hasta abajo
$(document).ready(function($) {
     var WH = $(window).height();
      var SH =$(document).height();
     $('html, body').stop().animate({scrollTop: SH- WH});
}
y cambiando la última linea por

     $('html, body').stop().animate({scrollTop: SH- WH}.3000);

además la animaremos y veremos como va bajando sola durante 3 segundos.

jueves, 3 de abril de 2014

Obtener el alto total de la página - JQuery

Con esta sencilla linea podremos obtener el alto total de la página, desde el comienzo del header hasta el fin del footer mediante JQuery; es decir la totalidad del alto de la página.

var SH =$(document).height();

Espero os sirva de ayuda ;)

sábado, 15 de marzo de 2014

Deshabilitar click derecho - JQuery

Hace unos días un cliente me pidió que no se pudieran descargar las imágenes de su web, y a pesar de indicarle que siempre se pueden descargar, comenzando por que para verse, el navegador las descarga y almacena en su carpeta de cache, y siguiendo por que con algo tan básico como una captura de pantalla y luego recortándola con photoshop, o incluso con el paint, ya las tiene.

por lo que le recomendé que metiera una marca de agua con su marca para sus fotos, pero aun así me insistió para que no pudieran hacer click derecho guardar imagen, por lo que aquí os dejo el código utilizado
        <script>
$(document).ready(function(){
            $(document).bind("contextmenu",function(e){
                return false;
            });
        });
        </script>
Con este sencillo script escrito con JQuery deshabilitaremos el botón derecho en nuestra web.

Agradecimientos a Jorge Maiden, el cual lo tiene publicado en su blog.
Fuente: http://www.bufa.es/deshabilitar-boton-derecho-jquery/

sábado, 11 de enero de 2014

Aparecen etiquetas HTML en selector de datos - Drupal

Me he encontrado con este error, en el Data Selector de las reglas en Drupal 7 me aparecían etiquetas HTML como podéis ver abajo; en lugar de un simple texto en el desplegable, desde el cual escoger la opción que mas nos interese en cada momento

jueves, 28 de noviembre de 2013

CDN de JQuery

En estos momentos el CDN de la propia web de JQuery en su version 1.10.2 esta caido como repercurtira esto en la web?? durante cuanto tiempo durara esta caida??

Al menos disponemos del CDN de Google

jueves, 31 de octubre de 2013

JQuery - Elegir una opción de un select por el texto

Cuando tenemos un select del tipo:

<select id="select">
<option value="1">soy el primero</option>
<option value="2">soy el Segundo</option>
</select>

Por diversas razones puede que necesitemos cambiar su valor por JQuery y tan solo dispongamos del texto, pues aquí os dejo la solución ;)

        value= "soy el Segundo";
        $("#select").find("option").filter(function(index) {
            return value === $(this).text();
        }).prop("selected", "selected");

viernes, 23 de agosto de 2013

Cambiar el valor de un input hidden mediante JQuery

Hoy venimos con algo básico y elemental, Cambiar el valor de un hidden.
Para ello solo necesitaremos este código

$('#CampoOculto').val(valor);

Espero os sirva de utilidad

Obtener el valor de un input hidden mediante Jquery

Hoy venimos con algo básico y elemental, obtener el valor de un hidden.
Para ello solo necesitaremos este código

$('#CampoOculto').val();

Espero os sirva de utilidad

miércoles, 12 de junio de 2013

JQuery 2.0 comparibilidad con IE

Todos los dias se aprende algo nuevo y acabo de aprender que JQuery 2.0 no es compatible con IE inferior a 8