Foros del Web
Página 3 de 6 12 3 456
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/)

ferent 06/02/2003 10:36
101 - Ordenar campos de una tabla segun columna

P. ¿Cómo puedo ordenar los datos de una tabla dependiendo de cada columna?
R. Muy sencillo, consta de dos pasos.

1º Añade este Script en el head
Código PHP:
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function compare(sVal1, sVal2){
//para cambiar el orden (ascendente o descendente) se debe 
//cambiar a negativo el primer 1 y a positivo el segundo, segun convenga
 if (sVal1 < sVal2) return 1;
 if (sVal1 > sVal2) return -1;
 return 0;
}
function setDataType(cValue)
  {
    // THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY
    // SORTING WHEN IN THE SORT FUNCTION
    var isDate = new Date(cValue);
    if (isDate == "NaN")
      {
        if (isNaN(cValue))
          {
            // THE VALUE IS A STRING, MAKE ALL CHARACTERS IN
            // STRING UPPER CASE TO ASSURE PROPER A-Z SORT
            cValue = cValue.toUpperCase();
            return cValue;
          }
        else
          {
            // VALUE IS A NUMBER, TO PREVENT STRING SORTING OF A NUMBER
            // ADD AN ADDITIONAL DIGIT THAT IS THE + TO THE LENGTH OF
            // THE NUMBER WHEN IT IS A STRING
            var myNum;
            myNum = String.fromCharCode(48 + cValue.length) + cValue;
            return myNum;
          }
        }
  else
      {
        // VALUE TO SORT IS A DATE, REMOVE ALL OF THE PUNCTUATION AND
        // AND RETURN THE STRING NUMBER
        //BUG - STRING AND NOT NUMERICAL SORT .....
        // ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5  etc.)
        var myDate = new String();
        myDate = isDate.getFullYear() + " " ;
        myDate = myDate + isDate.getMonth() + " ";
        myDate = myDate + isDate.getDate(); + " ";
        myDate = myDate + isDate.getHours(); + " ";
        myDate = myDate + isDate.getMinutes(); + " ";
        myDate = myDate + isDate.getSeconds();
        //myDate = String.fromCharCode(48 + myDate.length) + myDate;
        return myDate ;
      }
  }
function sortTable(col, tableToSort)
  {
    var iCurCell = col + tableToSort.cols;
    var totalRows = tableToSort.rows.length;
    var bSort = 0;
    var colArray = new Array();
    var oldIndex = new Array();
    var indexArray = new Array();
    var bArray = new Array();
    var newRow;
    var newCell;
    var i;
    var c;
    var j;
    // ** POPULATE THE ARRAY colArray WITH CONTENTS OF THE COLUMN SELECTED
    for (i=1; i < tableToSort.rows.length; i++)
      {
        colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText);
        iCurCell = iCurCell + tableToSort.cols;
      }
    // ** COPY ARRAY FOR COMPARISON AFTER SORT
    for (i=0; i < colArray.length; i++)
      {
        bArray[i] = colArray[i];
      }
    // ** SORT THE COLUMN ITEMS
    //alert ( colArray );
    colArray.sort(compare);
    //alert ( colArray );
    for (i=0; i < colArray.length; i++)
      { // LOOP THROUGH THE NEW SORTED ARRAY
        indexArray[i] = (i+1);
        for(j=0; j < bArray.length; j++)
          { // LOOP THROUGH THE OLD ARRAY
            if (colArray[i] == bArray[j])
              {  // WHEN THE ITEM IN THE OLD AND NEW MATCH, PLACE THE
                // CURRENT ROW NUMBER IN THE PROPER POSITION IN THE
                // NEW ORDER ARRAY SO ROWS CAN BE MOVED ....
                // MAKE SURE CURRENT ROW NUMBER IS NOT ALREADY IN THE
                // NEW ORDER ARRAY
                for (c=0; c<i; c++)
                  {
                    if ( oldIndex[c] == (j+1) )
                    {
                      bSort = 1;
                    }
                      }
                      if (bSort == 0)
                        {
                          oldIndex[i] = (j+1);
                        }
                          bSort = 0;
                        }
          }
    }
  // ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE ....
  for (i=0; i<oldIndex.length; i++)
    {
      newRow = tableToSort.insertRow();
      for (c=0; c<tableToSort.cols; c++)
        {
          newCell = newRow.insertCell();
          newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML;
        }
      }
  //MOVE NEW ROWS TO TOP OF TABLE ....
  for (i=1; i<totalRows; i++)
    {
      tableToSort.moveRow((tableToSort.rows.length -1),1);
    }
  //DELETE THE OLD ROWS FROM THE BOTTOM OF THE TABLE ....
  for (i=1; i<totalRows; i++)
    {
      tableToSort.deleteRow();
    }
  }
//  End -->
</script> 
2º Paso: Crear la tabla

Código PHP:
//indicar el número de columnas, teniendo cuidado de que no haya colspan
<table name="rsTable" id="rsTable" cols=6>
<tr><td><A href="java script:sortTable(0, rsTable">ID</A></td>
    <td><A href="java script:sortTable(1, rsTable);">Nombre</A></td>
    <td><A href="java script:sortTable(2, rsTable);">Apellidos</A></td>

//etc... 
Y lo demás depende de ustedes. :-D

Kaopectate 06/02/2003 11:26
102.- Extraer información de una opción seleccionada en un select
 
P: ¿Como puedo extraer de un elemento select el índice o el valor o el nombre desplegado en la opción seleccionada?

R:
Código PHP:
<html>
 <head>
  <script language="JavaScript">
   function cambia(){
    with (document.frm){
     indice.value = String(selector.selectedIndex);
     opcion.value = selector.options[selector.selectedIndex].text;
     valor.value = selector.options[selector.selectedIndex].value;
    }
   }
  </script>
 </head>
 <body>
  <form name="frm">
   Indice:<input type="text" name="indice"><br>
   Opcion:<input type="text" name="opcion"><br>
   Valor: <input type="text" name="valor"><br>
   Seleccione:<select name="selector" onchange="cambia()">
    <option>Seleccione un valor</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
   </select>
  </form>
 </body>
</html> 

KarlanKas 12/02/2003 12:08
103. Una imagen linkable cada semana
 
P.- ¿Cómo puedo hacer que aparezca una imagen linkable nueva cada semana en mi web?

R.- Por medio de este código:

Código PHP:
<html>
<head>

<script>
//Script original de KarlanKas para Forosdelweb.com

var bisiesto=0 //Si es año bisiesto pon 1

enlace=new Array;
alt=new Array;
imagen=new Array;

//-------ENLACES ALT E IMAGEN PARA CADA SEMANA------------

enlace[1]="http://www.loslunesalsol.com/";
alt[1]="esta es la imagen del lunes"
imagen[1]="http://www.cartelia.net/fotos/l/loslunesalsol.jpg"

enlace[2]="http://www.martes.com";
alt[2]="esta es la imagen del martes";
imagen[2]="http://www.martes.com/images/marteshomesk.gif";

enlace[3]="http://www.wednesday.com";
alt[3]="Esta es la imagen del miércoles"
imagen[3]="http://www.wednesday.com/images/logo.gif";

enlace[4]="http://www.thursday.com/";
alt[4]="Es que en español no había..."
imagen[4]="http://www.thursday.com/5.jpg";

enlace[5]="http://www.tgifridays.com/index1.html";
alt[5]="No podía ser de otra forma!";
imagen[5]="http://www.tgifridays.com/index_files/newindex.gif";

enlace[6]="http://www.sabado.info";
alt[6]="Te gusta la música?";
imagen[6]="http://www.sabado.info/image/guitar.gif";

//_---------SEGUIR HASTA LA SEMANA 52--------------------------

//----------NO EDITAR A PARTIR DE AQUÍ---------------------
var cantidadDeDias=0;
var semana=1
diaspormes=new Array(31,28+bisiesto,31,30,31,30,31,31,30,31,30,31
);
hoy=new Date;
anio=hoy.getYear()
primero=new Date(anio,0,1)
diasem=primero.getDay()
dia=hoy.getDate();
mes=hoy.getMonth();
for (a=0;a<mes;a++){
cantidadDeDias=cantidadDeDias+diaspormes[a]
}
cantidadDeDias=cantidadDeDias+dia;
for (a=0;a<cantidadDeDias;a++){
diasem=diasem+1
if (diasem>6){diasem=0;semana=semana+1}
}
//---------------------------------------------------------
</script>

</head>

<body>
<script>
document.write("<A HREF="+enlace[semana]+"><img src="+imagen[semana]+" ALT='"+alt[semana]+"'></A>");
</script>
</body>
</html> 

KarlanKas 12/02/2003 12:33
104.- Enlaces autoexplicativos
 
P.- ¿Cómo poner enlaces con una explicación desplegable del mismo abajo?

R.- Así:
[Ver Ejemplo]

Código PHP:

<html>
<head>
<style>
body{    font:normal 10px/20px verdana;}

blockquote{ border:solid 1px black;
            font:normal 10px/12px verdana;
            background:#ffffcc;
            margin:1px 1px 1px 20px;
            padding:5px 5px 5px 5px;
            width:500px;
        }
.norm{    color:blue;
        border:none;
        font:normal 10px/10px verdana;
          text-decoration:underline;
    }
img{    border:none;
    }
</style>

<script>

//Script original de KarlanKas con la colaboración de caricatos para Forosdelweb.com


explicacion=new Array;
enlace=new Array;
texto=new Array;

//-------------------------- EDITABLE ---------------------------
enlace[0]="http://www.forosdelweb.com";
texto[0]="Ir a foros del web."
explicacion[0]="Foros del Web es el foro de programación hispana más visitado por los habitantes de la luna de Gaminedes.";

enlace[1]="http://www.webareyou.com";
texto[1]="Visitar Web Are You. La página en eterna construcción."
explicacion[1]="Todos los seres abducidos tienen, desde la LSSI, la obligación de tener una página web explicando sus experiencias. Aquí está la mía.";

enlace[2]="http://www.estiloweb.com";
texto[2]="Necesitas ayuda?"
explicacion[2]="Cuando uno se enfrenta a la realización de una página web siempre le surgen dudas... con webestilo.com se resuelve más de una...";

enlace[3]="http://www.tunait.com";
texto[3]="Quieres charlar, divertirte y demás con la página de tunait?"
explicacion[3]="Nuestra querida tunait nos regala una magnífica página donde su plato fuerte es un magnífico foro lleno de buen rollito y diversión... no os lo perdais!";

enlace[4]="http://www.pepemolina.com";
texto[4]="Qué tal visitar la página de caricatos?"
explicacion[4]="Quien no recuerda el generador de código o el enviador de postales...? Caricatos no sólo responde, sino que genera nuevas inquietudes a cada momento. Visitad la página donde recoge todos sus avances!";

// SE PUEDE PONER TANTOS COMO SE QUIERA

//---------------------------------FIN DE CÓDIGO EDITABLE--------------------------------

function anadir(texto,esto){
t=texto
texto=document.getElementById("enlace"+texto)
if(!texto.primero){texto.primero=texto.innerHTML}
if(isNaN(texto.ensenar)){texto.ensenar=-1}
var pepe=texto.ensenar
pepe=pepe*-1
texto.ensenar=pepe
if (texto.ensenar==1){
esto.innerHTML="-";
texto.innerHTML=texto.innerHTML+"<blockquote>"+explicacion[t]+"</blockquote>"

}
if (texto.ensenar==-1){
;
texto.innerHTML=texto.primero
}


}

</script>
<title>FAQ 104.- Enlaces autoexplicativos </title>
</head>

<body>

<script>
for (w=0;w<enlace.length;w++){
document.writeln('<div id="enlace'+w+'"><a onfocus="blur()" href="#" onclick="anadir('+w+',this)">+</a><a class="norm" HREF="'+enlace[w]+'" target="_blank">'+texto[w]+'</a></div>');
}
</script>
</body>
</html> 

TurKa 13/02/2003 10:16
105.- Selects
 
P: ¿Como puedo hacer para que al cambiar la opción seleccionada en un combo, cambien también las opciones disponibles en otro combo indicando la URL de destino?

R: [ver ejemplo]
Código PHP:
<!-- basado en el código original propuesto por Kaopectate -->
<html>
 <head>
  <script language="JavaScript">

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

   function cambia(oCntrl){
    switch (document.frm.pais.selectedIndex){
     case 0: 
      addOpt(oCntrl,  0, "Ciudad de México", "http://www.mexico.com");
      addOpt(oCntrl,  1, "Monterrey", "http://www.monterrey.com");
      addOpt(oCntrl,  2, "Guadalajara", "http://www.guadalajara.com");
      break;
     case 1: 
      addOpt(oCntrl,  0, "Madrid", "http://www.madrid.com");
      addOpt(oCntrl,  1, "Barcelona", "http://www.barcelona.com");
      addOpt(oCntrl,  2, "San Sebastián", "http://www.sansebastian.com");
      break;
     case 2: 
      addOpt(oCntrl,  0, "Caracas", "http://www.caracas.com");
      addOpt(oCntrl,  1, "Maracay", "http://www.maracay.com");
      addOpt(oCntrl,  2, "Valencia", "http://www.valencia.com");
      break;
    }
   }
  </script>
 </head>
 <body>
  <form name="frm">
   <table border="0" width="482">
    <tr>
     <td width="25">
      Pais
     </td>
     <td width="89">
      <select name="pais" onchange="cambia(document.frm.ciudad)">
       <option value="Mex">Mexico</option>
       <option value="Esp">España</option>
       <option value="Ven">Venezuela</option>
      </select>
     </td>
     <td width="6">
      &nbsp;
     </td>
     <td width="44">
      Ciudad
     </td>
     <td width="296">
      <select name="ciudad" onChange="location.href=this.form.ciudad.options[this.form.ciudad.selectedIndex].value">
       <option value="0">Ciudad de México</option>
       <option value="1">Monterrey</option>
       <option value="2">Guadalajara</option>
      </select> <input type="button" value="Ir a..." onClick="location.href=this.form.ciudad.options[this.form.ciudad.selectedIndex].value"</td>
    </tr>
   </table>
  </form>
 </body>
</html> 

KarlanKas 15/02/2003 08:56
106. Cómo cambiar una imagen al hacer un MouseOver
 

P.-¿Cómo puedo cambiar la imagen de fondo de la página o una imagen cualquiera de la misma al hacer un mouseOver sobre un enlace?
R.-Con este código:[Ver ejemplo]


Código PHP:
<html>
<head>
<style>
A{text-decoration:none;
color:#330099;
font:bold 10px/15px verdana;
}
A:HOVER{text-decoration:underline;}
</style>
    <title>Ejemplillo</title>
    <script>

