InWebmaster - Codigos Javascript

Codigos Javascript

Mensaje de espera mientras carga la pagina

Es siguiente script consigue que se muestre un mensaje de espera hasta que la pagina este completamente cargada.

<BODY onLoad="cacheOff()">
<STYLE TYPE="text/css">
#cache {
position:absolute; left=10; top:10px; z-index:10; visibility:hidden;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
ver = navigator.appVersion.substring(0,1)
if (ver >= 4)
{
document.write('<DIV ID="cache"><TABLE WIDTH=400 BGCOLOR=#000000 BORDER=0 CELLPADDING=2 CELLSPACING=0><TR><TD ALIGN=center VALIGN=middle><TABLE WIDTH=100% BGCOLOR=#FFFFFF BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD ALIGN=center VALIGN=middle><FONT FACE="Arial, Verdana" SIZE=4><B><BR>ESPERE POR FAVOR ... <BR><BR></B></FONT></TD> </TR></TABLE></TD> </TR></TABLE></DIV>');
var navi = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
var HIDDEN = (navi) ? 'hide' : 'hidden';
var VISIBLE = (navi) ? 'show' : 'visible';
var cache = (navi) ? document.cache : document.all.cache.style;
largeur = screen.width;
cache.left = Math.round(100);
cache.visibility = VISIBLE;
}
function cacheOff()
{
if (ver >= 4)
{
cache.visibility = HIDDEN;
}
}
</SCRIPT>

Cambio de color de fondo

Facil metodo de cambio de fondo de una pagina. Utilizamos el " Comand-Prompt", para hacer la eleccion de color.

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var displayColor = prompt("Que color quieres?", "yellow")
var textColor = "black"
if (displayColor == "black" || displayColor == "#000000" || displayColor == null) {
textColor = "white"
}
document.writeln("<BODY BGCOLOR=" + displayColor + " TEXT=" + textColor + ">Color elejido " + displayColor + "</BODY>")
</script>

Busqueda en pagina

Este ejemplo muestra como realizar la busqueda de una palabra o texto en una misma pagina html.

<Html>
<Head>
<Title>Botón de Busqueda</Title>
</Head>

<Body>

<script language="JavaScript">

var NS4 = (document.layers);
var IE4 = (document.all);
var win = window; // Con frames usar top.nombre.window;
var n = 0;

function BuscarPalabras(str)
{
var txt, i, found;
if (str == "")
return false;

if (NS4) {
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;

// No se encuentra en ninguna parte y envia un mensaje.
if (n == 0)
alert("No se encuentra.");
}

if (IE4) {
txt = win.document.body.createTextRange();
// Encuentra la coinsidencia desde el inicio de pagina.
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}

// Si lo encuentra, marca el resultado y mueve la barra de desplazamiento
// para mostrarlo.
if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}
// De otra manera regresa al inicio de la página para buscar otra coinsidencia
else {
if (n > 0) {
n = 0;
BuscarPalabras(str);
}
// No se encuentra en ninguna parte envia un mensaje.
else
alert("No se encontró.");
}
}
return false;
}
</script>

<Form Name="search" onSubmit="return BuscarPalabras(this.string.value);">
<Font Size=2>
<Input Name="string" Type=Text Size=15 onChange="n = 0;">
<Input Type="submit" Value="BUSCAR">
</Font>
</Form>

<Br><Br>

<Font Face=Arial Size=2>
<P>
Escribe la palabra que desees buscar dentro de esta página en el cuadro de texto y presiona el botón BUSCAR.</P>

</Body>
</Html>

Pop up por tiempo

Con este script se consigue abrir una ventana pop-up la cual se puede controlar cambiando los valores de tiempo.
tiempo abertura
Tiempo de cierre

</head>
<SCRIPT LANGUAGE="JavaScript">

