Ejemplos de Programacion

Entradas

Mostrando las entradas con la etiqueta jquery

Ejemplo movilizando img con animate jQuery

- diciembre 26, 2018

En este ejemplo de jquery movilizaremos un imagen al darle click a un boton para lo cual deberemos utilizar la función animate de jquery. aqui el ejemplo. <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>jQuery appletenhtml</title> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/estilos.css"> </head> <body> <div class="container-fluid-"> <div class="row"> <div class="col-md-4 caja col-centrar"> <h3>Ejemplo utilizando Animate appletenhtml</h3> <br> <button class="btn brn-default ejecutar" id="boton">ej...

Ejemplo utilizando parse de Json con jquery

- junio 11, 2018

El Parse de Json nos da utilidad En JavaScript, dando la posibilidad de que el análisis sea posible de manera nativa con la función JSON.parse() con este formato sirve como un mecanismo para representar objetos binarios mas informacion ( grandes objetos binarios ) . En este ejemplo agregaremos datos de dos maneras distintas como ser desde json y una función. Descargar Ejemplo

Estilo css no cambia / css not change chrome

- mayo 26, 2018

Muchas veces cuando estas editando el estilo de alguna pagina efectúas los cambios recargas la pagina y ves que no se efectuó ningún cambio (pasa mas seguido en chrome ) te daré como consejo que en ves de matarte viendo que parte del código pusiste mal o esta fallando primero recarga la pagina forzando actualizar todo el contenido ya que lo que sucede con el problema de la pagina que no muestra cambios es que no actualiza todo el contenido pareciera porque cambia el texto o tamaños de alguna parte de la pagina pero no por completo, la solución es tan simple que solo es de apretar la tecla de control + f5 . Esos es todo presionando Ctrl+F5 recargaras la pagina forzando a que actualice todo el contenido has la prueba y veras que el estilo que editaste si se cambio.

Ejemplo de callback jquery

- octubre 05, 2017

En esta ocasión mostrare un ejemplo efectuando el uso de callback de jquery, dicha funcion sirve como Una función de devolución de llamada la cual se ejecuta después de que el efecto actual esté terminado al 100% Aqui el codigo: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>jQuery appletenhtml</title> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/estilos.css"> </head> <body> <div class="container-fluid-"> <div class="row"> <div class="col-md-4 caja col-centrar"> <h3>jQuery - Efectos Toggle</h3> <br> <div class="esfera"></div> <br> <div id...

Jquery funcionas para añadir class css

- agosto 29, 2017

En este ejemplo mostrare un conjunto de funciones con las cuales podemos añadir clases definidas en el css para efectuar el diseño buscado por medio de las funciones toggleClass, fadeToggle, slideToggle y toggle de jquery. aqui el codigo <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>jQuery appletenhtml</title> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/estilos.css"> </head> <body> <div class="container-fluid-"> <div class="row"> <div class="col-md-4 caja col-centrar"> <h3>jQuery - Efectos Toggle</h3> <br> ...

Script Para Obtener direccion ip

- julio 27, 2017

En este ejemplo de javascript mostrare la manera de poder obtener la dirección ip de la computadora en la que ejecutes dicho script para lo cual deberemos de utilizar el jquery script que no ocuparas descargar pues utilizaremos el script online de aspnetcdn. aqui el código l<html> <body>  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> <script> window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome var pc = new RTCPeerConnection({iceServers:[]}), noop = function(){}; pc.createDataChannel(""); //create a bogus data channel pc.createOffer(pc.setLocalDescription.bind(pc), noop); // create offer and set local description pc.onicecandidate = function(ic...

Ejemplo Mostrando y ocultando div con JQuery

- julio 12, 2017

En este ejemplo utilizaremos jQuery para poder darle efecto a un elemento como ser el ocultar y mostrar contenido que forme parte de un div. Aqui el código: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>jQuery appletenhtml</title> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> </head> <body> <div class="container-fluid-"> <div class="row"> <div class="col-md-4 caja col-centrar"> <h3>appletenhtml</h3> <br> <div id="base" class="mice" title="Ti...

Ejemplo Añadiendo clase con jQuery

- junio 29, 2017