// Quiero agradecer públicamente la gran ayuda de tunait.
// Por enseñarme, entre otras muchas cosas, la importancia de la elección de la denominación de variables. 
// Estas variables pretenden ser una aplicación práctica de tantas conversaciones sobre las mismas. X·D



    codigoQueTeAhorrasPicar="";
    
    function crear(a,b,c,d){
    this.tezto=a;
    this.ondeVa=b;
    this.tieneSuImagensitaYTo=new Image
    this.tieneSuImagensitaYTo.src=c;
    if(d){this.queFotoCambio=d}
    }
//unEnlasito=new crear([TEXTO QUE APARECE EN EL ENLACE],[DESTINO DEL ENLACE],[RUTA DE LA IMAGEN],[ID DE LA IMAGEN QUE CAMBIA- SI SE DEJA EN BLANCO SE CAMBIA EL FONDO DE LA PÁGINA]);
    unEnlasito=new Array;
    unEnlasito[0]=new crear("Veamos la página de Tunait","http://www.tunait.com","http://www.tunait.com/encuentros/encuentrosb.jpg","macario");
    unEnlasito[1]=new crear("Veamos la de Caricatos","http://www.pepemolina.com","http://www.forosdelweb.com/avatar.php?userid=18599&dateline=1037047895");
    unEnlasito[2]=new crear("Quieres ver la página de Web Are You?","http://www.karlankas.net","http://www.webareyou.com/logo.jpg");

// fonditoMono=[EL FONDO QUE SE QUIERE PARA LA PÁGINA]    

    fonditoMono="White url('http://www.klasic.org/img/klasic.jpg') no-repeat fixed center";
    
//---------------------------------------- NO TOQUES A PARTIR DE AQUI SI NO SABES LO QUE HACES ---------------------
    for (principio=0;principio<unEnlasito.length;principio++){
    codigoQueTeAhorrasPicar=codigoQueTeAhorrasPicar+"<a href="+unEnlasito[principio].ondeVa+" onmouseout='noQuieroVe(unEnlasito["+principio+"])' onmouseover='quieroVe(unEnlasito["+principio+"])'>"+unEnlasito[principio].tezto+"</a><br>";
    }
    
    function quieroVe(etoMimamente){
    if (etoMimamente.queFotoCambio!=null){
    fotilloPaCambia=document.getElementById(etoMimamente.queFotoCambio);
    fotilloPaCambia.src=etoMimamente.tieneSuImagensitaYTo.src;
    }
    else{cuerpoSerrano.style.background="White url("+etoMimamente.tieneSuImagensitaYTo.src+") no-repeat fixed center";}
    }
    function noQuieroVe(etoMimamente){
    if (etoMimamente.queFotoCambio!=null){
    fotilloPaCambia=document.getElementById(etoMimamente.queFotoCambio);
    fotilloPaCambia.style.visibility="hidden";
    }
    else{cuerpoSerrano.style.background=fonditoMono;}
    }
    
//----------------------------------- HALE, YA PUEDES TOCAR ----------//
        </script>
</head>

<body id="cuerpoSerrano" onload="document.getElementById('cuerpoSerrano').style.background=fonditoMono">

<script>document.write(codigoQueTeAhorrasPicar)</script>

<!-- ESTAS IMAGENES SON DE PRUEBA. 'TUNAIT' CAMBIA LA FOTO MACARIO. 
SI ESTAS IMAGENES TIENEN CONTENIDO DESDE EL PRINCIPIO QUITA EL ONLOAD Y EL STYLE---->

<img id=pepe style="visibility:hidden" onLoad="this.style.visibility='visible'"><br>

<img id=juan style="visibility:hidden" onLoad="this.style.visibility='visible'"><br>

<img id=macario style="visibility:hidden" onLoad="this.style.visibility='visible'"><br>

</body>
</html> 

Kaopectate 18/02/2003 17:48
107.- Sumar (o restar) días a una fecha
 
P: ¿Como puedo sumar o restar días a una fecha?

R: [ver ejemplo]

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

  var aFinMes = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

  function finMes(nMes, nAno){
   return aFinMes[nMes - 1] + (((nMes == 2) && (nAno % 4) == 0)? 1: 0);
  }

   function padNmb(nStr, nLen, sChr){
    var sRes = String(nStr);
    for (var i = 0; i < nLen - String(nStr).length; i++)
     sRes = sChr + sRes;
    return sRes;
   }

   function makeDateFormat(nDay, nMonth, nYear){
    var sRes;
    sRes = padNmb(nDay, 2, "0") + "/" + padNmb(nMonth, 2, "0") + "/" + padNmb(nYear, 4, "0");
    return sRes;
   }
   
  function incDate(sFec0){
   var nDia = parseInt(sFec0.substr(0, 2), 10);
   var nMes = parseInt(sFec0.substr(3, 2), 10);
   var nAno = parseInt(sFec0.substr(6, 4), 10);
   nDia += 1;
   if (nDia > finMes(nMes, nAno)){
    nDia = 1;
    nMes += 1;
    if (nMes == 13){
     nMes = 1;
     nAno += 1;
    }
   }
   return makeDateFormat(nDia, nMes, nAno);
  }

  function decDate(sFec0){
   var nDia = Number(sFec0.substr(0, 2));
   var nMes = Number(sFec0.substr(3, 2));
   var nAno = Number(sFec0.substr(6, 4));
   nDia -= 1;
   if (nDia == 0){
    nMes -= 1;
    if (nMes == 0){
     nMes = 12;
     nAno -= 1;
    }
    nDia = finMes(nMes, nAno);
   }
   return makeDateFormat(nDia, nMes, nAno);
  }

  function addToDate(sFec0, sInc){
   var nInc = Math.abs(parseInt(sInc));
   var sRes = sFec0;
   if (parseInt(sInc) >= 0)
    for (var i = 0; i < nInc; i++) sRes = incDate(sRes);
   else
    for (var i = 0; i < nInc; i++) sRes = decDate(sRes);
   return sRes;
  }

  function recalcF1(){
   with (document.formulario){
    fecha1.value = addToDate(fecha0.value, increm.value);
   }
  }

 </script>
</head>
<body>
 <form name="formulario">
  <table>
   <tr>
    <td align="right">
     Fecha (dd/mm/aaaa):
    </td>
    <td>
     <input type="text" name="fecha0" size="10">
    </td>
   </tr>
   <tr>
    <td align="right">
     Incremento:
    </td>
    <td>
     <input type="text" name="increm" size="3">
    </td>
   </tr>
   <tr>
    <td align="right">
     Resultado (dd/mm/aaaa):
    </td>
    <td>
     <input type="text" name="fecha1" disabled size="10">
    </td>
   </tr>
   <tr>
    <td colspan="2" align="center">
     <input type="button" onclick="recalcF1()" value="Calcular">
    </td>
   </tr>
  </table>
 </form>
</body>
</html> 

epa2 19/02/2003 02:49
108.- Saludar al visitante por su país de procedencia.

P: ¿Como puedo saludar al visitante según su pais de origen?.

R: Con este código.

Tomado de: Elosan

Código:
<script>
 nul = "";
 if (navigator.userLanguage == "es") nul = "España";
 if (navigator.userLanguage == "es-mx") nul = "Mejico";
 if (navigator.userLanguage == "es-gt") nul = "Guatemala";
 if (navigator.userLanguage == "es-cr") nul = "Costa Rica";
 if (navigator.userLanguage == "es-do") nul = "Republica Dominicana";
 if (navigator.userLanguage == "es-pa") nul = "Panama";
 if (navigator.userLanguage == "es-ve") nul = "Venezuela";
 if (navigator.userLanguage == "es-co") nul = "Colombia";
 if (navigator.userLanguage == "es-pe") nul = "Perú";
 if (navigator.userLanguage == "es-ar") nul = "Argentina";
 if (navigator.userLanguage == "es-ec") nul = "Ecuador";
 if (navigator.userLanguage == "es-cl") nul = "Chile";
 if (navigator.userLanguage == "es-uy") nul = "Uruguay";
 if (navigator.userLanguage == "es-py") nul = "Paraguay";
 if (navigator.userLanguage == "es-bo") nul = "Bolivia";
 if (navigator.userLanguage == "es-sv") nul = "El Salvador";
 if (navigator.userLanguage == "es-hn") nul = "Honduras";
 if (navigator.userLanguage == "es-ni") nul = "Nicaragua";
 if (navigator.userLanguage == "es-pr") nul = "Puerto Rico";
 if (nul == "") document.write("Gracias por visitarnos.");
 else document.write("Gracias por visitarnos desde " + nul +".")
</script>

Kaopectate 19/02/2003 11:27
109.- Valores iniciales de un rango de fechas
 
P: ¿Como puedo asignar los valores iniciales a un rango de fechas?

R: [ver ejemplo]

