FAQs JavaScript

T4X · #**181** (**permalink**) 10/05/2004, 13:51

P: Cómo cerrar una ventana del explorador confirmando si desea cerrarla?

R:

Bueno, aunque solo funciona en IE ya que el evento onBeforeUnload (quiere decir un suceso antes de cambiar o cerrar la ventana).

El script consta así:

Código:

<script language="JavaScript">
function cierrame() { 
event.returnValue = "Escribe el texto a mostrar ";
}
</script>

Y en la etiqueta body donde va a salir el cierrame colocas esto:

Código:

<body onBeforeUnload="cierrame()">

Les repito que el comportamiento onBeforeUnload solo funciona con IE, aunque existen posibilidades de hacerlo funcionar con otro navegador de la misma especie....!!

Si lo desean, visiten el siguiente ejemplo:

[Ver ejemplo]

Maru77 · #**182** (**permalink**) 10/05/2004, 19:16

Siguiendo con el tema de T4X y a pedido de Tunait, les dejo el siguiente script:

Código PHP:

  <html>

<head>

<script language="javascript">

 
function CloseClicked()

{

event.returnValue = false;

};

</script>

</head>

<body onbeforeunload="CloseClicked();">

<form id="frmTest" name="frmTest" method="post" runat="server">

</form>

</body>

</html>

Nota: PatomaS agregó que solo sirve para iexplorer y para mozilla 1.7

Espero les sea útil!

KarlanKas · #**183** (**permalink**) 24/05/2004, 02:49

P.- ¿Cómo recoger los valores de un formulario en la página de destino?

R.- Con este código:
Arreglado pequeño bug

Código PHP:

  <html>

<head>

<script>

 
//Script original de KarlanKas para forosdelweb.com

 
enviado=location.href.split("?"); 

igualdades=enviado[1].split("&"); 

 
for(a=0;a<igualdades.length;a++){ 

igualdades[a]=igualdades[a].split("+").join(" ");

valores=igualdades[a].split("="); 

eval("var "+valores[0]+"='"+valores[1]+"'"); 

} 

 </script>

Es importante que el método empleado en el formulario sea GET.

caricatos · #**184** (**permalink**) 01/06/2004, 17:43

P: ¿Como abrir un enlace en un popup?

R: Tal vez sea la manera menos usada, pero creo que la más fácil

, simplemente abriendo un popup vacío desde el evento onclick del enlace, y que la ventana (segundo parámetro de open) coincida con el target del mismo enlace.

Código PHP:

  <a href="destino.html" target="popup" onclick='window.open("", "popup", "")' > popup </a>

Hay otra forma que se discutió en este mensaje que sería más o menos así:

Código PHP:

  <a href="destino.html" target="popup" onclick='window.open(this.href, this.target, ""); return false;' > popup </a>

Para pasar la validación estricta (w3.org) debe obviarse el atributo target, pero también se puede asignar en el mismo script

Código PHP:

  <a href="destino.html" onclick='this.target = "popup"; window.open("", "popup", "")' > popup </a>

caricatos · #**185** (**permalink**) 03/06/2004, 04:55

P: Puedo mejorar la visualización de los mensajes aclaratorios (title)

