Foros del Web » Programando para Internet » Javascript »

FAQs JavaScript

Estas en el tema de FAQs JavaScript en el foro de Javascript en Foros del Web. Pregunta: Cómo hago la letra capital en un text input? Respuesta: En el text-input colocas el método onBlur colocas lo siguiente: Código PHP: onBlur = ...

  #211 (permalink)  
Antiguo 26/04/2005, 14:48
T4X
 
Fecha de Ingreso: enero-2004
Ubicación: myT-Base
Mensajes: 254
Antigüedad: 20 años, 11 meses
Puntos: 2
213. Cómo hago la letra capital en un text input

Pregunta: Cómo hago la letra capital en un text input?
Respuesta:

En el text-input colocas el método onBlur colocas lo siguiente:
Código PHP:
onBlur="this.style.textTransform='capitalize'" 
Y si lo deseas, el texto en minusculas junto con la letra capital, entonces quedaría así:
Código PHP:
onBlur="this.value = this.value.toLowerCase(); this.style.textTransform='capitalize'" 
__________________
Ahora T4X es
WinGFX!!!!!

Última edición por KarlanKas; 06/09/2005 a las 01:42
  #212 (permalink)  
Antiguo 03/05/2005, 10:38
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 21 años, 7 meses
Puntos: 5
214. Format Currency (Monedas)

Pregunta: ¿Cómo transformo un valor en monedas?

utilización:

cantidad = 5
precio_unitario = 10.98

total = cantidad * precio_unitario
//el resultado de total de haber multiplicado esos dos valores en javascript nos traerá como resultado: 54.900000000000006
//para redondearlo y transformarlo a moneda utilizaremos la siguiente función:


total = formatCurrency(total);
document.write(total);

resultado: 54.90


//Nota: no le pases el parseInt() después de multiplicar el valor ok?


Función:
Código:
function formatCurrency(num) {
	num = num.toString().replace(/\$|\,/g,'');
	if(isNaN(num)) num = "0";
	sign = (num == (num = Math.abs(num)));
	num = Math.floor(num*100+0.50000000001);
	cents = num%100;
	num = Math.floor(num/100).toString();
	if(cents<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))+
	num.substring(num.length-(4*i+3));
			
	return (((sign)?'':'-') + num + '.' + cents);
}
Saludos
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.

Última edición por KarlanKas; 06/09/2005 a las 01:43
  #213 (permalink)  
Antiguo 09/05/2005, 10:55
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 23 años
Puntos: 61
215. Selector de color

P.- Cómo hacer un selector de color?
R.-Hay varias opciones. Una de las mismas es este código que propongo:

Código PHP:
<html
<
head

<
script

//Script de KarlanKas para Foros Del Web 
//Muchas gracias a caricatos por advertirme de los fallitos ;-) 
//He aprovechado para mejorar un poco el script 

