Categoría: Frameworks – APIs

¿Cómo seleccionar el valor del radio button seleccionado con jquery?

Para seleccionar el valor del radio button seleccionado se hace de la siguiente manera:

HTML

<input type="radio" name="radiosfelices" value="1" >
<input type="radio" name="radiosfelices" value="2" checked="checked">
<input type="radio" name="radiosfelices" value="3">

Javascript

$(function(){

   var valor= $("input[name=radiosfelices]:checked").prop("value");

   alert(valor)
   // &gt;&gt; 2

})

Seleccionamos por el atributo name de nuestro grupo de radios y asignamos el parámetro checked, de esta forma nos regresara el valor del elemento que esta seleccionado.

¿Cómo crear una notificación con jquery, sin utilizar plugins?

En esta entrada vamos a ver cómo crear notificaciones con jquery en nuestro sitio web, de tal manera aparezca en un lugar donde el usuario la vea, puedes ver un ejemplo dando click aqui.

Existen muchos plugins pero en este artículo yo les enseñare como hacer sus propias notificaciones para que sean libres de modificarlas a su antojo.

Si nunca has utilizado jquery te recomiendo te des una vuelta por mi curso gratuito, que no te tomara más de 1 hora y te aseguro que al final sabrás utilizar bien esta librería.

Ahora vamos a lo divertido, primero anexo un código css el cual contiene nuestra clase de nombre Error, en este caso haremos una notificación de error, por lo cual pondré colores rojos:


.Error{
     position:absolute;
    z-index:32000;
    top:10px;
    left:50%;
    padding:5px;
    width:500px;
    margin-left:-255px;
    text-align:center;
     border: #d8d8d8 1px solid;
    background:#F8F8F8;
    color:#f00;
    font-weight:bold;
    opacity:0;
     font-size:1.2em;
}

El código anterior nos sirve para posicionar nuestra notificación, la cual aún no existe, la clase esta con opacity igual a 0 para que nuestro control tenga una animación de aparición inicial y le dé más estética, también le he asignado la posición top para que aparezca arriba y centrado, ustedes pueden diseñar su notificación a su antojo después de ver esta entrada.
En el siguiente código de javascript explico línea por línea que es lo que va haciendo:

function MensajeError(mensaje, time) {

	//si no se envia la variable time, esta se define por defecto en 6 segundos
    if (time === undefined) time = 6000;

	//agregamos el div a nuestra pagina con la clase css Error anteriormente hecha
    $("body").append("&lt;div class='Error'&gt;&lt;/div&gt;");

     //asignamos el texto del error al div que creamos
    $(".Error").html(mensaje);

    //aqui procedemos a crear la animación para que el div se muestre y se oculte despues de cierto tiempo
    $(".Error")
  .animate({ //seleccionamos el div
      opacity: 1 //aparece
  }, 500  //la animación se realiza medio segundo
          , function () { //ejecutamos un callback con función anonima para desaparecer la notificación despues de 6 segundos
              $(".Error").animate({ //seleccionamos nuevamente el div
                  opacity: 0 //ocultamos

              }, time   //tiempo de 6 segundos por defecto
              , function () {
				  				//al final en el callback del ultimo evento eliminamos el div de la pagina.
				  				 $(this).remove();
			  				}
              )
          })
}

Si nunca han utilizado la función anímate() de jquery te recomiendo te des una vuelta por mi artículo donde explico con detalle su funcionalidad.
Y bueno así de sencillo se hace una notificación con jquery sin utilizar plugins extras ni nada, ya solo queda invocarla asi: MensajeError(‘¡un error fatal!’).

Como abrir una ventana con información a dar clic en nuestro marker #googlemaps #infoWindow

Para abrir una ventana al dar clic en un marker en los mapas de google maps debemos utilizar el objeto de nombre infoWindow. Para ello veamos el siguiente ejemplo:

Dar clic en el marker:

Código HTML

<div id="mapa" style="height:300px;">
</div>

Código Javascript

function initialize() {

//valores de mapa
  var myLatlng = new google.maps.LatLng(18.363882,-103.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  //creamos el mapa
  var map = new google.maps.Map(document.getElementById('mapa'), mapOptions);

  //contenido de nuestra ventana
  var contentString = '&lt;div id="content"&gt;'+
      'contenido feliz de una ventanita en el marker&lt;br&gt;'+
	    'contenido feliz de una ventanita en el marker&lt;br&gt;'+
		 'contenido feliz de una ventanita en el marker&lt;br&gt;'+
		  'contenido feliz de una ventanita en el marker&lt;br&gt;'+

      '&lt;/div&gt;';

  //info window
  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  //variables de nuestro marker, contiene la ubicación del centro del mapa
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Titulo del marker'
  });

  //agregamos el evento para abrir el infowindow de nuestro marker
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