R: Mediante una combinación de las FAQ39 (http://www.forosdelweb.com/showthrea...744#post264744) Averiguar coordenadas del ratón, y FAQ57 (http://www.forosdelweb.com/showthrea...126#post267126) Mostrar/Ocultar capas.

Ejemplo:

Código PHP:

  <html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <script type="text/javascript">

            var ns4 = (document.layers)? true:false

            var ie4 = (document.all)? true:false

            var ns6 = (document.getElementById && !document.all) ? true: false;

            var coorX, coorY;

 
            if (ns6) document.addEventListener("mousemove", mouseMove, true)

            if (ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;}

 
            function mouseMove(e)    {

                if (ns4||ns6)    {

                    coorX = e.pageX;

                    coorY = e.pageY;

                }

                if (ie4)    {

                    coorX = event.x;

                    coorY = event.y;

                }

                coorX += document.body.scrollLeft;

                coorY += document.body.scrollTop;

                return true;

            }

 
            function ini()    {

                if (ie4)    document.body.onmousemove = mouseMove;

            }

 
            function mostrar(dato)    {

                with(document.getElementById("ayuda"))    {

                    style.top = coorY + 10;

                    style.left = coorX + 10;

                    style.visibility = "visible";

                    innerHTML = dato;

                }

            }

 
            function ocultar()    {

                document.getElementById("ayuda").style.visibility = "hidden";

            }

 
            function mover()    {

                with(document.getElementById("ayuda"))    {

                    style.top = coorY + 10;

                    style.left = coorX + 10;

                }

            }

 
        </script>

    </head>

    <body onload="ini()" >

        <div align=center>

            <h3>

                ... Mueve el raton por el texto ...

            </h3>

            <span

                onmouseover="mostrar('primer mensaje')"

                onmousemove="mover()"

                onmouseout="ocultar()">

                    Mensaje 1

            </span>

            <span

                onmouseover="mostrar('mensaje segundo')"

                onmousemove="mover()"

                onmouseout="ocultar()">

                    Mensaje 2

            </span>

        </div>

        <div

            id="ayuda"

            style=" visibility:hidden;

            position:absolute;

            background:yellow;

            font:normal 10px/10px verdana;

            color:black;

            border:solid 1px black;

            text-align:justify;

            padding:10px 10px 10px 10px;">

        </div>

 
    </body>

</html>

Se pueden cambiar los estilos de la capa ayuda para personalizar la visualización.

ludovico2000 · #**186** (**permalink**) 11/06/2004, 04:04

P: ¿Cómo puedo utilizar varias funciones sobre muchos elementos de forma sencilla?

R: Para solucionarlo, utilizaremos "this" por el objeto sobre el que actuamos, es decir:

<script languaje='javascript'>
function manita(cual)
{
document.body.style.cursor='hand';
cual.style.backgroundColor="#00ffff";
};

function flecha(algo)
{
document.body.style.cursor='default';
algo.style.backgroundColor="#00ddff";
};
</script>

Y para actuar sobre el objeto (en el ejemplo, toda una fila):

<tr onmouseover="manita(this)" onmouseout="flecha(this)">

NOTA: Esto hace que causa y efecto se refieran siempre al mismo objeto (pongo el ratón sobre esta fila -> se ilumina toda la fila); para que causa y efecto se refieran a diferentes objetos (pongo el ratón en cierto botón -> se ilumina cierta celda en otro lugar) deberíamos entrar en el juego de name="tacata" o id="tacata" y usar manita(tacata)

-Gracias a JavierB

por la "inspiración"-

COMPARTIENDO, MEJORAMOS TODOS

caricatos · #**187** (**permalink**) 14/06/2004, 05:42

P: ¿Puedo Insertar nuevos elementos (tags) en una página dinámicamente?

R: DOM: creando el nuevo elemento con createElement y luego añadiéndolo con appendChild

Ejemplo:

var nuevoDiv = document.createElement("div");
nuevoDiv.align = "center";

document.body.appendChild(nuevoDiv);

Notas:

En el ejemplo se ha insertado una capa (div), pero puede hacerse con cualquier etiqueta válida.

La inserción se ha hecho al final del documento, pero se puede hacer al principio con insertBefore.

Se pueden insertar en cualquier sitio... creo recomendable usar getElementById para referenciar la etiqueta "padre" de donde se quiera insertar.

epa2 · #**188** (**permalink**) 15/07/2004, 09:04

Consideraciones: En vista del aumento de herramientas anti-popup en navegadores, antivirus etc, los diseñadores de páginas web tenemos que "estrujarnos" un poco más la cabeza para ir adaptandonos a los cambios en las costumbres de los navegantes. Es posible que tengamos en nuestro sitio web una page que se abra como pop-pup, pero al estar activo el anti-popup, esta no se muestra, con la consiguiente pérdida de información para el sitio.

Pregunta: ¿Cómo puedo evitar que esto pase?
Respuesta: Mira a ver si con este código te sirve, es sencillito.
Creditos: epa4

Código:

<HTML>
<HEAD>
<TITLE>fullscreen</TITLE>
<script language="JavaScript"> 
function cerrar()
//esta función lo que hace es cerrar una página sin pedir confirmación
{
ventana=window.self;
ventana.opener=window.self;
ventana.close();
}

function pantallacompleta(pagina) 
{
var opciones=("toolbar=no, location=no, directories=no, status=no, menubar=no ,scrollbars=yes,resizable=no, fullscreen=yes"); 
var w=window.open(pagina,"ventana",opciones);
	if (w.name=="ventana") {
		cerrar();
	}
	else {
		window.document.writeln("Desactiva el bloqueo de poppus windows en tu equipo, de lo contrario\n"+ "no podrás entrar en la pagina o verla.");
		
	}
}
</script>
</HEAD>
<BODY  onload="javascript:pantallacompleta('http://www.tusitio.com/home.html');"> 
</BODY>
</HTML>

epplestun · #**189** (**permalink**) 23/07/2004, 04:07

Alterntiva a la super FAQ 187 de Caricatos

P: Como puedo crear textos alternativos sin hacer uso de la etiqueta alt?
R: Con un poco de imaginación y una simple capita .....

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title></title>
</head>

<body>
<script type="text/javascript">
var x=0; var y=0;

if(!document.all) {
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = show;

function crearAlt(texto) {
	document.getElementById("ALTdHTML").innerHTML = '<div style="border: 1px solid #000000; background-color: #fdfec2; padding: 2px; font-size: 70%; font-family: verdana">' + texto + '</div>';
}

function show(evento) {
	document.getElementById("ALTdHTML").style.visibility = 'visible';
	if(document.all) {
		x = event.clientX;
		y = event.clientY + document.body.scrollTop;
	  	document.getElementById("ALTdHTML").style.left = x + 10;
	  	document.getElementById("ALTdHTML").style.top  = y + 14;
	} else {
		x = evento.clientX + document.body.scrollLeft;
		y = evento.clientY + document.body.scrollTop;
		document.getElementById("ALTdHTML").style.left = x + 10;
	  	document.getElementById("ALTdHTML").style.top  = y + 14;
	}
}

function hide() {
	document.getElementById("ALTdHTML").style.visibility = 'hidden';
	document.getElementById("ALTdHTML").innerHTML = "";
}	
</script>
<div id="ALTdHTML" style="position: absolute; visibility: hidden">&nbsp;</div>

<img src="" width="250" height="70" onMouseOver="crearAlt('Imagen');" onMouseOut="hide();">


</body>
</html>

Zane_ · #**190** (**permalink**) 03/08/2004, 11:41

P Como puede saber un usuario su resolución de pantalla actual?

RUtiliza este codigo entre las etiquetas <body> y </body>

Código PHP:

  Tu resolución actual es :

  <script language="javascript">

var largo=screen.width;

var alto=screen.height;

document.write(largo+"x"+alto);

</script>

epa2 · #**191** (**permalink**) 04/08/2004, 03:00

193.- Añadir a favoritos

Pregunta: ¿Cómo puedo hacer para añadir una página a Favoritos?

Respuesta: Prueba con este código

Créditos: Bravenet

ObservacionesPara IE basta con pulsar en el link, para Opera y Nestcape será necesario pulsar la combinación de teclas Control + D

Código PHP:

  <script type="text/javascript">

var text = "!Méteme en Favoritos¡"

// Añade el URL de tu sitio

var site = "http://www.tusitio.com";

// Añade el nombre o descripción de tu página

var desc = "Descripción de tu pagina"

var ver = navigator.appName

var num = parseInt(navigator.appVersion)

if ((ver == "Microsoft Internet Explorer")&&(num >= 4))

{

document.write('<a title="Hacer favoritos de esta página" href="javascript:window.external.AddFavorite(site,desc);" ');

document.write('onMouseOver=" window.status=')

document.write("text; return true ")

document.write('"onMouseOut=" window.status=')

document.write("' '; return true ")

document.write('">'+ text + '</a>')

}

else

{

text += " (Ctrl+D)"

document.write(text)

} 

</script> </span>

Sir Kevin · #**192** (**permalink**) 19/08/2004, 01:05

P: ¿Como se puede anular el history mientras se navegue por nuestra web?

R:
Es tan sencillo como colocar este script en la cabecera de cada una de nuestras páginas:

Código:

if(history.forward(1)){
 history.replace(history.forward(1));
 }

De esta forma si se carga una página nuestra utilizando el botón atrás se redirigirá al usuario a la siguiente página visitada, que si es nuestra y también lleva este código hará lo mismo mientras no sea la última página visitada por el usuario.

caricatos · #**193** (**permalink**) 27/08/2004, 10:36

Pregunta: ¿Cómo puedo poner una opción de un select "selected"

Repuesta: Asignando al value del elemento select el value de la opción que se quiera seleccionar...

Ejemplo:

...
<body onload="document.forms['mi_Form']['mi_Select'].value = 'op2'" >
...
<form name='mi_Form' >
<select name='mi_Select' >
<option value='op1' > opción 1 </option>
<option value='op2' > opción 2 </option>
<option value='op3' > opción 3 </option>
</select>
...
</body>

Notas:
1. Evidentemente, el valor debe existir.
2. De la forma inversa se puede saber el valor seleccionado de un select con el value del mismo (Sería una simplificación de una FAQ anterior)

Khronos · #**194** (**permalink**) 02/09/2004, 10:44

Ocultar el contenido de una página hasta que se carguen todos sus elementos.

Ideal para páginas con muchas imágenes o galerías.

El fin es evitar que el usuario haga clic sobre una imagen mientras otras aun estén en proceso de carga, lo cual pudiere evitar que dicho proceso culmine exitosamente.

Método 1

Este procedimiento ha sido probado tanto para Internet Explorer como para Mozilla Firefox

1.- Colocar el siguiente javascript entre <head> y </head>

<script language="JavaScript" type="text/javascript">
function muestraGranDiv(){
document.getElementById('granDiv').style.visibilit y = "visible";
document.getElementById('cargando').style.visibili ty = "hidden";
}
</script>

2.- Cargar javascript (invocar función) en body mediante evento onLoad

<body onload="muestraGranDiv()">

3.- Colocar DIVs dentro del body

<div id="cargando" style="width: 100%; height: 500px; position: absolute; padding-top:20px; text-align:center"><span class="fontloadingcont">Loading content. Please wait...</span></div>
<div id="granDiv" style="visibility:hidden;">

resto del contenido dentro del DIV

<div>

El div de id="cargando", se usaría para colocar una advertencia al usuario, con la intención de que espere mientras se carga el contenido de la página. Fíjese que, obligatoriamente este div id="cargando", debe estar antes del div id="granDiv"

Para el aviso al usuario sobre la espera mientras se carga el contenido, puede usarse una imagen en vez de texto:

<div id="cargando" style="width: 100%; height: 500px; position: absolute; padding-top:20px; text-align:center"><img src="loading_content.gif"></div>
<div id="granDiv" style="visibility:hidden;">

resto del contenido dentro del DIV

<div>

El class="fontloadingcont" es el siguiente (puede ser usado como CSS interna o en un archivo CSS externo y es opcional):

<style type="text/css">
.fontloadingcont {
font-size: 20px;
font-weight: bold;
}
</style>

Si no desea usar un estilo CSS sobre el texto, no será necesario que mantenga las etiquetas <span></span>

Método 2

Otra posible forma de conseguir el objetivo

1.- Deshabilitar los links de las imágenes para que no ejecuten la función correspondiente

<a href="pagina.htm" onclick="return false"><img src="imagen.jpg" /></a>

2.- Colocar el siguiente javascript dentro de <head> y </head>

<script type="text/javascript">
function enlaces(){
for(m=0; m<document.getElementsByTagName('a'); m++){
document.getElementsByTagName('a')[m].onclick= function(){return true}
}
}
</script>

3.- Invocar la función dentro del body, mediante el evento onLoad

<body onload="enlaces()">

******************************************

Aviso:
Esta breve ayuda es un simple resumen de un tópico encontrado en la sección Javascript, bajo el número 228025. Sin embargo, la idea original proviene del usuario claray y una respuesta emitida por él en el tópico de número 224815. Posteriormente, la moderadora tunait aportó información para ampliar la ayuda y mejorar los códigos, permitiendo su compatibilidad tanto con Internet Explorer como con Mozilla, e incluso agregando posibilidad de colocar una advertencia para que el usuario espere mientras carga la página. El Método 2, proviene también como aporte de la moderadora tunait.
El resumen es aporte del usuario Khronos, quien no pretende atribuirse crédito alguno de las ideas provenientes de los autores(as) originales.

KarlanKas · #**195** (**permalink**) 29/09/2004, 08:11

P.-¿Cómo puedo hacer que JS genere una clave aleatoria?
R.-Por medio de este código:

Las variables:

caracter: Poner aquí los caracteres válidos para formar la clave.
numero_caracteres: Poner la longitud de caracteres de la clave generada.

Código HTML:

<html>
<head>
<title>Clave Aleatoria</title>
<style>
*{font:normal 10px/10px verdana;}
input{border:solid 1px black;}
</style>
<script>
//Script original de KarlanKas para forosdelweb.com

	var caracter="1234567890";
	caracter+="QWERTYUIOPASDFGHJKLÑZXCVÇBNM";
	caracter+="qwertyuiopñlkjhçgfdsazxcvbnm";
	var numero_caracteres=8;

	var total=caracter.length;
	function azar(){
	var clave="";
	for(a=0;a<numero_caracteres;a++){
	clave+=caracter.charAt(parseInt(total*Math.random(1)));
	}
	document.forms[0].clave2.value=clave;
	}
</script>
</head>
<body onload="azar()">
<form>
Clave.-<input type="text" readonly="readonly"  name="clave2" id="clave2" />
<input type="button" value="regenerar clave" onclick="azar()" />
</form>
</body>
</html>

caricatos · #**196** (**permalink**) 08/10/2004, 04:21

P: Como eliminar elementos (etiquetas) dinámicamente.

R: DOM: Usando removeChild.

function eliminar(elemento) {
elemento.parentNode.removeChild(elemento);
}

ejemplo de uso:

<div onclick="eleiminar(this)" >clickéeme para borrarme</div>

Nota: complementa a la FAQ 189.

epa2 · #**197** (**permalink**) 26/10/2004, 05:08

Faq 199 Efecto Fade de colores con el texto

Pregunta: ¿Cómo puedo crear un efecto fade de colores con el texto?
Respuesta: Con este pequeño script
Créditos: Bravenet

Código:

copia en el head lo siguiente....

<script type="text/javascript">
function change()
{
re="rgb("+Math.round(Math.random()*256)+","+Math.round(Math.random()*256)+","+Math.round(Math.random()*256)+")"
text.style.color=re;
}
setInterval(change,1000);
</script> 

luegon en el body pon algo así donde quisieras que el texto con el fade de colores apareciera

<p id="text"> Escribe aquí el mensaje. </p>

ale, a disfrutarlo

paulkees · #**198** (**permalink**) 02/11/2004, 23:30

P: ¿Como puedo abrir una ventana de arriba hacia abajo y de izquierda a derecha?
R:
Créditos: http://www.lawebdejrolo.iespana.es/l...iptlateral.htm

1º) Entre las etiquetas <head> y </head> de tu página html poner:

<SCRIPT LANGUAGE="JavaScript">
function expandingWindow(website) {
var heightspeed = 2; // vertical scrolling speed (higher = slower)
var widthspeed = 7; // horizontal scrolling speed (higher = slower)
var leftdist = 0; // distance to left edge of window
var topdist = 0; // distance to top edge of window
if (document.all) {
var winwidth = window.screen.availWidth - leftdist;
var winheight = window.screen.availHeight - topdist;
var sizer = window.open("","","left=" + leftdist + ",top=" + topdist +
",width=1,height=1,scrollbars=yes");
for (sizeheight = 1; sizeheight <winheight; sizeheight += heightspeed) {
sizer.resizeTo("1", sizeheight);
}
for (sizewidth = 1; sizewidth <winwidth; sizewidth += widthspeed) {
sizer.resizeTo(sizewidth, sizeheight);
}
sizer.location = website;
}
else
window.location = website;
}
</script>

2º) Entre las etiquetas <body> y </body> hacer el llamado function:

<a href="nombredepagina.htm" alt="se expande"
onClick="expandingWindow('nombredepagina.htm');ret urn false;">Pulsa</a>

Nota: variando los valores de velocidad de vertical y horizontal puedes producir los efectos que más te gusten.

Un saludo cordial.-
paulkees

alexa10 · #**199** (**permalink**) 11/11/2004, 13:46

P: como puedo utilizar una hoja de estilo, dependiendo de la resolución de la máquina cliente?
R:

Código:

<head>
  <link rel="stylesheet" type="text/css" id="hojaestilo">
  <script language="JavaScript" type="text/javascript">
  <!--
    document.getElementById('hojaestilo').href = screen.width + ".css";
   -->
  </script>
</head>

Y se crean tantos archivos css, como resoluciones se deseen tomar en cuenta, con el siguiente formato: xxxxxx.css, por ejemplo: 800.css, 1024.css

epa2 · #**200** (**permalink**) 16/11/2004, 06:26

Pregunta: ¿Cómo puedo añadir a mi web citas aleatorias?
Respuesta: Con este pequeño código.
Créditos: Bravenet

En el head pon esto....

Código PHP:

  <script type="text/javascript">

var Quotation=new Array()

Quotation[0] = "Foros del Web, el mejor sitio para aprender.";