function popupWin() {
text = "<html>n<head>n<title>Nuevos recursos</title>n<body>n";
text += "<center>n<br>";
text += "<a href='index.asp' target='_blank'><h2>iW</h2></a>";
text += "</center>n</body>n</html>n";
setTimeout('windowProp(text)', 3000); // El tiempo antes de abrir 3 segundos
}
function windowProp(text) {
newWindow = window.open('','newWin','width=300,height=100');
newWindow.document.write(text);
setTimeout('closeWin(newWindow)', 5000); // tiempo 5 segundos antes de cerrar
}
function closeWin(newWindow) {
newWindow.close(); // cerrar la ventana
}
// End -->
</script>
</head>
<body>
<BODY onLoad="popupWin()">
</body>

Alerta al pulsar la imagen

Al pulsar sobre la imagen se muestra un aventana de alerta.Cmbiando los eventos, podras conseguir que la alerta se despliegue en otro momento.

Efecto agarrar y soltar

Aplicamos este codigo para hacer el efecto drag&Drop o agarrar y soltar, en el ejemplo mostramos una imagen estatica y otra con el efecto.
Para agregar el efecto simplemente añade class="drag"
a cualquier imagen en el documento.

<head>
<style>

</style>
<script language="JavaScript1.2">

</script>
</head>
Imagen sin efecto<br>
<img src="IMG.gif"><br>
Imagen con efecto <br>
<img src="IMG.gif" class="drag"><br>

Alerta al borrar contenido de un formulario

Muchas veces cuando incluimos en nuestras paginas un formulario, incluimos un boton para eliminar o resetear el contenido del formulario. Este ejemplo envia una alerta para prevenir que el usuario borre el formulario por equivocación.

Mostrar y ocultar formulario desde un checkbox

Si queremos ofrecer a nuestros visitantes la opcion de mostrar o ocultar campos de formulario, este script puede ser muy util. Al pulsar sobre el checkbox se muestra u oculta una lista desplegable. Ademas de utilizar javascrit utiliza css y layers o capas