Código PHP:
<html>
 <head>
  <script language="JavaScript">
  
   // Funciones comunes a todos los métodos de selección

   function padNmb(nStr, nLen, sChr){
    var sRes = String(nStr);
    for (var i = 0; i < nLen - String(nStr).length; i++)
     sRes = sChr + sRes;
    return sRes;
   }

   function makeDateFormat(nDay, nMonth, nYear){
    var sRes;
    sRes = padNmb(nDay, 2, "0") + "/" + padNmb(nMonth, 2, "0") + "/" + padNmb(nYear, 4, "0");
    return sRes;
   }
   
   function prevMonth(nMonth){
    return ((nMonth + 10) % 12) + 1;
   }

   function prevMonth_Year(nMonth, nYear){
    return nYear - (((nMonth + 10) % 12) + 1 == 12? 1: 0);
   }

   function lastDayOfMonth(nMonth, nYear){
    var aMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    if ((nMonth == 2) && (nYear % 4 == 0))
     return 29;
    else
     return aMonth[nMonth - 1];
   }

   function incDate(sFec0){
    var nDia = parseInt(sFec0.substr(0, 2), 10);
    var nMes = parseInt(sFec0.substr(3, 2), 10);
    var nAno = parseInt(sFec0.substr(6, 4), 10);
    nDia += 1;
    if (nDia > lastDayOfMonth(nMes, nAno)){
     nDia = 1;
     nMes += 1;
     if (nMes == 13){
      nMes = 1;
      nAno += 1;
     }
    }
    return makeDateFormat(nDia, nMes, nAno);
   }

   function decDate(sFec0){
    var nDia = parseInt(sFec0.substr(0, 2), 10);
    var nMes = parseInt(sFec0.substr(3, 2), 10);
    var nAno = parseInt(sFec0.substr(6, 4), 10);
    nDia -= 1;
    if (nDia == 0){
     nMes -= 1;
     if (nMes == 0){
      nMes = 12;
      nAno -= 1;
     }
     nDia = lastDayOfMonth(nMes, nAno);
    }
    return makeDateFormat(nDia, nMes, nAno);
   }

   function addToDate(sFec0, nInc){
    var nIncAbs = Math.abs(nInc);
    var sRes = sFec0;
    if (nInc >= 0)
     for (var i = 0; i < nIncAbs; i++) sRes = incDate(sRes);
    else
     for (var i = 0; i < nIncAbs; i++) sRes = decDate(sRes);
    return sRes;
   }

   // Funciones individuales de cada método de selección

   // Esta semana completa (Lun -> Dom)
   function setDefaults1(oFrom, oTo){
    var dToday = new Date();
    var nDay = dToday.getDate();
    var nMonth = dToday.getMonth() + 1;
    var nYear = dToday.getYear();
    var nDOW = dToday.getDay();
    var sFirstDate, sLastDate;

    if (nDOW == 0) nDOW = 7;
    sFirstDate = addToDate(makeDateFormat(nDay, nMonth, nYear), -1 * (nDOW - 1));
    sLastDate = addToDate(sFirstDate, 6);
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   // Lo que va de esta semana (Lun -> Hoy)
   function setDefaults2(oFrom, oTo){
    var dToday = new Date();
    var nDay = dToday.getDate();
    var nMonth = dToday.getMonth() + 1;
    var nYear = dToday.getYear();
    var nDOW = dToday.getDay();
    var sFirstDate, sLastDate;

    if (nDOW == 0) nDOW = 7;
    sLastDate = makeDateFormat(nDay, nMonth, nYear);
    sFirstDate = addToDate(sLastDate, -1 * (nDOW - 1));
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   // La semana pasada (Lun -> Dom)
   function setDefaults3(oFrom, oTo){
    var dToday = new Date();
    var nDay = dToday.getDate();
    var nMonth = dToday.getMonth() + 1;
    var nYear = dToday.getYear();
    var nDOW = dToday.getDay();
    var sFirstDate, sLastDate;

    if (nDOW == 0) nDOW = 7;
    sLastDate = addToDate(makeDateFormat(nDay, nMonth, nYear), -1 * nDOW);
    sFirstDate = addToDate(sLastDate, -6);
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   // Los últimos siete días
   function setDefaults4(oFrom, oTo){
    var dToday = new Date();
    var nDay = dToday.getDate();
    var nMonth = dToday.getMonth() + 1;
    var nYear = dToday.getYear();
    var sFirstDate, sLastDate;

    sLastDate = makeDateFormat(nDay, nMonth, nYear);
    sFirstDate = addToDate(sLastDate, -6);
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   // Este mes completo
   function setDefaults5(oFrom, oTo){
    var dToday = new Date();
    var nMonth = dToday.getMonth() + 1;
    var nYear = dToday.getYear();
    var sFirstDate, sLastDate;

    sFirstDate = makeDateFormat(1, nMonth, nYear);
    sLastDate = makeDateFormat(lastDayOfMonth(nMonth, nYear), nMonth, nYear);
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   // Lo que va de este mes
   function setDefaults6(oFrom, oTo){
    var dToday = new Date();
    var nDay = dToday.getDate();
    var nMonth = dToday.getMonth() + 1;
    var nYear = dToday.getYear();
    var sFirstDate, sLastDate;

    sFirstDate = makeDateFormat(1, nMonth, nYear);
    sLastDate = makeDateFormat(nDay, nMonth, nYear);
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   // El mes pasado
   function setDefaults7(oFrom, oTo){
    var dToday = new Date();
    var nMonth = dToday.getMonth() + 1;
    var nYear = dToday.getYear();
    var sFirstDate, sLastDate;

    nYear = prevMonth_Year(nMonth, nYear);
    nMonth = prevMonth(nMonth);
    sFirstDate = makeDateFormat(1, nMonth, nYear);
    sLastDate = makeDateFormat(lastDayOfMonth(nMonth, nYear), nMonth, nYear);
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   // Los últimos treinta días
   function setDefaults8(oFrom, oTo){
    var dToday = new Date();
    var nDay = dToday.getDate();
    var nMonth = dToday.getMonth() + 1;
    var nYear = dToday.getYear();
    var sFirstDate, sLastDate;

    sLastDate = makeDateFormat(nDay, nMonth, nYear);
    sFirstDate = addToDate(sLastDate, -29);
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   // Este año completo
   function setDefaults9(oFrom, oTo){
    var dToday = new Date();
    var nYear = dToday.getYear();
    var sFirstDate, sLastDate;

    sFirstDate = makeDateFormat(1, 1, nYear);
    sLastDate = makeDateFormat(31, 12, nYear);
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   // Lo que va de este año
   function setDefaults10(oFrom, oTo){
    var dToday = new Date();
    var nDay = dToday.getDate();
    var nMonth = dToday.getMonth() + 1;
    var nYear = dToday.getYear();
    var sFirstDate, sLastDate;

    sFirstDate = makeDateFormat(1, 1, nYear);
    sLastDate = makeDateFormat(nDay, nMonth, nYear);
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   // El año pasado
   function setDefaults11(oFrom, oTo){
    var dToday = new Date();
    var nYear = dToday.getYear();
    var sFirstDate, sLastDate;

    sFirstDate = makeDateFormat(1, 1, nYear - 1);
    sLastDate = makeDateFormat(31, 12, nYear - 1);
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   // Los últimos 365 días
   function setDefaults12(oFrom, oTo){
    var dToday = new Date();
    var nDay = dToday.getDate();
    var nMonth = dToday.getMonth() + 1;
    var nYear = dToday.getYear();
    var sFirstDate, sLastDate;

    sLastDate = makeDateFormat(nDay, nMonth, nYear);
    sFirstDate = addToDate(sLastDate, -364);
    oFrom.value = sFirstDate;
    oTo.value = sLastDate;
   }

   function setDefaults(oFrom, oTo, nMeth){
    switch (nMeth){
     case 0: 
      alert("");
      break;
     case 1:
      setDefaults1(oFrom, oTo);
      break;
     case 2:
      setDefaults2(oFrom, oTo);
      break;
     case 3:
      setDefaults3(oFrom, oTo);
      break;
     case 4:
      setDefaults4(oFrom, oTo);
      break;
     case 5:
      setDefaults5(oFrom, oTo)
      break;
     case 6:
      setDefaults6(oFrom, oTo)
      break;
     case 7:
      setDefaults7(oFrom, oTo)
      break;
     case 8:
      setDefaults8(oFrom, oTo)
      break;
     case 9:
      setDefaults9(oFrom, oTo)
      break;
     case 10:
      setDefaults10(oFrom, oTo)
      break;
     case 11:
      setDefaults11(oFrom, oTo)
      break;
     case 12: 
      setDefaults12(oFrom, oTo)
      break;
    }
   }

  </script>
 </head>
 <body>
  <form name="formulario">
   <table border="0">
    <tr>
     <td colspan="2" style="font-family: helvetica; text-align: center; font-size: 12; font-weight: bold">
      VALORES DE INICIO DE UN RANGO DE FECHAS
     </td>
    </tr>
    <tr height="50">
     <td align="right">
      Tipo de rango:
     </td>
     <td>
      <select name="sel" onchange="setDefaults(document.formulario.fecha_desde, document.formulario.fecha_hasta, this.selectedIndex)">
       <option>...seleccione</option>
       <option>Esta semana completa</option>
       <option>Lo que va de esta semana</option>
       <option>La semana pasada</option>
       <option>Los últimos siete días</option>
       <option>Este mes completo</option>
       <option>Lo que va de este mes</option>
       <option>El mes pasado</option>
       <option>Los últimos treinta días</option>
       <option>Este año completo</option>
       <option>Lo que va de este año</option>
       <option>El año pasado</option>
       <option>Los últimos 365 días</option>
      </select>
     </td>
    </tr>
    <tr>
     <td align="right">
      Desde (dd/mm/yyyy):
     </td>
     <td>
      <input type="text" name="fecha_desde">
     </td>
    </tr>
    <tr>
     <td>
      Hasta (dd/mm/yyyy):
     </td>
     <td>
      <input type="text" name="fecha_hasta">
     </td>
    </tr>
   </table>
  </form>
 </body>
</html> 

JavierB 20/02/2003 13:30
110.- Imágenes en miniatura

P: ¿Como puedo poner miniaturas de mis imágenes sin tener que reducirlas con un editor gráfico?

R: Con este código:
Código PHP:
<html>
<head>
<script>
    function minifoto(foto,H,V,ancho,alto) {
        propH = ancho / H;
        propV = alto / V;
        if (propH>propV) {
            anchoF = H * propV;
            altoF = alto;
        }
        else {
            altoF = V * propH;
            anchoF = ancho;
        }
        de = (ancho - anchoF) / 2;
        su = (alto - altoF) /2;
        imagen="<div style='width:"+ancho+";height:"+alto+";border:1px outset'>";
        imagen+="<img src='"+foto+"' widht="+anchoF+" height="+altoF;
        imagen+=" style='position:relative; left:"+de+";top:"+su+"'>";
        imagen+="</div>";
        document.write(imagen);
    }
</script>
</head>

<body>
<script>
    minifoto("foto.jpg",399,291,90,80);
</script>
</body>
</html> 
A la función minifoto se pasan: el nombre de la imágen, el ancho y alto real de la imágen y el ancho y alto en el que se quiere poner la imágen. La función "encaja" la imágen en un recuadro manteniendo las proporciones.

Nota: Me recuerda el amigo Bravenap, que aunque la imágen aparece en tamaño reducido, se descarga completa, es decir, con su tamaño real, por lo que no supone reducción del tiempo de descarga. Deberá tenerse esto en cuenta si se quiere utilizar este código con imágenes muy grandes o con muchas imágenes.

Kaopectate 21/02/2003 11:39
111.- Selector de año, mes y día
 
P: ¿Como puedo hacer un selector de fecha basado en tags <select> que considere permita seleccionar cualquier fecha válida hasta el día de hoy?

R: [ver ejemplo]

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

   var aMeses = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre")

   function padNmb(nStr, nLen, sChr){
    var sRes = String(nStr);
    for (var i = 0; i < nLen - String(nStr).length; i++)
     sRes = sChr + sRes;
    return sRes;
   }

   function makeDateFormat(nDay, nMonth, nYear){
    var sRes;
    sRes = padNmb(nDay, 2, "0") + "/" + padNmb(nMonth, 2, "0") + "/" + padNmb(nYear, 4, "0");
    return sRes;
   }
   
   function addOpt(oCntrl, iPos, sTxt, sVal){
    var selOpcion = new Option(sTxt, sVal);
    oCntrl.options.add(selOpcion, iPos);
   }

   function lastDayOfMonth(nMonth, nYear){
    var aMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    if ((nMonth == 2) && (nYear % 4 == 0))
     return 29;
    else
     return aMonth[nMonth - 1];
   }

   function cambia(nCambiado){
    var nAno;
    var nMes;
    with (document.frm){
     nAno = parseInt(ano.options[ano.selectedIndex].value);
     switch (nCambiado){
      case 0:
       llenaMes(mes, nAno);
       break;
      case 1:
       nMes = parseInt(mes.options[mes.selectedIndex].value);
       llenaDia(dia, nAno, nMes)
       break;
      case 2:
       nMes = parseInt(mes.options[mes.selectedIndex].value);
       nDia = parseInt(dia.options[dia.selectedIndex].value);
       res.value = makeDateFormat(nDia, nMes + 1, nAno);
       break;
     }
    }
   }

   function llenaAno(oAno){
    var hoy = new Date();
    var ini = 1960;
    addOpt(oAno, 0, "", "");
    for (var i = ini; i <= hoy.getYear(); i++)
     addOpt(oAno, i - ini + 1, String(i), String(i));
   }

   function llenaMes(oMes, nAno){
    var hoy = new Date();
    var nFin = 11;
    while (oMes.length > 0) oMes.remove(0);
    if (nAno == hoy.getYear()) nFin = hoy.getMonth();
    addOpt(oMes, 0, "", "");
    for (var i = 0; i <= nFin; i++)
     addOpt(oMes, i + 1, aMeses[i], String(i));
   }

   function llenaDia(oDia, nAno, nMes){
    var hoy = new Date();
    var nFin = lastDayOfMonth(nMes + 1, nAno);
    while (oDia.length > 0) oDia.remove(0);
    if (nAno == hoy.getYear() && nMes == hoy.getMonth()) nFin = hoy.getDate();
    addOpt(oDia, 0, "", "");
    for (var i = 1; i <= nFin; i++)
     addOpt(oDia, i + 1, String(i), String(i));
   }

  </script>
 </head>
 <body onload=" llenaAno(document.frm.ano)">
  <form name="frm">
   <table border="0">
    <tr>
     <td align="right">
      Año: 
     </td>
     <td>
      <select name="ano" onchange="cambia(0)" style="width: 80">
      </select>
     </td>
    </tr>
    <tr>
     <td align="right">
      Mes: 
     </td>
     <td>
      <select name="mes" onchange="cambia(1)" style="width: 80">
      </select>
     </td>
    </tr>
    <tr>
     <td align="right">
      Día: 
     </td>
     <td>
      <select name="dia" onchange="cambia(2)" style="width: 80">
      </select>
     </td>
    </tr>
    <tr>
     <td align="right">
      Fecha:
     </td>
     <td>
      <input type="text" name="res" disabled>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html> 

caricatos 22/02/2003 03:24
112. - Sonido antes de un salto
 
P: ¿Cómo escuchar un sonido antes de hacer un link?

R: Adaptando este script con los valores adecuados
ver ejemplo:

Código PHP:
<html>
<head>
<script>
function ReproducirYSaltar(son, retardo, salto)    {
    if (document.all) document.all.sound.src = son;
    document.getElementById("sound2").src = son;
    setTimeout("salto('" + salto + "')", retardo);
}

function salto(x)    {
    location.href = x;
}
</script>
</head>
<body >
<bgsound id=sound style="visibility:hidden">
<embed id=sound2 hidden=true>
<a href="javascript:ReproducirYSaltar('UNDO.MID', 3000, 'http://www.sucaricatura.com' )" >
 Enlace de caricauras </a><br>
<a href="javascript:ReproducirYSaltar('UNDO.MID', 4000, 'http://www.pepemolina.com/postales' )" >
 Enlace de Postales digitales </a><br>
<a href="javascript:ReproducirYSaltar('UNDO.MID', 6000, 'http://www.pepemolina.com/visitas/visitas.php' )" >
 Firme en mi libro de visitas </a><br>
</body>
</html> 
Créditos: Se basa en un script original de chivi nº 71 de estas FAQs
... los parámetros que acepa son el fichero de sonido, el retardo que necesita para sonar y el destino del link

Saludos :arriba:

Helbira 12/03/2003 03:02
115. Cerrar una ventana principal sin confirmación (II)
 
P: ¿Como puedo cerrar una ventana principal sin que aparezca ningún mensaje de confirmación?

R: [Ver ejemplo]

Consiste en engañar al navegador haciéndole creer que la estamos cerrando desde su opener.

TEMA: VENTANAS

Código PHP:
<html>
<head>
<script language="JavaScript">
 
function cerrar() {
var ventana = window.self;
ventana.opener = window.self;
ventana.close();
}
 
</script>
</head>
<body>
Problema:<br>
<a href="#" onClick="window.close()">
Cerrar ventana de modo tradicional (el navegador pedirá confirmación)
</a><br><br>
Solución:<br>
<a href="#" onClick="cerrar()">
Cerrar ventana sin confirmación
</a>
</body>
</html> 
;-)

P.D.: Popito ha comprobado que esto no funciona en IE5 para MAC. :ojotes: Ojo: Podría ocurrir también en otros navegadores. :stress:

P.D.2:LeandroEnrique comentaba que no le funciona en Mozilla asi que me he puesto a comprobarlo en varios navegadores. Concretamente en IE6, Netscape6.2,Opera7.23 y Mozilla Firefox. He de decir que en todos ellos ha funcionado el ejemplo que aparece en esta FAQ y a diferencia de IE6 en el resto de navegadores incluso el caso de un simple window.close() tampoco te pide confirmación.


Cita:
Iniciado por frodogus
Por favor, añadir en el apartado 115 Cerrar una ventana principal sin confirmación (II) no se admite en IE7

Saludos.

Lord of ice 12/03/2003 23:45
116.- Cambiar el texto de la barra de estado
 
P: ¿Como puedo cambiar el texto de la barra de estado?

R: Ver ejemplo

Código PHP:
<SCRIPT LANGUAGE="JavaScript">
<!--
var msg="TEXTO DE LA MARQUESINA"
var delay=30
var startPos=100
var timerID=null
var timerRunning=false
var pos=0
StartScrolling()
function StartScrolling(){
    StopTheClock()
    for (var i = 0; i < startPos; i++) 
    msg=" " + msg
    DoTheScroll()
}
function StopTheClock(){
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning=false
}
function DoTheScroll(){
    if (pos < msg.length)
        self.status= 
    msg.substring(pos, msg.length);
    else
        pos=-1;
    ++pos
    timerRunning=true
    timerID= 
   self.setTimeout("DoTheScroll()", delay)
}
</script> 

Kaopectate 18/03/2003 15:56
117.- Redondear un número
 
P: ¿Como puedo redondear un valor a una cierta cantidad de decimales?

Créditos: jordan

R: [ver ejemplo]

Código PHP:
<html>
 <head>
  <script language="JavaScript">
   function redondear(num, dec){
    num = parseFloat(num);
    dec = parseFloat(dec);
    dec = (!dec ? 2 : dec);
    return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
   }

   function calcula(){
    with (document.frm)
     res.value = redondear(val.value, dec.value);
   }
  </script>
 <head>
 <body>
  <form name="frm">
   <table border="0">
    <tr>
     <td align="right">
      Numero:
     </td>
     <td>
      <input type="text" name="val"><br>
     </td>
    </tr>
    <tr>
     <td align="right">
      Decimales:
     </td>
     <td>
      <input type="text" name="dec"><br>
     </td>
    </tr>
    <tr>
     <td>
      &nbsp;
     </td>
     <td align="center">
      <input type="button" name="calc" value="Redondear" onclick="calcula()">
     </td>
    </tr>
    <tr>
     <td align="right">
      Resultado:
     </td>
     <td>
      <input type="text" name="res"><br>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html> 

KarlanKas 27/03/2003 10:15
118.- (me gustan los bizcochos) Buscador interno
 
P.-¿Cómo pongo un buscador interno en mi site?
R.- Siguiendo estos sencillos pasos:

Cómo instalar un buscador, el APB Search 1.12 (que es
gratuito)

Hay otra versión que es de pago con más características, pero
creo que esta basta y sobra para la mayoría. A mi modo de ver es
bastante bueno, aunque supongo que cada uno tendrá el de su
preferencia.

Pasos a seguir:

1.- Descargar el archivo apbsearch.zip
de apbsystems.com


2.- Dentro hay 5 archivos:
  • archive.cgi
  • readme11.txt
  • search.cgi
  • searchBottom.html
  • searchTop.html
Copiamos todos (salvo el txt) en el directorio CGI-BIN del servidor
donde tengamos alojada la página. Es importante que dicho
upload se haga en modo texto (ver configuración de vuestro
programa FTP).

3.- Una vez subidos dais permisos (CHMOD) a los archivos
con extensión CGI (search y archive) de forma que quede como
en la imagen:

http://www.karlankas.net/permisos.jpg


4.- Debes llamar, si no lo sabes, a tu proveedor de hosting
para preguntar la ruta absoluta dentro del servidor de tu página.

5.- Una vez hecho esto con el navegador ve a esta página:

http://www.tudominio.com/cgi-bin/archive.cgi

Tal vez el acceso a tu directorio de CGI sea otro, pregunta al
proveedor de tu hospedaje.

6.- si todo va bien pasa al punto 7, si no, si te sale un error
500 comprueba los permisos del archivo archive.cgi, comprueba
que lo has subido en modo texto. Si te dice que no lo encuentra
comprueba que la ruta es la correcta (ya os he dicho que la ruta
puede que no sea la puesta, hay hospedajes cuya ruta es
cgi.tudominio.com...).

7.- Aparecerá una página de diseño bastante discreto:
http://www.karlankas.net/configurar1.jpg
que te preguntará el dominio de la página, la ruta absoluta de la
misma dentro del servidor y la extensión de los archivos que
quieres indexar. Rellénalo como debas y dale a siguiente.

8.- Ahora debes seleccionar los directorios que quieres que
indexe. Fíjate que no está marcado un directorio que no
contenga archivos web (imágenes, scripts...).

9.- Por último des-selecciona los archivos que no quieras
que indexe (prueba3.html y cosas por el estilo que siempre se
quedan pululando).

10.- Si todo ha ido bien aparecerá una ventana
confirmando que ya está.

11.- Ve al directorio CGI-BIN de tu servidor y cambia los
permisos de el archivo archive.cgi a 600 para evitar que alguien
malintencionado te modifique la lista de archivos.

12.- Añade el siguiente código a la página de búsqueda:

Código:
<form action="/cgi-bin/search.cgi" method="get">
<input type="text" name="search" size=27>
<input type="submit">
</form>

13.- Editad los archivos searchTop.html y
searchBottom.html para dar una imagen a la página de
resultados acorde con vuestra página web.
Y ya está!!

Espero que os haya ayudado. Si no es así espero vuestras dudas.

Un saludo!

Me alegraría que si usas esta faq comentaras que es mía.

caricatos 30/03/2003 01:59
119.- Reemplazar
 
P . - ¿Cómo reemplazar o eliminar subcadenas de una cadena?

R . - Combinando el método split para convertir una cadena en un array y join que hace lo contrario...
Poniendo como párámetro del split, lo que se quiere quitar, y en join la nueva subcadena (cadena vacía para eliminar)

Ejemplo:
var invertirBarra = "Hola/amigos/del/foro".split("/").join("\");

deja la variable invertirBarra = "Hola\amigos\del\foro";

Nota: Este sistema mejora el que propuse en otra discusión para insertar emoticones en un textarea

Saludos :arriba:

ferny 15/04/2003 11:06
120.- Link al MSN
 
P.- ¿Cómo puedo hacer un link en la web para agregar un contacto messenger?

R.- Puedes utilizar lo siguiente:
Código:
<OBJECT height='1' id='MsgrObj' width='1'></OBJECT>
<script>
function DoInstantMessage(person,screen)
{
        //Check if person has messenger installed
        try{MsgrObj.classid="clsid:B69003B3-C55E-4B48-836C-BC5946FC3B28";}
        catch(e){if(!(e.number && 2148139390) == 2148139390)return;}
       
        //Check if you are logged in
        if(MsgrObj.MyStatus == 1)
        {
                alert("You are not logged into Messenger.\nYou must login to Messenger before continuing.");
                return;
        }
       
        //Check if person is already in contact list
        try{var contact = MsgrObj.GetContact(person,"");}
        catch(e)
        {
                if((e.number && 2164261642) == 2164261642) //MSGR_E_USER_NOT_FOUND
                {
                        if(confirm("Add "+screen+" to your contact list?")==true)MsgrObj.AddContact(0,person);
                }
        }
       
        //Ask to send an instant message
        if(confirm("Send "+screen+" an instant message?")==true)MsgrObj.InstantMessage(person);
}
</script>
Luego llamas a la función así:
Código:
<a href=javascript:DoInstantMessage("[email protected]","nombre")>Messenger</a>
O bien usa una imagen como enlace.

IMPORTANTE: sólo funciona en Internet Explorer.

Créditos: mods de phpBB - MSN Messenger Mod

KarlanKas 28/04/2003 04:10
121. Barra personalizada de scroll
 
P.- ¿Cómo hacer una barraa de scroll personalizada con los iconos formas y colores que quiera?
R.- Por medio de este script:
(Compatible con Opera 7, NS 6.2 y IE 5.0)
Código PHP:

<html>
<head>
    <title>Barra de desplazamiento</title>
    <script>
//Script original de KarlanKas para Forosdelweb.com


//Muchas gracias a todos los que colaboraron en la elaboración de este script, en especial a JavierB, artífice de la compatibilidad del mismo con NS. 

    ancho=700;
    altoVentana=300;
    altoContenido=700;
    altoBoton=20;
    anchoBoton=15;
    incremento=5;
    
//    ---------------------------NO EDITAR--------------------------------
    recorrido=altoVentana-(2*altoBoton)
    altoBarra=recorrido*(altoVentana/altoContenido);
    recorridoBarra=recorrido-altoBarra;
    incrementoBarra=incremento*(recorridoBarra/(altoContenido-altoVentana));
    recorridoAcumuladoBarra=0;
    recorridoAcumuladoContenido=0;
    anchoContenido=ancho-anchoBoton;
    no=false;
    var yy=0;
    pulsado=false;
    var mouseY;
    
    if (altoVentana>=altoContenido){no=true}
    altoBarra+=incrementoBarra+1
    
    
    
    
    estilo='<style>';
    estilo+='#ventana{'
    estilo+='            height:'+altoVentana+'px;';
    estilo+='            width:'+ancho+'px;';
    estilo+='               z-index:1;';
    estilo+='            border:solid 1px black;';
    estilo+='            overflow:hidden;';
    estilo+='            position:relative;';
    
    estilo+='}'
    
    
    
    estilo+='#botonArriba{        position:absolute;';
    estilo+='                    padding:0px 0px 0px 0px;';
    estilo+='                    font:normal 8px/8px courier;';
    estilo+='                    top:0px;';
    estilo+='                    width:'+anchoBoton+'px;';
    estilo+='                    height:'+altoBoton+'px;';

    estilo+='                       z-index:99;';
    estilo+='                       cursor:hand;';
    estilo+='                       left:'+(ancho-anchoBoton)+'px;';
    estilo+='    }'
    estilo+='#botonAbajo{        position:absolute;';
    estilo+='                    padding:0px 0px 0px 0px;';
    estilo+='                    font:normal 9px/9px courier;';
    estilo+='                    width:'+anchoBoton+'px;';
    estilo+='                    height:'+altoBoton+'px;';
    estilo+='                    top:'+(altoVentana-altoBoton)+'px;';
    estilo+='                       left:'+(ancho-anchoBoton)+'px;';
    estilo+='                       z-index:99;';
    estilo+='                       cursor:hand;';
    estilo+='}';
    estilo+='</style>';    
    
    estiloContenido='style="';
     estiloContenido+='            width:'+(anchoContenido)+'px;';
    estiloContenido+='            padding:10px 10px 10px 10px;';
    estiloContenido+='            font:normal 10px/15px verdana;';
    estiloContenido+='            position:absolute;';
    estiloContenido+='            top:0px;'

    estiloContenido+='            left:0px;'
    estiloContenido+='            background:#ffffcc;';
    estiloContenido+='            border-right:solid black 1px;';
     estiloContenido+='            height:'+altoContenido+'px;'
;
    estiloContenido+='            overflow:hidden;';
    estiloContenido+='            text-align:justify;"';    
    
    estiloBarra='style="position:absolute;';
    estiloBarra+='                    width:'+anchoBoton+'px;';
    estiloBarra+='                    position:absolute;';
    estiloBarra+='                    top:'+altoBoton+'px;';
    estiloBarra+='                       z-index:99;';
    estiloBarra+='                       cursor:hand;';
    estiloBarra+='                       left:'+(ancho-anchoBoton)+'px;';
    if (no){estiloBarra+='            visibility:hidden;';}
    estiloBarra+='                    height:'+altoBarra+'px;"';



    document.write(estilo);

</script>


    

    <script for="ventana" event="onmousewheel">
    if(document.all){mover(event.wheelDelta/30)}
    </script>
    <script >
    function ratonAbajo(){
    
    if (document.all){yy=event.clientY;}
    else{yy = coorY; }
    pulsado=true;}
    </script>
    <script>

function mover(hacia){

    nB=parseInt(document.getElementById("barra").style.top);
    nC=parseInt(document.getElementById("contenido").style.top);


if (((nC+(hacia*incremento))<incremento) && (nC+(hacia*incremento)>(altoVentana-altoContenido))){
recorridoAcumuladoBarra-=(hacia*incrementoBarra);
recorridoAcumuladoContenido+=(hacia*incremento);
    
if(recorridoAcumuladoContenido>0){recorridoAcumuladoContenido=0}
if(recorridoAcumuladoBarra<altoBoton){recorridoAcumuladoBarra=altoBoton}
if(recorridoAcumuladoBarra> (recorridoBarra+altoBoton)){recorridoAcumuladoBarr
a=recorridoBarra+altoBoton}
    
    document.getElementById("contenido").style.top=recorridoAcumuladoContenido;
    document.getElementById("barra").style.top=recorridoAcumuladoBarra;
    
    }}

    
function ratonMoviendose(){
if(pulsado){
            if (document.all){y=event.clientY;}
else{
    y = coorY; }
yy=yy-y;
yyy=yy/incrementoBarra;
mover(yyy);
yy=y;
}}
    function seVa(){
    pulsado=false;
    
    }
    </script>
</head>

<body>
<div     id="ventana">        
        <script>
        document.write('<div id="contenido" '+estiloContenido+'>');
        </script>
                
1 Texto<br>
2 Texto<br>
3 Texto<br>
4 Texto<br>
5 Texto<br>
6 Texto<br>
7 Texto<br>
8 Texto<br>
9 Texto<br>
10 Texto<br>
-----------------------------------------<br>
11 Texto<br>
12 Texto<br>
13 Texto<br>
14 Texto<br>
15 Texto<br>
16 Texto<br>
17 Texto<br>
18 Texto<br>
19 Texto<br>
20 Texto<br>
-----------------------------------------------------
------------------------------------------------------
-----------------------------------------------------
---------------------------</br>
21 Texto<br>
22 Texto<br>
23 Texto<br>
24 Texto<br>
25 Texto<br>
26 Texto<br>

        </div>
        <input type="button"
                value="?"
                id="botonArriba"
                onMouseOver="pepe22=window.setInterval('mover(1)',20)"
                onMouseOut="window.clearInterval(pepe22)">
        
        <input type="button"
                value="?"
                id="botonAbajo"
                onMouseOver="if(no==false){pepe22=window.setInterval('mover(-1)',20)}"
                onMouseOut="if(!no){window.clearInterval(pepe22)}"
                >
        
        <script>
        document.write('<input type="button"');
        document.write(' id="barra"  onMouseDown="ratonAbajo()"');
        document.write('  onMouseMove="ratonMoviendose()"');
        document.write('   onMouseUp="seVa()" onMouseOut="seVa()" ');
        document.write(estiloBarra);
        document.write(' >');
        
//----------------------RATON EN NS-------------------------------
document.onmousemove = mouseMove;
var ns6 = (document.getElementById && !document.all) ? true: false;
var coorY;
if (ns6) document.getElementById('barra').addEventListener("mousemove", mouseMove, true)
function mouseMove(e)
{
if (ns6)    {coorY = e.pageY;}
return true;
}
</script>
</div>
</body>
</html> 

KarlanKas 28/04/2003 05:53
122.- Cómo poner un reloj analógico en mi web
 
P.- Cómo poner un reloj analógico en mi web.
R.- En realidad este post es un ejemplo de como manejar grados con JS. Para ello he hecho este relojillo en el que ;-) es la hora, :arriba: son los segundos y :abajo: los minutos.

Caricatos (hola campeón!!) tiene un ejemplo mucho más completo aunque tal vez un poco más complicado (por lo completo que es).

Lo he modificado un poco... ahora tiene manecillas!

11/11/2004
Lo he vuelto a modificar. Ahora es compatible con Mozilla, Firefox, Opera 7...

[ver ejemplo]

Ahí va!

Código PHP:
<html>
<head>
<title>Reloj analogico</title>
<script>
//Script original de KarlanKas para Forosdelweb.com


var codigo="";
var incremento=-1
var radio=110
var radio2=100
radianes=(2*3.141592/360)

function crear(nombr,radi,hor,destin){
this.nombre=nombr;
this.radio=radi;
this.hora=hor;
this.destino=destin;
}

manecillas=new Array();
manecillas[0]=new crear("segundero",1,"segundo","http://www.forosdelweb.com/images/smilies/dedosabajo.gif");
manecillas[1]=new crear("minutero",0.8,"minuto","http://www.forosdelweb.com/images/smilies/dedosarriba.gif");
manecillas[2]=new crear("horero",0.5,"hora","http://www.forosdelweb.com/images/smilies/wink.gif");

// -------------- DIBUJAR MANECILLAS ---------------------------
for(numeroIconos=0;numeroIconos<5;numeroIconos++){
for(cadaManecilla=0;cadaManecilla<3;cadaManecilla++){
codigo+='<img id="'+manecillas[cadaManecilla].nombre+numeroIconos+'" style="z-index:2;position:absolute;top:-300px;" src="'+manecillas[cadaManecilla].destino+'">\n'}
}
//----------- PONER EL CENTRO DE LA ESFERA---------------------------------

codigo+='<img style="z-index:4;position:absolute;top:110px;left:110px;" src="http://www.forosdelweb.com/images/smilies/smile.gif">'

//------------- DIBUJAR ESFERA --------------------------
for(numero=0;numero<=359;numero+=30){
x=Math.floor((radio2)*Math.cos(radianes*numero));
y=Math.floor((radio2)*Math.sin(radianes*numero));
document.write(\'<img src="http://www.forosdelweb.com/images/smilies/risa.gif" style="position:absolute;left:\'+(radio+x)+'px;top:'+(radio+y)
+'px">');
}

//------------------ MAQUINARIA DEL RELOJ --------------

function reloj(){

//-------------SABER LA HORA----------------
ahora=new Date();

document.title=ahora.toLocaleString()

segundo=ahora.getSeconds()*6
minuto=ahora.getMinutes()*6
hora=(ahora.getHours()*30)

hora+=(minuto/12)

//---------PONER 0 GRAD0S EN 90 GRADOS---------------
hora-=90;
minuto-=90;
segundo-=90

//-------MOVER LAS MANECILLAS---------------

for (a=0;a<99;a=a+20){
incremento++
for (m=0;m<3;m++){
manecilla=document.getElementById(manecillas[m].nombre+incremento);
eval("cosa="+manecillas[m].hora);
x=a*manecillas[m].radio*Math.cos(radianes*cosa);
y=a*manecillas[m].radio*Math.sin(radianes*cosa);
manecilla.style.left=x+radio+'px';
manecilla.style.top=y+radio+'px';

}
}
incremento=-1;
}

</script>
</head>

<body onload='reloj();window.setInterval("reloj()",50)'>

<script>document.write(codigo)</script>

</body>
</html> 

Kaopectate 29/04/2003 10:42
123.- Resta de fechas
 
P: ¿Como puedo saber la cantidad de días, meses y años que hay entre dos fechas?

R: [ver ejemplo]

Código PHP:
<html>
 <head>
  <script language="JavaScript">
   function cerosIzq(sVal, nPos){
    var sRes = sVal;
    for (var i = sVal.length; i < nPos; i++)
     sRes = "0" + sRes;
    return sRes;
   }

   function armaFecha(nDia, nMes, nAno){
    var sRes = cerosIzq(String(nDia), 2);
    sRes = sRes + "/" + cerosIzq(String(nMes), 2);
    sRes = sRes + "/" + cerosIzq(String(nAno), 4);
    return sRes;
   }

   function sumaMes(nDia, nMes, nAno, nSum){
    if (nSum >= 0){
     for (var i = 0; i < Math.abs(nSum); i++){
      if (nMes == 12){
       nMes = 1;
       nAno += 1;
      } else nMes += 1;
     }
    } else {
     for (var i = 0; i < Math.abs(nSum); i++){
      if (nMes == 1){
       nMes = 12;
       nAno -= 1;
      } else nMes -= 1;
     }
    }
    return armaFecha(nDia, nMes, nAno);
   }

   function esBisiesto(nAno){
    var bRes = true;
    res = bRes && (nAno % 4 == 0);
    res = bRes && (nAno % 100 != 0);
    res = bRes || (nAno % 400 == 0);
    return bRes;
   }

   function finMes(nMes, nAno){
    var nRes = 0;
    switch (nMes){
     case 1: nRes = 31; break;
     case 2: nRes = 28; break;
     case 3: nRes = 31; break;
     case 4: nRes = 30; break;
     case 5: nRes = 31; break;
     case 6: nRes = 30; break;
     case 7: nRes = 31; break;
     case 8: nRes = 31; break;
     case 9: nRes = 30; break;
     case 10: nRes = 31; break;
     case 11: nRes = 30; break;
     case 12: nRes = 31; break;
    }
    return nRes + (((nMes == 2) && esBisiesto(nAno))? 1: 0);
   }

   function diasDelAno(nAno){
    var nRes = 365;
    if (esBisiesto(nAno)) nRes++;
    return nRes;
   }

   function anosEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1){
    var nRes = Math.max(0, nAn1 - nAn0 - 1);
    if (nAn1 != nAn0)
     if ((nMe1 > nMe0) || ((nMe1 == nMe0) && (nDi1 >= nDi0)))
      nRes++;
    return nRes;
   }

   function mesesEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1){
    var nRes;
    if ((nMe1 < nMe0) || ((nMe1 == nMe0) && (nDi1 < nDi0))) nMe1 += 12;
    nRes = Math.max(0, nMe1 - nMe0 - 1);
    if ((nDi1 > nDi0) && (nMe1 != nMe0)) nRes++;
    return nRes;
   }

   function diasEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1){
    var nRes;
    if (nDi1 < nDi0) nDi1 += finMes(nMe0, nAn0);
    nRes = Math.max(0, nDi1 - nDi0);
    return nRes;
   }

   function mayorOIgual(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1){
    var bRes = false;
    bRes = bRes || (nAn1 > nAn0);
    bRes = bRes || ((nAn1 == nAn0) && (nMe1 > nMe0));
    bRes = bRes || ((nAn1 == nAn0) && (nMe1 == nMe0) && (nDi1 >= nDi0));
    return bRes;
   }

   function calcula(){
    var sFc0 = document.frm.fecha0.value; // Se asume válida
    var sFc1 = document.frm.fecha1.value; // Se asume válida
    var nDi0 = parseInt(sFc0.substr(0, 2), 10);
    var nMe0 = parseInt(sFc0.substr(3, 2), 10);
    var nAn0 = parseInt(sFc0.substr(6, 4), 10);
    var nDi1 = parseInt(sFc1.substr(0, 2), 10);
    var nMe1 = parseInt(sFc1.substr(3, 2), 10);
    var nAn1 = parseInt(sFc1.substr(6, 4), 10);
    if (mayorOIgual(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1)){
     var nAno = anosEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1);
     var nMes = mesesEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1);
     var nDia = diasEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1);
     var nTtM = nAno * 12 + nMes;
     var nTtD = nDia;
     for (var i = nAn0; i < nAn0 + nAno; i++) nTtD += diasDelAno(nAno);
     for (var j = nMe0; j < nMe0 + nMes; j++) nTtD += finMes(j, nAn1);
     var nTSS = Math.floor(nTtD / 7);
     var nTSD = nTtD % 7;
     document.frm.difDMA.value = String(nAno) + " años, " + String(nMes) + " meses, " + String(nDia) + " días";
     document.frm.difDM.value = String(nTtM) + " meses, " + String(nDia) + " días";
     document.frm.difD.value = String(nTtD) + " días";
     document.frm.difSD.value = String(nTSS) + " semanas, " + String(nTSD) + " días";
    } else alert("Error en rango");
   }
  </script>
 </head>
 <body>
  <form name="frm">
   <table border="0">
    <tr>
     <td>
      <table border="1">
       <tr>
        <td align="right">
         Fecha inicial (dd/mm/aaaa)
        </td>
        <td>
         <input type="text" name="fecha0" value="31/08/1996">
        </td>
       </tr>
       <tr>
        <td align="right">
         Fecha final (dd/mm/aaaa)
        </td>
        <td>
         <input type="text" name="fecha1" value="09/07/1999">
        </td>
       </tr>
       <tr>
        <td align="right">
         Diferencia (D,M,A)
        </td>
        <td>
         <input type="text" name="difDMA" readonly>
        </td>
       </tr>
       <tr>
        <td align="right">
         Diferencia (D,M)
        </td>
        <td>
         <input type="text" name="difDM" readonly>
        </td>
       </tr>
       <tr>
        <td align="right">
         Diferencia (D)
        </td>
        <td>
         <input type="text" name="difD" readonly>
        </td>
       </tr>
       <tr>
        <td align="right">
         Diferencia (SD)
        </td>
        <td>
         <input type="text" name="difSD" readonly>
        </td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td align="center">
      <input type="button" value="Calcular" onclick="calcula()">
     </td>
    </tr>
   </table>
  </form>
 </body>
</html> 

KarlanKas 29/04/2003 10:55
124.- Controlar que se rellenan todos los campos
 
P.- ¿Cómo indicar a un visitante de un formulario que se ha dejado campos sin rellenar?
R.- Estando delante cuando lo rellene o de esta manera:
Se pueden poner todos los campos que se quiera.

Código PHP:
<html>
<head>

    <script>
    //Script original de KarlanKas para Forosdelweb.com


    function comprobar(){var mal=false;
    numero=document.forms[0].elements.length;
    for(a=0;a<numero;a++){
    if (document.forms[0].elements[a].value==""){document.forms[0].elements[a].style.backgroundColor="#ffffcc";mal=true;}
    else{document.forms[0].elements[a].style.backgroundColor="white";}
    }
    if(mal){alert("Por favor, rellene las cajas coloreadas");}
    else{document.forms[0].submit()}
    }
    
    </script>
</head>

<body>
<form action="javascript:alert('enviando')"
      method="post"
      name="formulario"
      id="formulario"
      style="font:normal 10px/10px verdana;border:solid 1px black;text-align:right;width:300px;"
      >
      Nombre: <input type="text"
             name="cosa"
             id="cosa"><br>
      Apellidos: <input type="text"
             name="cosa"
             id="cosa"><br>
      Dirección: <input type="text"
             name="cosa"
             id="cosa"><br>
      Nombre del perro: <input type="text"
             name="cosa"
             id="cosa"><br>
      Pais: <input type="text"
             name="cosa"
             id="cosa"><br>
      Conocidos con perro: <input type="text"
             name="cosa"
             id="cosa"><br>
             <input onclick="comprobar()"
                     type="button"
                    name="enviar"
                    value="Enviar!">
    
      
      
      
      </form>


</body>
</html> 

KarlanKas 29/04/2003 11:11
125.- Contar caracteres iguales seguidos en un input
 
P.-Cómo saber si han rellenado un input con varios caracteres iguales?
R.-Por medio de este script:

Tema: Formularios

Código PHP:
<html>
<head>
    <title>Contando letritas</title>
    <script>
//Script original de KarlanKas para Forosdelweb.com


    record=0;
    igual=1;
    var letraRecord
    var b=0
    var letra=""
    function comprobar(esto){
    
    for (a=1;a<esto.length;a++){
    
    if (esto.charAt(a)==esto.charAt(b)){
    igual=igual+1;
    letra=esto.charAt(a);}
    else{
    if(igual>record){record=igual;letraRecord=letra}
    igual=1
    }
    b=a
    }
    if(igual>record){record=igual;letraRecord=letra}
    if (record>1){alert("La letra que más se repite es la "+letraRecord+" que aparece seguida "+record+" veces.")}
    else {alert("Ninguna letra se repite seguida");}
    }
    </script>
</head>

<body>
<form action="javascript:alert('HOLAA!!')"
      method="post"
      name="formuario"
      id="formuario">
      
      <input type="text"
             name="caja"
             size="130"
             onblur="comprobar(this.value)">
      
      
      </form>


</body>
</html> 
Dernuke propone una versión usando expresiones regulares y propone algún variante:

Código:
<html>
<head>
<title>Contando letritas</title>
<script>
// por derkeNuke
function comprobar(str) {


    var res=str.match(/([a-z]){1}\1+/gi);
   
   
    mensaje="Las repeticiones de letras seguidas son: \r";
    for(a=0; a<res.length; a++)
        mensaje+="- "+res[a].substring(0,1)+" "+res[a].length+" veces.\r";
    alert(mensaje);
   
   
    // si queremos ordenar el resultado de mayor a menor repeticion:
    res.sort( function(a,b) {
        if(a.length>b.length) return -1;
        else if(a.length==b.length) return 0;
        else return 1;
    } );
   
   
    mensaje="Las repeticiones de letras seguidas ya ordenadas son: \r";
    for(a=0; a<res.length; a++)
        mensaje+="- "+res[a].substring(0,1)+" "+res[a].length+" veces.\r";
    alert(mensaje);
   
   
}
</script>
</head>

<body>
<form action="javascript:alert('HOLAA!!')"
      method="post"
      name="formuario"
      id="formuario">
     
      <input type="text"
            name="caja"
            size="130"
            value="eqewwqFaaaasscccFasaeqw"
            onblur="comprobar(this.value)">
      </form>


</body>
</html>

KarlanKas 29/04/2003 11:25
126.- Botones de indicación de navegación
 
P.- Me gustaría saber cómo puedo hacer para que además de que mis botones cambien de imagen cuando paso por encima con el ratón (de imagen A a Imagen B), también cambie a una tercera imagen diferente cuando hago ‘clic’ con el ratón sobre el botón, y que permanezca así hasta que pinche con el ratón en otra opción diferente del menú, momento en el que el enlace anteriormente abierto debe volver a la imagen A.

R.- Con este código:

Código PHP:
<html>
<head>

    <script>
    //Script original de KarlanKas para forosdelweb.com
    var imagen=new Array;
    imagen[0]=new Image;
    imagen[0].no=new Image();
    imagen[0].pincha=new Image();
    imagen[0].si=new Image();
    
    imagen[1]=new Image;
    imagen[1].no=new Image();
    imagen[1].pincha=new Image();
    imagen[1].si=new Image();

    imagen[2]=new Image;
    imagen[2].no=new Image();
    imagen[2].pincha=new Image();
    imagen[2].si=new Image();

    imagenAnterior=new Image;
    
    var numeroAnterior=0
//--------- PON AQUÍ LA RUTA DE LAS IMÁGENES (NO HAN DE SER ABSOLUTAS)---------------
    
    imagen[0].no.src="no.gif";
    imagen[0].pincha.src="hazclick.gif";
    imagen[0].si.src="si.gif";
    
    imagen[1].no.src="no1.gif";
    imagen[1].pincha.src="hazclick1.gif";
    imagen[1].si.src="si1.gif";
    
    imagen[2].no.src="no2.gif";
    imagen[2].pincha.src="hazclick2.gif";
    imagen[2].si.src="si2.gif";
    
    

//------------------------------------------------------------------------------------    
    function cliqueo(esto,numero){
    imagenAnterior.src=imagen[numeroAnterior].no.src;
    imagenAnterior=esto;
    numeroAnterior=numero
    esto.src=(esto.src!=imagen[numero].si.src)?imagen[numero].si.src:imagen[numero].no.src;
    }
    
    </script>
    </head>

<body>
<a onfocus="this.blur()" href=#>
    <img     
            border=0 
            src="no.gif" 
            onclick="cliqueo(this,0)"
            onmouseover="if (this.src==imagen[0].no.src){this.src=imagen[0].pincha.src}"
            onmouseout="if (this.src==imagen[0].pincha.src){this.src=imagen[0].no.src}"
            >
</a>

<a onfocus="this.blur()" href=#>
    <img     border=0 
            src="no1.gif" 
            onclick="cliqueo(this,1)"
            onmouseover="if (this.src==imagen[1].no.src){this.src=imagen[1].pincha.src}"
            onmouseout="if (this.src==imagen[1].pincha.src){this.src=imagen[1].no.src}"
            >
</a>

<a onfocus="this.blur()" href=#>
    <img     border=0 
            src="no2.gif" 
            onclick="cliqueo(this,2)"
            onmouseover="if (this.src==imagen[2].no.src){this.src=imagen[2].pincha.src}"
            onmouseout="if (this.src==imagen[2].pincha.src){this.src=imagen[2].no.src}"
            >
</a>
</body>
</html> 

KarlanKas 29/04/2003 11:28
127.- Rellenar cajas de texto con select de un pop up
 
P.- Cómo rellenar cajas de texto con elementos seleccionados de un pop up?

R.- Con este código:

Tema:Formularios

Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <script>
//Script original de KarlanKas para forosdelweb.com

    camisa=["Seleccione...","Roja","Verde","Amarilla"];
    pantalon=["Seleccione...","De campana","pitillo","chino","pata de elefante"]
    sombrero=["Seleccione...","De Ala Ancha","Hongo","Chistera","Boina","Gorra"]

    function elegir(esto){

    lista=esto.value
    opcion=eval(lista);
    codigo='<select style="font: normal 10px/20px verdana; color: navy" name="opciones" onChange="opener.formulario.enviar.disabled=false;opener.formulario.que'+lista+'.value=unescape(this.options.value); self.close()" >';
    for (a=0;a<opcion.length;a++){
    codigo+="<option value="+escape(opcion[a])+">"+opcion[a]+"</option>\n";
    }
    codigo+="</select>";

    pepe=window.open('','','width=200,height=50');
    pepe.document.write("<html>");
    pepe.document.write("<head>");
    pepe.document.write("    <title>Elige Opción</title>");
    pepe.document.write("</head>");
    pepe.document.write('<body bgcolor="#ffffcc">');
    pepe.document.write(codigo);
    pepe.document.write("</body>");
    pepe.document.write("</html>");
    }
    
    </script>
</head>

<body>
<form action="javascript:alert('Enviandooo!!')"
      name="formulario"
      id="formulario"
      style="font: normal 10px/20px verdana; color: navy"
      title="Elige que comprar">
      <input type="radio"
             name="opcion"
             value="camisa"
             onClick="elegir(this)">camisa<br>
    <input style="border:solid 1px black" type="text"
           name="quecamisa"
           readonly><br>
           
    <input type="radio"
             name="opcion"
             value="pantalon"
             onClick="elegir(this)">pantalón<br>
             
    <input style="border:solid 1px black" type="text"
           name="quepantalon"
           readonly><br>
                
    <input type="radio"
             name="opcion"
             value="sombrero"
             onClick="elegir(this)">sombrero<br>
             
    <input style="border:solid 1px black" type="text"
           name="quesombrero"
           readonly><br><br>
           
    
                      
    <input     style="heigth:15px;font: normal 10px/10px verdana; color: navy"
            type="submit"
            id="enviar"
           value="Enviar!"
           disabled>  
      </form>


</body>
</html> 

alan 29/04/2003 16:46
128. Como mostrar 4 imagenes de la BDs para luego hacer navegacion con MouseOver?

La respuesta

Código PHP:
<head>
<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>

<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
</script>
</head>

Esto dentro del body para la precarga de las imagenes:


<script>
    preloadimages("<%=rs("foto1")%>","<%=rs("foto2")%>","<%=rs("foto3")%>","<%=rs("foto4")%>")
</script>


Aqui va la imagen mas grande que sera reemplazada por las de abajo cuando se haga el mouseover:
ponerla donde quiera 

<a href="javascript:warp()"><img src="<%= rs("foto1") %>" name="targetimage" border=0 width=175 height=200></a>

Y esto donde van las imagenes para hacer el mouse over:

<td><a href="verfoto.asp?id=<%=rs("id")%>" onMouseover="changeimage(myimages[0],this.href)">
  <img src="<%=rs("foto1") %>" border=0 width="36" height="41"></a></td>

<td><a href="verfoto.asp?id=<%=rs("id")%>" onMouseover="changeimage(myimages[1],this.href)"> 
  <img src="<%= rs("foto1") %>" border=0 width="36" height="41"></a></td>

<td><a href="verfoto.asp?id=<%=rs("id")%>" onMouseover="changeimage(myimages[2],this.href)"> 
  <img src="<%= rs("foto1") %>" border=0 width="36" height="41"></a></td>

<td><a href="verfoto.asp?id=<%=rs("id")%>" onMouseover="changeimage(myimages[3],this.href)"> 
  <img src="<%= rs("foto1") %>" border=0 width="36" height="41"></a></td> 

Renegado 30/04/2003 21:57
129.- Validar Campo Vacio

P.- Como validar que un campo sea vacio,aunque se haya presionado la barra espaciadora ?

R.-

Código:
<html>
<head>
<script language="JavaScript">
<!--
function verificar()
{
if(form1.nombre_campo.value.replace(/ /g, '') == '')
{
alert("Debe Ingresar un valor ");
form1.nombre_campo.focus();
form1.nombre_campo.select();
return false;
}
}
-->
</script>
<title>Validar Campo Vacio</title>
</head>
<body>
<form name="form1">
<input name="nombre_campo" type="text" size="15" maxlength="15">
<input type="button" name="Validar" value="Validar" onclick="verificar()">
</form>
</body>
</html>

caricatos 01/05/2003 01:44
130. Fondo degradado
 
P .- Como puedo poner un fondo degradado en una página.

R .- Poniendo mediante un script que en primer lugar averigue las dimensiones de la página, y luego inserte en una capa vacía una tabla vacía pero con el fondo de cada celda con distinto color.
Los tamaños de las celdas, se calculan a partir de los datos del tamaño de la página, y los colores se generan dinámicamente.

Ejemplo:

Código PHP:
<html>
<head>
<title>
    Degradado
</title>
<script language=javascript>
function color(n)    {
    return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n % 16));
}

function ini()    {
    var elFondo = document.getElementById("fondo").style;
    var ancho = document.body.clientWidth;
    var alto =  document.body.clientHeight;
    elFondo.width = ancho;
    elFondo.height = alto;
    var altoCelda = alto / 256;
    var tabla = "<table cellpadding=0 cellspacing=0 width=100% height=100%>";
    for (var i = 255; i >= 0; i --)
        tabla += "<tr><td width=100% height=" + altoCelda + " style='background-color: #FF" + color(i) + "00' ></td></tr>"
    tabla += "</table>";
    document.getElementById("fondo").innerHTML = tabla;
}
</script>
 </head>
<body style="margin:0" onresize=ini() onload="ini()">
<div style="position: relative">
<div id=fondo style="position:absolute; top:0; left:0;"></div>
<div id=general style="position:absolute; top:0; left:0;">
<table border=1>
<tr>
<td >
Tabla sin importancia
</td></tr></table>
<div>
</div>
</body>
</html> 
Para que funcione con otros colores y otro nº de pasos intermedios, se puede usar otra FAQ: http://www.forosdelweb.com/showthrea...567#post903567

Y quedaría así:
Código:
<html>
<head>
<title>
    Degradado
</title>
<script language=javascript src="gradientes.js">
</script>
<script language=javascript>

function ini()    {
    var colores = transitar("ff0000", "0000ff", 256);
    var elFondo = document.getElementById("fondo").style;
    var ancho = document.body.clientWidth;
    var alto =  document.body.clientHeight;
    elFondo.width = ancho;
    elFondo.height = alto;
    var altoCelda = alto / 256;
    var tabla = "<table cellpadding=0 cellspacing=0 width=100% height=100%>";
    for (var i = 0; i < colores.length; i ++)
        tabla += "<tr><td width=100% height=" + altoCelda + " style='background-color: " + colores[i] + "' ></td></tr>"
    tabla += "</table>";
    document.getElementById("fondo").innerHTML = tabla;
}
</script>
</head>
<body style="margin:0" onresize=ini() onload="ini()">
<div style="position: relative">
<div id=fondo style="position:absolute; top:0; left:0;"></div>
<div id=general style="position:absolute; top:0; left:0;">
<table border=1>
<tr>
<td >
Tabla sin importancia
</td></tr></table>
<div>
</div>
</body>
</html>
Notas: Deben indicarse los colores y el nº de pasos en la función transitar:
var colores = transitar("ff0000", "0000ff", 256);
Es preferible no usar un número de pasos muy grande para evitar una ralentización innecesaria.

:adios:

Kaopectate 06/05/2003 15:22
131.- Validar la entrada de un campo numérico y dar formato al resultado
 
P: ¿Como puedo hacer una entrada de datos donde se valide el ingreso de caracteres numéricos o los signos ",.-" y que al salir del mismo aparezca el resultado con decimales y formato para los miles?

Créditos: Mackpipe

R: [ver ejemplo]

Código PHP:
<html>
 <head>
  <script>
   function NumberFormat(num, numDec, decSep, thousandSep){
    var arg;
    var Dec;
    Dec = Math.pow(10, numDec); 
    if (typeof(num) == 'undefined') return; 
    if (typeof(decSep) == 'undefined') decSep = ',';
    if (typeof(thousandSep) == 'undefined') thousandSep = '.';
    if (thousandSep == '.')
     arg=/./g;
    else
     if (thousandSep == ',') arg=/,/g;
    if (typeof(arg) != 'undefined') num = num.toString().replace(arg,'');
    num = num.toString().replace(/,/g, '.'); 
    if (isNaN(num)) num = "0";
    sign = (num == (num = Math.abs(num)));
    num = Math.floor(num * Dec + 0.50000000001);
    cents = num % Dec;
    num = Math.floor(num/Dec).toString(); 
    if (cents < (Dec / 10)) cents = "0" + cents; 
    for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
     num = num.substring(0, num.length - (4 * i + 3)) + thousandSep + num.substring(num.length - (4 * i + 3));
    if (Dec == 1)
     return (((sign)? '': '-') + num);
    else
     return (((sign)? '': '-') + num + decSep + cents);
   } 

   function EvaluateText(cadena, obj){
    opc = false; 
    if (cadena == "%d")
     if (event.keyCode > 47 && event.keyCode < 58)
      opc = true;
    if (cadena == "%f"){ 
     if (event.keyCode > 47 && event.keyCode < 58)
      opc = true;
     if (obj.value.search("[.*]") == -1 && obj.value.length != 0)
      if (event.keyCode == 46)
       opc = true;
    }
    if(opc == false)
     event.returnValue = false; 
   }
  </script>
 </head>
 <body>
  <form name="frm">
   numero
   <input type="text" name="input1" size="15" value="500034567" onkeypress="EvaluateText('%f', this);" onBlur="this.value = NumberFormat(this.value, '2', '.', ',')"><br><br>
  </form>
 </body>
</html> 

davidvamo 08/05/2003 01:45
132.- Cambiar color a las celdas de una tabla
 
P: ¿Como puedo alterar el color de una celda donde se ha producido un click, retornando luego al color original cuando se produzca un click en otra celda?

R:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
  <!--
        var celda_ant;
        
        celda_ant="";
        
      function ilumina(celda){
          if (celda_ant=="")
            {
                celda_ant = celda;
            }
          celda_ant.style.backgroundColor="green";
            celda.style.backgroundColor="yellow";
            celda_ant = celda;
        }
  //-->
  </SCRIPT>
</head>

<body>

<table border="1" width="50%">
    <tr>
        <td bgcolor="green" onclick="ilumina(this)">rrr</td>
        <td bgcolor="green" onclick="ilumina(this)">iii</td>
        <td bgcolor="green" onclick="ilumina(this)">rrr</td>
        <td bgcolor="green" onclick="ilumina(this)">iii</td>
    </tr>
    <tr>
        <td bgcolor="green" onclick="ilumina(this)">rrr</td>
        <td bgcolor="green" onclick="ilumina(this)">iii</td>
        <td bgcolor="green" onclick="ilumina(this)">rrr</td>
        <td bgcolor="green" onclick="ilumina(this)">iii</td>
    </tr>
</table>

</body>
</html> 

Kaopectate 12/05/2003 12:52
133.- Llenar un campo de un formulario desde un popup
 
P: ¿Como puedo llenar un campo de un formulario a partir de un valor seleccionado en un popup?

R: [ver ejemplo]

Formulario.htm
Código PHP:
<html>
 <head>
  <script language="JavaScript">
   function buscar(){
    open("Popup.htm");
   }
  </script>
 </head>
 <body>
  <form name="frm">
   <table border="0">
    <tr>
     <td align="right">
      Editorial
     </td>
     <td>
      <input type="text" name="editorial">
      <input type="button" value="buscar" onclick="buscar()"><br>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html> 

Popup.htm
Código PHP:
<html>
 <head>
  <script language="JavaScript">
   var seleccionado = "";
   var aEdit = new Array(
                "MacGraw_Hill",
                "Microsoft_Press",
                "Salvat"
               );

   function cambiaSel(chk){
    seleccionado = chk.value;
   }

   function envia(){
    opener.document.frm.editorial.value = seleccionado;
    close();
   }
  </script>
 </head>
 <body>
  <form name="frm2">
   <script language="JavaScript">
    for (var i = 0; i < aEdit.length; i++)
     document.write("<input type='radio' name='ed' value='" + aEdit[i] + "' onclick='cambiaSel(this)'>" + aEdit[i] + "<br>");
   </script>
   <input type="button" name="enviar" value="Enviar" onclick="envia()">
  </form>
 </body>
</html> 

joseisrael 13/05/2003 07:07
134.- Trabajando con Múltiples Checkbox
 
P: ¿Cómo Selecciono o Desmarco Varios Checkbox al mismo tiempo?

R:

Cita:
Este Código va en el Header

Código:
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;}
checkflag = "true";
return "Uncheck All"; }
else {
for (i = 0; i < field.length; i++) {
field[i].checked = false; }
checkflag = "false";
return "Check All"; }
}
// End -->
</script>
-----------------------

