Foros del Web
Página 4 de 6 123 4 56
Mostrar 50 mensajes desde este tema en una página

Foros del Web (http://www.forosdelweb.com/)
-   Javascript (http://www.forosdelweb.com/f13/)
-   -   FAQs JavaScript (http://www.forosdelweb.com/f13/faqs-javascript-105325/)

tunait 05/10/2003 15:01
FAQ - 153 - Cerrar todas las ventanas
 
P-/ ¿Cómo puedo, al salir de mi web, cerrar todas las ventanas que se hayan abierto desde mi sitio?

R-/ Abre todas tus ventanas usando la función abreVentana()

Pega este script en alguna parte entre <head> y </head>
Código:
<script language="JavaScript">
//cerrar todas las ventanas. Script por tunait!
//http://javascript.tunait.com/
//[email protected]
var cont = 0
function abreVentana(pagina)
{
cont++
eval('ventana'+ cont + "=window.open(pagina,'ventana'+cont,'')")
}

function cerrar()
{
for(m=1;m<=cont;m++)
        {
        if(eval('ventana' + m))
                {
                eval('ventana' + m + ".close()")
                }
        }
cont=0
}
</script>
Para abrir las ventanas (ejemplo para un link)

<a href="tuPagina.html" onclick="abreVentana('tuPagina.html');return false"> enlace </a>

Finalmente al tag de body...

<body onunload="cerrar()">

Ver ejemplo

KarlanKas 06/10/2003 09:17
154. Evitar que vuelvan a dar al Submit
 
P.-Harto estoy de que la gente de varias veces al botón de enviar un formulario. Saber como evitarlo quiero!
R.- Puedes poner un cartel que ponga que no den más de una vez al botón o hacer esto:

Pon un nombre al botón de submit... por ejemplo:
Código PHP:
<INPUT 
TYPE="submit" 
VALUE="Mandar" 
NAME="enviar"> 


y luego en la etiqueta form pon:
Código PHP:

<FORM 
action="destino.php"
method="post"
onsubmit="document.forms[0].enviar.value='Por favor espere un momento';document.forms[0].enviar.disabled=true;"> 

Con esto consigues que no vuelvan a dar a submit....

Te recomiendo que arregles un poco losx botones con CSS, si no se verán horribles!

Kaopectate 13/10/2003 14:27
155.- Página principal sin navegación
 
P: ¿Como puedo abrir la página principal de mi sitio sin barra de herramientas, sin barra de estado, sin menú y sin barra de direcciones?

R: El truco consiste en abrir una página intermedia que dispare un popup con las características que necesites y luego hacer que esa ventana intermedia se cierre sola. Para ello usamos una combinación del FAQ-7 y el FAQ-115.

Nota: La página principal propiamente dicha estaría en index1.htm

Código PHP:
<html>
 <head>
  <script language="JavaScript">

   function abreSinNavegacion(){
    open('index1.htm', 'principal', 'location=no,menubar=no,status=no,toolbar=no');
    cerrar();
   }

   function cerrar() {
    var ventana = window.self;
    ventana.opener = window.self;
    ventana.close();
   }

  </script>
 </head>
 <body onload="abreSinNavegacion()">
 </body>
</html> 

KarlanKas 15/10/2003 10:49
156.-Una forma de validar un formulario iluminando errores
 
P.- Cómo validar el formulario de una forma sencilla iluminando los errores.
R.- Con este código. Es muy fácil añadir reglas. sólo se van poniendo en el orden de los inputs en el formulario las reglas con el numerito de orden que les corresponda y se utiliza la variable valor para referirse al valor de dicho input.

Para el mensaje de error lo mismo, se usa error con el numerito de orden de input entre corchetes y se pone entre comillas el mensaje de error.

Un ejemplo:
Código PHP:
<html>
<head>
<style>
form,td{font:normal 10px/10px verdana;}
input{font:normal 10px/10px verdana;border:solid 1px black}
</style>
    <title>Prueba</title>
    <script>
//Script original de KarlanKas para forosdelweb.com
//Adaptado a firefox gracias a JavierB ;-)

    colorMal="#eeddee";
    colorBien="white";
    
    regla=new Array()

    regla[0]="valor.length<3";
    regla[1]="isNaN(valor) || valor<600000000";
    regla[2]="valor.lastIndexOf('@')!=valor.indexOf('@') || valor.indexOf('@')<2 || valor.lastIndexOf('.')<valor.length-4 || valor.lastIndexOf('.')>valor.length-3";

    mensaje=new Array()


    mensaje[0]="Por favor, introduzca el nombre";
    mensaje[1]="El número de teléfono introducido no es válido";
    mensaje[2]="correo inválido";
    
    function comprobar(){ 
    errores=""; 
    mensaje2="";
    for(a=0;a<regla.length;a++){ 
    valor=document.forms[0].elements[a].value; 
    if(eval(regla[a])){
    mensaje2=(mensaje[a])?mensaje[a]:"Por favor, rellene el campo "+document.forms[0].elements[a].name;
    errores+=mensaje2+"<br>"; 
    document.forms[0].elements[a].style.background=colorMal;} 
    else{document.forms[0].elements[a].style.background=colorBien;} 
    } 
    pepe=document.getElementById("herror");
    pepe.style.background=(errores!="")?colorMal:colorBien; 
    pepe.style.border=(errores!="")?"solid 1px black":"none"; 
    pepe.innerHTML=errores; 

    return (errores=="")
    } 
     
    
    </script>
</head>

<body>
<form onsubmit="return comprobar()">
<table><tr><td>nombre:</td><td><input type=text name=nombre></td><td style="font:normal 10px/15px verdana;padding:5px 5px 5px 5px;"rowspan=10 valign="top" id="herror"></td></tr>
<tr><td>telefono:</td><td><input type=text name="telefono"></td></tr>
<tr><td>e-mail:</td><td><input type=text name="email"></td></tr>
<tr><td colspan=2 align="center"><input type="submit" value="enviar"></td></tr></table>

</form>


</body>
</html> 

epa2 21/10/2003 03:58
157.- Proteger dirección de correo
 
P: ¿Cómo puedo proteger mi correo que aparece en mi website del spam?

R: Con este pequeño código, (no es perfecto, pero bueno, puede funcionar)

Creditos Bravenet

Código:
<SCRIPT LANGUAGE="javascript">
var primero = 'ma';
var segundo = 'il';
var tercero = 'to:';

// ejemplo: epa2
var direccion = 'epa2';

// ejemplo: hotmail
var dominio = 'hotmail';

var extension = 'com';

document.write('<a href="');
document.write(primero+segundo+tercero);
document.write(direccion);
document.write('@');
document.write(dominio);
document.write('.');
document.write(extension);
document.write('">');
document.write('¡Escribe a epa2!</a>');
</script>

Cain 30/10/2003 03:04
158.- Reemplazo dentro de un string
 
P.: ¿Cómo puedo sustituir una subcadena por otra en una cadena?

R.:

<script type="text/Javascript">
cadena="esta casa es azul";
cadena=cadena.replace("azul","verde");
</script>

Cain 30/10/2003 03:06
159.- Eliminación de parte de un string
 
P.: ¿Cómo puedo eliminar una subcadena de una cadena?

R.:
<script type="text/Javascript">
cadena="esta casa es azul";
cadena=cadena.replace("casa","");
</script>

epa2 04/11/2003 07:44
160.- Scroll (marquesina) de texto
 
P: ¿Como puedo colocar un scroll de texto (marquesina) en mi página?

Créditos : Bravenet

R:

Código PHP:
<html>
<head>
<script language="javascript">
<!--
var bannerID=0
function text(msg,ctrlwidth) {
        msg = " --- "+msg
        newmsg = msg
        while (newmsg.length < ctrlwidth) {
                newmsg += msg
        }
        document.write ('<FORM NAME="Scrolltext">');
        document.write ('<CENTER><INPUT NAME="text" VALUE= "'+newmsg+'" SIZE= '+ctrlwidth+' ></CENTER>');
        document.write ('</FORM>');
        var bannerID = null
        rollmsg()
}
function rollmsg() {
      NowMsg = document.Scrolltext.text.value
        NowMsg = NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1)
        document.Scrolltext.text.value = NowMsg
        bannerID = setTimeout("rollmsg()",100)//change the number 100 to represent the speed of the scroll. The larger the number the slower it moves
}
// -->
</script>

</head>

<body>
<script>
<!--
msg = " AQUI COLOCA EL TEXTO DEL SCROLL HORIZONTAL (MARQUESINA) "
ctrlwidth = "75" //change this number to the length you would like the message box to be
text(msg,ctrlwidth);
// -->
</script>

</body>
</html> 

Un saludo a todos :adios:

epa2 04/11/2003 07:50
161.- Botón para imprimir que no se imprima
 
P: ¿Como puedo poner un botón para imprimir que desaparezca una vez presionado?

Creditos: Bravenet (es que yo solo soy un aprendiz) :'(

R:

Código PHP:
<html>
<head>
<script language="JavaScript">
function printPage() { 
if(document.all) { 
document.all.divButtons.style.visibility = 'hidden'; 
window.print(); 
document.all.divButtons.style.visibility = 'visible'; 
} else { 
document.getElementById('divButtons').style.visibility = 'hidden'; 
window.print(); 
document.getElementById('divButtons').style.visibility = 'visible'; 
} 
} 
</script>
</head>
<body>
<div id="divButtons" name="divButtons"> 
<input type="button" value = "Print this page" onclick="printPage()" style="font:bold 11px verdana;color:#FF0000;background-color:#FFFFFF;">
</div>
</body>
</html> 

ACHAVARRIA 07/11/2003 09:02
162.- Ejecutar código JavaSrcipt, PHP o ASP
 
P: ¿Cómo ejecutar código ASP, PHP o de cualquier otro lenguaje dinámico interpretado en el servidor mediante una llamada JavaScript en un documento HTML común y corriente ?

R: En el archivo HTML debemos ubicar la llamada al archivo que queremos ejecutar:

index.htm
Código PHP:
<HTML>
<HEAD>
<TITLE>Ejectuar código PHP o ASP con JavaScript</TITLE>
</HEAD>
<BODY>
<script language="JavaScript" src="archivo.php"></script>
<script language="JavaScript" src="archivo.asp"></script>
</BODY>
</HTML> 

El archivo del Script debe contener la funcion document.write al final del mismo para poder imprimir el contenido que generó dinámicamente:

archivo.php
Código PHP:
<?
// En este espacio pondremos todo el
// código PHP que queremos ejecutar
// y luego juntar todo lo que es
// necesario imprimir en una sola
// variable.

$variable = "Script PHP ejecutado desde una página HTML";
?>
document.write("<?=$variable;?>");

archivo.asp

<%
' En este espacio pondremos todo el
' código ASP que queremos ejecutar
' y luego juntar todo lo que es
' necesario imprimir en una sola
' variable.

variable = "Script ASP ejecutado desde una página HTML"
%>
document.write("<%=variable%>");

ACHAVARRIA 07/11/2003 09:04
163.- Efecto: Estela en el puntero del mouse
 
P: ¿Como dejar una Estela en el puntero del mouse?

R: Copia el siguiente script entre las etiquetas <body> y </body>:

Código PHP:
<script language="JavaScript">
<!-- Mouse Comet II script by [email]kurt.grigg@virgin.net[/email]
colours=new Array('#6699FF','#6699FF','#6699FF','#6699FF','#6699FF','#6699FF','#6699FF','#6699FF','#6699FF')
n = 10;
y = 0;
x = 0;
n6=(document.getElementById&&!document.all);
ns=(document.layers);
ie=(document.all);
d=(ns||ie)?'document.':'document.getElementById("';
a=(ns||n6)?'':'all.';
n6r=(n6)?'")':'';
s=(ns)?'':'.style';
if (ns){
for (i = 0; i < n; i++)
document.write('<layer name="dots'+i+'" top=0 left=0 width='+i/2+' height='+i/2+' bgcolor=#ff0000></layer>');
}
if (ie)
document.write('<div id="con" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
if (ie||n6){
for (i = 0; i < n; i++)
document.write('<div id="dots'+i+'" style="position:absolute;top:0px;left:0px;width:'+i/2+'px;height:'+i/2+'px;background:#ff0000;font-size:'+i/2+'"></div>');
}
if (ie)
document.write('</div></div>');
(ns||n6)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
y = (ns||n6)?evnt.pageY+4 - window.pageYOffset:event.y+4;
x = (ns||n6)?evnt.pageX+1:event.x+1;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function animate(){
o=(ns||n6)?window.pageYOffset:0;
if (ie)con.style.top=document.body.scrollTop;
for (i = 0; i < n; i++){
var temp1 = eval(d+a+"dots"+i+n6r+s);

randcolours = colours[Math.floor(Math.random()*colours.length)];
(ns)?temp1.bgColor = randcolours:temp1.background = randcolours; 
if (i < n-1){
var temp2 = eval(d+a+"dots"+(i+1)+n6r+s);
temp1.top = parseInt(temp2.top);
temp1.left = parseInt(temp2.left);
} 
else{
temp1.top = y+o;
temp1.left = x;
}
}
setTimeout("animate()",10);
}
animate();
// -->
</script> 
Dentro del vector colours se almacenan los colores de las diferentes posiciones de la estela, los cuales pueden ser modificados a gusto propio.

Código PHP:
colours=new Array('#6699FF','#6699FF','#6699FF','#6699FF','#6699FF','#6699FF','#6699FF','#6699FF','#6699FF') 

ACHAVARRIA 07/11/2003 09:06
164.- Barra de "cargando página"
 
P: ¿Como puedo poner una barra que me indique que la página esta siendo cargada?

R: Para hacerlo, debemos incorporar el siguiente código dentro de las etiquetas <head> y </head>:

Código PHP:
<html>
<head>
<title>Título</title>
<div ID="waitDiv" style="position:absolute;left:300;top:300;visibility:hidden">
<table cellpadding="6" cellspacing="0" border="1" bgcolor="#000000" bordercolor="#FFFFFF">
<tr><td align=center>
<font color="#ffffff" face="Verdana" size="4">Cargando página...</font>
<img src="/images/cargando.gif" border="1">
</td>
</tr></table>
</div>
<SCRIPT>
<!--
var DHTML = (document.getElementById || document.all || document.layers);
function ap_getObj(name) {
if (document.getElementById)
{ return document.getElementById(name).style; }
else if (document.all)
{ return document.all[name].style; }
else if (document.layers)
{ return document.layers[name]; }
}
function ap_showWaitMessage(div,flag) {
if (!DHTML) return;
var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden'
if(! document.getElementById) if(document.layers) x.left=280/2; return true; } ap_showWaitMessage('waitDiv', 3);
//-->
</SCRIPT>
</head>
<body>
Cuerpo del sitio
</body>
<SCRIPT language=javascript>
<!-- 
ap_showWaitMessage('waitDiv', 0); 
//-->
</SCRIPT>
</html> 

ACHAVARRIA 07/11/2003 09:11
165.- Proteger páginas con password
 
P: ¿Existe alguna forma de implementar passwords con JavaScript?

R: Con el lenguaje JavaScript no es posible hacer grandes sistemas de protección de páginas con password. Pero existe un método que a más de uno les puede ser útil.

Se trata de ubicar un formulario en el que se pide un password, al ingresarlo y clickear sobre "Enviar", este toma el valor del campo y se dirige a una página con datos_del_campo.htm. Es decir, para poder ingresar a la página oculta debemos tipear dentro del formulario
datos_del_campo.

Obviamente la página que no queremos proteger vamos a ponerle un nombre más difícil, lleno de números, como por ejemplo: 77xwt1.htm. En este caso, para poder ingresar, se debe tipear dentro del campo del formulario la palabra 77xwt1 y el javascript redireccionará hacia el .htm. Si la clave que se ingresó no es la correcta se mostrará la típica página de error 404.

Código fuente
El código que hará posible la protección que javascript es el siguiente:

Código PHP:
<SCRIPT>
function acceso(){
window.location = document.formclave.clave.value +
".htm"
}
</SCRIPT>
<FORM name=formclave>
<INPUT type=text name=clave>
<INPUT type=button value=Enviar onclick="acceso()">
</FORM> 
La página oculta (la que queremos proteger) se puede como uno la desee, no influye en el anterior código. El formulario posee un campo y un botón que al clickearlo llama a la función acceso(). Al ejecutarse esta función, se encarga de tomar el contenido del campo clave y asigna al navegador que se dirija hacia una página con el contenido de ese campo + la extensión .htm.

ACHAVARRIA 07/11/2003 09:13
166.- Efecto: "terremoto" en el navegador
 
P: ¿Como puedo hacer con JavaScript un efecto de "terremoto"?

R: No sé si este efecto sea útil, pero puede resultar algo divertido. Se trata de un JavaScript que tiene como función realizar un efecto de "terremoto" o "sacudir" la ventana del navegador.

El siguiente script lo ubicamos dentro del cuerpo de la página (entre los tags <body> y </body>)

Código PHP:
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! [url]http://javascript.internet.com[/url] -->
function shake_xy(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
}

function shake_x(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(i,0);
self.moveBy(-i,0);
}
}
}
}

