Trucos HTML, VBScript, JavaScript...
(segunda)

Actualizado el 23/Mar/2009

HTML-Consejos, HTML-Trucos, HTML-Programas, Meta-TagsDOCTYPE 

Contenido:

  1. Trabajar con listas (más ejemplos y detalles)
  2. Mostrar automáticamente la fecha de la última modificación de una página HTML, en VBScript y JavaScript
  3. Fallo al leer la hora (para la última modificación de una página)
  4. Forzar que la página se muestre en la pantalla completa.
  5. Actualizar el contenido dos (o más) frames al hacer click en un link
    Cómo llamar a una función Script desde código HTML
  6. Saber que OptionButton (radio) y/o qué CheckBox se ha seleccionado (02/Jul/01)
  7. Añadir un tooltip (o mensaje emergente) a una palabra o un link de una página (27/Oct/01)
  8. Validar páginas HTML (21/Dic/2003)
  9. Validar una cuenta de correo usando expresiones regulares (08/Ene/04)
  10. Modificar el aspecto de una ventana (07/Feb/04)
  11. ASP: Enviar un correo desde una página ASP (13/Ago/04)
  12. Averiguar la resolución de la pantalla (con JavaScript) (07/Oct/04)
  13. Abrir una nueva ventana al pulsar en un link (16/Feb/06)
  14. Saber si una variable existe (con JavaScript) (26/Jun/07)
  15. Meta Tag para emulación del IE8 con IE7 (poner el IE8 como si fuera el IE7) (23/Mar/09)
  16. Saber si navegamos en un móvil

1.- Trabajar con listas (más ejemplos y detalles)

Debido a las consultas sobre el tema, voy a detallar un poco cómo seleccionar de una lista desplegable, también conocidos por combobox, menú, etc.
Puedes examinar los ejemplos mostrados en la página 1 de los trucos HTML o en el ejemplo de las listas desplegables, aquí tienes los links por si aún no los has visto,
ejemplo 1, ejemplo 2.

En estos ejemplos se van a seleccionar de unas listas y se van a usar llamadas directas y usando una pequeña función en JavaScript, para que o bien seleccionando directamente de la lista o bien por medio de un botón se haga algo en particular.

Pulsa en este link para mostrar la página de los ejemplos y el listado de cada uno.

Una pequeña explicación de lo que se hace en cada uno de los ejemplos mostrados:

  • El primero muestra una selección, al pulsar en el botón se muestra información del "item" seleccionado.
  • Los ejemplos 2º y 3º actuan de forma parecida, pero usando funciones en JavaScript.
    Se pasa como referencia de la lista y según el ejemplo, un valor que indica algo para que la función actúe de una forma u otra.
  • El cuarto y quinto ejemplo muestra una serie de sitios de internet y hacen que te desplaces al elegido (aunque "virtualmente", ya que en estos ejemplos no te llevan a ninguna parte).
    En el primer caso, se usa un botón para "confirmar" que te quieres desplazar.
    En el segundo, se lanza el evento sólo al pulsar en la selección.


3.- Fallo al leer la hora (para la última modificación de una página) (15/Sep)

Normalmente todos los servidores de páginas webs tienen asignado un nombre de página principal por defecto.
Así al acceder a un directorio de ese servidor (o al directorio raiz), sin especificar el nombre de la página, se carga la predeterminada, normalmente indice.htm, index.html o contents.htm. Pues se ha detectado que algunos de ellos no actualiza bien la fecha/hora de creación de la página, devolviendo el año 1600... Pero esto se puede solventar si desde esa página predeterminada se carga directamente otra página.
Suponte que tu servidor tiene como nombre por defecto index.html y quieres que en tu página principal (en teoría debería ser este index.html), se muestre, entre otras cosas, la fecha y hora de la actualización, lo que tienes que hacer es crear tu página principal con otro nombre y desde el index.html simplemente haces lo siguiente:

<html>
<body onload="location.href= 'tu_pagina.htm' ">
<p><strong>Cargando el índice...</strong></p>
</body>
</html>

Así consigues que la fecha/hora que se debe mostrar lo haga de forma correcta.


4.- Forzar que la página se muestre en la pantalla completa. (15/Sep)