Cita:
Este Código va dentro del BODY
Código:
<form name="name">

<input type="checkbox" name="SLT_ALL" value="Check All" onClick="this.value=check(this.form.lista)">

<input type="checkbox" name="lista" value="a">
<input type="checkbox" name="lista" value="b">
<input type="checkbox" name="lista" value="c">
<input type="checkbox" name="lista" value="d">
<input type="checkbox" name="lista" value="e">
<input type="checkbox" name="lista" value="f">

</form>

Este Script lo consegui en:

<!-- Modified By: Steve Robison, Jr. ([email protected]) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

Suerte

Carlitos 28/05/2003 14:38
135.- Rotador de banner
 
P.- ¿Cómo puedo realizar un rotador de banners sencillo?

R.- Probado en: IE 5+, Netscape 7, Opera 7, Firefox 1[Ejemplo]

Código:
<script>
// Rotador de banner's . Carlitos. [email protected]

var ban = new Array()
var enl = new Array()
var indice = 0

ban[0] = new Image()
ban[0].src = "mdw.gif"
enl[0] = "http://www.maestrosdelweb.com"

ban[1] = new Image()
ban[1].src = "faq.gif"
clara[1] = "http://www.faqsdelweb.com"

ban[2] = new Image()
ban[2].src = "script.gif"
enl[2] = "http://www.webtutorial.com.ar/scriptmaster/"