Quotation[1] = "Escribe las citas que quieras en estos sitios.";

Quotation[2] = "Hoy es un día precioso para aprender algo nuevo";

Quotation[3] = "Soy un probecillo aprendiz.";

Quotation[4] = "Y encima nadie me hace caso en la vida :-(.";

var Q = Quotation.length;

var whichQuotation=Math.round(Math.random()*(Q-1));

function showQuotation() {

document.write(Quotation[whichQuotation]);}

</script>

Si quieres que aparezca en el body escribe lo siguiente....

Código PHP:

  <script type="text/javascript">  showQuotation(); </script>

¡ojo!
puedes configurarlo para que aparezca donde tu quieras, en una table, en un div, en un iframe, en un alert, en fin ....

tan solo comentar que puedes ir añadiendo mas citas, todas las que quieras, tan solo, en las nuevas citas, escribe...

Código PHP:

  Quotation[5] = "Cuanto más aprendo, mas ignorante me siento";

Quotation[6] = "Creo que algún día tiraré la toalla :-(";

y así sucesivamente con el 7, el 8, el 9, etc.

bueno, espero que os sirva para algo...

nos vemos pronto, cuidaos

jordia · #**201** (**permalink**) 29/11/2004, 14:27

Aqui os presento un reloj digital en javascript el cual imprime la fecha y hora del servidor y lo pone en una variable en javascript, y lo actualiza, aunque en realidad es una pequeña modificacion del codigo del reloj que se encuentra en esta FAQ.