function shake_y(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(0,-i);
}
}
}
}

//-->
</SCRIPT> 
Y luego realizamos un link a la función:

Código PHP:
<a href="javascript:shake_xy(3)">Sacudir pantalla</a> 
Sacudir pantalla

O con un botón:

Código PHP:
<input type=button value="Sacudir pantalla" onclick="shake_x(4)"> 

ACHAVARRIA 07/11/2003 09:16
167.- Abrir una ventana cuando otra es cerrada
 
P: ¿Como puedo abrir una ventana cuando otra se cierra?

R: Con el script que mostraremos a continuación podemos abrir una ventana nueva cuando otra es cerrada. Lo bueno que tiene es que se puede configurar la cantidad de segundos que se debe esperar antes de abrir la nueva ventana.

Código fuente

Código PHP:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Comienzo
closetime = 0; // Cantidad de segundos a esperar para abrir la ventana nueva
function Start(URL, WIDTH, HEIGHT) {
windowprops = "left=50,top=50,width=" + WIDTH + ",height=" + HEIGHT;
preview = window.open(URL, "preview", windowprops);
if (closetime) setTimeout("preview.close();", closetime*1000);
}
function doPopup() {
url = "popup.htm";
width = 400; // ancho en pixels
height = 320; // alto en pixels
delay = 2; // tiempo de delay en segundos
timer = setTimeout("Start(url, width, height)", delay*1000);
}
// Fin -->
</script>
</head>
<body UnOnLoad="doPopup();">
<b>Contenido de tu sitio...</b>
</body>
</html> 

