183.- Cómo cerrar una ventana preguntando si desea cerrarla o no
 

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

R:

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


El script consta así:

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

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

Si lo desean, visiten el siguiente ejemplo:

[Ver ejemplo]

184.- Confirmar cierre de ventana
 

Siguiendo con el tema de T4X y a pedido de Tunait, les dejo el siguiente script:
Nota: PatomaS agregó que solo sirve para iexplorer y para mozilla 1.7

Espero les sea útil!

185.- Recoger valores de un formulario
 

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

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

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

186.- Abrir enlace en un popup
 

P: ¿Como abrir un enlace en un popup?

R: Tal vez sea la manera menos usada, pero creo que la más fácil :pensando: , simplemente abriendo un popup vacío desde el evento onclick del enlace, y que la ventana (segundo parámetro de open) coincida con el target del mismo enlace.

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

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

:adios:

187.- Title mejorado (tooltip)
 

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

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

Ejemplo:

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

:adios:

188.- Abreviar una función para utilizarla muchas veces
 

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

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

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

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


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

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

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


-Gracias a JavierB :adios: por la "inspiración"-

COMPARTIENDO, MEJORAMOS TODOS

189.- DOM: Insertar nuevos elementos.
 

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

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

Ejemplo:

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

document.body.appendChild(nuevoDiv);

Notas:

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

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

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

:adios:

190.-Aviso anti-popup
 

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

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



:adios:

191.- Textos alternativos sin hacer uso de la etiqueta alt
 

Alterntiva a la super FAQ 187 de Caricatos :-)

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

192. Resolución de pantalla
 

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

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

Añadir a Favoritos
 

193.- Añadir a favoritos

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

Respuesta: Prueba con este código

Créditos: Bravenet

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

194.- Como anular history en nuestra web
 

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

R:
Es tan sencillo como colocar este script en la cabecera de cada una de nuestras páginas:
De esta forma si se carga una página nuestra utilizando el botón atrás se redirigirá al usuario a la siguiente página visitada, que si es nuestra y también lleva este código hará lo mismo mientras no sea la última página visitada por el usuario.

195.- Seleccion en un select (formularios)
 

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

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

Ejemplo:

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

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

:adios:

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

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

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

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

Método 1

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

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

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

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

<body onload="muestraGranDiv()">

3.- Colocar DIVs dentro del body

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

resto del contenido dentro del DIV

<div>

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

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

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

resto del contenido dentro del DIV

<div>

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

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

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

Método 2

Otra posible forma de conseguir el objetivo

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

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

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

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

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

<body onload="enlaces()">

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

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

197.- Generador de claves
 

FAQ198: DOM: Eliminar elementos.
 

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

R: DOM: Usando removeChild.

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

ejemplo de uso:

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

Nota: complementa a la FAQ 189.

:adios:

Faq 199 Efecto Fade de colores con el texto

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

ale, a disfrutarlo

200.- Otra forma de apertura lateral de una ventana con variantes.
 

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

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

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

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

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

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

Un saludo cordial.-
paulkees

201.- css según resolución
 

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

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

202.-Citas aleatorias
 

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



En el head pon esto....

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

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

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



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

bueno, espero que os sirva para algo...

nos vemos pronto, cuidaos :-)

Reloj PHP/Javascript
 

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


y ojala les sirva

gradientes
 

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

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

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

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

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

:adios:

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


:adios:

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




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

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

window.focus()

:adios:

207.- Añadir días a una fecha (versión 2)
 

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

R: Usando este código:

208. Enlace desde popup a ventana principal
 

P: Enlace desde popup a ventana principal:

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

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

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

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

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


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

:adios:

209. Cómo puedo validar el ISBN de un libro
 

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

R:Llegando a forosdelweb a partir de ahora, porque en google no he encontrado nada y ha salido esto de mi cabecita:
Para el que se quiera empapar de cómo se curra con los ISBN y los EAN, que se baje este pdf de mi página. un buen documento, si señor:
ISBN-EAN.rar(366K)

210.-Mensaje Barra de Titulo
 

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

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

</SCRIPT>

211. Como definir estilos por tipo
 

P:Como definir estilos por tipo.

R:Mediante una funcion llamada en el onload.

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

</body>
</html>

212. Como crear una base de datos HTML
 

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


RESPUESTA:

MODIFICACION Y MEJORA

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

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

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

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

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

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

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

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

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


CREDITOS: programeitor 2005. [email protected]