Código HTML:

<html>
<head>
<title>el reloJ</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
	var Hoy = new Date("<?php echo date("d M Y G:i:s");?>");
function Reloj(){ 
	Hora = Hoy.getHours() 
	Minutos = Hoy.getMinutes() 
	Segundos = Hoy.getSeconds() 
	if (Hora<=9) Hora = "0" + Hora 
	if (Minutos<=9) Minutos = "0" + Minutos 
	if (Segundos<=9) Segundos = "0" + Segundos 
	var Dia = new Array("Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"); 
	var Mes = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); 
	var Anio = Hoy.getFullYear(); 
	var Fecha = Dia[Hoy.getDay()] + ", " + Hoy.getDate() + " de " + Mes[Hoy.getMonth()] + " de " + Anio + ", a las "; 
	var Inicio, Script, Final, Total 
	Inicio = "<font size=3 color=black>" 
	Script = Fecha + Hora + ":" + Minutos + ":" + Segundos 
	Final = "</font>" 
	Total = Inicio + Script + Final 
	document.getElementById('Fecha_Reloj').innerHTML = Total 
	Hoy.setSeconds(Hoy.getSeconds() +1)
	setTimeout("Reloj()",1000) 
} 
</script>
</head>
<body onload="Reloj()">
<div id="Fecha_Reloj"></div>
</body>
</html>