JavierB 14/11/2003 14:54
168 .- Validar una IP
 
P: Como puedo validar que una IP sea correcta.

R: Con estas pocas líneas de código:
Código PHP:
function validar(ip) {
    partes=ip.split('.');
    if (partes.length!=4) {
        alert('ip no valida');
        return;
    }
    for (i=0;i<4;i++) { 
        num=partes[i];
        if (num>255 || num<0 || num.length==0 || isNaN(num)){
        alert('ip no valida');
        return;
        }
        }
} 
Agradezco a ElAprendiz que he haya recordado que también hay que validar que no se introduzcan caracteres no numéricos.

Kaopectate 20/11/2003 06:41
169.- Combos encadenados para armar con Bases de datos
 
P: ¿Como puedo poner en mi página dos combos que dependiendo de la opción seleccionada en uno de ellos me cambie el contenido del otro combo, teniendo en cuenta de que todas las opciones provienen de una base de datos?

R:

Código PHP:
<html>
 <head>
  <script language="JavaScript">

   /* Trae desde la base de datos los nombres de los paises */
   /* y colócalos en este arreglo.                          */
   var aPaises = new Array(
                           " ",
                           "Mexico",
                           "España",
                           "Venezuela"
                          );

   var aEstados0 = new Array(
                           " "
                          );

   /* Trae desde la base de datos los nombres de las ciudades */
   /* de cada uno de los paises de la lista anterior y ponlos */
   /* en arreglos individuales.                               */
   var aEstados1 = new Array(
                           " ",
                           "Ciudad de México",
                           "Monterrey",
                           "Guadalajara"
                          );

   var aEstados2 = new Array(
                           " ",
                           "Madrid",
                           "Barcelona",
                           "San Sebastián"
                          );

   var aEstados3 = new Array(
                           " ",
                           "Caracas",
                           "Coro",
                           "Maracay",
                           "Valencia"
                          );

   /* Arma un arreglo general de estados a partir de los arreglos  */
   /* anteriores. Es importante que cada arreglo comience por un   */
   /* valor en blanco y que el primer arreglo de ciudades, llamado */
   /* aqui aEstados0, no contenga ningún elemento.                 */
   var aEstados = new Array(
                          aEstados0,
                          aEstados1,
                          aEstados2,
                          aEstados3
                          );

   function opcion(oCntrl, iPos, sTxt, sVal){
     var selOpcion=new Option(sTxt, sVal);
     eval(oCntrl.options[iPos]=selOpcion);
   }

   function cambia(oMster, oCntrl){
    var nSelected = oMster.selectedIndex;
    while (oCntrl.length) oCntrl.remove(0);
    for(var i = 0; i < aEstados[nSelected].length; i++)
     opcion(oCntrl,  i, aEstados[nSelected][i], String(i));
   }

   function llena(oCntrl){
    while (oCntrl.length) oCntrl.remove(0);
    for(var i = 0; i < aPaises.length; i++)
     opcion(oCntrl,  i, aPaises[i], String(i));
   }

  </script>
 </head>
 <body>
  <form name="frm">
   Pais
   <select name="pais" onchange="cambia(this, document.frm.ciudad)">
    <option value=" ">&nbsp;</option>
   </select>
   &nbsp;&nbsp;&nbsp;
   Ciudad
   <select name="ciudad">
    <option value=" ">&nbsp;</option>
   </select>
  </form>
  <script language="JavaScript">
   llena(document.frm.pais);
  </script>
 </body>
