Foros del Web
Página 10 de 14 « Primero 456789 10 11121314
Mostrar 50 mensajes desde este tema en una página

Foros del Web (http://www.forosdelweb.com/)
-   Javascript (http://www.forosdelweb.com/f13/)
-   -   FAQs JavaScript (http://www.forosdelweb.com/f13/faqs-javascript-105325/)

T4X 10/05/2004 13:51
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]

Maru77 10/05/2004 19:16
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!

KarlanKas 24/05/2004 02:49
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.

caricatos 01/06/2004 17:43
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.

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> 
:adios:

caricatos 03/06/2004 04:55
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) ? true: false;
            var coorX, coorY;

            if (ns6) document.addEventListener("mousemove", mouseMove, true)
            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.

:adios:

ludovico2000 11/06/2004 04:04
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

caricatos 14/06/2004 05:42
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:

epa2 15/07/2004 09:04
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>
:adios:

epplestun 23/07/2004 04:07
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>

Zane_ 03/08/2004 11:41
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> 

epa2 04/08/2004 03:00
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> 

Sir Kevin 19/08/2004 01:05
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.

caricatos 27/08/2004 10:36
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:

Khronos 02/09/2004 10:44
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.

KarlanKas 29/09/2004 08:11
197.- Generador de claves
 

P.-¿Cómo puedo hacer que JS genere una clave aleatoria?
R.-Por medio de este código:

Las variables:
caracter: Poner aquí los caracteres válidos para formar la clave.
numero_caracteres: Poner la longitud de caracteres de la clave generada.
Código HTML:
<html>
<head>
<title>Clave Aleatoria</title>
<style>
*{font:normal 10px/10px verdana;}
input{border:solid 1px black;}
</style>
<script>
//Script original de KarlanKas para forosdelweb.com

        var caracter="1234567890";
        caracter+="QWERTYUIOPASDFGHJKLÑZXCVÇBNM";
        caracter+="qwertyuiopñlkjhçgfdsazxcvbnm";
        var numero_caracteres=8;

        var total=caracter.length;
        function azar(){
        var clave="";
        for(a=0;a<numero_caracteres;a++){
        clave+=caracter.charAt(parseInt(total*Math.random(1)));
        }
        document.forms[0].clave2.value=clave;
        }
</script>
</head>
<body onload="azar()">
<form>
Clave.-<input type="text" readonly="readonly"  name="clave2" id="clave2" />
<input type="button" value="regenerar clave" onclick="azar()" />
</form>
</body>
</html>

caricatos 08/10/2004 04:21
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:

epa2 26/10/2004 05:08
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

Código:
copia en el head lo siguiente....

<script type="text/javascript">
function change()
{
re="rgb("+Math.round(Math.random()*256)+","+Math.round(Math.random()*256)+","+Math.round(Math.random()*256)+")"
text.style.color=re;
}
setInterval(change,1000);
</script>

luegon en el body pon algo así donde quisieras que el texto con el fade de colores apareciera

<p id="text"> Escribe aquí el mensaje. </p>
ale, a disfrutarlo

paulkees 02/11/2004 23:30
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

alexa10 11/11/2004 13:46
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:

Código:
<head>
  <link rel="stylesheet" type="text/css" id="hojaestilo">
  <script language="JavaScript" type="text/javascript">
  <!--
    document.getElementById('hojaestilo').href = screen.width + ".css";
  -->
  </script>
</head>
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

epa2 16/11/2004 06:26
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....

Código PHP:
<script type="text/javascript">
var Quotation=new Array()
Quotation[0] = "Foros del Web, el mejor sitio para aprender.";
Quotation[1] = "Escribe las citas que quieras en estos sitios.";
Quotation[2] = "Hoy es un día precioso para aprender algo nuevo";
Quotation[3] = "Soy un probecillo aprendiz.";
Quotation[4] = "Y encima nadie me hace caso en la vida :-(.";
var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation() {
document.write(Quotation[whichQuotation]);}
</script> 
Si quieres que aparezca en el body escribe lo siguiente....

Código PHP:
<script type="text/javascript">  showQuotation(); </script> 
¡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...



Código PHP:
Quotation[5] = "Cuanto más aprendo, mas ignorante me siento";
Quotation[6] = "Creo que algún día tiraré la toalla :-("; 
y así sucesivamente con el 7, el 8, el 9, etc.

bueno, espero que os sirva para algo...

nos vemos pronto, cuidaos :-)


La zona horaria es GMT -6. Ahora son las 16:42.
Página 10 de 14 « Primero 456789 10 11121314
Mostrar 50 mensajes desde este tema en una página

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2025, Jelsoft Enterprises Ltd.