y ojala les sirva

caricatos · #**202** (**permalink**) 18/12/2004, 04:36

P: ¿Como obtengo los colores intermedios de 2 dados en n pasos?

R: ¿Aplicando la función transitar que se describe abajo, con los 2 colores y n como parámetros?

Código:

function decahex(n) {
	return hexa.charAt(n / 16) + hexa.charAt(n % 16);
}

function colorHexa(c) {
	return "#" + decahex(c[0]) + decahex(c[1]) + decahex(c[2]);
}

function transitar(ini, fin, pasos) {
	var dato = desglose(ini);
	var rIni = dato[0];
	var gIni = dato[1];
	var bIni = dato[2];

	var intermedios = new Array(pasos);
	intermedios[0] = dato;

	var dato = desglose(fin);

	intermedios[pasos - 1] = dato;

	var rFin = dato[0];
	var gFin = dato[1];
	var bFin = dato[2];

	var rMed = (rFin - rIni) / (pasos - 1);
	var gMed = (gFin - gIni) / (pasos - 1);
	var bMed = (bFin - bIni) / (pasos - 1);

	for (var i = 1; i < pasos - 1; i ++)	{
		var rgb = new Array(3);
		rgb[0] = parseInt(rIni + (rMed * i));
		rgb[1] = parseInt(gIni + (gMed * i));
		rgb[2] = parseInt(bIni + (bMed * i));
		intermedios[i] = rgb;
	}
	for (i = 0; i < intermedios.length; i ++)
		intermedios[i] = colorHexa(intermedios[i]);

	return intermedios;
}

function desglose(color) {
	if (color.length != 6)
		return "poblema";
	else	{
		devolver = new Array(3);
		devolver[0] = hexadec(color.substr(0, 2));
		devolver[1] = hexadec(color.substr(2, 2));
		devolver[2] = hexadec(color.substr(4, 2));
	}
	return devolver;
}
var hexa = "0123456789abcdef";

function hexadec(x) {
	x = x.toLowerCase();
	return parseInt(hexa.indexOf(x.charAt(0))) * 16 + parseInt(hexa.indexOf(x.charAt(1)))
}

Notas:
Los colores deben escribirse en hexadecimal (String) y sin el carácter #.
La función transitar devuelve un array de colores hexadecimales aplicables directamente a los atributos color de los tags que lo soporten (p.e. font) y a los estilos color, background-color y border-color.

Ejemplo de utilización:
var colores = transitar("000000", "ffffff", 3);
Devuelve el siguiente array: ["#000000", "#7f7f7f", "#ffffff"];

Aplicaciones: crear fondos degradados como el ejemplo que hay en estas mismas FAQs

epa2 · #**203** (**permalink**) 13/01/2005, 06:44

204.- Abrir ventana que quede por detras.
Pregunta: ¿Como puedo abrir un popup (no hace falta que sea popup) y que este se quede por detras de la ventana principal?
Respuesta: Si insertas este código en el head de la página que abres, ésta quedará en segundo plano.

Código PHP:

  <script languaje="javascript"> 

self.blur() 

</script>

epa2 · #**204** (**permalink**) 13/01/2005, 06:51

206.- Poner el foco en la ventana padre.
Pregunta: ¿Como puedo colocar el foco en la ventana padre.
Respuesta: Desde la ventana que has abierto, puedes pasar el foco a la ventana que abrió el popup. Para ello deberías colocar este script en la cabecera de la ventana abierta:

Código PHP:

  <script> 

window.opener.focus() 

</script>

NOTA: Poner el foco en la ventana padre desde la ventana padre

Se puede hacer lo mismo, pero ejecutando la sentencia en el código Javascript de la ventana padre. Para ello habría que escribir esta línea de código a continuación del window.open:

window.focus()

JavierB · #**205** (**permalink**) 24/01/2005, 11:25

