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

jueves, 7 de enero de 2016

Seleccionar/elegir fecha en calendario con Javascript

Os agrego un ejemplo en jQuery de Javascript de como seleccionar en un campo de texto a partir de un calendario la fecha que queramos.

El ejemplo siguiente quedaría así:


<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script>
        $(function() {
            $.datepicker.regional['es'] = {
                closeText: 'Cerrar',
                prevText: '<Ant',
                nextText: 'Sig>',
                currentText: 'Hoy',
                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'S&aacute;bado'],
                dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mi&eacute;', 'Juv', 'Vie', 'S&aacute;b'],
                dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'S&aacute;'],
                weekHeader: 'Sm',
                dateFormat: 'dd/mm/yy',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: ''
            };
            $.datepicker.setDefaults($.datepicker.regional['es']);
        });

        $(function() {
            $("#fecha").datepicker({
                changeMonth: true,
                changeYear: true,
                numberOfMonths: 1
            });
        });
    </script>
</head>
<body>
    <span style="color:red">Fecha: </span>
    <input type="text" id="fecha" name="fecha" style="width:80px;left:60px;position:absolute"/>
</body>
</html>


martes, 5 de enero de 2016

Saber que radio button esta seleccionado Javascript

Para saber qué radio button esta seleccionado y conocer su valor vamos a utilizar una función.
Donde recorremos todos hasta encontrar el que este marcado y así también conocer el valor del radio button marcado, una vez encontrado el chequeado y como no va a haber más chequeados la función no continua.

<script language="JavaScript">
    function CheckSeleccionado() {
        for (x = 0; x < document.forms[0].tipo.length; x++)
            if (document.forms[0].tipo[x].checked)
            {
                alert("Tipo " + document.forms[0].tipo[x].value + " seleccionado.");
                break;
            }
    }
</script>

<form onchange="javascript:CheckSeleccionado();">
    Tipo 1: <input type="radio" name="tipo" value="1">
    Tipo 2: <input type="radio" name="tipo" value="2">
</form> 


domingo, 3 de enero de 2016

Generar números aleatorios con Javascript

Para generar número aleatorios utilizaremos la función Random() de la clase Math de Javascript.

 Os indicamos varios ejemplos de como utilizar esta función, tanto de números enteros como de un rango de números:

  • Número aleatorio entre el 0 y l:
          <script type="text/javascript">
               var numeroAleatorio = Math.random();
               alert("Número aleatorio:  " + numeroAleatorio);
          </script>

  • Número aleatorio entre el 0 y l0:          
          <script type="text/javascript">
               var numeroAleatorio = Math.random()*10;
               alert("Número aleatorio:  " + numeroAleatorio);
          </script>

  • Número aleatorio entero entre el 0 y l0:          
          <script type="text/javascript">
               var numeroAleatorio = Math.Round(Math.random()*10);
               alert("Número aleatorio:  " + numeroAleatorio);
          </script>


  • Número aleatorio entero entre el 20 y 30:          
          <script type="text/javascript">
              var minimo = 20;
              var maximo = 30;
              var posibilidades = maximo - minimo;
              var numeroAleatorio = parseInt(inferior) + (Math.random()*posibilidades)
              alert("Número aleatorio:  " + numeroAleatorio);
          </script>



jueves, 24 de diciembre de 2015

Ocultar Div con Javascript

Si por ejemplo tenemos la capa siguiente:

<div id="prueba"></div>

Para ocultarlo mediante javascript sería de la siguiente forma:

document.getElementById("prueba").style.display = "none";

Para volverlo a visualizar sería:

document.getElementById("prueba").style.display = "block";


jueves, 16 de junio de 2011

Galeria de imagenes JS, jQuery