ban[3] = new Image()
ban[3].src = "webest.gif"
enl[3] = "http://www.webestilo.com"

function rota()
{
if (indice ==  ban.length) indice = 0

if (document.images)
 {
  document.images.fotico.src = ban[indice].src 
 }
else
 {
  document.getElementById('fotico').src=ban[indice].src
 }
indice++
setTimeout('rota()',2000)
}
function vete()
{
window.open(enl[indice-1])
}
</script>
<body onload=rota()>
<img src="" id="fotico" onclick="vete()">

eriso79 06/06/2003 14:48
136.- Agregar elementos dinámicamente
 
P: ¿Como puedo agregar dinámicamente en una forma, elementos tipo text y textarea?

R:

Código PHP:
<html>
<head>
<title>Form Page</title>
<!-- Javascript code for the dynamic form elements. -->
<script>
    // Declare the form field count javascript variable so you know how many the user have added.
    //The CGI.REQUEST_METHOD bit is the CF code for setting this variable back to the count where it was last up to.
    var tFormFieldCount = 1;
    var tFormFieldList = "";
    
    // Function to dynamically insert the form field to the cell below. If you want textareas or other form elements, just create another function and change the html insert text below.
    function MakeOne(FieldType) {
        // Depending on what type of form fields the user choose then dynamically write the appropriate form element to the page
        if (FieldType == 'TextInput') {
            document.getElementById('DynamicContent').innerHTML += 'Form Element ' + tFormFieldCount + '- Text input box&nbsp;&nbsp;<input type="text" name="TextInput' + tFormFieldCount + '"><br>';
        } else if (FieldType == 'Textarea') {
            document.getElementById('DynamicContent').innerHTML += 'Form Element ' + tFormFieldCount + '- Textarea&nbsp;&nbsp;<textarea name="Textarea' + tFormFieldCount + '" cols=30 rows=3></textarea><br>';
        }
        
        // Populate the form element list.
        if (tFormFieldList == "") {
            tFormFieldList = FieldType;
        } else {
            tFormFieldList += "," + FieldType;
        }
        
        document.forms[0].FormFieldCount.value = tFormFieldCount;
        document.forms[0].FormFieldList.value = tFormFieldList;
        tFormFieldCount++;
    }
    
    // Just a function to check if the user have added any text input fields.
    function CheckIt() {
        if (tFormFieldCount == 1) {
            alert('You must add at least one text input field.');
            return false;
        }
    return true;
    }