</html> 

derkenuke 24/12/2003 20:37
170.- Contraseñas seguras en javascript
 
P: ¿Como puedo hacer una contraseña segura para mi web?

R: Existe un metodo inventado, se llama md5, y convierte una cadena (por muy larga que sea) a una nueva codificada de codigo hexadecimal de una determinada longitud. Lo bueno es que dos cadenas iguales generan la misma codificacion y no existen (o eso dicen xD) dos cadenas diferentes que se codifiquen igual. El codigo para ocultar claves os lo dejo, hacer lo que querais con él.



Código PHP:
// ******************************************************************************
// * md5.js
// *
// * A JavaScript implementation derived from the RSA Data Security, Inc. MD5
// * Message-Digest Algorithm. See [url]http://cw.oaktree.co.uk/site/legal.html[/url] for
// * details.
// *
// * Copyright (C) Paul Johnston 1999 - 2000. Distributed under the LGPL.
// *****************************************************************************/

/* to convert strings to a list of ascii values */
var sAscii = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ"
var sAscii = sAscii + "[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";

/* convert integer to hex string */
var sHex = "0123456789ABCDEF";
function hex(i)
{
  h = "";
  for(j = 0; j <= 3; j++)
  {
    h += sHex.charAt((i >> (j * 8 + 4)) & 0x0F) +
         sHex.charAt((i >> (j * 8)) & 0x0F);
  }
  return h;
}

/* add, handling overflows correctly */
function add(x, y)
{
  return ((x&0x7FFFFFFF) + (y&0x7FFFFFFF)) ^ (x&0x80000000) ^ (y&0x80000000);
}

/* MD5 rounds functions */
function R1(A, B, C, D, X, S, T)
{
  q = add(add(A, (B & C) | ((~B) & D)), add(X, T));
  return add((q << S) | (q >>> (32 - S)), B);
}

function R2(A, B, C, D, X, S, T)
{
  q = add(add(A, (B & D) | (C & (~D))), add(X, T));
  return add((q << S) | (q >>> (32 - S)), B);
}

function R3(A, B, C, D, X, S, T)
{
  q = add(add(A, B ^ C ^ D), add(X, T));
  return add((q << S) | (q >>> (32 - S)), B);
}

function R4(A, B, C, D, X, S, T)
{
  q = add(add(A, C ^ (B | (~D))), add(X, T));
  return add((q << S) | (q >>> (32 - S)), B);
}