Galería de imágenes usada compatible con WordPress.
Por ejemplo, cuando se muestran las entradas completas, mostrar todas las imágenes de golpe, puede hacer muy largo el post, o mandar la información demasiado debajo.
Añadiendo la llamada en wp-content/themes/miPlantilla/single.php
Yo para solucionar eso, he usado el frameWork GALLERIA.
A descargar desde aquí.
Sigue las instrucciones para instalar en tu web (básicamente es descomprimir la carpeta en tu raíz de ficheros de tu página, si no te aclaras con el inglés o con el manejo de ficheros/rutas).
En mis archivo misScript.js he añadido esto:

jQuery('#gallery').galleria({
width: 450,height: 350,
imageCrop: true,
transition: 'fade',
extend: function(options)
{
Galleria.log(this);
Galleria.log(options);
this.bind('image',function(e)
{
Galleria(e);
Galleria.log(e.imageTarget);
jQuery(e.imageTarget).click(this.proxy(function()
{
this.openLightbox();
}));
});
}
});

Lo puedes copiar y pegar.
Crea un div con el id='gallery', y las imágenes de dentro ya las redimensiona y hace casi todo el plugin por si solo.
Para adecuar mejor la galería a tu web, donde pone width y height, son los pixeles en ancho y alto que va a oocupar la galería, los puedes modificar tanquilamente.

Es muy recomendable que las imágenes no difieran mucho en tamaño original al que luego vayan a tener en la galería (ganar velocidad) y NO deben ser más pequeñas, si no se quiere perder calidad (se nota mucho).

Hay un template (plantilla) por defecto para descargar gratuita, y otras 3 de pago más completas.
En la web, si te apetece, también explican cómo crear tus propias plantillas y un par de opciones de configuración básicas de la descargada.

miércoles, 11 de mayo de 2011

Modificar origen de determinadas imágenes con Javascript

He estado haciendo un blog para unos fotógrafos en wordpress, con la plantilla f8-static (esta muy bien, por cierto, y es gratuita).
Bueno mi problema, fue que subían imágenes, a un tamaño, y la plantilla me las modificaba desde un fichero al que no tenía acceso en ese momento que tenía que solucionarlo, así que como tenía las imágenes en el servidor subidas correctamentes, y la plantilla creaba otras miniaturas, mi solución (un tanto salvaje) a sido:
-Recoger el vector con las imágenes del objeto DOM.
-Buscar las imágenes que contienen la cadena 'XXX' en su origen.
-Modificar la cadena, poniendo bien de donde se lee la imagen.


<script type="text/javascript">
var posicion = 0;
var origen = "";
var i=0;
document.write("tienes: " + document.images.length + "<br />");

for (i = 1; i <= document.images.length; i++)
{
posicion = document.images[i].src.indexOf('XXX');
if(posicion > 0)
{
origen = document.images[i].src.substr(0,posicion -1) + ".jpg";
document.images[i].src = origen;
}
}
</script>


Con este código también aprobechamos para repasar conceptos básicos de JS como las variables, el bucle "for" y el acceso a las imágenes del comunento HTML.

sábado, 17 de octubre de 2009

Validar documento de extranjeria NIE con Javascript

Para validar el documento de extranjeria (NIE) el cual tiene el formato:
- Primeramente una letra que puede ser 'T' , 'X' , 'Y' y proximamente 'Z'
- Seguido de 9 números
- Y finalmente 1 letra de 'A' a las 'Z'

La expresion regular es:

^[XxTtYyZz]{1}[0-9]{7}[a-zA-Z]{1}$
Un ejemplo con javascript sería:
if (!(/^[XxTt]{1}[0-9]{7}[a-zA-Z]{1}$/.test(nie)) && nie!="")
alert('NIE incorrecto');

Donde si el valor de 'nie' es distinto a vacio pero no es correcto saldrá el alert.

domingo, 13 de septiembre de 2009

Confirmación antes de entrar en una pagina web con Javascript

En ocasiones deseas que una persona no vea el contenido de tu página web o quieras advertir de el contenido de tu pagina web.