Cuando estás navegando en una página, de tantas (incluidas las mías), que tienen frames, al pulsar en algunos links que te interesan, te darás cuenta que se mustran estas páginas dentro del marco (frame) en el que has picado el link...
Esto lo sufrimos todos, después de horas arreglando la presentación de nuestras páginas, nos damos cuenta de que al estar dentro de un marco... ¡se jode el invento!
Pues aquí está el Guille con la solución a tus problemas... (es que no soporto que me encierren en un frame...)
No sé si esto funcionará siempre, pero las pocas pruebas que he hecho, han dado resultados positivos.
¿Que hay que hacer?
Crear una página que a su vez cargue a nuestra página principal, además de solucionar el problema anterior de la fecha/hora esa del año 1600, solucionas el que te "encierren" dentro de un frame.
Aquí está el código: (el de mi página indice.htm)

<html>
<script language="javascript">
<!--
//********************************************
//* (c)Guillermo Som -el Guille  (15/Sep/97) *
//*                                          *
//* por favor respeta el copyright, gracias  *
//********************************************
function carga(){
	parent.location.href="indice_cf.htm"
}
//-->
</script>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="Author" content="(c)Guillermo Som -el Guille">
<meta name="truco" content="No en un frame... por favor">
<title>Página cargadora...</title>
</head>

<body bgcolor="#FFFFFF" text="#000080" onload="carga()">

<h1 align="center"><strong>cargando<br>
las páginas de 'el Guille',<br>
&quot;el Web del Visual Basic&quot;</strong></h1>
</body>
</html>

El truco está en el parent.location.href= "nombre de la página"
Espero que te pueda ser de utilidad.

Nota este código/truco, (como todos), es de libre uso, pero deberías respetar o mencionar la procedencia... es lo menos, ya que no veremos ni un duro por el copyright...

Nota: también se puede hacer de esta otra forma:
<meta http-equiv="Window-target" content="_top" >
Si quieres saber más cosas sobre los meta-tags, sigue este link


5- Actualizar el contenido dos (o más) frames al hacer click en un link (8/Feb)

Esta es una consulta que tenía por ahí pendiente, hice las pruebas pertinentes, pero no me funcionó... Cuando las cosas no me funcionan, suelo seguir insistiendo, pero esta se me resistía... al final (hoy) probando y comprobando, viendo que el código "en teoría" estaba bien, me puse a revisarlo mejor... al final dí con la solución: era un código "extra" que había incluído el FrontPage 98, ya que use ese editor para generar los frames y demás... En fin...

Bueno, después de la batallita, al tema:
El truco o la solución consiste en crear links normales... o casi, lo que hay que cambiar es la forma de hacer referencia a esa dirección que queremos cargar...
Cuando quieres que una página se cargue en otro frame, lo que debes hacer es algo como esto:
<A HREF="otra_pagina.htm" target="otroFrame">Ir a la otra página</a>
Este código no tiene mayor complicación, pero si lo que queremos hacer es ir a otra página usando una función SCRIPT, la cosa ya no es tan sencilla... Ese caso ya lo he puesto en algún otro truco... o al menos creo que lo he puesto, pero no me voy a poner a repasarlo ahora, así que voy a explicarte cómo hacerlo.
Imaginate que tienes una función que maneja una serie de parámetros y según el valor de esos parámetros debe mostrar una u otra página... para simplificar, por ejemplo, según la fecha actual o la hora que sea... cualquier cosa que necesite algún tipo de comprobación o cálculo...

Veamoslo con un ejemplo:

Cómo llamar a una función Script desde código HTML

<Script language="JavaScript">
<!--
function cargarPagina(parametro){
    parent.otroFrame.location="otra_pagina"+parametro+".htm"
}
//-->
</Script>

Esta función recibe un parámetro y ese valor lo añade al nombre de una página, que será la que se muestre en el frame otroFrame, la forma de llamar a esa función para que cargue la página correspondiente sería este otro:

Este código mostraría una serie de opciones y al pulsar en una de ellas, se llamará a la función que se encargará de cargar la página correspondiente, realmente si este fuera la finalidad del ejemplo, se podría hacer de una forma mucho más simple, pero, como comenté antes, se supone que esa función hace algún cálculo antes de cargar la página, por simplificar el tema, he obviado esos cálculos, espero que sepas comprenderme, gracias... ;-)
De todas formas el primer link lo he dejado en el formato "normal", para que comprendas la diferencia.

<ol>
  <li><a href="pagina_principal.htm" target="otroFrame">Punto 1 (principal)</a></li>
  <li><a href="JavaScript:cargarPagina('2')">Punto 2</a></li>
  <li><a href="JavaScript:cargarPagina('3')">Punto 3</a></li>
  <li><a href="JavaScript:cargarPagina('4')">Punto 4</a></li>