hexadecimal=['0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'A' 'B' 'C' 'D' 'E' 'F']; 
r=0
g=0
b=0
colores=["r","g","b"]; 

function 
color(incremento,n){ 

    if(eval(
colores[n])+incremento<256 && eval(colores[n])+incremento>-1){ 
        eval(
colores[n]+"+="+incremento); 
    } 

    
document.getElementById("campo").style.backgroundColor="rgb("+r+","+g+","+b+")"
    
document.getElementById("campo").style.color="rgb("+(255-r)+","+(255-g)+","+(255-b)+")"
     
    
document.getElementById("color").value="#"+convertir(r)+convertir(g)+convertir(b); 
    
document.getElementById("color2").value="rgb("+r+","+g+","+b+")"



function 
convertir(numero){ 
    
numero=parseInt(numero
    
enHexa=hexadecimal[parseInt(numero/16)]+""+hexadecimal[numero%16]; 
    return 
enHexa

</script> 

<style> 
*{ 
    font:normal 10px/10px verdana; 

#campo{ 
    height:400px; 

div[id="campo"]{ 
    height:210px!important; 

#campo{ 
    width:400px; 
    background-color:rgb(0,0,0); 
    font:bold 20px/20px verdana; 
    color:#fff; 
    text-align:center; 
    padding-top:190px; 

</style> 
</head> 

<body> 

<div style="width:400px;"> 
    <div id="campo" >FOROS DEL WEB</div> 

    <table>
        <tr>
            <td>En Hexadecimal:</td>
            <td><input type="text" name="color" id="color" readonly></td>
        <tr>
            <td>En Decimal:</td>
            <td><input type="text" name="color2" id="color2" readonly><br></td>
        </tr>
    </table> 
    <div style="float:left;border:solid 1px black;padding:10px;width:110px;">Mantén apretado cada botón hasta llegar al valor deseado.</div> 
    <table style="text-align:center;"> 
        <tr> 
            <td><input type="button" onmouseup="clearInterval(pepe)"  value="-" onmousedown="pepe=setInterval('color(-5,0)',100)"></td>
            <td>Rojo</td> 
            <td><input type="button" onmouseup="clearInterval(pepe)"   value="+" onmousedown="pepe=setInterval('color(5,0)',100)"></td>
        </tr> 
        <tr> 
            <td><input type="button" onmouseup="clearInterval(pepe)"  value="-" onmousedown="pepe=setInterval('color(-5,1)',100)"></td>
            <td>Verde</td>
            <td><input type="button" onmouseup="clearInterval(pepe)"  value="+" onmousedown="pepe=setInterval('color(5,1)',100)"></td>
        </tr>
        <tr> 
            <td><input type="button" onmouseup="clearInterval(pepe)"  value="-" onmousedown="pepe=setInterval('color(-5,2)',100)"></td> 
            <td>Azul</td> 
            <td><input type="button" onmouseup="clearInterval(pepe)"  value="+" onmousedown="pepe=setInterval('color(5,2)',100)"></td> 
        </tr> 
    </table> 
</div> 

</body> 
</html> 
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.

Última edición por KarlanKas; 09/05/2005 a las 17:21
  #214 (permalink)  
Antiguo 21/05/2005, 05:02
 
Fecha de Ingreso: febrero-2005
Mensajes: 198
Antigüedad: 19 años, 10 meses
Puntos: 5
216.-Añadir método Trim a la clase String

P: ¿Cómo puedo añadir un método a la clase String para que me borre los espacios en blanco?

R:

Muchos nos hemos preguntado alguna vez porque no viene intrínsecamente definido en la clase String un método Trim que nos elimine los espacios en blanco que pueda haber en una cadema.

Pero eso lo podemos solucionar nosotros mismos añadiendoselo (puedes meterlo en un archivo .js y servirte para cualquier página que lo necesites):


Código:
<HTML>
<HEAD>
<TITLE>Document </TITLE>
  <script language="javascript">
/* ----------------------------------------------------------------------------------- 
------- Trim(), LTrim(), RTrim() ----------------------------------------------------- 
------- 
------- Metodos que eliminan los espacios en blanco de una cadena */

  String.prototype.Trim = function(){
      return this.replace(/\s+$|^\s+/g,""); 
  }

  String.prototype.LTrim = function(){
       return this.replace(/^\s+/,""); 
  }

  String.prototype.RTrim = function(){
        return this.replace(/\s+$/,""); 
  }
  
/*-------------------------------------------------------------------------------------*/

  function ambos(str){
      str = str.Trim();
      alert (  '|' + str + '|');
  }

  function izq(str){
      str = str.LTrim();
      alert (  '|' + str + '|');
  }

  function dcha(str){
      str = str.RTrim();
      alert (  '|' + str + '|');
  }

  </script>
</HEAD>

<BODY>
<button onclick="ambos('   galleta   ')">ambos lados</button>
<button onclick="izq('   galleta   ')">izquierda</button>
<button onclick="dcha('   galleta   ')">derecha</button>
</BODY>
</HTML>

Última edición por occiso; 27/07/2005 a las 15:45
  #215 (permalink)  
Antiguo 21/05/2005, 05:30
 
Fecha de Ingreso: febrero-2005
Mensajes: 198
Antigüedad: 19 años, 10 meses
Puntos: 5
217.- Clase validaciones para validar formularios

P: ¿Cómo puedo validar los formularios y que los datos que introducen son los correctos?

R: Muchas son las consultas sobre como validar este o aquel campo. Bien pues he desarrollado una pequeña clase en Javascript que creo cubre el 90% de validaciones que tengamos que realizar.

Para manejarla bien hay que saber algo de programación orientada a objetos (POO) pero si se le hecha un vistazo es bastante intuitiva y esta muy comentada. Como es un archivo bastante extenso meto un enlace a un archivo .rar con el archivo .js en cuestion y una pagina html de ejemplo de utilización y otro archivo .css con los estilos.

La clase sigue un código estándar y yo la he probado en Opera, IExplorer y Firefox y me ha funcionado perfectamente. Lo que no es estándar son los estilos css.

EDITADO (07/08/2005):

Como el enlace se había roto vuelvo a poner una direccion para que os podais bajar todos los archivos en uno comprimido. He hecho algunas mejoras respecto a la version anterior. Ahora voy por la version 1.1. Ahi la teneis:

Enlace

Última edición por occiso; 07/08/2005 a las 04:47
  #216 (permalink)  
Antiguo 01/06/2005, 17:15
T4X
 
Fecha de Ingreso: enero-2004
Ubicación: myT-Base
Mensajes: 254
Antigüedad: 20 años, 11 meses
Puntos: 2
218. Resaltado de celdas a través de checkbox

Pregunta: Cómo resaltar los checkboxes como lo hace hotmail?
Créditos: JavierB

Respuesta:
Usa este código, es simple pero te funcionará...

<html>
<head>
<script>
function marcar(obj) {
elem=obj.parentNode.parentNode;
elem.style.backgroundColor=(obj.checked) ? 'red' : 'white';
}

function marcarTodos(obj) {
elem=document.getElementsByName('algo');
for(i=0;i<elem.length;i++) {
elem[i].checked=obj.checked;
fila=elem[i].parentNode.parentNode;
fila.style.backgroundColor=(obj.checked) ? 'red' : 'white';
}
}
</script>
</head>

<body>
<table width="400px" border="1">
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" name="todos" onclick="marcarTodos(this)"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="checkbox" name="algo" onclick="marcar(this)"/>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="checkbox" name="algo" onclick="marcar(this)"/>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="checkbox" name="algo" onclick="marcar(this)"/>
</td>
</tr>
</table>
</body>
</html>
__________________
Ahora T4X es
WinGFX!!!!!

Última edición por KarlanKas; 06/09/2005 a las 01:44
  #217 (permalink)  
Antiguo 08/06/2005, 03:56
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 10 meses
Puntos: 772
219 - Filtrar datos de una tabla según lo escrito en un cuadro de texto

P - ¿Como puedo hacer para que solo se vean las filas de una tabla (<table>) que coinciden con lo escrito en un cuadro de texto?

R - Con este código:
Código PHP:
<html>
<
head>
<
script>
function 
buscar(txt) {
  
obj=document.getElementById('tabla');
  
// Recorremos todas las filas de la tabla
  
for (i=0;ele=obj.getElementsByTagName('tr')[i];i++) {
    
// elegimos la primera celda de la fila
    
celda ele.getElementsByTagName('td')[0]
    
// averiguamos que hay dentro de la celda
    
dato celda.innerHTML;
    
// vemos si coincide con lo que se ha escrito en el cuadro de texto
    
iz dato.substr(0,txt.length);
    
celda.style.display = (txt==iz) ? '' 'none';
  }
}
</script>
</head>
<body>
<input type="text" onkeyup="buscar(this.value)" />
<table id="tabla" border="1">
<tr><td>avion</td></tr>
<tr><td>coche</td></tr>
<tr><td>aviador</td></tr>
<tr><td>coger</td>
</table>
</body>
</html> 
  #218 (permalink)  
Antiguo 29/06/2005, 08:26
 
Fecha de Ingreso: junio-2005
Ubicación: ¡Qué te importa!
Mensajes: 9
Antigüedad: 19 años, 6 meses
Puntos: 0
Cita:
Iniciado por CHuLoSoY
P: Como deshabilito la selección de un texto?
El código de CHuLoSoy puede ser mejorado:
Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Hecho por MorZilla</title>
<script type="text/javascript">
document.onselectstart = new Function("return false");
// Para IE
</script>
<style type="text/css">
* {
-moz-user-select: none; /* Para navegadores Mozilla */
user-select: none; /* Posiblemente en futuros navegadores */
}
</style>
<body>
<h1>¡MorZilla!</h1>
</body>
</html> 
Ojalá les sirva!
  #219 (permalink)  
Antiguo 29/06/2005, 08:39
 
Fecha de Ingreso: junio-2005
Ubicación: ¡Qué te importa!
Mensajes: 9
Antigüedad: 19 años, 6 meses
Puntos: 0
Cita:
Iniciado por T4X
P: Cómo abrir una ventana popUp sin menus contextuales ó mejor un Dialogo Web???????

Ten en cuenta que esta función solo se desempeña en IE 5.5 y superior, aunque se está investigando si esta función de JavaScript tambien sea compatible con otros browsers.
Estas funciones sólo funcionan en IE, en Mozilla y otros navegadores provoca mensajes de error.
Recomiendo modificar el código:
Código PHP:
function verDialogo(url,nombre,argumentos) {
try {
if(
window.showModalDialog) return showModalDialog(url,nombre,argumentos);
else return 
open(url,nombre,argumentos);
}
catch(
e) { alert("Error JavaScript"); }

Tengan en cuenta que no comprobé el código todavía. (Por eso incluyo el try...catch)
  #220 (permalink)  
Antiguo 30/06/2005, 14:56
Avatar de causita  
Fecha de Ingreso: mayo-2002
Ubicación: Lima-Perú
Mensajes: 2.043
Antigüedad: 22 años, 7 meses
Puntos: 8
De acuerdo 222. Rollover en diferentes celdas de una tabla

no soy diestro en el manejo del Javascript pero "jugando" y poniendo en práctica las clases q alguna vez tuve les pongo un script muy útil (espero no esté repetido)

P: Cómo hago un rollover para q se vea en celdas diferentes de una tabla?
R:
Cita:
<html>
<head>
<script languaje="javascript">
function cambiar(foto){
document.getElementById('mostrar').innerHTML = '<img src="' + foto + '">';
}
</script>
</head>
<body>
<table width="450">
<tr>
<td><a href="#nada" onmouseover="cambiar('1.GIF')" OnMouseout="cambiar('inicio.GIF')">foto 1</a></td>
<td><a href="#nada" onmouseover="cambiar('2.GIF')" OnMouseout="cambiar('inicio.GIF')"">foto 2</a></td>
</tr>
<tr>
<td colspan="2"><div id="mostrar"><img src="inicio.gif"></div></td>
</tr>
</table>
</body>
</html>
Espero les sea d utilidad
__________________
|| no hay pregunta tonta....lo q hay son tontos q no preguntan || d-.-b

El Causita

Última edición por KarlanKas; 06/09/2005 a las 01:48
  #221 (permalink)  
Antiguo 01/07/2005, 13:01
 
Fecha de Ingreso: octubre-2000
Mensajes: 1.692
Antigüedad: 24 años, 2 meses
Puntos: 19
223. ¿Como paso datos de una ventanita abierta a la página que la abrío en Firefox?

P: ¿Como paso datos de una ventanita abierta a la página que la abrío en Firefox?
R:

En firefox no funciona opener.location por lo cual para pasar datos a un campo de formulario que está en otra ventanita debemos usar esta forma:

self.opener.document.NombredelFormulario.Nombredel Campo.value ='algo'
__________________
PD: Con amor, fe, amor a Dios y amistad podemos hacer un mundo mejor!!!!

Última edición por KarlanKas; 06/09/2005 a las 01:47
  #222 (permalink)  
Antiguo 09/07/2005, 10:31
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 10 meses
Puntos: 772
224.- Validar entrada de datos en un formulario

P: Como validar que los datos que se van introduciendo en un cuadro de texto de un formulario son correcto.

R: Utilizando este código (Probado en IE 6.0 y Firefox 1.4)
Código PHP:
<html>
<
head>
<
script>
function 
validar(e) {
    
tecla = (document.all) ? e.keyCode e.which;
    if (
tecla==8) return true//Tecla de retroceso (para poder borrar)
    
patron =/[A-Za-z]/; // Solo acepta letras
    //patron = /\d/; Solo acepta números
    //patron = /\w/; Acepta números y letras
    //patron = /\D/; No acepta números
    
te String.fromCharCode(tecla);
    return 
patron.test(te); 

</script>
</head>

<body>
<input type="text" name="textfield" onkeypress="return validar(event)">
</body>
</html> 
  #223 (permalink)  
Antiguo 19/07/2005, 15:01
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 21 años, 7 meses
Puntos: 5
225. cuando se presione la tecla ESCAPE se cierre una ventana

P: ¿Cómo hago para que cuando se presione la tecla ESCAPE se cierre una ventana?

R: así:

Código:
 
function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}
function InitESC() {
document.body.onkeypress = _CloseOnEsc;
}
Utilización:

Código HTML:
 <body onload="InitESC();"></body> 
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.

Última edición por KarlanKas; 06/09/2005 a las 01:48
  #224 (permalink)  
Antiguo 26/07/2005, 14:27
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 21 años, 7 meses
Puntos: 5
226.Transformar Números a Letras

P: ¿Cómo puedo transformar Números a Letras?

R: Utiliza las siguientes funciones para que puedas transformar números enteros en letras. Esta función soporta hasta números que van desde el Cero hasta el el Billón.

Funciones:

Código:
 
function letras(c,d,u)
{
var centenas,decenas,decom
var lc=""
var ld=""
var lu=""
centenas=eval(c);
decenas=eval(d);
decom=eval(u);
switch(centenas) 
{
case 0: lc="";break;
case 1: 
{
if (decenas==0 && decom==0)
lc="Cien"
else
lc="Ciento ";
}
break;
case 2: lc="Doscientos ";break;
case 3: lc="Trescientos ";break;
case 4: lc="Cuatrocientos ";break;
case 5: lc="Quinientos ";break;
case 6: lc="Seiscientos ";break;
case 7: lc="Setecientos ";break;
case 8: lc="Ochocientos ";break;
case 9: lc="Novecientos ";break; 
} 
switch(decenas) 
{
	case 0: ld="";break;
	case 1:
{ 
switch(decom) 
{
	case 0:ld="Diez";break;
	case 1:ld="Once";break;
	case 2:ld="Doce";break;
	case 3:ld="Trece";break;
	case 4:ld="Catorce";break;
	case 5:ld="Quince";break;
	case 6:ld="Dieciseis";break;
	case 7:ld="Diecisiete";break;
	case 8:ld="Dieciocho";break;
	case 9:ld="Diecinueve";break;
}
}			 
break;
case 2:ld="Veinte";break;
case 3:ld="Treinta";break;
case 4:ld="Cuarenta";break;
case 5:ld="Cincuenta";break;
case 6:ld="Sesenta";break;
case 7:ld="Setenta";break;
case 8:ld="Ochenta";break;
case 9:ld="Noventa";break; 
}
switch(decom) 
{
	case 0: lu="";break;
	case 1: lu="Un";break;
	case 2: lu="Dos";break;
	case 3: lu="Tres";break;
	case 4: lu="Cuatro";break;
	case 5: lu="Cinco";break;
	case 6: lu="Seis";break;
	case 7: lu="Siete";break;
	case 8: lu="Ocho";break;
	case 9: lu="Nueve";break; 
}
 
if (decenas==1)
{
return lc+ld;
}
if (decenas==0 || decom==0)
{
return lc+" "+ld+lu;
}
else
{
if(decenas==2) 
{
ld="Veinti";
return lc + ld + lu.toLowerCase();
}
else
{
return lc+ld+" y "+lu
}
}
}
 
function getNumberLiteral(n)
{ 
var m0,cm,dm,um,cmi,dmi,umi,ce,de,un,hlp,decimal;
 
if (isNaN(n)) {
alert("La Cantidad debe ser un valor Numérico.");
return null
}
m0= parseInt(n/ 1000000000000); rm0=n% 1000000000000;
m1= parseInt(rm0/100000000000); rm1=rm0%100000000000;
m2= parseInt(rm1/10000000000); rm2=rm1%10000000000;
m3= parseInt(rm2/1000000000); rm3=rm2%1000000000;
cm= parseInt(rm3/100000000); r1= rm3%100000000;
dm= parseInt(r1/10000000); r2= r1% 10000000;
um= parseInt(r2/1000000); r3= r2% 1000000;
cmi=parseInt(r3/100000); r4= r3% 100000;
dmi=parseInt(r4/10000); r5= r4% 10000;
umi=parseInt(r5/1000); r6= r5% 1000;
ce= parseInt(r6/100); r7= r6% 100;
de= parseInt(r7/10); r8= r7% 10;
un= parseInt(r8/1);
//r9=r8%1; 
999123456789
if (n< 1000000000000 && n>=1000000000)
{
tmp=n.toString();
s=tmp.length;
tmp1=tmp.slice(0,s-9)
tmp2=tmp.slice(s-9,s);
 
tmpn1=getNumberLiteral(tmp1);
tmpn2=getNumberLiteral(tmp2);
 
if(tmpn1.indexOf("Un")>=0)
pred=" Billón "
else
pred=" Billones "
return tmpn1+ pred +tmpn2;
}
 
if (n<10000000000 && n>=1000000)
{
mldata=letras(cm,dm,um); 
hlp=mldata.replace("Un","*");
if (hlp.indexOf("*")<0 || hlp.indexOf("*")>3)
{
mldata=mldata.replace("Uno","un");
mldata+=" Millones ";
}
else
{
mldata="Un Millón ";
}
mdata=letras(cmi,dmi,umi);
cdata=letras(ce,de,un);
if(mdata!="	")
{
if (n == 1000000) {
	mdata=mdata.replace("Uno","un") + "de";
} else {
	mdata=mdata.replace("Uno","un")+" mil ";
}
}
 
return (mldata+mdata+cdata);
} 
if (n<1000000 && n>=1000)
{
mdata=letras(cmi,dmi,umi);
cdata=letras(ce,de,un);
hlp=mdata.replace("Un","*");
if (hlp.indexOf("*")<0 || hlp.indexOf("*")>3)
{
mdata=mdata.replace("Uno","un");
return (mdata +" mil "+cdata);
}
else
	return ("Mil "+ cdata);
} 
if (n<1000 && n>=1)
{
return (letras(ce,de,un));
}
if (n==0)
{
return " Cero";
}
return "No disponible"
}
Utilización:

Código:
 var enteros = 50; 
var resultado = getNumberLiteral(enteros)
alert(resultado)
Enjoy
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.

Última edición por KarlanKas; 06/09/2005 a las 01:49
  #225 (permalink)  
Antiguo 04/08/2005, 12:21
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 21 años, 7 meses
Puntos: 5
227. Validar que el usuario seleccione al menos un CheckBox

P: ¿Cómo puedo validar que el usuario seleccione al menos un checkbox?
R: Utilizando esta función:

Código PHP:
<script language="javascript">
function 
validar_checkbox() { 
var 
total f.opciones.length;
var 
selected false;
 
if (
total != null) {
for (
i=0i<totali++) {
    if (
f.opciones[i].checked == true) {
     
selected true;
     break;
    }
}
} else {
if (
f.opciones.checked == true) {
    
selected true;
}
}
 
if (
selected == false) {
alert("Debe seleccionar al menos una opción.");
return 
false
}
}
</script> 
también puedes ver: http://www.forosdelweb.com/showpost....9&postcount=22

Enjoy!
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.

Última edición por KarlanKas; 06/09/2005 a las 01:49
  #226 (permalink)  
Antiguo 03/09/2005, 13:01
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 21 años, 2 meses
Puntos: 45
228. Corchetes de colores con CSS en IE

P: Quiero utilizar
Código PHP:
a:hover:before {content"["}
a:hover:after{content:"]"
sobre IE, que no lo soporta. ¿Alternativa?

R: Puedes copiar este codigo que mostrara corchetes naranjas antes y despues de todos los enlaces sólo cuando el raton esté encima. Incluso más estetico, pues no se deforma el contenido de la pagina. (Habria que tener cuidado con los enlaces que tienen como contenido imagenes y tal, eso de vuestra mano )

Código PHP:
<html>

<
head>

<
style>
.
corchetes {
    
color#f93; 
    
font-weight:bold;
    
width:3px
    
visibility:hidden
    
display:inline;
}
</
style>

</
head>

<
body>


<
a href="a.htm">enlace</atexto texto texto 
<a href="s.html">otro enlace</amas texto 
<a href="i.htm">y otro</ay se acaba aqui

<
script

// necesitaba dos funciones, el insertBefore que ya existe, y el insertAfter que nos lo sacamos de la manga
function insertAfter(parentnodereferenceNode) {
    
parent.insertBefore(nodereferenceNode.nextSibling);
}

// la coleccion de <a> (anchors)
var As=document.getElementsByTagName("A"); 
var 
corchete1,corchete2;

//por cada enlace
for(var a=0;a<As.length;a++) {

    
//quitamos los espacios anteriores y posteriores a los enlaces, que si no con el corchete oculto parecera doble espaciado
    
var anterior = As[a].previousSibling;
    if(
anterior!=null) {
        
anterior.nodeValue  anterior.nodeValue.substr(0,anterior.nodeValue.length-1); 
    }
    var 
siguiente = As[a].nextSibling;
    if(
siguiente!=null) {
        
siguiente.nodeValue siguiente.nodeValue.substr(1);
    }
    
    
//creamos los corchetes, y les aplicamos el estilo "corchetes"
    
corchete1=document.createElement("DIV");
    
corchete2=document.createElement("DIV");
    
corchete1.appendChilddocument.createTextNode("[") );
    
corchete2.appendChilddocument.createTextNode("]") );
    
corchete1.className=corchete2.className="corchetes";
    
    
//insertamos los corchetes antes y despues del enlace
    
As[a].parentNode.insertBeforecorchete1 , As[a] );
    
insertAfter( As[a].parentNodecorchete2, As[a] );
    
    
//los eventos que se ocuparan de poner los enlaces y quitarlos
    
As[a].onmouseover=function() { 
        
this.previousSibling.style.visibility="visible";
        
this.nextSibling.style.visibility="visible";
    }
    As[
a].onmouseout=function() { 
        
this.previousSibling.style.visibility="hidden";
        
this.nextSibling.style.visibility="hidden";
    }
}

</script>


</body>

</html> 
Debe ir al final de la pagina, por supuesto.

__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.

Última edición por KarlanKas; 06/09/2005 a las 01:51
  #227 (permalink)  
Antiguo 06/09/2005, 01:57
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 23 años
Puntos: 61
229. Contador de palabras en un textarea

P. Cómo contar el número de palabras que se van escribiendo en un textarea?
R. Por medio de este código, en el que además se puede determinar la cantidad mínima de caracteres que ha de tener una palabra para ser contabilizada.

Código PHP:
<html>
<
head>
    <
title>Untitled</title>
    <
style>
    
textarea{
    
overflow:auto;
    
text-align:justify;
    }
    
input{text-align:right;}
    
    
input,textarea{
    
border:solid 1px black;
    
font:normal 10px/15px verdana;
    
color:navy;
    }
    </
style>
    <
script>
//  Contador de palabras
//  Script de Karlankas para forosdelweb.com
//  http://www.karlankas.net    
    
minimoLetras=3;//Cuantas letras tiene que tener como mínimo la palabra para ser contabilizada
    
function contar(esto){
    if(
esto.value.charAt(esto.value.length-1)==" "){
    
numeroDePalabras=0;
    
textos=esto.value;
    
palabras=textos.split(" ");
    for(
a=0;a<palabras.length;a++){
    if(
palabras[a].length>=minimoLetras){
    
numeroDePalabras+=1;
    }
    }
    
document.forms['pepe']['palabras'].value=numeroDePalabras;
    }
    }
    
</script>
</head>

<body>
<form name="pepe">
<textarea onkeyup="contar(this)" cols="50" rows="10" name="texto" id="texto"></textarea> <input type="text" name="palabras" id="palabras" size="3" maxlength="3" readonly>
</form>


</body>
</html> 
Un saludo!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #228 (permalink)  
Antiguo 09/09/2005, 05:06
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 23 años
Puntos: 61
230. Añadir desde un text box una opción a un select

P: ¿Cómo añadir desde un textbox una opción a un select y como borrar una opción del select con un botón?
R: Con este código:

Código PHP:
<html>
<
head>
<
title>Untitled</title>
<
script>

//Script hecho por Karlankas para las FAQ de forosdelweb.com

function mandarlo(){
    
    
formulario=document.forms['estacosa'];
    
ultimaOpcion=formulario['cosas'].options.length;
    
texto=formulario['palabras'].value;
    
valor=formulario['palabras'].value;
    
    if(
texto!=""){
        
nuevaOpcion=new Option(texto,valor);
        
formulario['cosas'].options[ultimaOpcion]=nuevaOpcion;
        
formulario['palabras'].value="";
        
formulario['cosas'][0].text="Opcion Añadida";
        
opcionElegida=formulario['cosas'].selectedIndex=0;
        
setTimeout('formulario["cosas"][0].text="Elige una opción";',800);
        
    }
}

function 
borrar(){
    
formulario=document.forms['estacosa'];
    if(
formulario['cosas'].selectedIndex>0){
        
opcionElegida=formulario['cosas'].selectedIndex;
        
formulario['cosas'].options[opcionElegida]=null;
        
formulario['cosas'][0].text="Opcion Borrada";
        
opcionElegida=formulario['cosas'].selectedIndex=0;
        
setTimeout('formulario["cosas"][0].text=(formulario["cosas"].options.length>1)?"Elige una opción":"No hay opciones";',800);
        
    }
}
</script>
<style>
*{font:normal 10px/10px verdana;}
input{
border:ridge 2px;
}
</style>
</head>

<body>
<form action="" id="estacosa" name="estacosa">
    <input type="text" name="palabras" id="palabras" />
    <input type="button" name="mandar" id="mandar" value="->" onclick="mandarlo()" onclick="mandarlo()" />
    <select style="width:150px;" id="cosas" name="cosas" size="1">
        <option>No hay opciones</option>
    </select>
    <input type="button" style="color:red;font:bold 10px verdana" value="X" onclick="borrar()" />
</form>


</body>
</html> 
En la function mandarlo hay 2 variables que son texto y valor, las distingo por si se quiere añadir algo al texto introducido en el valor de la opción. También se podría hacer otro textbox para introducir el valor.

Un saludo!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #229 (permalink)  
Antiguo 11/09/2005, 17:02
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 19 años, 10 meses
Puntos: 9
231.- Aplicar estilos por tipo

.


Esta funcion sirve para aplicar estilo a una clase de 'tags' que tenga varios tipo ,como es el caso de <input> ,type=text, type=radio, etc...



function
EstiloPorTipo(marca,tipo,estilo){// programeitor
var e=estilo.split(',');
var m=document.getElementsByTagName(marca)
;
for(var n=0;n<m.length;n++){

if(m[n].type==tipo){
for(var i=0;i<e.length;i+=2){
m[n].style[e[i]]=e[i+1];
}

}
}
}


La llamada se realiza de esta forma una vez cargada la pagina:

EstiloPorTipo('input','radio','background,green,width,50px,height,50px')


Como se puede apreciar se pueden pasar varios conceptos a la vez, separados por comas.


.

Última edición por programeitor; 17/10/2005 a las 18:46
  #230 (permalink)  
Antiguo 24/09/2005, 03:21
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 10 meses
Puntos: 772
231.- Recorrer los elementos de un formulario con la tecla Enter

P.- ¿Como puede recorrer los elementos de un formulario pulsando la tecla Enter en lugar de usar el tabulador?

R.- Usando este código:
Código PHP:
<html>
<
head>
<
script>
function 
tabular(e,obj) {
  
tecla=(document.all) ? e.keyCode e.which;
  if(
tecla!=13) return;
  
frm=obj.form;
  for(
i=0;i<frm.elements.length;i++)
    if(
frm.elements[i]==obj) {
      if (
i==frm.elements.length-1i=-1;
      break }
  
frm.elements[i+1].focus();
  return 
false;
}
</script>
</head>
<body>
<form>
<input type="text" onkeypress="return tabular(event,this)" />
<input type="text" onkeypress="return tabular(event,this)" />
</form>
</body>
</html> 
  #231 (permalink)  
Antiguo 06/10/2005, 09:26
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 10 meses
Puntos: 772
232.- Validar (mientras se teclea) la introducción de datos en un formulario

P.- ¿Como puedo validar que lo que teclea un usuario son solo letras, solo números o no son números?

R.- Con estas pocas líneas de código:
Código PHP:
<html>
<
head>
<
script type="text/javascript">
function 
validar(e) {
    
tecla = (document.all) ? e.keyCode e.which;
    if (
tecla==8) return true//Tecla de retroceso (para poder borrar)
    // dejar la línea de patron que se necesite y borrar el resto
    
patron =/[A-Za-z]/; // Solo acepta letras
    //patron = /\d/; // Solo acepta números
    //patron = /\w/; // Acepta números y letras
    //patron = /\D/; // No acepta números
    //
    
te String.fromCharCode(tecla);
    return 
patron.test(te); 

</script>
</head>

<body>
<input type="text" name="textfield" onkeypress="return validar(event)">
</body>
</html> 

Última edición por JavierB; 11/05/2006 a las 01:49
  #232 (permalink)  
Antiguo 06/10/2005, 12:24
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 21 años, 7 meses
Puntos: 5
233. Hora en Formato de 12 Horas (AM y PM)

P. - ¿Cómo agregar la hora en formato de 12 horas (AM y PM) en cualquier parte de nuestro sitio?

R. -

Función JS
Código HTML:
<script>
function actualizaReloj(){ 
 marcacion = new Date();
 Hora = marcacion.getHours();
 Minutos = marcacion.getMinutes();
 Segundos = marcacion.getSeconds();
 
 if (Hora >= 12) {
  var Horario = "P.M."
 } else {
  var Horario = "A.M."
 }
 
 switch (Hora) {
  case 0:
   Hora = 12;
   break;
  case 13:
   Hora = 1;
   break;
  case 14:
   Hora = 2;
   break;
  case 15:
   Hora = 3;
   break;
  case 16:
   Hora = 4;
   break;
  case 17:
   Hora = 5;
   break;
  case 18:
   Hora = 6;
   break;
  case 19:
   Hora = 7;
   break;
  case 20:
   Hora = 8;
   break;
  case 21:
   Hora = 9;
   break;
  case 22:
   Hora = 10;
   break;
  case 23:
   Hora = 11;
   break;
 }
 
 if (Hora<=9) 
 Hora = "0" + Hora;
 
 if (Minutos<=9) 
 Minutos = "0" + Minutos;
 
 if (Segundos<=9) 
 Segundos = "0" + Segundos ;
 
 var Script = Hora + ":" + Minutos + " " + Horario;
 
 document.getElementById('Reloj').innerHTML = Script;
 setTimeout("actualizaReloj()",1000) 
} 
</script> 
en el HTML:
Código HTML:
<table width="100%" height="24" align="center" border="0" cellspacing="0" cellpadding="0" style="color:#000000;">
  <tr>
    <td id="Reloj" style="font-weight:bold;"><script language="javascript">actualizaReloj()</script></td>
  </tr>
</table> 
Enjoy!
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.

Última edición por KarlanKas; 17/10/2005 a las 03:48 Razón: Por favor, poned siempre el número de FAQ
  #233 (permalink)  
Antiguo 07/10/2005, 09:44
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 21 años, 7 meses
Puntos: 5
234. Remover Link

P. - ¿Cómo quito o remuevo un link?

R. - Utilizando la siguiente función:

Código PHP:
function QuitarLink(my_link) {
  var 
mylink document.getElementById(my_link);
  if (
mylink) {
   if (
mylink.hasChildNodes()) {
    for(var 
i=0;i<mylink.childNodes.length;i++)
     
mylink.parentNode.insertBefore(mylink.childNodes[i].cloneNode(true),mylink);
    
mylink.parentNode.removeChild(mylink);
   }
  }
 } 
Utilización:

Código HTML:
<a id="id_link" href=http://www.forosdelweb.com target="_blank"><img src="mi_imagen.gif" width="100" height="100"></a>
<input type="button" value="Quitar Link" onClick="QuitarLink('id_link')"> 
Cheers!!
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.

Última edición por KarlanKas; 17/10/2005 a las 03:49 Razón: Por favor, poned siempre el número de FAQ
  #234 (permalink)  
Antiguo 17/10/2005, 03:45
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 9 meses
Puntos: 10
235. Tooltip personalizado sobre elementos de Formulario

P.- ¿Como puedo poner sobre elementos SELECT, TEXTAREA de un formulario una capa, a estilo Tooltip?

R.- Tras varios días de estudio, he llegado a la forma de conseguirlo.

Poder poner una capa sobre un formulario, y que en IE, NO SE OCULTE TRAS LOS ELEMENTOS SELECT Y TEXTAREA.

Bueno, pues hay una manera de solucionarlo.

Quizás, no sea la manera más profesional pero por el momento, es la que mejor sirve para salir del paso.

Os comento la lógica, y después paso el código:

Como el problema es que la capa (DIV) se pasa a segundo plano, detras del SELECT o TEXTAREA, pues hay que encontrar un OBJETO que SI quede por encima de dichos elementos.

¿Y si usamos un IFRAME, que esté continuamente detras de la capa, y que el iframe este sin bordes, e invisible?
Pues es la mejor solución que hasta el momento e encontrado.

Si, un IFRAME, detras siempre de la capa, para que haga de TAPADERA sobre el SELECT o TEXTAREA.

A continuación os pongo el código:

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

<html>
<head>
	<title>Capa sobre Formulario</title>
	<style type="text/css">
		.sp{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1px;text-decoration:none;color: #EFEFEF;line-height:1px}
	</style>
	<script language="JavaScript1.2" type="text/javascript">

		// Función encargada de desplazar la capa por el documento
		function desplazar_capa(evt)
		{
			// Capturamos el Evento
			var e = (window.event) ? window.event : evt;
			
			// Instanciamos los dos objetos
			var capa = document.getElementById("capa");
			var obj_iframe_oculto = document.getElementById("iframe_oculto");
			
			// Determinamos las coordenadas del raton.
			X = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
			Y = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;
	
			// Mostramos las coordenadas del raton por pantalla
			document.getElementById("info").innerHTML = "X= " + X + "  Y = " + Y;
			
			
			// Movemos la capa a las coordenadas del raton
			capa.style.left = X + 10;
			capa.style.top = Y + 25;
			
			// Ponemos a nuestra capa una opacidad para que sea algo transparente y se vea el contenido del fondo
			capa.style.filter="alpha(opacity=85)"; // Opacidad para IE
			capa.style.opacity="0.85"; // Ocapacidad para Netscape

			// Quitamos al Iframe TODA la opacidad para que sea totalmente transparente y se vea el fondo
			obj_iframe_oculto.style.filter="alpha(opacity=0)"; // Opacidad para IE
			obj_iframe_oculto.style.opacity="0.00"; // Ocapacidad para Netscape

			// Hacemos que la capa sea totalmente visible
			capa.style.display = "block";
			// Definimos el ancho del IFRAME igual que el ancho de la capa, para que no se le vea
			obj_iframe_oculto.style.width = capa.offsetWidth;
			obj_iframe_oculto.style.height = capa.offsetHeight;
			// Posicionamos el IFRAME en la misma posición que la capa (para que esté siempre detras)
			obj_iframe_oculto.style.top = capa.style.top;
			obj_iframe_oculto.style.left = capa.style.left;
			// Bajamos de Z-index el IFRAME, para que esté debajo de la capa
			obj_iframe_oculto.style.zIndex = capa.style.zIndex - 1;

			// Definimos que el contenido del IFRAME esté VISIBLE
			obj_iframe_oculto.style.display = "block"; // ESTA ES LA LINEA MAS IMPORTANTE
		}
	</script>
</head>
<body style="margin:0px" onmousemove="desplazar_capa(event);">
<table cellpadding="0" cellspacing="0" style="width:100%;height:100%" border="0">
	<tr>
		<td width="100%" height="100%" class="sp" align="center" valign="middle">
			<form action="javascript:void(null)">
			<table cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="150" height="25" align="left" valign="top">Select Multiple</td>
					<td width="150" align="left" valign="top">Select Normal</td>
					<td width="150" align="left" valign="top">Textarea</td>
					<td width="150" align="center" valign="top">Boton</td>
					<td width="150" align="left" valign="top">Checkbox</td>
					<td width="150" align="left" valign="top">Radiobutton</td>
				</tr>
				<tr>
					<td colspan="6" width="100%" height="1" bgcolor="#000000" class="sp">&nbsp;</td>
				</tr>
				<tr>
					<td colspan="6" width="100%" height="20" class="sp">&nbsp;</td>
				</tr>
				<tr>
					<td width="150" align="left" valign="top"><select multiple><option>Elemento Select</option></select></td>
					<td width="150" align="left" valign="top"><select><option>Elemento Select</option></select></td>
					<td width="150" align="left" valign="top"><textarea style="width:150px;height:150px"></textarea></td>
					<td width="150" align="center" valign="top"><input type="Button" value="Boton"></td>
					<td width="150" align="left" valign="top"><input type="Checkbox" value="Checkbox"></td>
					<td width="150" align="left" valign="top"><input type="Radio" value="Radiobutton"></td>
				</tr>
				<tr>
					<td colspan="6" width="100%" height="20" class="sp">&nbsp;</td>
				</tr>
				<tr>
					<td colspan="6" id="info" align="center"></td>
				</tr>
			</table>
			</form>
		</td>
	</tr>
</table>
<div id="capa" style="position:absolute; top:25px; left:50px; width:100px; height:40px padding:4px; display:none; background-color:#7598DE; color:#ffffff; z-index:100;">Esta es nuestra capa en la que tenemos el texto.<br><br>¿Se ocultará tras el SELECT?</div>

<iframe id="iframe_oculto" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;"></iframe>

</body>
</html>
Espero que esto os sea de ayuda... y si hay algún comentario, hacermelo saber, que para eso estamos.. para seguir aprendiendo.

Un saludo

Última edición por KarlanKas; 17/10/2005 a las 03:50 Razón: Por favor, poned siempre el número de FAQ
  #235 (permalink)  
Antiguo 30/12/2005, 11:00
Avatar de ludovico2000  
Fecha de Ingreso: noviembre-2003
Ubicación: Bizkaia
Mensajes: 1.315
Antigüedad: 21 años, 1 mes
Puntos: 2
236.- "deplegar" select onmouseover

P.- ¿Cómo puedo hacer que PAREZCA que un select se despliega solo cuando paso el ratón por encima?

R.-Con estas funciones que primero, le dan el foco, y luego cambian el size de "lo que haya" a "1":

Código:
<html>
<head>
</head>
<script>
function abrir(meabro){
meabro.focus();
meabro.size = meabro.options.length;
}
</script>

<script>
function cerrar(mecierro){
mecierro.focus();
mecierro.size = "1";
}
</script>
<body>
<form method="POST" action="loquesea.php">
  <p>&nbsp;</p>
  <p><select style="readonly" name="selectuno" onmouseover="abrir(selectuno)" onmouseout="cerrar(selectuno)">
    <option value="uno" selected>uno</option>
    <option value="dos">dos</option>
    <option value="tres">tres</option>
  </select></p>
  <p><input type="submit" value="Enviar" name="1"><input type="reset" value="Restablecer" name="B2"></p>
</form>
</body>
</html>
  #236 (permalink)  
Antiguo 24/02/2006, 19:28
Avatar de Callaghan  
Fecha de Ingreso: enero-2006
Mensajes: 58
Antigüedad: 18 años, 11 meses
Puntos: 1
237.- Selector de año, mes y día (Modificacion del 111)

P:¿Como puedo hacer un selector de fecha basado en tags <select> que permita seleccionar cualquier fecha válida hasta el día de hoy?

R:

Esta es una modificacion sobre el ejemplo 111 de Kaopectate.
Me ha sido muy util ese ejemplo y le he hecho unas modificaciones que creo que lo hacen mejor.

-Con el codigo del FAQ 111, debes seleccionar primero el año, luego el mes y finalmente el dia. Cuando cambias el año, los campos mes y dia se resetean y cuando cambias el mes, el campo dia se resetea.
En la modificacion esto ya no ocurre puedes seleccionar las caracteristicas en el orden que quieras y si cambias una el resto no se resetean.
La unica restriccion es que por ejemplo tengas elegido como dia el 31 de Enero y cambies en el campo "mes" Enero por Abril, en este caso te seleccionaria el ultimo dia disponible, osea el 30 de abril.

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

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

function 
padNmb(nStrnLensChr){
    var 
sRes String(nStr);
    for (var 
0nLen String(nStr).lengthi++)
     
sRes sChr sRes;
    return 
sRes;
   }

function 
makeDateFormat(nDaynMonthnYear){
    var 
sRes;
    
sRes padNmb(nDay2"0") + "/" padNmb(nMonth2"0") + "/" padNmb(nYear4"0");
     return 
sRes;
   }
   
function 
addOpt(oCntrliPossTxtsVal){
    var 
selOpcion = new Option(sTxtsVal);
    
oCntrl.options.add(selOpcioniPos);
   }

function 
lastDayOfMonth(nMonthnYear){
    var 
aMonth = new Array(312831303130313130313031);
    if ((
nMonth == 2) && (nYear == 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(mesnAno);
       
nMes parseInt(mes.options[mes.selectedIndex].value);
       
nDia parseInt(dia.options[dia.selectedIndex].value);
       
res.value makeDateFormat(nDianMes 1nAno);  
       break;
      case 
1:
       
nMes parseInt(mes.options[mes.selectedIndex].value);
       
llenaDia(dianAnonMes);
       
nDia parseInt(dia.options[dia.selectedIndex].value);
       
res.value makeDateFormat(nDianMes 1nAno);
       break;
      case 
2:
       
nMes parseInt(mes.options[mes.selectedIndex].value);
       
nDia parseInt(dia.options[dia.selectedIndex].value);
       
res.value makeDateFormat(nDianMes 1nAno);
       break;
      case 
3:
          
llenaMes(mesnAno);
      break;
     }
    }
   }

function 
llenaAno(oAno){
      var 
hoy = new Date();
    var 
ini 1960;
       for (var 
ini<= hoy.getYear(); i++)
     
addOpt(oAnoiniString(i), String(i));
     
oAno.options[i-ini-1].selected true;
     
cambia(3);
}

function 
llenaMes(oMesnAno){
    var 
hoy = new Date();
    var 
sel=0;
    if(
oMes.selectedIndex >=0) var sel=oMes.selectedIndex;
    var 
nFin 11;
    while (
oMes.length 0oMes.remove(0);
    if (
nAno == hoy.getYear()) 
    {
    
nFin hoy.getMonth();
    } 
    if (
sel>nFin)
        {
            
sel=nFin-1;
        }  
    for (var 
0<= nFini++)
     
addOpt(oMesiaMeses[i], String(i));
     
oMes.options[sel].selected true;
     
cambia(1);
   }

function 
llenaDia(oDianAnonMes){
    var 
hoy = new Date();
    var 
sel=0;
    if(
oDia.selectedIndex >=0) var sel=oDia.selectedIndex;
    var 
nFin lastDayOfMonth(nMes 1nAno);
    while (
oDia.length 0oDia.remove(0);
     if (
nAno == hoy.getYear() && nMes == hoy.getMonth()) 
    {
    
nFin hoy.getDate();
    }
    if(
sel>nFin)
        {
            
sel=nFin-1;
        }
    for (var 
1<= nFini++)
     
addOpt(oDiaiString(i), String(i));
        
oDia.options[sel].selected true;
   }

  
</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>

Última edición por Callaghan; 24/02/2006 a las 19:46
  #237 (permalink)  
Antiguo 21/06/2006, 22:34
 
Fecha de Ingreso: mayo-2006
Mensajes: 11
Antigüedad: 18 años, 7 meses
Puntos: 0
238.- Links que cambian de color cuando se pasa el puntero sobre ellos

P: ¿Como puedo hacer que los links de mi menu cambien de color cuando se les pase el puntero por encima?

R: Estas funciones logran que cuando se pase el puntero por encima de los links cambien de color, cuando se hace un click sobre uno cambie a un tercer color solo por un momento para resaltar el click y que el ultimo que ah sido clickeado quede como "activo" (el color queda fijado sobre el) hasta que se haga click en otro y el otro quede como "activo", ademas si hay uno "activo" y se pasa el puntero sobre otro link pasa a estar como "inactivo" mientras se mantenga el puntero sobre otro link, si no se hace click sobre ningun otro vuelve a estar "activo" una vez que el puntero no esta sobre ningun otro link.

Head:
Código:
function configurarcolor(colorcambio,colorclick,inicial){
if(inicial == "no"){
    nombrem = "";
}else{
    nombrem = inicial;
}
coloran = "";
colorca = colorcambio;
colorc = colorclick;
}
 
function cambiarcolor(nombre, mantener){
font = document.getElementById(nombre);
if(nombre != nombrem){
    if(coloran == ""){
    coloran = font.style.color;
    }
    if(mantener != "mantener"){
        if(nombrem == ""){
            if(font.style.color == coloran){
                font.style.color = colorca;
            }else{
                font.style.color = coloran;
            }    
        }else{
            fontm = document.getElementById(nombrem);
            if(font.style.color == coloran){
                fontm.style.color = coloran;
                font.style.color = colorca;
            }else{
                fontm.style.color = colorca;
                font.style.color = coloran;
            }            
        }
    }else{
        nombrem = nombre;
    }
}else{
fontm = document.getElementById(nombrem);
fontm.style.color = colorca;
}
}
 
function colorclick(nombre){
font = document.getElementById(nombre);
if(font.style.color == colorca){
font.style.color = colorc;
}else{
font.style.color = colorca;
}
}
Body:
colordecambio es el color que van a tener los links cuando se pasa el puntero sobre ellos, colorenclick es el color "momentaneo" que tienen cuando se les hace click y idlink es opcional, sirve para tener uno como "activo" cuando se carga la pagina.
Código:
<body onLoad='configurarcolor("colordecambio","colorenclick","idlink");'>
Links:
Los links deben llevar el color de "desactivado" en style="color:#color", si se eligio un link para que aparezca como activo se debe usar en el link que se eligio el "colordecambio" que se declaro en body.
Código:
<a id="ejemplo" style="color:#FFFFFF;" onMouseOver="cambiarcolor('ejemplo');" onMouseOut="cambiarcolor('ejemplo');" onClick="cambiarcolor('ejemplo','mantener');" onMouseDown="colorclick('ejemplo');" onMouseUp="colorclick('ejemplo');" href="ejemplo.html">Ejemplo</a>
Para sacar el Pre-Formato que tienen los links se puede usar esto, debe ir en head:

Código:
<style type="text/css">
A{
text-decoration: none;
}
</style>
Espero que sea de utilidad, si tienen algun comentario o pueden mejorar el codigo haganmelo saber.Suerte.

Berto.
  #238 (permalink)  
Antiguo 10/07/2006, 04:08
 
Fecha de Ingreso: julio-2006
Mensajes: 5
Antigüedad: 18 años, 5 meses
Puntos: 0
Comprobar dirección de Mail

P: ¿Cómo comprobar una dirección de mail?

R:

He visto varias funciones usadas para comprobar e-mail y quisiera participar en el foro con la función que yo uso para ello.

Este es mi primer mensaje, por lo que pido perdón de antemano si no soy capaz de mostrarlo correctamente.

Código:
function CompruebaMail(Campo)
{
   if (Campo.value == '') return false;
   Campo.value = Campo.value.toLowerCase();
   Campo.value = Campo.value.replace(/ /g, "");
   if (/\.\.|\.@|@\.|^\.|\.$/.test(Campo.value))
      return false;
   if (/\.([a-z]{2,3}|info|name|museum)$/.test(Campo.value))
      if (/^[_\.0-9a-z-]+@([0-9a-z-]+\.)+[a-z]*$/.test(Campo.value))
         return true;
   return false;
}
y ahora paso a explicar la función:
En primer lugar compruebo que el campo a verificar está vacío, en cuyo caso termina devolviendo FALSE
A continuación convierto el campo en minúsculas y le elimino todos los espacios.
Uso la función .test(), que sólo he visto documentada en MSDN y que permite comprobar máscaras de "Expresiones Regulares", es decir, comprobar si una cadena se ajusta a un formato determinado usando un lenguaje estándar que puede ser usado en numerosos lenguajes de programación. (JavaScript y PHP entre otros)
La sintaxis de la comprobación en javascript sería
Código:
if (/ExpresiónRegular/.test(VariableAComprobar))
y devolvería true si en la VariableAComprobar se encuentra un trozo que se ajuste al formato de la ExpresiónRegular.
En PHP se usaría
Código PHP:
if (ereg($ExpresionRegular$VariableAComprobar)) 
La primera ExpresionRegular es "\.\.|\.@|@\.|^\.|\.$" y comprueba si la VariableAComprobar contiene ".." ó ".@" ó "@." ó no contiene ningún "." ó hay un punto al final de la Variable. Si ocurre cualquiera de estas cosas, la dirección se considera incorrecta y retorna FALSE.
La segunda ExpresiónRegular es "\.([a-z]{2,3}|info|name|museum)$" y comprueba el final de la VariableAComprobar. Si encuentra un "." seguido de una cadena de sólo letras, de dos o tres caracteres (lo que incluye todas las terminaciones de países y terminaciones "com", "net", "etc"), ó "info" ó "name" ó "museum" SEGUIDOS del final de la cadena, se considera que el mail, provisionalmente sigue siendo válido y podemos hacer la última comprobación.
La tercera ExpresionRegular es "^[_\.0-9a-z-]+@([0-9a-z-]+\.)+[a-z]*$" y comprueba que desde el inicio de la cadena ("^") haya un tramo de caracteres que solo incluyan "_", ".", números, letras ó "-", seguido de "@" y uno o varios tramos de Letras, Numeros o "-" seguidos de un punto, y termine en una cadena de letras seguida de Fin de Cadena ("$"). En caso de que la máscara sea correcta, significará que la dirección de email es muy probable que sea válida.
Si quisiéramos hacer una comprobación completa tendríamos que hacer que la segunda condición incluyera TODAS las terminaciones de dominio ("es", "uk", "mx", "cl", "com", "net", y muchos etcéteras), con lo que lo que se ganaría en seguridad se perdería bastante en velocidad de proceso y claridad del programa, por lo que no lo recomiendo.

Es muy fácil incluir una rutina de Comprobación de Formularios
El botón Submit debe incluir la función "onClick()" de la siguiente forma

Código:
<input type=submit value=Aceptar name=Boton onClick="return CompruebaForm();"/>
y en nuestro script de JavaScript añadir las funciones CompruebaMail (ya escrita) y
Código:
function CompruebaForm()
{  
   if (document.Form1.Mail.value == '')
   {
      alert('Debe rellenar el campo e-Mail');
      document.Form1.Mail.focus();
      return false;
   }
   if (!CompruebaMail(document.Form1.Mail))
   {
      alert('La dirección de e-mail no es válida');
      document.Form1.Mail.focus();
      return false;
   }
   return true;
}
Con todo ello, podemos incluir la solicitud de e-mail en cualquier formulario y nos aseguramos, primero de que se rellene el campo de Mail, y segundo, que el mail introducido es correcto.

Para terminar, hay forofos de la programación que intentan hacer en una sola expresión regular TODAS las comprobaciones. Se puede hacer, pero la expresión regular es tan larga y compleja que, a mí personalmente, no me compensa, pero si alguien quiere intentarlo, adelante.

Espero que esto os sirva.

Última edición por MasLibertad; 11/07/2006 a las 03:39
  #239 (permalink)  
Antiguo 23/07/2006, 05:49
Avatar de urgido  
Fecha de Ingreso: febrero-2005
Mensajes: 2.351
Antigüedad: 19 años, 10 meses
Puntos: 25
Jcap (Captcha Validation Javascript)

P: CREAR UNA IMÁGEN DE VERIFICACIÓN
R: NAVEGANDO ME ENCONTRE CON ESTE SCRIPT, LO CAMPRTO CON UDS.


http://www.archreality.com/jcap/


CRÉDITOS: Jonathan Feaster
NOTA: LA WEB ESTA EN INGLÉS PERO CREANLO VALE LA PENA :)
__________________
Hospedaje Web al mejor costo!

Última edición por JavierB; 03/07/2007 a las 09:16 Razón: Arreglar enlace
  #240 (permalink)  
Antiguo 09/10/2006, 23:40
Avatar de urgido  
Fecha de Ingreso: febrero-2005
Mensajes: 2.351
Antigüedad: 19 años, 10 meses
Puntos: 25
P: Agrandar / Disminuir texto de una página
R: Función realmente efectiva para personas que les gusta cambiar el estilo de la fuente a la página sin necesidad de mover funciones al navegador.

Código PHP:
// Tags a las cuales se les va a aplicar el script:
var tgs = new Array( 'div','td','tr','span','p');

// Intervalos de las fuentes, en este caso de menor-mayor:
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var 
startSz 2;

function 
tstrgt,inc ) {
    if (!
document.getElementById) return
    var 
document,cEl null,sz startSz,i,j,cTags;
    
    
sz += inc;
    if ( 
sz sz 0;
    if ( 
sz sz 6;
    
startSz sz;
        
    if ( !( 
cEl d.getElementByIdtrgt ) ) ) cEl d.getElementsByTagNametrgt )[ ];

    
cEl.style.fontSize szssz ];

    for ( 
tgs.length i++ ) {
        
cTags cEl.getElementsByTagNametgs] );
        for ( 
cTags.length j++ ) cTags].style.fontSize szssz ];
    }

Link para poner en tu web(de preferencia en el top de tu página):
Código HTML:
<a href="javascript:ts('body',1)">Agrandar Texto</a> | <a
href="javascript:ts('body',-1)">Disminuir Texto</a> 
__________________
Hospedaje Web al mejor costo!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado

SíEste tema le ha gustado a 103 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 18:47.