<HTML>
<HEAD>
<STYLE>
.hideable { position: relative; visibility: visible; }
</STYLE>
<SCRIPT>
function mostrar_ocultar(hide) {
if (document.layers)
document.contenido.visibility = hide ? 'hide' : 'show';
else {
var g = document.all ? document.all.contenido :
document.getElementById('contenido');
g.style.visibility = hide ? 'hidden' : 'visible';
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD VALIGN="top">
<FORM NAME="form0">
Mostrar?
<INPUT TYPE="checkbox" NAME="Accion"
ONCLICK="mostrar_ocultar(this.checked);"
>
</FORM>
</TD>
<TD>
<SPAN ID="contenido" CLASS="hideable">
<FORM NAME="form1">
<SELECT NAME="nombre">
<OPTION>Elige
<OPTION VALUE="URL">LINK
<OPTION VALUE="URL">LINK
<OPTION VALUE="URL">LINK
</SELECT>
</FORM>
</SPAN>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Lista desplegable automatica

Este codigo es muy utilizado por todos los diseñadores de paginas. Trata de una lista desplegable y formulario sin boton que se autoenvia al seleccionar una opcion. Es altamente modificable, se pueden añadir todos los enlaces que deseemos, añadirle estilos, colores, etc...

<head>
<script language="JavaScript" type="text/JavaScript">
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
</head>
<body>
<form name="form1" target="_blank">
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option value="URL" selected>LINK</option>
<option value="URL">LINK</option>
<option value="URL">LINK</option>
</select>
</form>
</body>

Editor html - ejecutar html desde formulario

El ejemplo muestra como podemos ejecutar un codigo html que previamente ha sido introducido en un campo de formulario,muy util como editor web o ejecutador de html.

Multialertas

Con este xcript puedes alertar a tus usuarios tantas veces como quieras consecutivamente.

Validacion de nombre de dominio

Permite validar o comprobar si un nombre de dominio esta bien escrito, extension, caracteres especiales etc. Muy util para ofrecer a nustros usuarios.

Mensaje en la barra inferior

<script language="JavaScript">

</script>

<-- Volver Arriba -->

Mensaje Parpadeando en bara inferior de Texto

<script language="JavaScript">
var CC_msg = "Wedmaster te ayuda...............";
var speed = 150;
var control = 1;
function flash()
{
if (control == 1)
{
window.status=CC_msg;
control=0;
}
else
{
window.status="";
control=1;
}
setTimeout("flash();",speed);
}
</script>

<-- Volver Arriba -->

Mensaje con Movimiento en la Parte Superior

<script LANGUAGE="JavaScript">
var txt="Wedmaster te ayuda.";
var espera=30;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</script>

<-- Volver Arriba -->

Mensaje que Cambia de Color

<SCRIPT language=JavaScript>


Botones de Navegación

<table border="0" bgcolor="#FFCC66">
<tr>
<td align="center">
<input type="button" value=" << " onclick="javascript:window.history.go(-1);">
<input type="button" value="Top" onclick="document.location='#top';">
<input type="button" value=" >> " onclick="javascript:window.history.go(1);"></td>
</tr>
</table>


<-- Volver Arriba -->

Mensaje de Cargando Página

<body onLoad="esconde();">
<script language="JavaScript">
if(ie || ns) document.write('<div id="precarga" align="center"> <br />Esperen a que termine de cargar la página, por favor...</div>');
</script>

<-- Volver Arriba -->

Minimizar Pagina con un Boton

<input type="button" value="Minimizar ventana" onclick="window.moveBy(5000,5000); min = 'si';" style="font-family:Verdana"><script>min = "no"; function volver(){if(min == "si"){window.moveTo(0,0); min = "no"}}; window.onfocus = volver
</script>
<style>
.animado {position:absolute;visibility:visible;top:-50px;font-size:10pt;font-family:Arial;font-weight:bold;color:Blak;}
</style>

<-- Volver Arriba -->

Probador de HTML

<script>
function probar(texto) {
ventana = window.open('', 'popup', '');
ventana.document.write(texto);
}
</script>
<form action="" name="probador">
    <font face="Verdana" size="2">Esto es un probador de códigos, inserta el código HTML y te dará el resultado en una ventana nueva!<hr />
    </font><textarea rows="10" cols="50" name="texto"></textarea><font face="Verdana" size="2"> <br />
    </font><input type="button" onclick="probar(texto.value)" value="Convertir" /><font face="Verdana" size="2"> </font>
</form>

<-- Volver Arriba -->

Tabla de colores en tu web

Fecha en tu sitio

Saludo según la hora del día

<Font size=2 face=arial><b>
<Script Language="JavaScript">

</script>
</b></font>

<-- Volver Arriba -->

Tiempo restante para finalizar el día

<body>
<p>Tiempo restante para finalizar el día</p>
<form name="Reloj">
<input type="text" size="7" name="tiempo" value="mm:hh:ss" title="Tiempo restante para finalizar el día">
<script language="JavaScript">
<!--
var tiempoAtras;

updateReloj();
function updateReloj() {
var tiempo = new Date();
var hora = 23-tiempo.getHours();
var minutos = 59-tiempo.getMinutes();
var segundos = 59-tiempo.getSeconds();

tiempoAtras= (hora < 10) ? hora :hora;
tiempoAtras+= ((minutos < 10) ? ":0" : ":") + minutos;
tiempoAtras+= ((segundos < 10) ? ":0" : ":") + segundos;

document.Reloj.tiempo.value = tiempoAtras;

setTimeout("updateReloj()",1000);
}
//-->
</script>
</form>
</body>

<-- Volver Arriba -->

Redireccionar página

<script>location='http://google.cl/'</script>

<-- Volver Arriba -->

Establecer como página de inicio

<A class=chlnk style="FONT-WEIGHT: bold; CURSOR: hand;
COLOR: #004080; FONT-FAMILY: Verdana" onclick=
"this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.CheNico.com');">
<FONT face=Arial color=#000000 size=-2><U>
Esta parte del texto se puede modificar en el código</U></FONT></A>

<-- Volver Arriba -->

Centrar la web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/www.w3.org/1999/xhtml">
<div style="width:900px; position: relative; margin-left: auto; margin-right: auto;">

<-- Volver Arriba -->

Atras - Actualizar - Adelante

<input type="button" value="Atrás" onclick="history.back()" style="font-family: Verdana; font-size: 8 pt">
<input type="button" value="Actualizar" onclick="window.location.reload()" style="font-family: Verdana; font-size: 8 pt">
<input type="button" value="Adelante" onclick="history.forward()" style="font-family: Verdana; font-size: 8 pt">

<-- Volver Arriba -->

"Welcome" para poner en Inicio

Con link:

<a href="Dirección de tu sitio"><img src="https://img.webme.com/pic/c/chatroh/8484484848484.gif" alt="Welcome" width="300" height="100" border="0" /></a>

Sin link:

<img src="https://img.webme.com/pic/c/chatroh/8484484848484.gif" alt="Welcome" width="300" height="100" border="0" />

<-- Volver Arriba -->

Caja de código con botón Copiar

<span id="Caja1" class="Caja1">Haga click dentro de la caja de texto para copiar su contenido<br />
</span> <textarea onclick="copyCaja1(document.getElementById('code1'));return false;" rows="3" cols="16" id="code1">EL TEXTO O CÓDIGO QUE DESEE QUE APAREZCA DENTRO DE LA CAJITA Nº1</textarea> <script>
function copyCaja1(elt) {
var urlSwf = "copy.swf";
var flash = document.getElementById("C1");
var divinfo = '<embed src="http://www.mygirlyspace.com/' + urlSwf + '" name="copy_swf" FlashVars="clipboard='+escape(elt.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
flash.innerHTML = divinfo;
elt.focus();
elt.select();
document.getElementById("Caja1").innerHTML = "¡El texto ha sido copiado!<br/>";
return true;
}
</script>
<div id="C1"> </div>

pd. Si quieres colocar más de una caja en una sola página, escribe el mismo código reemplazando los 1 por 2.

<-- Volver Arriba -->

Hosted by PWG en la esquina inferior derecha de tu web

<a href='http://paginawebgratis.es' style='display:scroll;position:fixed;bottom:0px;right:0px;'>
<img src='http://img91.imageshack.us/img91/6165/hostedbyxj1.gif'/></a>

<-- Volver Arriba -->

Este código sirve para que aparezca NEW al lado de una página de tu menú. Lo colocan al final de tu título de la página.

<img src="http://img441.imageshack.us/img441/5372/newyw7.gif" border="0">

<-- Volver Arriba -->

Abrir web en Pop-up

<script language='JavaScript'>window.open('http://www.chenico.com', 'geoflotante', '');</script>

<-- Volver Arriba -->

Recomendar página

<form name="eMailer">
ENVÍA ESTA PÁGINA A UN AMIGO
<br>
Indica su e-mail:
<br>
<input type="text" name="address" size="25">
<br>
<input type="button" value="Recomendá esta Web!" onClick="mailThisUrl();">
</form>
<script language="JavaScript1.2">
var good;
function checkEmailAddress(field) {
// the following expression must be all on one line...
var goodEmail = field.value.match(/b(^(S+@).+((.com)|(.net)|
(.edu)|(.mil)|(.gov)|(.org)|(..{2,2}))$)b/gi);
if (goodEmail){
good = true
} else {
alert('Por favor introduce un e-mail valido')
field.focus()
field.select()
good = false
}
}
u = window.location;
m = "Pienso que te puede interesar esta página...";
function mailThisUrl(){
good = false
checkEmailAddress(document.eMailer.address)
if (good){
// the following expression must be all on one line...
window.location = "mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+" "+u;
}
}
</script>

<-- Volver Arriba -->

Mensaje de alerta al intentar copiar

<Script language=JavaScript>
function right(e) {
if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){
alert("ACA TU MENSAJE DE ALERTA.");
return false;
}
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("ACA TU MENSAJE DE ALERTA.");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
</script>

<-- Volver Arriba -->

Mensaje de Bienvenida

<script language="JavaScript">
alert("MODIFICAR TEXTO");
</script>

<-- Volver Arriba -->

Mensaje de despedida

<script language="Javascript">

function goAway() {
alert('TU MENSAJE DE DESPEDIDA');
}
</script>

<body bgcolor="white" onUnload="goAway()">

</body>

<-- Volver Arriba -->

Hemos tenido 8254 visitantesEn inWebmaster!