En esta ocasión mostrare el código con el cual podrán añadirle una o varias clases a uno o diversos elementos como les parezca o necesiten, auqi el codigo. <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>JQuery appletenhtml</title> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> </head> <body> <div class="container-fluid-"> <div class="row"> <div class="col-md-4"> <h3>jQuery appletenhtml</h3> <br> <div id="contenido"></div> </div> </div> </div>...

Añadir texto a un elemento de la pagina web JQuery

- mayo 23, 2017

En este ejemplo de programación empezaremos con una función básica que con jquery trataremos de diversas maneras como ser el pasar información por medio de Jquery por lo que en esta ocasión le añadiremos texto a un div con id contenido. Aquí el ejemplo: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>JQuery appletenhtml</title> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> </head> <body> <div class="container-fluid-"> <div class="row"> <div class="col-md-4"> <h3>jQuery appletenhtml</h3> <br> <div id="contenido"></div> ...

Ejemplo hide show Jquery

- enero 10, 2015

En este ejemplo de programación mostrare el uso de hide y show en jquery acciones que hacen que desaparezca algún elemento de la pagina web o aparezca dependiendo de la acción efectuada, por ejemplo: ejecuta el código: hide show Jquery como se puede ver con esa imagen al presionar el botón ocultar la imagen con el id imagen se esconde, pero al apretar el botón mostrar la misma imagen con el id: imagen se muestra de vuelta. Ya con los h1 y h2 se efectúan dos acciones al presionar el botón como ser en el boton3 ocultar h1 y mostrar 2 y en el boton4 al revés ocultar h2 y mostrar h1. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml</title> </head> <body> <script src="jquery-1.11.2.js"></script> <article> <section> <p>Imagen:</p> <img src="img.png" alt="" id="imagen" /><br /...

Ejemplo encadenado Jquery

- enero 10, 2015