/* main entry point */
function calcMD5(sInp) {

  /* Calculate length in machine words, including padding */
  wLen = (((sInp.length + 8) >> 6) + 1) << 4;
  var X = new Array(wLen);

  /* Convert string to array of words */
  j = 4;
  for (i = 0; (i * 4) < sInp.length; i++)
  {
    X[i] = 0;
    for (j = 0; (j < 4) && ((j + i * 4) < sInp.length); j++)
    {
      X[i] += (sAscii.indexOf(sInp.charAt((i * 4) + j)) + 32) << (j * 8);
    }
  }

  /* Append padding bits and length */
  if (j == 4)
  {
    X[i++] = 0x80;
  }
  else
  {
    X[i - 1] += 0x80 << (j * 8);
  }
  for(; i < wLen; i++) { X[i] = 0; }
  X[wLen - 2] = sInp.length * 8;

  /* hard coded initial values */
  a = 0x67452301;
  b = 0xefcdab89;
  c = 0x98badcfe;
  d = 0x10325476;

  /* Process each 16 word block in turn */
  for (i = 0; i < wLen; i += 16) {
    aO = a;
    bO = b;
    cO = c;
    dO = d;

    a = R1(a, b, c, d, X[i+ 0], 7 , 0xd76aa478);
    d = R1(d, a, b, c, X[i+ 1], 12, 0xe8c7b756);
    c = R1(c, d, a, b, X[i+ 2], 17, 0x242070db);
    b = R1(b, c, d, a, X[i+ 3], 22, 0xc1bdceee);
    a = R1(a, b, c, d, X[i+ 4], 7 , 0xf57c0faf);
    d = R1(d, a, b, c, X[i+ 5], 12, 0x4787c62a);
    c = R1(c, d, a, b, X[i+ 6], 17, 0xa8304613);
    b = R1(b, c, d, a, X[i+ 7], 22, 0xfd469501);
    a = R1(a, b, c, d, X[i+ 8], 7 , 0x698098d8);
    d = R1(d, a, b, c, X[i+ 9], 12, 0x8b44f7af);
    c = R1(c, d, a, b, X[i+10], 17, 0xffff5bb1);
    b = R1(b, c, d, a, X[i+11], 22, 0x895cd7be);
    a = R1(a, b, c, d, X[i+12], 7 , 0x6b901122);
    d = R1(d, a, b, c, X[i+13], 12, 0xfd987193);
    c = R1(c, d, a, b, X[i+14], 17, 0xa679438e);
    b = R1(b, c, d, a, X[i+15], 22, 0x49b40821);

    a = R2(a, b, c, d, X[i+ 1], 5 , 0xf61e2562);
    d = R2(d, a, b, c, X[i+ 6], 9 , 0xc040b340);
    c = R2(c, d, a, b, X[i+11], 14, 0x265e5a51);
    b = R2(b, c, d, a, X[i+ 0], 20, 0xe9b6c7aa);
    a = R2(a, b, c, d, X[i+ 5], 5 , 0xd62f105d);
    d = R2(d, a, b, c, X[i+10], 9 ,  0x2441453);
    c = R2(c, d, a, b, X[i+15], 14, 0xd8a1e681);
    b = R2(b, c, d, a, X[i+ 4], 20, 0xe7d3fbc8);
    a = R2(a, b, c, d, X[i+ 9], 5 , 0x21e1cde6);
    d = R2(d, a, b, c, X[i+14], 9 , 0xc33707d6);
    c = R2(c, d, a, b, X[i+ 3], 14, 0xf4d50d87);
    b = R2(b, c, d, a, X[i+ 8], 20, 0x455a14ed);
    a = R2(a, b, c, d, X[i+13], 5 , 0xa9e3e905);
    d = R2(d, a, b, c, X[i+ 2], 9 , 0xfcefa3f8);
    c = R2(c, d, a, b, X[i+ 7], 14, 0x676f02d9);
    b = R2(b, c, d, a, X[i+12], 20, 0x8d2a4c8a);

    a = R3(a, b, c, d, X[i+ 5], 4 , 0xfffa3942);
    d = R3(d, a, b, c, X[i+ 8], 11, 0x8771f681);
    c = R3(c, d, a, b, X[i+11], 16, 0x6d9d6122);
    b = R3(b, c, d, a, X[i+14], 23, 0xfde5380c);
    a = R3(a, b, c, d, X[i+ 1], 4 , 0xa4beea44);
    d = R3(d, a, b, c, X[i+ 4], 11, 0x4bdecfa9);
    c = R3(c, d, a, b, X[i+ 7], 16, 0xf6bb4b60);
    b = R3(b, c, d, a, X[i+10], 23, 0xbebfbc70);
    a = R3(a, b, c, d, X[i+13], 4 , 0x289b7ec6);
    d = R3(d, a, b, c, X[i+ 0], 11, 0xeaa127fa);
    c = R3(c, d, a, b, X[i+ 3], 16, 0xd4ef3085);
    b = R3(b, c, d, a, X[i+ 6], 23,  0x4881d05);
    a = R3(a, b, c, d, X[i+ 9], 4 , 0xd9d4d039);
    d = R3(d, a, b, c, X[i+12], 11, 0xe6db99e5);
    c = R3(c, d, a, b, X[i+15], 16, 0x1fa27cf8);
    b = R3(b, c, d, a, X[i+ 2], 23, 0xc4ac5665);

    a = R4(a, b, c, d, X[i+ 0], 6 , 0xf4292244);
    d = R4(d, a, b, c, X[i+ 7], 10, 0x432aff97);
    c = R4(c, d, a, b, X[i+14], 15, 0xab9423a7);
    b = R4(b, c, d, a, X[i+ 5], 21, 0xfc93a039);
    a = R4(a, b, c, d, X[i+12], 6 , 0x655b59c3);
    d = R4(d, a, b, c, X[i+ 3], 10, 0x8f0ccc92);
    c = R4(c, d, a, b, X[i+10], 15, 0xffeff47d);
    b = R4(b, c, d, a, X[i+ 1], 21, 0x85845dd1);
    a = R4(a, b, c, d, X[i+ 8], 6 , 0x6fa87e4f);
    d = R4(d, a, b, c, X[i+15], 10, 0xfe2ce6e0);
    c = R4(c, d, a, b, X[i+ 6], 15, 0xa3014314);
    b = R4(b, c, d, a, X[i+13], 21, 0x4e0811a1);
    a = R4(a, b, c, d, X[i+ 4], 6 , 0xf7537e82);
    d = R4(d, a, b, c, X[i+11], 10, 0xbd3af235);
    c = R4(c, d, a, b, X[i+ 2], 15, 0x2ad7d2bb);
    b = R4(b, c, d, a, X[i+ 9], 21, 0xeb86d391);

    a = add(a, aO);
    b = add(b, bO);
    c = add(c, cO);
    d = add(d, dO);
  }
  return hex(a) + hex(b) + hex(c) + hex(d);
} 