P: ¿Como puedo sumar un número de días a una fecha dada?

R: Usando este código:

Código PHP:

  <?xml version="1.1" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 
<html>

<head>

<title>Sumar días a una fecha</title>

<script type="text/javascript">

<!--

function aumenta(frm) {

  num=frm.incremento.value;

  f=frm.fecInicio.value;

  // pasaremos la fecha a formato mm/dd/yyyy

  f=f.split('/');

  f=f[1]+'/'+f[0]+'/'+f[2];

  //

  hoy=new Date(f);

  hoy.setTime(hoy.getTime()+num*24*60*60*1000);

  mes=hoy.getMonth()+1;

  if(mes<9) mes='0'+mes;

  fecha=hoy.getDate()+'/'+mes+'/'+hoy.getFullYear();

  frm.total.value=fecha;  

}

-->

</script>

</head>

<body>

<form action="">

<p>Fecha de inicio (d/mm/aaaa): <input type="text" name="fecInicio" /><br />

Días a sumar: <input type="text" name="incremento" /><br />

Fecha final: <input type="text" name="total" readonly="readonly" /><br />

<input type="button" value="Calcular" onclick="aumenta(this.form)" /></p>

</form>

</body>

</html>

caricatos · #**206** (**permalink**) 06/02/2005, 01:32

P: Enlace desde popup a ventana principal:

R: Consiste en asignar un nombre a la ventana con window.name:

window.name = "principal";
Y luego poner en el popup el target="principal" en el enlace.
<a href="destino.html" target="principal" > Enlace a la página abridora </a>

También valdría para destinos de formularios.
<form action="destino.html" target="principal" >
....
</form>

Hay más formas de hacerlo... con javascript poner:
opener.location.href = "destino.html";

Otra posibilidad es poner en el mismo popup la asignación del nombre de la ventana:
opener.name = "principal;"

Si tienen dudas sobre esta pregunta, pueden plantearlas en este mensaje: http://www.forosdelweb.com/f13/propuesta-faq-266234/

trasgukabi · #**207** (**permalink**) 27/02/2005, 18:40

P: Cómo puedo validar el ISBN de un libro?

R:Llegando a forosdelweb a partir de ahora, porque en google no he encontrado nada y ha salido esto de mi cabecita:

Código:

<script language="javascript">
function comprueba()
{ 
	if (document.form2.isbn.value!="x-xxxx-xxxx-x")
	{
		var salida, plantilla;                   
		var texto = document.form2.isbn.value;
		var estructura=true;
		plantilla = new RegExp("^[0-9]{1,5}-[0-9]{1,7}-[0-9]{1,6}-[0-9xX]$"); 
		salida = texto.match(plantilla); 
		if (salida==null)
		{
			estructura=false;
		}
		if (texto.length!=13)
		{
			estructura=false;
		}
		if (!estructura)
		{ 
			alert("La estructura del ISBN introducido no coincide con el estándar ISBN\n\nEjemplo: 0-8436-1072-7\n\n El estándar indica esta estructura:\nde 1 a 5 números\nguión\nde 1 a 7 números\nguión\nde 1 a 6 números\nguión\ndígito de control. de 0 a 9 o \"X\" si el dígito es 10\nLa longitud total debe ser de 10 dígitos, más los tres guiones.")
		}
		else
		{
			tt2 = texto.split("-");
			grupo1=new String(tt2[0]);
			grupo2=new String(tt2[1]);
			grupo3=new String(tt2[2]);
			grupo4=new String(tt2[3]);
			total= new Number(0);
			ponderacion=new Number(10);
			for (j= 0; j <grupo1.length; j++) 
			{	
				total+=(parseInt(grupo1.charAt(j))*ponderacion);
				--ponderacion;
			}
			for (j= 0; j <grupo2.length; j++) 
			{	
				total+=(parseInt(grupo2.charAt(j))*ponderacion);
				--ponderacion;
			}	
			for (j= 0; j <grupo3.length; j++) 
			{	
				total+=(parseInt(grupo3.charAt(j))*ponderacion);
				--ponderacion;
			}
			if(grupo4=="X" || grupo4=="x")
			{
				grupo4="10";		
			}
			resto=(total+parseInt(grupo4))%11;
			if (resto==0)
			{
				//document.form2.submit();
				alert("ISBN Correcto");
			}
			else
			{
				alert("El dígito de control (último numero de la serie) no es correcto. ISBN inválido.");
			}
		}
	}
}</script>


		<form name="form2">
		<input type="text" value="x-xxxx-xxxx-x"  maxlength="13"><input type="button" onClick="javascript:comprueba();" value="buscar">
		</form>

Para el que se quiera empapar de cómo se curra con los ISBN y los EAN, que se baje este pdf de mi página. un buen documento, si señor:
ISBN-EAN.rar(366K)