</script>
</head>

<body bgcolor="#FFFFFF">
<!-- HTML form tag. -->
<!-- Action attribute specify where the form data is to be sent to  -->
<!-- Method attribute specify what method the form data is to be sent. POST or GET. Default is GET. -->
<form action="ResultsPage.cfm" method="post" onSubmit="return CheckIt();">
    <table cellspacing=0 cellpadding=4 border=1>
        <tr><td align="right"><input type="button" value="Add Form Text Fields" onClick="MakeOne('TextInput');">&nbsp;&nbsp;<input type="button" value="Add Form Textarea" onClick="MakeOne('Textarea');"></td></tr>
        <tr>
            <td id="DynamicContent" valign="top">
                <!-- Cold fusion code again to test to see if the request method of this page is POST or GET. -->
                <!-- If is POST then you know is from the result page and there's data to be output. -->
                
            </td>
        </tr>
        <tr>
            <td align="right" colspan=2>
                <!-- Hidden form field to pass the count of the text inputs to the result page. -->
                <input type="hidden" name="FormFieldList">
                <input type="hidden" name="FormFieldCount">
                <input type="submit" value="Send It">
            </td>
        </tr>
    </table>
</form>
</body>
</html> 

Kaopectate 11/06/2003 15:24
137.- Comparar las palabras de dos listas
 