</ol>

Es decir, todo lo que hay que hacer es poner JavaScript:, (JavaScript seguido de DOS PUNTOS), y a continuación el nombre de la función, con sus correspondientes parámetros. Por supuesto que si usas VBScript, deberás sustituir el "lenguaje" por el que corresponda.

Ahora veamos el tema real de este truco: Cargar dos páginas en dos frames diferentes al pulsar en un sólo link:

Para ello lo único que hay que hacer es modificar la función para que cargue las dos páginas en dos frames diferentes.
Quedaría de esta manera:

function cargarPagina(numero){

parent.inferiord.location.href="central_i"+numero+".htm"
parent.inferior2.location.href="central_d"+numero+".htm"
}

Osea, que desde la función, que vuelvo a insistir que en este caso es muy simple, lo que hace es "llenar" el contenido de dos frames al mismo tiempo...

Para que lo veas con tus propios ojos, pulsa en este link y revisa el código, que no tiene ningún misterio.
¡ Que lo disfrutes !

P.S.
El error que comentaba era esta línea, que seguramente el FrontPage (beta98) puso allí porque yo se lo dije, pero ahora no recuerdo porqué lo puso...

<base target="inferiord">
<head>
<title>Página superior</title>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<base target="inferiord">
</head>


7- Añadir un tooltip (o mensaje emergente) a una palabra o un link de una página (27/Oct/01)

Lo mismo que en las imágenes se puede poner un texto para que al poner el cursor sobre ellas se muestre un mensaje (tooltip), en los textos normales también se puede hacer.

Por ejemplo, la palabra anterior tiene (o debería tener) un mensaje, ésto se consigue con:
<acronym title="mensaje a mostrar">la palabra a resaltar o en la que se mostrará ese mensaje</acronym>
donde title="mensaje a mostrar" será lo que se mostrará al dejar el cursor sobre esa palabra.
Lo único que pasa es que la palabra no se resalta, tendrás que resaltarla por tu cuenta, en este caso he usado el subrayado.
Lo mejor es usarlo junto con un link, de esa forma, al pasar el ratón sobre el link se mostrará dicho mensaje.

Por ejemplo, este link te llevará al punto 5 de esta página.

En las imágenes se consigue con alt="mensaje a mostrar"


 

  9- Validar una cuenta de correo usando expresiones regulares (08/Ene/04)

Normalmente cuando hacemos un formulario en el que pedimos la cuenta de correo, solemos comprobar que el texto incluya el signo de arroba (@), pero eso no quita que el usuario simplemente escriba loquesea@vale.

Mediante las expresiones regulares, podemos hacer que el usuario escriba algo que se parezca a una cuenta de correo válida, en la forma más simple se aceptará algo como nombre@servidor.dominio, pero se comprueba que el dominio tenga como mínimo 2 caracteres y 4 como máximo, además de que después de la arroba debe escribir al menos una palabra seguida de un punto y el dominio.

El siguiente trozo de código hará esto, validará que el contenido de una caja de textos sea una cuenta de correo (más o menos) válida.
El código usado es JavaScript y la "validación" se hace mediante el método search de la clase String... si, JavaScript ya estaba orientado a objetos antes de la salida de .NET.
La expresión regular a usar es: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/ig

Revisión del 19/Abr/2004:
Esta otra comprueba que delante de @ haya tres caracteres como mínimo y después del signo @ puede haber varios grupos separados por un punto, pero como mínimo, cada grupo, debe tener dos caracteres y el último de 2 a 4:
^[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}$
 

Por ejemplo, este es el código que utilizo en el formulario de "mensaje al guille":

<script language="JavaScript">
// Validar los campos
function validarEmail(){
    var hayAlgo = true;

    if(fEnvioCorreo.sender.value==""){
        hayAlgo = false;
        alert("La cuenta de correo no puede estar en blanco.");
        fEnvioCorreo.sender.focus();
        return false;
    }
    // validar la cuenta de correo usando una expresión regular (RegExp)
    if(fEnvioCorreo.sender.value.search(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/ig)){
        hayAlgo = false;
        alert("La cuenta no es válida, debes escribirla de forma: nombre@servidor.dominio");
        fEnvioCorreo.sender.select();
        fEnvioCorreo.sender.focus();
        return false;
    }
}
</script>

...

Espero que te sea de utilidad.

Nos vemos.
Guillermo


 

  10- Modificar el aspecto de una ventana (07/Feb/04)