//ejecutamos la funcion que tiene todo nuestro codigo
initialize();

Como ubicar mapa de google maps en un domicilio en específico #googleMaps

Para ubicar nuestro mapa de google maps en un domicilio en específico, vamos primero a crear nuestro mapa:

<div id="mapita"></div>

//creamos el mapa por medio del div con id mapita
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(88.1121, 103.12121)
};
map = new google.maps.Map(document.getElementById('mapita'),
mapOptions);

En seguida le daremos un domicilio por medio de texto y de la siguiente manera el mapa se centrara en el domicilio dado:

//lo ubicamos a una dirección en específico
geocoder = new google.maps.Geocoder();
var address = "Guadalajara Jalisco Mexico";

//buscamos el domicilio por medio de geocoder
geocoder.geocode({ 'address': address }, function (results, status) {
//si el domicilio se encuentra lo ubicamos
//no valla ser que ponen crater 1512 de Marte Sistema Solar

if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}
});

Como detectar cuando se redimensiona la ventana de nuestro navegador con #jquery

Para detectar cuando se redimensiona la ventana de nuestro navegador existe el evento resize. Basta con utilizar el selector en el objeto global window y aplicar la función que deseamos realizar cada que se redimensiona:

$(window).resize(function(){
//aqui el codigo que se ejecutara cuando se redimencione la ventana
var alto=$(window).height();
var ancho=$(window).width();
alert("alto: "+alto+" ancho:"+ancho);
})

Como hacer que una caja de texto solo permita números con #jquery

Algunas veces necesitamos que una caja de texto solo acepte números (puedes ver mi otra entrada: cómo hacer que una caja de texto solo permita letras y espacios con jquery), para hacerlo podemos hacer uso de la siguiente función:

 $(".number").keydown(function (e) {
            // Permite: backspace, delete, tab, escape, enter and .
            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                // Permite: Ctrl+A
                (e.keyCode == 65 &amp;&amp; e.ctrlKey === true) ||
                // Permite: home, end, left, right
                (e.keyCode &gt;= 35 &amp;&amp; e.keyCode &lt;= 39)) {
                // solo permitir lo que no este dentro de estas condiciones es un return false
                return;
            }
            // Aseguramos que son numeros
            if ((e.shiftKey || (e.keyCode &lt; 48 || e.keyCode &gt; 57)) &amp;&amp; (e.keyCode &lt; 96 || e.keyCode &gt; 105)) {
                e.preventDefault();
            }
        });

Ayudándome de los selectores de jquery solo basta con poner la clase “number” a mis cajas de texto y con eso ya el usuario no podrá introducir caracteres que no sean números.


<input type="text" class="number">

Como hacer que una caja de texto solo permita letras y espacio con #jquery

Para obligar que una caja de texto solo acepte letras y espacios, sin caracteres especiales (¿¡¨*)¨o números, podemos hacerlo así de sencillo:

Código HTML

<input class="letras" type="text" >
<input class="letras" type="text" >
<input class="letras" type="text" >

Código Javascript/Jquery

$(".letras").keypress(function (key) {
            window.console.log(key.charCode)
            if ((key.charCode < 97 || key.charCode > 122)//letras mayusculas
                && (key.charCode < 65 || key.charCode > 90) //letras minusculas
                && (key.charCode != 45) //retroceso
                && (key.charCode != 241) //ñ
                 && (key.charCode != 209) //Ñ
                 && (key.charCode != 32) //espacio
                 && (key.charCode != 225) //á
                 && (key.charCode != 233) //é
                 && (key.charCode != 237) //í
                 && (key.charCode != 243) //ó
                 && (key.charCode != 250) //ú
                 && (key.charCode != 193) //Á
                 && (key.charCode != 201) //É
                 && (key.charCode != 205) //Í
                 && (key.charCode != 211) //Ó
                 && (key.charCode != 218) //Ú

                )
                return false;
        });

Utilizamos una clase con la cual relacionamos los elementos y en el evento keypress el cual aplicamos por medio del selector de jquery, agregamos el código restringiendo las teclas que no necesitamos.
Este código también tiene anexados los códigos para las letras con acentos y la ñ.

Ejecutar código #javascript ya cargadas todas las imágenes con #jquery

En algunas ocasiones tenemos la necesidad de ejecutar algún código javascript hasta que este cargado todo el DOM pero también cargadas todas las imágenes, comúnmente utilizamos:

$(document).ready(function(){    
//script que se ejecuta cuando se cargo el DOM
});

Pero nos damos cuenta que se ejecuta aunque no se hayan cargado las imágenes y es por el hecho de que el DOM ya está cargado ósea el código que plasma esa imagen (<img>).

Para poder lograr que se ejecute un script terminando de cargar DOM e imágenes basta con utilizar:

$(window).load(function(){
    //script que se ejecuta cuando se cargo el DOM y las IMAGENES
})