Esto se realiza con una alerta que le sandrá al usuario para que cuando acepte entre en la web o si por el contrario no desean entrar vayan a la web anterior a la que estaba.

Con este código esto se podrá realizar:

<script language="javascript" type="text/javascript">
function acceso()
{
if (!confirm("AVISO: ¿Deseas entrar a la web?"))
history.go(-1)
return " "
}
document.write(acceso())
</script&gt
;


Ponlo entre <head> y </head>

domingo, 9 de agosto de 2009

Saber las coordenadas o posición del raton (mouse) con Javascript

Mediante esta función sacaremos las coordenadasde la posición del ratón.

function position(event){
var x = event.clientX;
var y = event.clientY;
}


Poniendo por ejemplo esta función en el body mediante el evento que se provoca cuando se mueve el ratón podremos obtener en cada momento que se mueva sus coordenadas para luego poderlas utilizar a nuestro antojo.

<body onmousemove="position(event);">

jueves, 30 de julio de 2009

Invertir una cadena de caracteres (String) con Javascript

Si deseas poner una cadena de carácteres al revés simplemente deberás utilizar la función reverse() como se ve en este código javascript:

<script type="text/javascript">
var prueba = new Array(3);
prueba[0] = "1";
prueba[1] = "2";
prueba[2] = "3";

document.write(prueba + "<br />");
document.write(prueba.reverse());
</script>


O como ha propuesto zerokilled "abcdef".split("").reverse().join("");

martes, 28 de julio de 2009

Mensaje de confirmación para realizar una cosa u otra con Javascript

Mediante el método window.confirm() podrá realizar una cosa u otra según la decisión del usuario de tu web.
Simplemente mostrará un mensaje en cual el usuario aceptará o no y cuya consecuencia puede elegirla tu, por ejemplo si desea que al darle a 'Aceptar' vaya a una web y si 'Cancelar' que no haga nada.

Un ejemplo de utilización es este:

<script languaje="javascript">
function prueba(form)
{
if(window.confirm('Se borrarán todos los datos del formulario')==true)
form.reset();
}
</script>

<form>
Escribe algo: <input type="text" name="apellido"><br/>
<input type="button" value="Borrar" onClick="prueba(this.form)">
</form>


Boton para volver a la pagina anterior a la nuestra

Mediante history.back() se puede volver a la página anterior a la nuestra.

Por ejemplo si estamos en http://dudasweb.blogspot.com/ y vamos a una web con el boton que veremos a continuación al pulsarlo volverá a la web de Dudasweb.

<form>
<input type="button" value="Volver" name="volver" onclick="history.back()" />
</form>


lunes, 27 de julio de 2009

DOM. Extraer contenido tabla.Moverser dentro de nuestra página web.

Vamos a ver un ejemplo, en el que tenemos una tabla sin ID, dentro de una etiqueta "div" con ID, y queremos obtener y mostrar el valor de la 2ª y 4ª fila de la tabla.

<div id="contenido">
<!-- codigo html -->
<table>
<tr><td>Fila 1</td></tr>
<tr><td>Fila 2</td></tr>
<tr><td>Fila 3</td></tr>
<tr><td>Fila 4</td></tr>
</table>
<!-- aqui puede haber más código html, o no -->
</div>

<-- Ahora mostramos el contenido en otra parte de la página -->
<div id="dinamico"><script type="text/javascript">
//Obtenemos el texto de las celdas
x = document.getElementById("contenido");
celda2 = x.getElementsByTagName("td").item(1).innerHTML;
celda4 = x.getElementsByTagName("td").item(3).innerHTML;
</script></div>

jueves, 23 de julio de 2009

Refrescar o actualizar la pagina web cada cierto tiempo

Si lo que deseas en realidad es que haga algo determinado una sola vez en un cierto tiempo ver:

http://dudasweb.blogspot.com/2009/07/refrescar-y-actualizar-la-pagina-web.html