Este código te permitirá modificar el aspecto de una ventana, usando código de JavaScript.

Para cambiar el aspecto de una ventana, podemos usar código para llamar a la función window.open
Esta función (o método) recibe tres parámetros:
window.open("URL", "NOMBRE", "ASPECTO")

1- El primero es el nombre de la página que queremos abrir
2- El segundo es el nombre de la ventana
3- El tercero incluirá valores que cambiarán el aspecto de dicha ventana así como el tamaño:

Estos tomarán un valor YES/NO (1/0) si queremos que se muestre o no:
toolbar,  si se muestra o no la barra de herramientas.
menubar, si se muestra o no la barra de menús.
location, si se muestra o no la barra de direcciones (para escribir una nueva URL).
directories, si se muestra o no la barra de links.
status, si se muestra o no la barra de estado.
scrollbars, si se muestra o no las barras de desplazamiento.
resizable, si se permite que se cambie el tamaño.

Por defecto los valores predeterminados es "no" y la forma de usarlo sería:
"toolbar=1, menubar=1, status=1, location=1, directories=1"

El tamaño se indicará usando width y height para indicar el ancho y alto respectivamente, los valores se indicarán en pixel.

El siguiente ejemplo abrirá la página "index.htm" a un tamaño de 800x600 :

window.open("index.htm","Nombre","toolbar=1, menubar=1, status=1, location=1, width=800, height=600")

 

  12- Averiguar la resolución de la pantalla (con JavaScript) (07/Oct/2004)

Para saber la resolución de la pantalla del usuario que está viendo nuestra página, podemos usar las propiedades width y height del objeto windows.screen:

<script language="javascript">
	var hz=window.screen.height
	var wz=window.screen.width
	document.write("La resolución de la pantalla es:<br>");
	document.write("Ancho: " + wz + "<br>");
	document.write("Alto: " + hz + "<br>");
</script>

 

  13- Abrir una nueva ventana al pulsar en un link (16/Feb/06)

Para abrir una nueva ventana al pulsar en un link, lo único que debes hacer es lo siguiente:

<a href="la_pagina.htm" target="_blank">El texto a mostrar</a>

Pues eso... pones lo de target= y a continuación puedes poner varias cosas, una de ellas, que es la más común, es poner _blank de esa forma se abre siempre una nueva ventana.

Pero si lo que quieres es que en vez de abrirse siempre una nueva ventana en cada link (que no es una práctica muy recomendable), puedes hacer que en tu sitio siempre se muestren los links en otra ventana, pero que esa "otra ventana" siempre sea la misma.

El truco está en darle a esa ventana un nombre, que sea propio o particular para tu sitio, por ejemplo, en mi sitio y en mis foros, uso el nombre de ventana "externo", y eso lo hago asignando ese nombre al target, por ejemplo:

<a href="la_pagina.htm" target="externo">El texto a mostrar</a>

Hay una serie de valores "predeterminados" para usar con target, por ejemplo:
"_self" que es la misma ventana
"_top" que es la ventana principal (o marco principal)
"_parent" que es la ventana "padre" de la actual
"_blank" que es una nueva ventana.

 


 

  14- Saber si una variable existe (con JavaScript) (26/Jun/06)

Buscando alguna forma de saber si una variable está definida, me topé con un hilo en un foro sobre JavaScript, en el que había una "discusión" sobre cómo definir una función isDefined a la que habría que pasarle la variable a comprobar.

De todas las cosas que decían, la que mejor se adaptaba a lo que yo quería es lo que te voy a mostrar aquí, no es realmente una función para saber si está definida una variable o no, sino simplemente el código que yo he usado, que es precisamente para eso.

Lo que hace este código es comprobar si la variable está definida, en ese caso, se devuelve (o vuelve a asignar) el valor que tuviera, en caso de que no esté definida se le asigna un valor "false".

Este es el código:

laVariable = window.laVariable ? window.laVariable : false;

"laVariable" es la variable a comprobar, y se puede definir en cualquier otra parte del código, yo en particular lo uso en un fichero .js que lo uso desde otras páginas y esto me ha hecho falta al tener que saber si mostraba una parte del código de ese fichero script o no, pero como no era plan de crear la variable que necesitaba usar en todas las páginas que usan ese fichero, pues tuve que buscar una forma de averiguar si ya estaba definida o no, con idea de si no estaba, usar un valor falso, y si estaba... usar el valor que se le hubiera asignado.

Espero que te sea de utilidad.


ir al índice