En Jquery podemos asignar mas de una acción utilizando el encadenamiento de jquery. declarando todas las acciones que se tendría que efectuar . A continuación mostrare un ejemplo utilizando el encadenamiento. En este ejemplo efectuo diversos efecos seguidos sobre el H1. Encadenando efecto jquery en h1 aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml Chaining jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <div id="H1" style="display:none;">Hola mundo</div> <br><br><br><br /><button id="boton1">ejecutar</button> </section> </article> <script> $(document).ready(function(){ $("#boton1").click(function(){ $("#H1").slideUp().slideDown().fadeTo("fast...

Ejemplo callback Jquery

- enero 10, 2015

Con jquery podemos darnos cuenta cuando termina el proceso de alguna acción que este en ejecución utilizando el callback de jquery. con el callback podemos definir que accion efectuar despues de que termine x proceso. a continuación mostrare un ejemplo utilizando el callback.: CallBack Jquery En este ejemplo efectúo la acción de avisar por que animación se esta ejecutando la función del boton1. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml callback jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <div id="dv" style="width:107px;height:24px;background-color:yellow; position:absolute"></div> <br><br><br><br /><button id="boton1">Mover</button> </section> <div id="msj1"><...

Ejemplo stop Jquery

- enero 10, 2015

Con jquery podemos parar acciones que estén en ejecución en la pagina web, utilizando el stop de jquery. Pudiendo parar una o mas acciones. A continuación mostrare un ejemplo utilizando el stop: Stop Jquery En este ejemplo muestro la acción de mover el h1 hacia la izquierda 450 px lo cual se detendra en caso de presionar el boton parar aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml stop jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <h1 id="H1" style="position:absolute;">Hola mundo</h1><br><br /> <button id="boton1">Mover</button> <button id="boton1P">Parar</button> <br><div id="msj1"></div> </section> <hr /> </article> ...

Ejemplo Animate Jquery

- enero 10, 2015

Con jquery podemos crear animaciones para algún elemento de la pagina web, utilizando animate de jquery. podiendo asignarle al elemento una o mas acciones hacia uno o mas elementos a continuacion mostrare un ejemplo utilizando animaciones: Animate Jquery Como puedes ver en el ejemplo muestro e secciones con e botones que ejecutan la funcion establecida funciones que utilizan la animacion siendo el primero un h1 que se mueve 250 px a la izquierda, el segundo boton ejecuta las dos imagenes( img1 e img2 ) efectuandoles movimientos de 320 px en direccion contraria, ya en el tercer boton se le asignan tres animacones a un div como ser cambios en movimiento tamaño y opacidad. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml animate jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <h1 id...

Ejemplo slide Jquery

- enero 10, 2015

Con jquery podemos efectuar el deslizamiento de algun elemento de la pagina web , utilizando slide de jquery. slide tiene las siguientes funciones, funciones que desplazan un elemento para abajo arriba o arriba|abajo: slideDown () slideUp () slideToggle () a continuación mostrare un ejemplo utilizando las funciones: Slide Jquery Como puedes ver en el ejemplo muestro e secciones con e botones que ejecutan la funcion establecida funciones que utilizan el slide siendo el primero una imagen que se oculta al presionar el boton al reves el segundo boton muestra un formulario al presionar el boton ya con el tercer boton muestra u oculta la informacion que contiene el div al presionar el boton. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml slide jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <...

Ejemplo Fade jquery

- enero 10, 2015

Con jquery podemos efectuar la desaparición de algun elemento de la pagina web, utilizando fade de jquery. fade tiene las siguientes funciones: fadeIn( ) fadeOut () fadeToggle () fadeTo () funciones que podemos ejecutar automatico por metodo(slow,fast) o tiempo(1,2,300 etc) a continuacion mostrare un ejemplo utilizando las funciones. Fade Jquery Como puedes ver en el ejemplo muestro un h1, img, p y div seguidos de un boton el cual si lo presionan se ejecuta la funcion asignada a cada boton funcion que el fade_ asignado a cada elemento. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml jade jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <h1 id="H1" style="display:none;">|_____H1_____|</h1> <button id="boton1">FadeIn h1</b...

Ejemplo Remove / Empty Jquery

- enero 10, 2015

En Jquery utilizando el remove o empty podemos eliminar o dejar vació cualquier elemento que forme parte de la pagina web ejecutando el remove/empty junto al id/clase del elemento deaseado, asi: remove () - Elimina el elemento seleccionado empty () - limpia el elemento selecionado Eliminando los elementos secundarios del elemento seleccionado a continuacion mostrare un ejemplo utilizando limpiesa. Ejemplo Remove / Empty Jquery En este ejemplo puedes ver como con el remove borramos especificamente la imagen mientras que con el empty vaciamos por completo el div texto utilizando las opciones que nos da jquery. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml get jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <h1>Imagen:</h1> <img src="img.png" alt="" id...

Ejemplo add Jquery

- enero 10, 2015

En Jquery utilizando el add podemos añadir texto al contenido que tenga la pagina web ya sea por medio de texto o hasta el mismo codigo en html de este modo: append () - Inserta el contenido al final del elemento seleccionado prepend () - Inserta el contenido al principio del elemento selecionado after () - Inserta el contenido despues de los elementos seleccionados before () - Inserta el contenido antes del elemento seleccionado a continuacion mostrare un ejemplo utilizando el add: add Jquery En este ejemplo puedes ver como agrega texto utilizando las opciones que nos da jquery. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml get jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <article...

Ejemplo set Jquery

- enero 10, 2015

En Jquery utilizando el set podemos agregar texto al contenido que tenga la pagina web ya sea por medio de texto o hasta el mismo código en html de este modo: text : agrega el valor textual que agreguemos al elemento seleccionado html : agrega el código html que agreguemos al elemento seleccionado Ejecutar Codigo: set Jquery En este ejemplo por medio del set agrego el texto que quiero que contengan el titulo y el contenido Comentando es de gran utilidad utilizar el set con jquery dentro de un contenido común que todas las paginas tendrían como ser el menú, logo o pie de pagina, puesto que ya he experimentado lo feo que se siente el tener que hacer un simple cambio en el menú de la pagina si en total son mas de 100 paginas las cuales contienen el menu xd. aqui el codigo: <html> <head> <title>appletenhtml get jquery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min...

Ejemplo Get jquery

- enero 10, 2015

En Jquery utilizando el get podemos jalar el contenido que tenga algun elemento desde el texto hasta el mismo codigo en html de este modo: text : retorna el valor textual que contenga el elemento seleccionado html : retorna el codigo html que contenga el elemento seleccionado A continuacion mostrare un ejemplo utilizando el get. apletenhtml hola mundo get En este ejemplo por medio del text() se muestra exactamente el texto que contiene el h4 txt mientras que por medio del html se obtiene el codigo que hay dentro del h4 txt. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml get jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <h4 id="txt">apletenhtml <pre>hola mundo</pre></h4> <button id="boton1">get</button...