Retroceder   Foros del Web > Programación para sitios web > Javascript

Respuesta
 
Herramientas Desplegado
Antiguo 10-may-2004, 13:51   #181 (permalink)
T4X
T4X está en el buen camino
 
Fecha de Ingreso: enero-2004
Ubicación: myT-Base
Mensajes: 259
Enviar un mensaje por ICQ a T4X Enviar un mensaje por AIM a T4X Enviar un mensaje por MSN a T4X Enviar un mensaje por Yahoo  a T4X
183.- Cómo cerrar una ventana preguntando si desea cerrarla o no

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

R:

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


El script consta así:

Código:
<script language="JavaScript">
function cierrame() { 
event.returnValue = "Escribe el texto a mostrar ";
}
</script>
Y en la etiqueta body donde va a salir el cierrame colocas esto:

Código:
<body onBeforeUnload="cierrame()">
Les repito que el comportamiento onBeforeUnload solo funciona con IE, aunque existen posibilidades de hacerlo funcionar con otro navegador de la misma especie....!!

Si lo desean, visiten el siguiente ejemplo:

[Ver ejemplo]
__________________
Ahora T4X es
WinGFX!!!!!

Última edición por T4X; 04-jul-2004 a las 15:16.
T4X está desconectado   Responder Citando
Antiguo 10-may-2004, 19:16   #182 (permalink)
Maru77 está en el buen camino
 
Fecha de Ingreso: agosto-2003
Mensajes: 191
184.- Confirmar cierre de ventana

Siguiendo con el tema de T4X y a pedido de Tunait, les dejo el siguiente script:
Código PHP:
<html>
<
head>
<
script language="javascript">

function 
CloseClicked()
{
event.returnValue false;
};
</script>
</head>
<body onbeforeunload="CloseClicked();">
<form id="frmTest" name="frmTest" method="post" runat="server">
</form>
</body>
</html> 
Nota: PatomaS agregó que solo sirve para iexplorer y para mozilla 1.7

Espero les sea útil!
__________________
Saludos!!!
Maru.-

Última edición por Kaopectate; 24-may-2004 a las 15:09.
Maru77 está desconectado   Responder Citando
Antiguo 24-may-2004, 02:49   #183 (permalink)
Moderador extraterrestre
KarlanKas llegará a ser famoso muy prontoKarlanKas llegará a ser famoso muy prontoKarlanKas llegará a ser famoso muy prontoKarlanKas llegará a ser famoso muy pronto
 
Avatar de KarlanKas
 
Fecha de Ingreso: noviembre-2002
Ubicación: Madrid
Mensajes: 6.924
Enviar un mensaje por MSN a KarlanKas Enviar un mensaje por Yahoo  a KarlanKas
185.- Recoger valores de un formulario

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

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


Código PHP:
<html>
<
head>
<
script>

//Script original de KarlanKas para forosdelweb.com

enviado=location.href.split("?"); 
igualdades=enviado[1].split("&"); 