derkenuke 04/01/2004 18:26
171.- Desordenar array logicamente aunque parezca ilogico
 
P: ¿Como puedo desordenar un array dos veces "aleatoriamente" y que el resultado sea el mismo?

R: He ideado un metodo a partir del conocido quickSort, sin evaluar si un elemento es menor que otro o demas, simplemente los cambia sean como sean:

Código PHP:
function desorden(arr) {    //solo para desordenar mucho
    for(a=1;a<=arr.length-1;a++) quickDeSort(arr,0,a);
    for(a=0;a<arr.length-1;a++) quickDeSort(arr,a,arr.length-1);
}
function quickDeSort(objArray,ini,fin) { 
    var i=ini; var j=fin; var tmp;
    do { 
        tmp = objArray[i];
        objArray[i] = objArray[j];
        objArray[j] = tmp; 
        if ( i <= j ) { i++; j--; }
    } while ( i <= j );
    if ( ini < j ) quickDeSort(objArray,ini,j);
    if ( i < fin ) quickDeSort(objArray,i,fin); 
} 
Es curioso que si llamamos a quickDeSort con los mismos atributos dos veces (lo he probado solo con 0 y objArray.length-1), el array queda intacto. Por muchas veces que hagais reload, el desorden quedara igual y parecera aleatorio. La function desorden solo sirve para desordenar muchas veces, y darle mas realismo.

Espero que les sirva.

epa2 07/01/2004 06:22
172.- Menú de salto con la opción de abrirlo en una nueva ventana

Créditos: Bravenet

Código:
<html>
<head>
<script language="javascript">
<!--
function skip(){
var tickit=document.optionform
if (tickit.chooseit.checked){
if (!window.newwindow)
newwindow=window.open("")
newwindow.location=tickit.test.options[tickit.test.selectedIndex].value
}
else
location=tickit.test.options[tickit.test.selectedIndex].value
}
//-->
</script>
</head>

<body>
<form name="optionform">
<select  name="test" size=1 style="font:bold 11px verdana;background-color:#DAE6F8;color:#000000;">
    <option value="http://www.epa2.com">Epa2</option>
    <option value="http://www.terra.es">Hola amigos</option>
    <option value="http://www.mp3.com">Adiós amigos</option>
        <option value="http://www.caricatos.com">Saludos a los señores del anillo de los foros</option>
  </select><br>
  <input type="checkbox" name="chooseit" value="ON"><span  style="font:11px verdana;">Abrir en nueva ventana pecador.</span><br>
  <input type="button" value="Vamos a por ellos" onClick="skip()" style="font:bold 11px verdana;background-color:#DAE6F8;color:#cc0000;"></form>
</body>
</html>

epa2 20/01/2004 05:23
173.- Pequeño álbum de fotos

Creditos: Bravenet

Nota: Aún sigo vivo amigos¡¡¡¡¡ Me cuesta trabajo luchar contra la abduzión ;-)

Para este script ten en cuenta lo siguiente:

Si vas a emplear más de 3 imágenes, cambia la siguiente línea...
if (document.images && thisImage < 2)
por el número de imagenes que vayas a usar

Código:


<script language="JavaScript">
<!--
var viewPix = new Array("http://www.tusitio.com/tuimagen.png","http://www.tusitio.com/tuimagen2.png","http://www.tusitio.com/tuimagen3.png")

var thisImage = 0

function doPast() {
if (document.images && thisImage > 0) {
thisImage--
document.myShow.src=viewPix[thisImage]
}
}
function doAfter() {
if (document.images && thisImage < 2) {
thisImage++
document.myShow.src=viewPix[thisImage]
}
}
// -->
</script>
<div align="center"><img name="myShow" src="http://www.tusitio.com/tuimagen.png" width="468" height="60"><br><a href="javascript:doPast()">Anterior</a>    <a href="javascript:doAfter()">Siguiente</a></div>

Espero que nos veamos pronto
Salu2 :adios:

jabakero 29/01/2004 19:27
174.- Abrir un pop-up y cerrar la ventana a la vez
 
Como abrir un pop-up y cerrar la ventana a la vez

Bien, creo que esto falta entre las FAQ's...

La he probado y me sirve bien :)

Código PHP:
<html>
<head>
<title>Launcher</title>
<script language="javascript">
function launch(){
x=window.open("previewforo.htm","WindowName","width=900,height=600,top=0,left=0,resizable=yes,scrollbars=yes,menubar=yes,toolbar=yes,status=yes,location=yes")
var ventana = window.self;
    ventana.opener = window.self;
    ventana.close();
}

</script>
<body>
<p><a href="javascript:launch()">Click aqui.</a></p>
</body>
</html> 

Carlitos 08/03/2004 12:51
175.- Validar Hora

P.- Quiero un script que me valide la hora

R.- Aquí lo tienes.