P: ¿Como puedo comparar las palabras de un elemento textarea respecto a las palabras existentes en otro textarea?

R:

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

   function separa(sTxt, sSep){
    var sTx2 = "";
    var bPalabra = false;
    for (var j = 0; j < sTxt.length; j++){
     if (sSep.indexOf(sTxt.charAt(j)) != -1){
      if (bPalabra) sTx2 += " ";
      bPalabra = false;
     } else {
      bPalabra = true;
      sTx2 += sTxt.charAt(j);
     }
    }
    return sTx2;
   }

   function comunes(aIzq, aDer){
    var i, j, nRes, sPal;
    nRes = 0;
    sPal = "";
    for (i = 0; i < aIzq.length; i++)
     for (j = 0; j < aDer.length; j++)
      if (aIzq[i] == aDer[j])
       if (sPal.indexOf(aIzq[i]) == -1){
        nRes++;
        sPal += " " + aIzq[i];
       }
    document.frm.comunes.value = String(nRes);
   }

   function soloEnA(aIzq, aDer){
    var i, j, nRes, sPal, bPresente;
    nRes = 0;
    sPal = "";
    for (i = 0; i < aIzq.length; i++){
     bPresente = false;
     for (j = 0; (j < aDer.length) && !bPresente; j++)
      bPresente = (aIzq[i] == aDer[j])
     if (!bPresente && (sPal.indexOf(aIzq[i]) == -1)){
      nRes++;
      sPal += " " + aIzq[i];
     }
    }
    document.frm.soloA.value = String(nRes);
   }

   function soloEnB(aIzq, aDer){
    var i, j, nRes, sPal, bPresente;
    nRes = 0;
    sPal = "";
    for (i = 0; i < aDer.length; i++){
     bPresente = false;
     for (j = 0; (j < aIzq.length) && !bPresente; j++)
      bPresente = (aDer[i] == aIzq[j])
     if (!bPresente && (sPal.indexOf(aDer[i]) == -1)){
      nRes++;
      sPal += " " + aDer[i];
     }
    }
    document.frm.soloB.value = String(nRes);
   }

   function calcula(){
    var sIzq, sDer, aIzq, aDer;
    sIzq = separa(document.frm.texto.value, ";.,:");
    sDer = separa(document.frm.diccionario.value, ";.,:");
    sIzq = sIzq.replace(/[rnf]/g, " ");
    sDer = sDer.replace(/[rnf]/g, " ");
    aIzq = sIzq.split(" ");
    aDer = sDer.split(" ");
    comunes(aIzq, aDer);
    soloEnA(aIzq, aDer);
    soloEnB(aIzq, aDer);
   }
  </script>
 </head>
 <body>
  <form name="frm">
   <table border="0">
    <tr>
     <td align="center">
      Area A
     </td>
     <td align="center">
      Area B
     </td>
    </tr>
    <tr>
     <td align="left">
      <textarea name="texto" onkeyup="calcula()"></textarea>
     </td>
     <td align="right">
      <textarea name="diccionario" onkeyup="calcula()"></textarea>
     </td>
    </tr>
    <tr>
     <td colspan="2" align="center">
      <table border="0">
       <tr>
        <td align="left">
         En A y no en B
        </td>
        <td align="center">
         Comunes
        </td>
        <td align="right">
         En B y no en A
        </td>
       </tr>
       <tr>
        <td align="left">
         <input type="text" name="soloA">
        </td>
        <td align="center">
         <input type="text" name="comunes">
        </td>
        <td align="right">
         <input type="text" name="soloB">
        </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html> 

Kaopectate 13/06/2003 12:13
138.- Manipulación de strings
 
P: ¿Como puedo eliminar los espacios en blanco del comienzo o del final de una cadena?

R:

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

    function lTrim(sStr){
     while (sStr.charAt(0) == " ") 
      sStr = sStr.substr(1, sStr.length - 1);
     return sStr;
    }

    function rTrim(sStr){
     while (sStr.charAt(sStr.length - 1) == " ") 
      sStr = sStr.substr(0, sStr.length - 1);
     return sStr;
    }

    function allTrim(sStr){
     return rTrim(lTrim(sStr));
    }

    function prueba(){
     with (document.frm){
      original.value = ">" + usuario.value + "<";
      lTrimmed.value = ">" + lTrim(usuario.value) + "<";
      rTrimmed.value = ">" + rTrim(usuario.value) + "<";
      allTrimmed.value = ">" + allTrim(usuario.value) + "<";
     }
    }

   </script>
  </head>
 <body>
  <form name="frm">
   <table border="0">
    <tr>
     <td align="right">
      Valor
     </td>
     <td>
      <input type="text" name="usuario" value="    Un valor      "><br>
     </td>
    </tr>
    <tr>
     <td align="right">
      Original
     </td>
     <td>
      <input type="text" name="original" readonly><br>
     </td>
    </tr>
    <tr>
     <td align="right">
      Trim izquierdo
     </td>
     <td>
      <input type="text" name="lTrimmed" readonly><br>
     </td>
    </tr>
    <tr>
     <td align="right">
      Trim derecho
     </td>
     <td>
      <input type="text" name="rTrimmed" readonly><br>
     </td>
    </tr>
    <tr>
     <td align="right">
      Trim completo
     </td>
     <td>
      <input type="text" name="allTrimmed" readonly><br>
     </td>
    </tr>
    <tr>
     <td colspan="2" align="center">
      <input type="button" value="Calcula" onclick="prueba()">
     </td>
    </tr>
   </table>
  </form>
 </body>
</html> 

Kaopectate 24/06/2003 17:53
139.- Calendario
 
P: ¿Como puedo poner un calendario para seleccionar los campos fecha?

R:

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

   var dFec = new Date();
   var aMonthNames = new Array(
                          "January", "February", "March", "April", "May", "June",
                          "July", "August", "September", "October", "November", "December");

   function firstOfMonth(dFec){
    var dRes = new Date();
    dRes.setYear(dFec.getYear());
    dRes.setMonth(dFec.getMonth());
    dRes.setDate(1);
    return dRes;
   }

   function lastDayOfMonth(dFec){
    var dRes = new Date();
    var nYear = dFec.getYear();
    var nMonth = dFec.getMonth() + 1;
    if (nMonth == 12){
     nMonth = 0;
     nYear++;
    }
    dRes.setYear(nYear);
    dRes.setMonth(nMonth);
    dRes.setDate(1);
    return new Date(dRes.valueOf() - (24 * 60 * 60 * 1000));
   }

   function dayToWrite(nDay){
    var dToday = new Date();
    var bisThisMonth = ((dFec.getYear() == dToday.getYear()) && (dFec.getMonth() == dToday.getMonth()));
    var sDay = String(nDay);
    sDay = (nDay == dFec.getDate() && bisThisMonth? "<b><font color='red'>" + sDay + "</font></b>": sDay);
    return sDay;
   }

   function selectDay(nDay){
    var sRes, sDay, sMon, sYea;
    sDay = "0" + String(nDay);
    sDay = sDay.substr(sDay.length - 2, 2);
    sMon = "0" + String(dFec.getMonth() + 1);
    sMon = sMon.substr(sMon.length - 2, 2);
    sYea = String(dFec.getFullYear());
    sRes = sDay + "/" + sMon + "/" + sYea;
    opener.document.forms[0].dateResult.value = sRes;
    opener.fillDateField();
    close();
   }

   function showCalenContents(){
    var dFec0 = firstOfMonth(dFec);
    var nDay = 1;
    var nLastDay = lastDayOfMonth(dFec).getDate();
    var sWeek = "";
    var bEnd = false;
    var bWri = false;
    var nDOW0 = dFec0.getDay();
    for (var j = 0; !bEnd; j++){
     sWeek = "<tr>";
     for (var i = 0; (i < 7) && !bEnd; i++){
      bWri = bWri || (i == nDOW0);
      if (bWri)
       sWeek += "<td align='right' style='cursor: hand' onclick='parent.selectDay(" + String(nDay) + ")'>" + dayToWrite(nDay, bWri) + "</td>";
      else
       sWeek += "<td>&nbsp;</td>";
      if (bWri) nDay++;
      bEnd = (nDay > nLastDay);
     }
     if (bEnd) 
      for (var k = i; k < 7; k++)
       sWeek = sWeek + "<td>&nbsp;&nbsp;</td>";
     window.usefull.document.writeln(sWeek + "</tr>");
    }
   }

   function backMonth(){
    var nMonth = dFec.getMonth();
    var nYear = dFec.getFullYear();
    if (--nMonth == -1){
     nMonth = 11;
     nYear--;
    }
    dFec.setMonth(nMonth);
    dFec.setYear(nYear);
    calendary();
   }

   function forthMonth(){
    var nMonth = dFec.getMonth();
    var nYear = dFec.getFullYear();
    if (++nMonth == 12){
     nMonth = 0;
     nYear++;
    }
    dFec.setMonth(nMonth);
    dFec.setYear(nYear);
    calendary();
   }

   function backYear(){
    var nYear = dFec.getFullYear();
    dFec.setYear(--nYear);
    calendary();
   }

   function forthYear(){
    var nYear = dFec.getFullYear();
    dFec.setYear(++nYear);
    calendary();
   }

   function showCalen(){
    with (window.usefull.document){
     write("<table border='0' width='100%' height='100%'><tr><td><table border='0' width='100%'><tr>");
     write("<td width='10'><input type='button' name='bckYear' value='<<' onclick='parent.backYear()'></td>");
     write("<td width='10'><input type='button' name='bckMonth' value='<' onclick='parent.backMonth()'></td>");
     write("<td align='center'><b>" + aMonthNames[dFec.getMonth()].substr(0, 3) + ", " + String(dFec.getYear()) + "</b></td>");
     write("<td width='10'><input type='button' name='ForMonth' value='>' onclick='parent.forthMonth()'></td>");
     write("<td width='10'><input type='button' name='ForYear' value='>>' onclick='parent.forthYear()'></td>");
     write("</tr></table></tr><tr><td>");
     write("<table border='0'>");
     write("<tr><td><b>Su</b></td><td><b>Mo</b></td><td><b>Tu</b></td><td><b>We</b></td><td><b>Th</b></td><td><b>Fr</b></td><td><b>Sa</b></td></tr>");
     showCalenContents();
     write("</table></td></tr></table>");
    }
   }

   function calendary(){
    with (window.usefull.document){
     open();
     writeln("<html><head></head><body>");
     writeln("<form name='frm'>");
     showCalen();
     writeln("</form></body></html>");
     close();
    }
   }

  </script>
 <head>
 <frameset rows="100%,*" border="0" frameborder="no" framespacing="0" onload="calendary()">
  <frame name="usefull" src="DummyPg.htm" frameborder="no" marginheight="0" marginwidth="0" scrolling="no">
  <frame name="useless" src="DummyPg.htm" frameborder="no" marginheight="0" marginwidth="0" scrolling="no">
 </frameset>