phpec · #**208** (**permalink**) 07/03/2005, 15:17

P: ¿Como pongo efecto de maquina de maquina de escribir en la barra de titulo?
R::

<SCRIPT LANGUAGE='JavaScript'>
texto = "Mensaje de título";
l = texto.length;
vel = 150;
conta = 0;
function cambiaTitulo() {
if(conta <= l){
conta ++;
t = texto.substr(0, conta)
document.title = t;
}else{
conta = 0;
}
setTimeout("cambiaTitulo();",vel);
}
cambiaTitulo();

</SCRIPT>

programeitor · #**209** (**permalink**) 05/04/2005, 14:01

P:Como definir estilos por tipo.

R:Mediante una funcion llamada en el onload.

<html>
<head>
<script>
function EstiloPorTipo(marca,tipo,estilo){// programeitor 2005, [email protected]
var e=estilo.split(',');
var m=document.getElementsByTagName(marca);
for(var n=0;n<m.length;n++){
if(m[n].type==tipo){
for(var i=0;i<e.length;i+=2){
m[n].style[e[i]]=e[i+1];
}
}
}
}
</script>
</head>
<body onload=EstiloPorTipo('input','text','background,red,width,200px')>
<input type="text" value="asd">
<input type="button" value="asd">

</body>
</html>

programeitor · #**210** (**permalink**) 05/04/2005, 15:10

PREGUNTA:Como crear una base de datos HTML.(solo lectura)

RESPUESTA:

MODIFICACION Y MEJORA

Despues de darle muchas vueltas y quitar codigo innesesario para una mejor comprension he conseguido simplificar la cuestion, añadiendo un pequeño script a la pagina principal que hace que las paginas de datos tengan exactamente el mismo y mas pequeño script(sin nesesidad de cambiar nombres). ,he quitado etiquetas innesesarias en las paginas de datos ,resumiendose todo a un div y un script. He borrado el codigo anterior por darme error de esceso de caracteres al enviar el post, ademas de ya no ser nesesario. Otra cosa de interes es que la pagina se carga mucho antes ,cuestion esta a la que no encuentro explicacion.
Esta utilidad vale igualmente para recoger valores de variables, campos de texto ,etc.... solo asignandoles el valor de 'datos'.

SCRIPT DE LA PAGINA PRINCIPAL:
la funcion 'carga' carga en el iframe las paginas de datos definidas en el arreglo 'fr'.
la funcion 'lee' es llamada desde cada pagina de datos ,las cuales mandan el contenido de sus 'divs' a el 'div' correspondiente de la pagina principal.

<script>
fr=new Array('div1','div2',........,'divn')
cf=0
ruta=''// ruta a los archivos de datos
function carga(){
if(cf<fr.length){window.frames[0].location.href=ruta+fr[cf]+'.html';cf++;}
}
function lee(datos){document.getElementById(fr[cf-1]).innerHTML=datos;}
</script>

BODY DE LA PAGINA PRINCIPAL:
La colocacion de los 'divs' es meramente explicativa, tanto el diseño como los estilos no corrresponden a esta faq. Lo que si es extrictamente nesesario es la colocacion del iframe que nos servira para cargar las paginas de datos.

<body onload="carga()">
<iframe style="visibility:hidden;"></iframe>
<div id="div1"></div>
<div id="div2"></div>
.........
<div id="divn"></div>
</body>
</html>

ESQUEMA DE UNA PAGINA DE DATOS:
Este se resume en el 'div datos' y el script de carga. Deben guardarse con el mismo nombre que los 'divs' a los que van destinados. Para este ejemplo estan guardados con la extension '*.html'.
El contenido del div puede ser tanto texto simple como etiquetas html.
Tambien es posible la lectura de varios 'divs' de una pagina de datos, simplemente añadiendo otra vez lo mismo: div-script-div-script....., para ello hay que dar nombres diferentes a cada uno de los divs y modificar igualmente el parametro de las funciones, Todo ello podria resumirse con un script final, despues de los 'divs': div-div-div......script, que haga un bucle al estilo de la funcion 'carga' de la pagina principal. Igualmente ,y siguiendo esta dinamica, podria ser un formulario abierto en un popup, y en el submit, cambiar 'parent' por 'opener', pero esto habria que comprobarlo.

<div id="datos">
CONTENIDO
</div>
<script>parent.lee(document.getElementById("datos").innerHTML);parent.carga();</script>

Mencion especial a caricatos, por su colaboracion en la resolucion de un escollo de esta utilidad.

Podeis ver una pagina cargada de esta forma en http://es.geocities.com/opinionxreflexion/tarteso/
compuesta de 6 divs cargados desde 6 archivos diferentes.

CREDITOS: programeitor 2005. [email protected]