Versión 1.
Código:
<script>
// script para validar una hora en formato 24h. Por Carlitos ([email protected])//
function valida(str)
{
hora=str.value
if (hora.length!=4) {alert("introducir HHMM");return}
a=hora.charAt(0)
b=hora.charAt(1)
c=hora.charAt(2)
if (a>=2 && b>3) {alert("hora mal :(");return}
if (c>5) {alert("minutos mal :(");return}
alert("hora bien. :)")
}
</script>
Hora (HHMM):<input type="text" name="hhmm" size="4">
<input type="button" value="Valida" onclick="valida(hhmm)">
Versión 2. (Modificación de la versión 1 por AnaLezama)
Código:
<script language="JavaScript">
// Por AnaLezama
function CheckTime(str)
{
hora=str.value
if (hora=='') {return}
if (hora.length>8) {alert("Introdujo una cadena mayor a 8 caracteres");return}
if (hora.length!=8) {alert("Introducir HH:MM:SS");return}
a=hora.charAt(0) //<=2
b=hora.charAt(1) //<4
c=hora.charAt(2) //:
d=hora.charAt(3) //<=5
e=hora.charAt(5) //:
f=hora.charAt(6) //<=5
if ((a==2 && b>3) || (a>2)) {alert("El valor que introdujo en la Hora no corresponde, introduzca un digito entre 00 y 23");return}
if (d>5) {alert("El valor que introdujo en los minutos no corresponde, introduzca un digito entre 00 y 59");return}
if (f>5) {alert("El valor que introdujo en los segundos no corresponde");return}
if (c!=':' || e!=':') {alert("Introduzca el caracter ':' para separar la hora, los minutos y los segundos");return}
  </script>
}
<input type=text name=txtHora onBlur="CheckTime(this)" size=12 maxlength=10>
Puedes consultar este mensaje para más información.

Carlitos 13/03/2004 05:59
176.- Texto vertical

P.-Quiero poner un texto en vertical. ¿Cómo lo hago?

R.- Utilizando este código:
Código:
<script Language="JavaScript">
/*******************************
 Texto vertical. Por Carlitos. [email protected]
 Si usas este script, deja intactas estas líneas (créditos). Vale?
 También te agradecería un e-mail con tus comentarios.
*******************************/

function escribe(msg)
{
cont =0;
    while (cont<msg.length)
    {
      letra = msg.substring(cont,cont+1)
      document.write(letra+"<br>")
      cont+=1
    }
}
</script>
</head>
Y cuando queramos colocar un texto vertical en cualquier parte de nuestra página, llamaremos a la rutina así:
Código:
<script>escribe("hola caracola")</script>
Otra forma de poner texto vertical, se encuentra en la faq 33 de html.

caricatos 18/03/2004 01:24
177 - Submit a una ventana emergente (popup)

P. Quiero que un submit del form se muestre en una ventana emergente.

R. Hay que poner el target del form con un nombre para la ventana emergente y abrir esa ventana en el evento onsubmit... :pensando:

Ejemplo:

<form name="formulario" action="destino.php" target="ventanaForm" onsubmit="window.open('', 'ventanaForm', '')" method="post" >
...

Saludos :arriba:

Nota adicional:

Si se quiere enviar el formulario sin usar un botón submit (mediante la función submit() del formulario) debe abrirse la ventana antes (no serviría en tal caso el evento onsubmit)

function enviar() {
window.open("", "ventanaForm", "");
document.forms["formulario"].submit();
}

Modificado por ser sugerido en este mensaje: http://www.forosdelweb.com/f13/definir-tamano-ventana-form-con-target-_blank-319283/

:adios:

JavierB 24/03/2004 11:04
178.- Imprimir una parte de la página
 
P: ¿Como puedo imprimir solo la parte de la página que me interesa?

R: La idea es "ocultar", con css, los <div> donde pondremos, por ejemplo, las noticias y los enlaces que se utilizarán para imprimirlas. En el momento de imprimir se "hace visible" el <div> correspondiente.

He aquí un ejemplo:
Código PHP:
<html>
<head>
<style type="text/css">
@media print {
    div,a {display:none}
    .ver {display:block}
    .nover {display:none}
}
</style>
<script>
function impre(num) {
    document.getElementById(num).className="ver";
    print();
    document.getElementById(num).className="nover";
}
</script>
</head>

<body>
<div id="uno">
Artículo primero
</div>
<a href="#" onclick="impre('uno');return false">Imprime 1</a>
<div id="dos">
Artículo segundo
</div>
<a href="#" onclick="impre('dos');return false">Imprime 2</a>
<div id="tres">
Articulo tercero
</div>
<a href="#" onclick="impre('tres');return false">Imprime 3</a>
</body>
</html> 

caricatos 28/03/2004 16:16
179.- Precarga con barra de progreso
 
P: ¿Como hacer una precarga viendo el porcentaje de carga?

R: Para llevar el control de las imágenes que se cargan en memoria existe la propiedad "complete" que indica si están completamente cargadas.
Estas tres funciones sirven para ese control:

Código PHP:
function precargar()    {
    var dibujos = new Array(precargar.arguments.length);
    for (var i = 0; i < dibujos.length; i ++)    {
        dibujos[i] = new Image();
        dibujos[i].src = precargar.arguments[i]
    }
    return dibujos;
}

function precargados(dibujos)    {
    var parciales = true;
    for (var i = 0; i < dibujos.length; i ++)
        parciales = (parciales && dibujos[i].complete);
    return parciales;
}

function porciento(dibujos)    {
    var parciales = 0;
    for (var i = 0; i < dibujos.length; i ++)
        parciales += (dibujos[i].complete) ? 1 : 0;
    return parseInt(100 * parciales / dibujos.length);
} 
La idea es hacer un chequeo del estado de carga (precargados) y mostrar el porcentaje (porciento) que es fácilmente aplicable al estilo "width" de una capa. Por ejemplo:

Código PHP:
var imagenes;
function continuar()    {
    alert("Ok.");
}

function cargando()    {
    document.getElementById("estado").style.width = porciento(imagenes) + "%";
    if (precargados(imagenes))
        continuar();
    else
        setTimeout("cargando()", 100);
}

function ini()    {
    imagenes = new precargar("img0.jpg",
        "img1.jpg",
        "img2.jpg",
        "img3.jpg",
        "img4.jpg",
        "img5.jpg",
        "img6.jpg",
        "img7.jpg",
        "img8.jpg"
    );
    cargando();
} 
Donde pone continuar(), puede cambiarse el alert por cualquier otra cosa como por ejemplo una activación de un botón o un efecto rollover.

Y el código de la página tendría que tener un elemento con id="estado" para mostrar el porcentaje :pensando:
Por ejemplo:

<div style="position:relative; width: 100px; height: 20px; border: 1px" >
<div style="position:absolute; top: 0; left: 0; width:100%; height: 100%; background-color: blue" >
</div>
<div id="estado"
style="position:absolute; top: 0; left: 0; width: 1%; height: 100%; background-color: aqua" >
</div>
</div>