<html> 
Modo de uso: testCalen.htm
Código PHP:
<html>
 <head>
  <script language="JavaScript">

   var nInput;

   function calen(n){
    var oWnd;
    nInput = n;
    oWnd = open("Calendario.htm", "fechas", "location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no,width=180,height=200");
    oWnd.focus();
   }

   function fillDateField(){
    with (document.frm)
     if (nInput == 1)
      fechaInicial.value = dateResult.value;
     else
      fechaFinal.value = dateResult.value;
   }

  </script>
 <head>
 <body>
  <form name="frm">
   <table border="0">
    <tr>
     <td>
      Desde
     </td>
     <td>
      <input type="text" name="fechaInicial">
      <input type="button" value="..." onclick="calen(1)">
     </td>
    </tr>
    <tr>
     <td>
      Hasta
     </td>
     <td>
      <input type="text" name="fechaFinal">
      <input type="button" value="..." onclick="calen(2)">
     </td>
    </tr>
   </table>
   <input type="hidden" name="dateResult">
  </form>
 <body>
<html> 
Página "dummy": DummyPg.htm
Código PHP:
<html>
 <head>
 </head>
 <body>
 </body>
</html> 

Mickel 30/06/2003 11:00
140. P:Como validar que se seleccionen solo archivos de determinado tipo en un INPUT TYPE='FILE'?

R: Usa esta funcion
Código PHP:
function LimitAttach(tField,iType) {
file=tField.value;
if (iType==1) {
extArray = new Array(".gif",".jpg",".png");
}
if (iType==2) {
extArray = new Array(".swf");
}
if (iType==3) {
extArray = new Array(".exe",".sit",".zip",".tar",".swf",".mov",".hqx",".ra",".wmf",".mp3",".qt",".med",".et");
}
if (iType==4) {
extArray = new Array(".mov",".ra",".wmf",".mp3",".qt",".med",".et",".wav");
}
if (iType==5) {
extArray = new Array(".html",".htm",".shtml");
}
if (iType==6) {
extArray = new Array(".doc",".xls",".ppt");
}
allowSubmit = false;
if (!file) return;
while (file.indexOf("\\") != -1) file = file.slice(file.indexOf("\\") + 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray[i] == ext) {
allowSubmit = true;
break;
}
}
if (allowSubmit) {
} else {
tField.value="";
alert("Usted sólo puede subir archivos con extensiones " + (extArray.join(" ")) + "\nPor favor seleccione un nuevo archivo");
}
} 
de tal forma que en tu input type='file' agreges
onBlur='LimitAttach(this,n);' donde n es el tipo de validacion que deseas hacer

Nota. Los tipos de validaciones mostrados son
1: gif, jpg, png
2: swf
3: exe, sit, zip, tar, swf, mov, hqx, ra, wmf, mp3, qt, med, et
4: mov, ra, wmf, mp3, qt, med, et, wav
5: htm, html, shtml
6: doc, xls, ppt
pero pueden agregarse o cambiarse segun se necesiten

JavierB 30/06/2003 11:44
141.- Calcular el tiempo que tarda en cargarse una página.
 
P: ¿Como puedo poner en una página el tiempo que ha tardado en cargarse en el navegador del usuario?

R:
Código PHP:
<html>
<head>
<script>
var inicio=new Date();
inicio=inicio.getTime();
function ini() {
    fin=new Date();
    fin=fin.getTime();
    tiempo=(fin-inicio)/1000; //Gracias por el consejo, Ferny
    document.getElementById('tmp').innerHTML=tiempo;
}
</script>
</head>

<body onLoad="ini()">
Tiempo que ha tardado la página en cargarse: <span id="tmp">Calculando...</span> segundos.
</body>
</html> 

Kaopectate 08/07/2003 14:36
142.- Generar dinámicamente campos de texto
 
P: ¿Como puedo generar sobre mi página un número distinto de campos de texto según lo que indique el usuario?

R:

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

   var nValores = 0;

   function cambiaPg(){
    with (window.pantalla.document){
     nValores = parseInt(frm.cant.value, 10);
    }
    formulario();
   }

   function formulario(){
    with (window.pantalla.document){
     open();
     writeln("<html>\n<body>");
     writeln("<form name='frm'>");
     writeln(" Número de textos:");
     writeln(" <input type='text' name='cant'>");
     writeln(" <input type='button' name='btn' value='Aplicar' onclick='parent.cambiaPg()'>");
     writeln("<br>");
     for (var i = 0; i < nValores; i++){
      writeln("Valor " + String(i) + ":");
      writeln("<input type='text' name='c" + String(i) + "'><br>");
     }
     writeln("</form>");
     writeln("</body>\n</html>");
     close();
    }
   }

   document.writeln("<frameset rows='100%,*' onload='javascript:parent.formulario()'>");
   document.writeln("     <frame name='pantalla' src='DummyPage.htm'>");
   document.writeln("     <frame src=''>");
   document.writeln("</frameset>");

  </script>
 </head>
</html> 

ferny 07/08/2003 09:06
143.- Previsualizar una imagen antes de subirla
 
P: ¿Se puede previsualizar una imagen que he seleccionado en un <input type=file> antes de subirla?

R:

SI:

Código PHP:
<p>Selecciona una imagen</p>
<input type="file" onChange="document.imagen.src='file:///' + this.value"><br><br>
Vista previa:<br><br>
<img src="imagenpordefecto.gif" name="imagen"> 
Ver ejemplo

Nota: sólo funcionará en Internet Explorer

CsC_3 12/08/2003 18:21
144.- Meter archivo txt en una pagina web
 
P: Se puede meter un archivo txt, en una pagina web?

R: pero que claro que si.

esto va en cualquier parte donde quieras meter el txt
Código PHP:

<script language="javascript" src="diario.txt"></script> 
esto debe de ir en el txt

Código PHP:
 var saludo=""+
"<font color=#ffffff size=2>script, para meter un txt<br>"+

"<font color=#333333 size=2>en un html, sin problemas</font>"+

"<font color=#ffffff size=1>CsC3</font>";

document.write(saludo); 

este codigo tiene la libertad que puedes meter, texto (con formato), imagenes, etc...




[se que no soy moderador, ni nada del foro de jscript, pero este codigo se me hace muy facil y practico, perdon si hago mal, en ponerlo]

KarlanKas 24/08/2003 04:15
145.- Ver la página a distintas resoluciones
 
P.- ¿Cómo puedo ver si mi página se verá bien a una resolución menor que la que tiene mi PC sin tener que cambiar la configuración de la pantalla de mi ordenador?
R.- Esto es un pequeño truco que se vale de la posibilidad de ejectar sentencias de JS en la barra de Dirección del navegador. Sólo se debe, una vez en la página que queremos ver a otra resolución, poner en la barra de dirección:

http://www.karlankas.net/forosdelweb/barra.jpg

En realidad no debe ser 600 el alto, debería ser 540 poruqe con la barra de inicio se pierde un espacio (valioso) que ha de tenerse en cuenta. El ejemplo es para todos los que tenemos la pantalla a 1024x768 o superior y tenemos la fastidiosa labor de hacer páginas a 800x600.

Un saludo! :adios:

WoodnTiger 28/08/2003 08:36
146.- Forzar entrada por la página principal (sin usar marcos)
 
P: ¿Cómo puedo forzar que el usuario entre siempre por mi página principal (index.htm) y no por mis páginas secundarias si NO utilizo marcos (frames)?

R: Con este script :arriba: .

En el HEAD de la página secundaria a la que no quieres que entren sin pasar por index.htm:

Código PHP:
<script language="JavaScript">
function redireccionar() {
    var origen = document.referrer;
    if (origen!="http://tuweb/index.htm") window.location.href= "index.htm";
    }
</script> 
Y en el BODY de esa misma página, poner al principio del todo:
Código PHP:
<body onactivate="redireccionar()"> 
Notas: el valor de la variable origen debe ser la URL completa incluyendo la página "de control", y el `window.location.href apunta a "index.htm" directamente porque la página que contiene el script se encuentra en el mismo directorio que "index.htm". Si no es así, poner la ruta.

Salu2 y gracias a Kaopectate por la "pista clave" :-D .

epa2 09/09/2003 06:26
147.- Mensaje segun hora del día
 
P: ¿COMO PUEDO MOSTRAR UN MENSAJE EN MI PAGINA DEPENDIENDO DE LA HORA DEL DIA?

R:Con este pequeño script

CREDITOS BRAVENET

Código:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write("<div align='center' style='font:bold 14px verdana;'>")
day = new Date()
hr = day.getHours()
if (hr == 1) document.write("It's after 1 am. Are you still up?")
if (hr == 2) document.write("It's after 2 am. Are you still up?")
if (hr == 3) document.write("It's after 3 am. Are you still up?")
if (hr == 4) document.write("It's after 4 am. Are you still up?")
if (hr == 5) document.write("It's after 5 am. Are you still up?")
if (hr == 6) document.write("It's after 6 am, yawn!")
if (hr == 7) document.write("Good Morning! It's after 7 am")
if (hr == 8) document.write("It's after 8 am")
if (hr == 9) document.write("It's after 9 am")
if (hr == 10) document.write("It's after 10 am, coffee time!")
if (hr == 11) document.write("It's after 11 am")
if (hr == 12) document.write("It's after noon")
if (hr == 13) document.write("Good Afternoon! It's after 1 pm")
if (hr == 14) document.write("It's after 2 pm")
if (hr == 15) document.write("It's after 3 pm")
if (hr == 16) document.write("It's after 4 pm")
if (hr == 17) document.write("Good Evening! It's after 5 pm")
if (hr == 18) document.write("It's after 6 pm, eat some dinner!")
if (hr == 19) document.write("It's after 7 pm")
if (hr == 20) document.write("It's after 8 pm")
if (hr == 21) document.write("It's after 9 pm")
if (hr == 22) document.write("It's after 10 pm")
if (hr == 23) document.write("It's after 11 pm, go to bed!")
if (hr == 0) document.write("It's after midnight.")
document.write("</div>")
// End -->
</SCRIPT>

acervantes 26/09/2003 10:22
148.- Formato Fecha
 
P: ¿Cómo puedo mostrar la fecha en formato "28 de Septiembre del 2003"?

R: Con esta función de javascript:

CREDITOS: seoista

Código PHP:
<html>
 <head>
  <script language="JavaScript">
   // función que muestra la fecha en formato Viernes, 26 de Septiembre del 2003
   // parámetro una fecha (se asume que es válida)

   function showdate(mydate){
    var year = mydate.getYear()
    if (year < 1000)
     year += 1900
    var day = mydate.getDay()
    var month = mydate.getMonth()
    var daym = mydate.getDate()
    if (daym < 10)
     daym = "" + daym
    var dayarray = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado")
    var montharray = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
    return dayarray[day] + ", " + daym + " de " + montharray[month] + " del " + year;
   }

   // y la llamada a la función
   document.write(showdate(new Date()))
  </script>
 </head>
 <body>
 </body>
</html> 

Helbira 30/09/2003 03:42
149.- Límite de caracteres en un textarea
 
P: ¿Cómo puedo limitar el número de caracteres de un textarea?

R: La solución no es el atributo maxlength que tiene los campos de texto. Consiste en cada vez que se introduzca un carácter en el textarea, contar el número total de caracteres que van ya escritos y en caso de haberse superado, borrar el último carácter.

Código PHP:
<script language="JavaScript">
function maximaLongitud(texto,maxlong) {
  var tecla, in_value, out_value;

  if (texto.value.length > maxlong) {
    in_value = texto.value;
    out_value = in_value.substring(0,maxlong);
    texto.value = out_value;
    return false;
  }
  return true;
}
</script>

<textarea name="nombre_textarea" cols="50"
rows="5" onKeyUp="return maximaLongitud(this,254)"> 

Kaopectate 30/09/2003 15:22
150.- Detectar Sistema Operativo
 
P: ¿Como puedo saber el Sistema Operativo sobre el que esta corriendo mi página?

R:

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

   function getOpSys(){
    var sOpSys = "<b>O.S.: </b>" + navigator.appVersion.toLowerCase().split(";", 3)[2];
    return sOpSys;
   }

  </script>
  <title></title>
 </head>
 <body>
  <script language="JavaScript">
   document.writeln(getOpSys());
  </script>
 </body>
</html> 

JavierB 03/10/2003 06:22
151.- Controlar el número de decimales de un número.
 
P: ¿Como puedo mostrar un número con una determinada cantidad de decimales?

R: Con este pequeño código:
Código PHP:
<html>
<head>
<script>
Number.prototype.decimal = function (num) {
    pot = Math.pow(10,num);
    return parseInt(this * pot) / pot;
}
function decimal(src) {
    n=eval(document.getElementById(src).value);
    alert(n.decimal(3)); //deja 3 decimales
}
</script>
</head>

<body>
<input type="text" id="numero" value="3.1415926">
<input type="button" onClick="decimal('numero')">
</body>
</html> 

KarlanKas 03/10/2003 09:26
152.- Cómo tener un WHOIS siempre a mano
 
P.- Muchas veces necesitamos saber si un dominio está libre o comprobar cuando un dominio de un cliente caduca y tenemos que visitar la típica página de unvendedor de dominios, solicitarlo y darle al whois cuando nos dice que (obviamente) está ocupado. ¿No hay una forma más sencilla?
R.- Sí la hay, pega este código en la barra de dirección de tu navegador, a continuación pincha en el espacio de la derecha de dicha barra donde suele aparecer el icono de página web (en el explorer una hoja con una e delante) y arrástralo hasta la barra de vínculos.

Código PHP:
javascript:pepe=prompt("nombre del dominio","","");document.location("http://www.dnsstuff.com/tools/whois.ch?ip="+pepe); 
La dirección la saqué de un post de cvdhs. Gracias, "jefe". ;-)


La zona horaria es GMT -6. Ahora son las 23:48.
Página 3 de 6 12 3 456
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.