Entradas

Mostrando las entradas etiquetadas como jquery

Resaltar texto en página con jquery

Es muy común en algunas páginas web que haya un texto resaltado debido a una búsqueda o palabra clave destacada, esto se puede hacer directamente en la página del lado del usuario/navegador con jquery, evitando resaltar desde el lenguaje de programación usado en el servidor de hosting. Primero hay que crear un estilo para resaltar el texto <style type="text/css"> .highlight { background-color: yellow } </style> Luego debemos enlazar un plugin de jquery, porsupuesto luego invocar a jquery. <script language="javascript" type="text/javascript" src="/js/jquery.highlight-3.yui.js"></script> Seguido vamos a crear el script que buscará un párrafo <p> con la palabra a destacar, en este caso del ejemplo será laptops. <script language="javascript" type="text/javascript"> $(document).ready(function() { $('p').highlight('laptops'

Poner en negritas parte de un texto en una página

Imagen
Este efecto lo he visto en un sitio llamado DePeru.com en sus noticias hay un texto que no está en negrita con la etiqueta <strong> o <b> sino que se convierte en negrita gracias a Jquery (en el código fuente). El uso de este efecto se puede trasladar a muchos otros escenarios donde podríamos necesitar cambiar los estilos para nuestras páginas. Para este caso el webmaster ha detectado que todos sus textos tienen un <p> que empieza con una raya (o guión) ... visto desde el código fuente por supuesto. <p>- Multiplicar el impacto -</p> Para cualquier otra aplicación podría ser un <h1>, <a>... etc El truco es simple, debajo de la llamada al archivo Jquery externo y antes de finalizar el body agregar el script : <script> $( ".contenido p:contains('- ')" ).css( "font-weight","bold" ); </script> </body> </html> Dónde :     .contenido es el class que contiene al texto, lu

Aplicar estilo a un párrafo específico con JQuery

Imagen
Tenemos el siguiente requerimiento: En nuestros textos existen párrafos que comienzan con un guión o raya y deseamos ponerlos en negrita, por ejemplo: Este es un párrafo anterior. - Este es el texto - Este es otro párrafo Lo que tenemos que hacer primero es insertar la línea de jquery: <script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> Luego el script: <script> $( ".contenido p:contains('- ')" ).css( "font-weight","bold" ); </script> Con esto le decimos a la página que busque el <p> con la clase .contenido y que comience con raya y espacio ( - ) y le aplique el estilo css al texto tipo negrita (bold). Hay que considerar que en lugar de la raya podría ser otro símbolo como un paréntesis, corchete, llave, signo de interrogación, etc. Estos casos se pueden dar cuando la base de datos ya entrega texto con ese formato plano y editarlo en B

Script para Navegar Anterior y Siguiente con el teclado

Muchas páginas necesitan la comodidad de usar el teclado, este script permite en lugar de dar clic con el ratón usar las teclas avanzar y retroceder de nuestro teclado. Primero , asegúrate que ya tienes el Jquery en tu página. Segundo , antes de cerrar el body agrega el script. <script> $(document).keydown(function(e){   if(e.keyCode == 37) { // Izquierda     $("#izquierda").click(); window.location = 'izquierda.html';   }   else if(e.keyCode == 39) { // Derecha     $("#derecha").click(); window.location = 'derecha.html';   } }); </script> Tercero , Cambia las páginas:   izquierda.html y derecha.html  con las respectivas páginas a donde apuntan tus links. Cuarto,  en tus links normales agrega los ID:  id="izquierda" y id="derecha", con esto ya debe funcionar perfectamente. <a id="izquierda" href="izquierda.html">Anterior</a> <a id="derecha" href=

Script para buscar palabras en una Tabla con Jquery

Este script es una variación del Script para buscar palabras en una lista html , lo que hacemos es ahora hacer que el scrip busque en una tabla. colocar antes del cierra de </head> <script src="http://code.jquery.com/jquery-latest.min.js"></script>  <style> .resaltar{background-color:#FF0;} </style>    <script type='text/javascript' >     $.expr[':'].icontains = function(obj, index, meta, stack){     return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;     };     $(document).ready(function(){            $('#buscador').keyup(function(){                      buscar = $(this).val();                      $('#lista tr').removeClass('resaltar');                             if(jQuery.trim(buscar) != ''){                                $("#lista tr:icontains('" + buscar + "')").a

Efecto Cargando Página con jQuery

Imagen
imagen para esperar Algunas páginas son muy lentas y necesitan que le agreguemos el tradicional efecto de cargando en texto o el gif animado mostrado a la izquierda. Para los que conocemos html nos resulta conocido los DIV con el texto «cargando», así que vamos a ver como con unas cuantas líneas podemos llevar a cabo este efecto. Este ejemplo es útil para una página que tarda demasiado en cargar, y usaremos un link a un archivo externo jQuery, un JS y un DIV. Los siguientes pasos es entre las etiquetas HEAD: PASO 1: Agregar el archivo jQuery externo: <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js "></script> PASO 2: agregar debajo el script siguiente: <script> $(window).load(function () { $('#cargando').hide(); }); </script> PASO 3: agregar los estilos: <style type="text/css"> #cargando { width:350px; height:70px; clear:both; background-colo

Script para buscar palabras o textos en una página (html) con Jquery

Imagen
Aquí les muestro la solución que recientemente encontré para colocar un buscador dentro de una página web para que encuentre textos o palabras. El script funciona con Jquery y un pequeño Javascript que busca en el html y resalta (en amarillo) los textos que va encontrando según tu vayas ingresando las letras. El color de fondo puede variarse de acuerdo al tema y colores de tu página web. Es además un script moderno  (2012) que trabaja con todos los navegadores como el Chrome, IE9, Safari, etc.