En este caso es para realizar, refrescar o actualizar la pagina web cada cierto tiempo muchas veces.

Para ello utilizamos este ejemplo para explicarlo, donde cada 2 segundos se realizará la función javascript 'prueba':

<body onload="setInterval('prueba()', 2000)" >
<script>
function prueba(){alert('Visite http://dudasweb.blogspot.com');}
</script>

miércoles, 22 de julio de 2009

Refrescar o actualizar la pagina web en un cierto tiempo

Primeramente saber que este Post es para que se actualice o haga lo que desee una sola vez cada X segundos, si lo que desees es que cada cierto tiempo realice una función ver:

http://dudasweb.blogspot.com/2009/07/refrescar-o-actualizar-la-pagina-web.html

Para HTML deberemos poner dentro del <head> esto:

<meta http-equiv="refresh" content="30">

En este caso se actulizará cada 30 segundos.

Si fuera en PHP habría que poner al principio de la pagina web esto:

<?php header("Refresh: 30; URL='pagina.php'"); ?>

También se puede realizar los cambios que desees mediante javascript, con la función setTimeOut:

<script>
function prueba(direccion,segundos){
setTimeout("location.href='"+direccion+"'",segundos*1000);
}
</script>
<body onload="cambio('http://dudasweb.blogspot.com',3)";>

lunes, 20 de julio de 2009

Poner enlace con tu pagina para que la pongan de inicio

Con este enlace el usuario podrá agregar su web como página de inicio, aunque para Firefox no te servirá ya que no lo permite.

Pagina de inicio

<a href="javascript:"
onclick="this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.dudasweb.blogspot.com');">
Pagina de inicio</a>

Deshabilitar el boton derecho del raton

Con este código javascript podrás deshabilitar el boton derecho del raton, aunque no lo recomiendo ya que siempre alguien un poco entendido podrá realizar lo que deseen sin ese boton.

<script language="javascript">
var mensaje = "El boton derecho esta deshabilitado en http://dudasweb.blogspot.com";
function RClick(boton){
if (document.layers && boton.which == 3)
{
alert(mensaje);
return false;
}
if (document.all && event.button == 2 event.button == 3)
{
alert(mensaje);
return false;
}
}
document.onmousedown = RClick;
</script>


También mirando por la web he encontrado esta forma para deshabilitarlo:

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">


Contar el numero de palabras de una cadena de caracteres (string)

Una forma de saber el número de palabras que tiene un string es contar el número de espacios en blanco que tiene dixho string.

Esto puede fallar si hay:
  • 2 o más espacios juntos
  • 1 espacio al principio o al final
La forma de solucionar esto es cambiar en el caso primero por un solo espacio y en el segundo caso quitar los espacios.

Por lo tanto en javascript sería:

var primero = "/^ /";
var ultimo = "/ $/";
var varios = "/[ ]+/g";


Si es alguno de esos casos se cambia:

var texto="hola sto es una prueba de http://dudasweb.blogspot.com";
texto = texto.replace (varios," ");
texto = texto.replace (primer,"");
texto = texto.replace (ultimo,"");


Por último se divide el texto según los espacios que tiene y viendo la longitud tendremos el número de palabras:

var textoTroceado = texto.split (texto, " ");
var numeroPalabras = textoTroceado.length;

miércoles, 15 de julio de 2009

Insertar o poner texto en la barra de herramientas

Mediante el evento Window.status pondrás poner el texto que desees en la barra de herramientas.

Un ejemplo de ello es este:

<a onclick="window.status='Dudas web';">Pincha aquí para ver el ejemplo</a>

Pasar / Convertir un array en una cadena de carácteres (String) con Join en Javascript

Mediante una array crearemos una cadena de carácteres mediante Join.

Con Javascript y teniedo el array, por ejemplo:

var nombres = ['juan','antonio'];

Crearemos un string separando los datos por lo que deseemos, en este caso por un espacio en blanco:

cadena = nombres.join(' ');