Se activaría con un evento como la carga de la página:
<body onload="ini()">

T4X 24/04/2004 23:25
180.- Dialogo Web (popUp sin menus contextuales )
 
P: Cómo abrir una ventana popUp sin menus contextuales ó mejor un Dialogo Web???????

R:

Bien, lo que tenemos que tener en cuenta es que el dialogo web maneja dos tipos de ventana:

showModalDialog: Permite solo interactuar con la ventana abierta, o sea, que si querés regresar a la ventana que la abrió tienes que cerrar este dialogo web.

showModelessDialog: Permite interactuar con las 2 ventanas (con la que la abriste y la abierta).

Lo anterior lo resalto para que cuando crees uno ten en cuenta que a tu gusto puedes hacer una interacción con el usuario.


Bien, en marcha, este es el argumento simple para crear una ventana modal (showmodalDialog):

Código:
<script language="javascript">
 
function abrirDialogoModal() {
showModalDialog('pagina.htm','','dialogWidth:505px; dialogHeight:325px;status:no;resizable:yes');
}
</script>
Como puedes ver, lo que estoy diciendo en el código anterior es que abra una ventana modal con parametros (ancho, alto y si prefieres Barra de Estado), y lo resaltado en rojo en el script son los parametros de ancho y alto que le quieras dar a la ventana...

Ahora, lo mismo puedes hacer con showModelessDialog:

Código:
<script language="javascript">
 
function abrirDialogoModeless() {
showModelessDialog('pagina.htm','','status:no;resizable:yes');
}
</script>
Ten en cuenta que esta función solo se desempeña en IE 5.5 y superior, aunque se está investigando si esta función de JavaScript tambien sea compatible con otros browsers.

Adicionalmente, en el Dialogo Web, se crean otros botones, si los quieres colocar o no:

help = Icono de ayuda
maximize = Icono de maximizar y de restaurar
minimize = Icono de minimizar

Si estos iconos los quieres colocar en tu ventana simplemente los colocarías asi:

Código:
showModalDialog('pagina.htm','','status:no;help:yes ó no;otros parametros');
He aqui un ejemplo para cargar una ventana web

Ver ejemplo

caricatos 29/04/2004 16:14
181.- Insertar emoticones en un textarea
 
P: ¿Como insertar emoticones en un textarea?

R: Voy a intentar repetir este mensaje porque he visto que se fué :pensando:

Para añadir texto en un textarea simple basta con hacer una función así:

function poner(este_texto) {
el_textarea.value += este_texto;
}

... luego los botones o los elementos activos para insertar emoticones (pueden ser los mismos emoticones) tendrían que tener asociada la función poner con el emoticón adecuado:
<input type=button onclick="poner('; - )')" value="; - )" />

Por último hay que convertir cada ocurrencia del emoticón con la imagen asociada (toda la etiqueta)
el_texto = el_textarea.value.split("; - )").join("<img src=smyle.gif />");

El método split convierte la cadena que lo usa en un array donde se separan los elementos por el parámetro que se pasa... luego join vuelve a generar la cadena, usando el parámetro como nexo.

P.D: Suopngo que no habrá mucha diferencia con la FAQ original.

:adios:

ludovico2000 10/05/2004 11:00
182.- Pasar varios parámetros a una misma función
 
P: ¿Cómo puedo utilizar una misma función para diferentes acciones que utilice varios parámetros?

R:

En este ejemplo queremos hacer que sobre diferentes áreas de mapa en una imagen apunten a diferentes vínculos que abran una ventana que en cada caso tiene un tamaño determinado.

Para ello, utilizamos una sola función:


<SCRIPT LANGUAGE="Javascript">
function abrir(pag,alto,ancho)
{
window.open(pag + ".htm","","height=" + alto +","+ "width=" + ancho);
};
</SCRIPT>

y en las zonas activas pondremos:

onClick="javascript:abrir('primera',540,400)"
onClick="javascript:abrir('segunda',20,100)"

T4X 10/05/2004 13:51
183.- Cómo cerrar una ventana preguntando si desea cerrarla o no
 
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 10/05/2004 19:16
184.- Confirmar cierre de ventana
 
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 24/05/2004 02:49
185.- Recoger valores de un formulario
 
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 01/06/2004 17:43
186.- Abrir enlace en un popup
 
P: ¿Como abrir un enlace en un popup?

R: Tal vez sea la manera menos usada, pero creo que la más fácil :pensando: , 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> 
:adios:

caricatos 03/06/2004 04:55
187.- Title mejorado (tooltip)
 
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.

:adios:

ludovico2000 11/06/2004 04:04
188.- Abreviar una función para utilizarla muchas veces
 
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 :adios: por la "inspiración"-

COMPARTIENDO, MEJORAMOS TODOS

caricatos 14/06/2004 05:42
189.- DOM: Insertar nuevos elementos.
 
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.

:adios:

epa2 15/07/2004 09:04
190.-Aviso anti-popup
 
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>
:adios:

epplestun 23/07/2004 04:07
191.- Textos alternativos sin hacer uso de la etiqueta alt
 
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_ 03/08/2004 11:41
192. Resolución de pantalla
 
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 04/08/2004 03:00
Añadir a Favoritos
 
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 19/08/2004 01:05
194.- Como anular history en nuestra web
 
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 27/08/2004 10:36
195.- Seleccion en un select (formularios)
 
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... :pensando:

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)

:adios:

Khronos 02/09/2004 10:44
196.- Ocultar el contenido de una página hasta que se carguen todos sus elementos
 
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 29/09/2004 08:11
197.- Generador de claves
 

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 08/10/2004 04:21
FAQ198: DOM: Eliminar elementos.
 
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.

:adios:

epa2 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 02/11/2004 23:30
200.- Otra forma de apertura lateral de una ventana con variantes.
 
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 11/11/2004 13:46
201.- css según resolución
 
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 16/11/2004 06:26
202.-Citas aleatorias
 
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 :-)


La zona horaria es GMT -6. Ahora son las 23:48.
Página 4 de 6 123 4 56
Mostrar 50 mensajes desde este tema en una página

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2025, Jelsoft Enterprises Ltd.