for(
a=0;a<igualdades.length;a++){ 
igualdades[a]=igualdades[a].split("+").join(" ");
valores=igualdades[a].split("="); 
eval(
"var "+valores[0]+"='"+valores[1]+"'"); 

 
</script> 
Es importante que el método empleado en el formulario sea GET.

Última edición por KarlanKas; 04-ene-2005 a las 10:56.
KarlanKas está desconectado   Responder Citando
Antiguo 01-jun-2004, 17:43   #184 (permalink)
Moderador
caricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradable
 
Avatar de caricatos
 
Fecha de Ingreso: noviembre-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 12.243
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 , simplemente abriendo un popup vacío desde el evento onclick del enlace, y que la ventana (segundo parámetro de open) coincida con el target del mismo enlace.

Código PHP:
<a href="destino.html" target="popup" onclick='window.open("", "popup", "")' popup </a
Hay otra forma que se discutió en este mensaje que sería más o menos así:

Código PHP:
<a href="destino.html" target="popup" onclick='window.open(this.href, this.target, ""); return false;' popup </a
Para pasar la validación estricta (w3.org) debe obviarse el atributo target, pero también se puede asignar en el mismo script

Código PHP:
<a href="destino.html" onclick='this.target = "popup"; window.open("", "popup", "")' popup </a

Última edición por caricatos; 16-nov-2004 a las 04:35.
caricatos está desconectado   Responder Citando
Antiguo 03-jun-2004, 04:55   #185 (permalink)
Moderador
caricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradable
 
Avatar de caricatos
 
Fecha de Ingreso: noviembre-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 12.243
187.- Title mejorado (tooltip)

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

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

Ejemplo:

Código PHP:
<html>
    <
head>
        <
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <
script type="text/javascript">
            var 
ns4 = (document.layers)? true:false
            
var ie4 = (document.all)? true:false
            
var ns6 = (document.getElementById && !document.all) ? truefalse;
            var 
coorXcoorY;

            if (
ns6document.addEventListener("mousemove"mouseMovetrue)
            if (
ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove mouseMove;}

            function 
mouseMove(e)    {
                if (
ns4||ns6)    {
                    
coorX e.pageX;
                    
coorY e.pageY;
                }
                if (
ie4)    {
                    
coorX event.x;
                    
coorY event.y;
                }
                
coorX += document.body.scrollLeft;
                
coorY += document.body.scrollTop;
                return 
true;
            }

            function 
ini()    {
                if (
ie4)    document.body.onmousemove mouseMove;
            }

            function 
mostrar(dato)    {
                
with(document.getElementById("ayuda"))    {
                    
style.top coorY 10;
                    
style.left coorX 10;
                    
style.visibility "visible";
                    
innerHTML dato;
                }
            }

            function 
ocultar()    {
                
document.getElementById("ayuda").style.visibility "hidden";
            }

            function 
mover()    {
                
with(document.getElementById("ayuda"))    {
                    
style.top coorY 10;
                    
style.left coorX 10;
                }
            }

        
</script>
    </head>
    <body onload="ini()" >
        <div align=center>
            <h3>
                ... Mueve el raton por el texto ...
            </h3>
            <span
                onmouseover="mostrar('primer mensaje')"
                onmousemove="mover()"
                onmouseout="ocultar()">
                    Mensaje 1
            </span>
            <span
                onmouseover="mostrar('mensaje segundo')"
                onmousemove="mover()"
                onmouseout="ocultar()">
                    Mensaje 2
            </span>
        </div>
        <div
            id="ayuda"
            style=" visibility:hidden;
            position:absolute;
            background:yellow;
            font:normal 10px/10px verdana;
            color:black;
            border:solid 1px black;
            text-align:justify;
            padding:10px 10px 10px 10px;">
        </div>

    </body>
</html> 
Se pueden cambiar los estilos de la capa ayuda para personalizar la visualización.

__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Última edición por caricatos; 06-ago-2004 a las 02:37. Razón: faltaba considerar scroll
caricatos está desconectado   Responder Citando
Antiguo 11-jun-2004, 04:04   #186 (permalink)
ludovico2000 está en el buen camino
 
Avatar de ludovico2000
 
Fecha de Ingreso: noviembre-2003
Ubicación: Bizkaia
Mensajes: 1.315
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 por la "inspiración"-

COMPARTIENDO, MEJORAMOS TODOS

Última edición por Kaopectate; 11-jun-2004 a las 05:46. Razón: Error en numeración reportado por Carlitos
ludovico2000 está desconectado   Responder Citando
Antiguo 14-jun-2004, 05:42   #187 (permalink)
Moderador
caricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradable
 
Avatar de caricatos
 
Fecha de Ingreso: noviembre-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 12.243
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.

__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Última edición por Kaopectate; 14-jun-2004 a las 10:09. Razón: Arreglos en el título
caricatos está desconectado   Responder Citando
Antiguo 15-jul-2004, 09:04   #188 (permalink)
epa2 ha deshabilitado el karma
 
Avatar de epa2
 
Fecha de Ingreso: noviembre-2002
Ubicación: Málaga
Mensajes: 1.376
Enviar un mensaje por ICQ a epa2
190.-Aviso anti-popup

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

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



Código:
<HTML>
<HEAD>
<TITLE>fullscreen</TITLE>
<script language="JavaScript"> 
function cerrar()
//esta función lo que hace es cerrar una página sin pedir confirmación
{
ventana=window.self;
ventana.opener=window.self;
ventana.close();
}

function pantallacompleta(pagina) 
{
var opciones=("toolbar=no, location=no, directories=no, status=no, menubar=no ,scrollbars=yes,resizable=no, fullscreen=yes"); 
var w=window.open(pagina,"ventana",opciones);
	if (w.name=="ventana") {
		cerrar();
	}
	else {
		window.document.writeln("Desactiva el bloqueo de poppus windows en tu equipo, de lo contrario\n"+ "no podrás entrar en la pagina o verla.");
		
	}
}
</script>
</HEAD>
<BODY  onload="javascript:pantallacompleta('http://www.tusitio.com/home.html');"> 
</BODY>
</HTML>
__________________

***Aprendiz de todo y maestro de nada***

Última edición por epa2; 15-jul-2004 a las 09:07.
epa2 está desconectado   Responder Citando
Antiguo 23-jul-2004, 04:07   #189 (permalink)
epplestun está en el buen camino
 
Avatar de epplestun
 
Fecha de Ingreso: noviembre-2002
Mensajes: 1.620
191.- Textos alternativos sin hacer uso de la etiqueta alt

Alterntiva a la super FAQ 187 de Caricatos

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

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

<html>
<head>
	<title></title>
</head>

<body>
<script type="text/javascript">
var x=0; var y=0;

if(!document.all) {
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = show;

function crearAlt(texto) {
	document.getElementById("ALTdHTML").innerHTML = '<div style="border: 1px solid #000000; background-color: #fdfec2; padding: 2px; font-size: 70%; font-family: verdana">' + texto + '</div>';
}

function show(evento) {
	document.getElementById("ALTdHTML").style.visibility = 'visible';
	if(document.all) {
		x = event.clientX;
		y = event.clientY + document.body.scrollTop;
	  	document.getElementById("ALTdHTML").style.left = x + 10;
	  	document.getElementById("ALTdHTML").style.top  = y + 14;
	} else {
		x = evento.clientX + document.body.scrollLeft;
		y = evento.clientY + document.body.scrollTop;
		document.getElementById("ALTdHTML").style.left = x + 10;
	  	document.getElementById("ALTdHTML").style.top  = y + 14;
	}
}

function hide() {
	document.getElementById("ALTdHTML").style.visibility = 'hidden';
	document.getElementById("ALTdHTML").innerHTML = "";
}	
</script>
<div id="ALTdHTML" style="position: absolute; visibility: hidden">&nbsp;</div>

<img src="" width="250" height="70" onMouseOver="crearAlt('Imagen');" onMouseOut="hide();">


</body>
</html>
__________________
Usuario registrado de Linux #288725

Última edición por Kaopectate; 03-nov-2004 a las 06:07.
epplestun está desconectado   Responder Citando
Antiguo 03-ago-2004, 11:41   #190 (permalink)
Zane_ está en el buen camino
 
Fecha de Ingreso: junio-2004
Mensajes: 75
192. Resolución de pantalla

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

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

Código PHP:
Tu resolución actual es :
  <
script language="javascript">
var 
largo=screen.width;
var 
alto=screen.height;
document.write(largo+"x"+alto);
</script> 

Última edición por KarlanKas; 03-ago-2004 a las 14:33. Razón: No funcionaba ni a tiros!
Zane_ está desconectado   Responder Citando
Antiguo 04-ago-2004, 03:00   #191 (permalink)
epa2 ha deshabilitado el karma
 
Avatar de epa2
 
Fecha de Ingreso: noviembre-2002
Ubicación: Málaga
Mensajes: 1.376
Enviar un mensaje por ICQ a epa2
Añadir a Favoritos

193.- Añadir a favoritos

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

Respuesta: Prueba con este código

Créditos: Bravenet

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



Código PHP:
<script type="text/javascript">
var 
text "!Méteme en Favoritos¡"
// Añade el URL de tu sitio
var site "http://www.tusitio.com";
// Añade el nombre o descripción de tu página
var desc "Descripción de tu pagina"
var ver navigator.appName
var num parseInt(navigator.appVersion)
if ((
ver == "Microsoft Internet Explorer")&&(num >= 4))
{
document.write('<a title="Hacer favoritos de esta página" href="javascript:window.external.AddFavorite(site,desc);" ');
document.write('onMouseOver=" window.status=')
document.write("text; return true ")
document.write('"onMouseOut=" window.status=')
document.write("' '; return true ")
document.write('">'text '</a>')
}
else
{
text += " (Ctrl+D)"
document.write(text)

</script> </span> 
__________________

***Aprendiz de todo y maestro de nada***
epa2 está desconectado   Responder Citando
Antiguo 19-ago-2004, 01:05   #192 (permalink)
Sir Kevin está en el buen camino
 
Avatar de Sir Kevin
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 25
194.- Como anular history en nuestra web

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

R:
Es tan sencillo como colocar este script en la cabecera de cada una de nuestras páginas:
Código:
if(history.forward(1)){
 history.replace(history.forward(1));
 }
De esta forma si se carga una página nuestra utilizando el botón atrás se redirigirá al usuario a la siguiente página visitada, que si es nuestra y también lleva este código hará lo mismo mientras no sea la última página visitada por el usuario.
Sir Kevin está desconectado   Responder Citando
Antiguo 27-ago-2004, 10:36   #193 (permalink)
Moderador
caricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradable
 
Avatar de caricatos
 
Fecha de Ingreso: noviembre-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 12.243
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...

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)

__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Última edición por Kaopectate; 29-sep-2004 a las 18:35. Razón: Error en numeración
caricatos está desconectado   Responder Citando
Antiguo 02-sep-2004, 10:44   #194 (permalink)
Khronos está en el buen camino
 
Avatar de Khronos
 
Fecha de Ingreso: agosto-2004
Ubicación: Venezuela, PLC
Mensajes: 219
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