Trucos de Javascript – Listado imprescindible de trucos con JAVASCRIPT





Los mejores trucos de Javascript para utilizar en tus webs. Listado imprescindible de trucos con JAVASCRIPT

 

Abrir una nueva ventana centrada con JAVASCRIPT

Con este truco javascript podremos abrir las ventanas centradas
var izquierda = (screen.availWidth – 500) / 2; var arriba = (screen.availHeight – 180) / 2; win=window.open(‘PaginaNueva.htm’,’TituloPagina’,’top=’+arriba+’,left=’+izquierda +’,height=180,width=500,resizable=0,scrollbars=0′);

 

 

Abrir una ventana al utilizar el botón derecho   con JAVASCRIPT

<;SCRIPT language=JavaScript>;
function right(e) { if (navigator.appName = = ‘Netscape’ && (e.which = = 3|| e.which = = 2)) { a=window.open("http://www.mistrucos.net/","WindowName", "width=640,height=600,top=40,left=50,resizable=yes,scrollbars=yes,menubar=no,toolbar=no,status=no,location=no"); return false; } else if (navigator.appName == ‘Microsoft Internet Explorer’ && (event.button == 2 || event.button == 3)) { a=window.open(, "WindowName","width=640, height=600,top=40,left=50,resizable=yes, scrollbars=yes,menubar=no,toolbar=no,status=no,location=no"); return false; } return true; } document.onmousedown=right; window.onmousedown=right; <;/SCRIPT>;

 

Abrir ventana con tamaño determinado con JAVASCRIPT

Podemos especificar el tamaño de una nueva ventana. Esto nos puede ser útil por sí queremos abrir un pequeño popup, así le podremos especificar el tamaño.

<;SCRIPT language="JavaScript">; self.resizeTo(800,500); <;/SCRIPT>;

 

Agregar a un ListBox items desde otra pagina con JAVASCRIPT

Podemos agregar nuevos ítems de un listbox de una página hija a una padre.

En la página padre crearemos esta función

: function insereSelect(texto,valor) { var numeroCurriculums=document.frmCurriculum.lstCurriculumWord.length; document.frmCurriculum.lstCurriculumWord.options[numeroCurriculums] = new Option(texto,valor); } En la pagina hija: function actualizaopener(texto,id) { window.opener.insereSelect(texto,id); setTimeout(‘window.close();’,’100′); //cierra la ventana automaticamente }

 

Agregar Cookie con JAVASCRIPT

  Con este truco javascript crearemos una cookie de manera fácil .

function setCookie (nombre,valor) { expireDate = new Date; expireDate.setMonth(expireDate.getMonth()+6); document.cookie = nombre + "=" + valor + ";expires=" + expireDate.toGMTString(); }

 

Alert al utilizar el botón derecho con JAVASCRIPT

Función para visualizar un alert en la página cuando el usuario pulse el botón derecho del ratón.

<;script language="JavaScript">; <;!– Begin function right(e) { var msg = " [ www.mistrucos.net ] "; if (navigator.appName == ‘Netscape’ && e.which == 3) { alert(msg); // Delete this line to disable but not alert user return false; } else if (navigator.appName == ‘Microsoft Internet Explorer’ && event.button==2) { alert(msg); // Delete this line to disable but not alert user return false; } return true; } document.onmousedown = right; // End –>; <;/script>;

 

Añadir a Favoritos con JAVASCRIPT

Código para añadir tu una web a favoritos

<;SCRIPT LANGUAGE="JavaScript">; <;!– function addBookmark() { if (window.external) external.AddFavorite("http://www.mistrucos.net", "MisTrucos.Net") else alert("Tu navegador no soporta esta caracteristica"); } // –>; <;/SCRIPT>;

 

Cambiar el color de la barra de desplazamiento con JAVASCRIPT

Gracias a este pequeño truco podrás modificar el color de la barra de desplazamiento del explorador del cliente:

<;html>; <;head>; <;style type="text/css">; body{ scrollbar-face-color: #aaaaaa; scrollbar-highlight-color: #aaaaaa; scrollbar-shadow-color: #aaaaaa; scrollbar-3dlight-color: #eeeeee; scrollbar-arrow-color: #eeeeee; scrollbar-track-color: #e3e3e3; scrollbar-darkshadow-color: #000000; } <;/style>; <;/head>; <;body>; Contenido de la página <;/body>; <;/html>;

 

Cerrar ventana con JAVASCRIPT

Con este truco javascript podrás cerrar una ventana .
<;input type="button" onclick="javascript:window.close()" value="Cerrar Ventana" style="font-family: Verdana; font-size: 8 pt; color: #000080; background-color: #C0C0C0; border-style: solid">;

 

Cerrar ventana pasado unos segundos con JAVASCRIPT

Para cerrar la ventana pasados unos segundos ponemos este script:

<;script language="javascript">;setTimeout("self.close();",7000)<;/script>;

(Quitar los 😉

 

Dar efecto opaco a las imagenes con JAVASCRIPT

<;!– Siguiente Código entre <;head>; y <;/head>; –>; <;script language="JavaScript1.2">; function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=100 else cur.filters.alpha.opacity=40 } <;/script>; <;!– Fin del código <;head>; y <;/head>; –>;
Gracias a este truco javascript verás que aplicar un estilo opaco a una imagen es bastante sencillo y da un efecto bonito.
onmouseover=makevisible(this,0) style="FILTER: alpha(opacity=40)" onmouseout=makevisible(this,1) En resumen la imagen nos quearia algo a si: <;img src="imagenes/publicidad/8831/botonevidalia.gif" onmouseover=makevisible(this,0) style="FILTER: alpha(opacity=40)" onmouseout=makevisible(this,1) width="88" height="33" border="1" alt="">;

 

Degrade del fondo de la pagina con JAVASCRIPT

alink="#3870FF" onLoad="fade(255, 255, 255, 0, 50, 150, 32)"
onUnload="fade(0, 65, 150, 255, 255, 255, 32)" bgproperties="fixed">

 

 

Dehabilitar el boton derecho del mouse con JAVASCRIPT

function clickIE(){
if (document.all) return false;
}

function clickNS(e){
if (document.layers||(document.getElementById&&!document.all)){
if (e.which==2||e.which==3){
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS;
}else{
document.onmouseup=clickNS;
document.oncontextmenu=clickIE;
}

 

 

Funcion de un check con JAVASCRIPT

Esta funcion comprueba si hay un check marcado, y si es asi no permite introducir numeros en una caja de texto

function EstadoCheck() {
if (document.forms[0].check.checked==true)
{
event.keyCode = 0;
document.forms[0].CajaDeTexto.value =»;

}
else
{
if((event.keyCode < 48)||(event.keyCode > 57)){
event.keyCode = 0;
}
}

 

Funcion DNI con JAVASCRIPT

<;SCRIPT LANGUAGE="JavaScript">; function DNI(n){ var d =(n/23) d = Math.floor(d); var e=d*23 var r=n-e if (r==0) return "T" if (r==1) return "R" if (r==2) return "W" if (r==3) return "A" if (r==4) return "G" if (r==5) return "M" if (r==6) return "Y" if (r==7) return "F" if (r==8) return "P" if (r==9) return "D" if (r==10) return "X" if (r==11) return "B" if (r==12) return "N" if (r==13) return "J" if (r==14) return "Z" if (r==15) return "S" if (r==16) return "Q" if (r==17) return "V" if (r==18) return "H" if (r==19) return "L" if (r==20) return "C" if (r==21) return "K" if (r==22) return "E" } <;/script>;

 

 

Función Numeros

function Numeros(){
if(_val_is_ie){
if((event.keyCode < 48)||(event.keyCode > 57)){
event.keyCode = 0;
}
}
}

 

 

Lanzar búsquedas en varios buscadores con JAVASCRIPT

Abre una ventana para cada buscador <;DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN" "html.dtd">; <;TITLE>;Java Goodies<;/TITLE>; <;HEAD>; <;SCRIPT LANGUAGE="JavaScript">; <;!– //Script Author: James Gabel([email protected]). //Date: 01-27-98 //Use all you want provided you leave in the comments. function netsearch(formname) { var a1 var a2 var b1 var b2 var c1 var c2 var d1 var d2 var e1 var e2 var f1 var f2 var g1 var g2 var TEXT var noENGINE var haveTEXT TEXT=formname.TEXT.value; noEngine=true; haveTEXT=true; if (TEXT==" ") { alert("Debe ingresa el término a buscar!") haveTEXT=false } //ALTAVISTA a1=formname.altavista.checked; a2="http://www.altavista.digital.com/cgi-bin/query?pg=q&what=web&fmt=.&q="+TEXT; if (a1) { noEngine=false if (haveTEXT) { newWindow=window.open(a2, "av","toolbar,location,directories,status,menubar,scrollbars,resizable=1") } } //EXCITE b1=formname.excite.checked; b2="http://www.excite.com/search.gw?trace=a&search="+TEXT; if (b1) { noEngine=false if (haveTEXT) { newWindow=window.open(b2, "e","toolbar,location,directories,status,menubar,scrollbars,resizable=1") } } //HOTBOT c1=formname.hotbot.checked; c2="http://www.search.hotbot.com/hResult.html?SM=MC&MT="+TEXT+"&DV=7&RG=.com&DC=10&DE=2&OPs=MDRTP&_v=2&DU=days&SW=web&search.x=23&search.y=8"; if (c1) { noEngine=false if (haveTEXT) { newWindow=window.open(c2, "h","toolbar,location,directories,status,menubar,scrollbars,resizable=1") } } //INFOSEEK d1=formname.infoseek.checked; d2="http://www.infoseek.com/Titles?qt="+TEXT+"&col=WW&sv=IS&lk=noframes&nh=10"; if (d1) { noEngine=false if (haveTEXT) { newWindow=window.open(d2, "i", "toolbar,location,directories,status,menubar,scrollbars,resizable=1") } } //LYCOS e1=formname.lycos.checked; e2="http://www.lycos.com/cgi-bin/pursuit?query="+TEXT+"&matchmode=and&cat=lycos&x=33&y=10"; if (e1) { noEngine=false if (haveTEXT) { newWindow=window.open(e2, "l","toolbar,location,directories,status,menubar,scrollbars,resizable=1") } } //WEBCRAWLER f1=formname.webcrawler.checked; f2="http://www.webcrawler.com/cgi-bin/WebQuery?searchText="+TEXT; if (f1) { noEngine=false if (haveTEXT) { newWindow=window.open(f2, "w","toolbar,location,directories,status,menubar,scrollbars,resizable=1") } } //YAHOO g1=formname.yahoo.checked; g2="http://search.yahoo.com/bin/search?p="+TEXT; if (g1) { noEngine=false if (haveTEXT) { newWindow=window.open(g2, "y","toolbar,location,directories,status,menubar,scrollbars,resizable=1") } } //noENGINE if (noEngine) { alert("Por favor seleccione un motor de búsqueda!") } // END SCRIPT } //Done Hiding–>; <;/SCRIPT>; <;/HEAD>; <;BODY BGCOLOR="#FFFFFF">; <;FONT SIZE=2 Face=arial COLOR=#0000CC>; <;b>;Búsqueda en distintos buscadores<;/b>;<;/FONT>; <;br>; <;hr>; <;FONT FACE=ARIAL SIZE=1>; (Nota: Esta página abre una nueva ventana por cada motor de búsqueda seleccionado.) <;/FONT>; <;FORM NAME="engines">; <;FONT SIZE=2 Face=arial>;<;b>;Seleccione su Motor de Búsqueda:<;/b>;<;/FONT>;<;br>; <;INPUT TYPE="Checkbox" NAME="altavista" VALUE="">;Alta Vista<;br>; <;INPUT TYPE="Checkbox" NAME="excite" VALUE="">;Excite<;br>; <;INPUT TYPE="Checkbox" NAME="hotbot" VALUE="">;HotBot<;br>; <;INPUT TYPE="Checkbox" NAME="infoseek" VALUE="">;Infoseek<;br>; <;INPUT TYPE="Checkbox" NAME="lycos" VALUE="">;Lycos<;br>; <;INPUT TYPE="Checkbox" NAME="webcrawler" VALUE="">;Webcrawler<;br>; <;INPUT TYPE="Checkbox" NAME="yahoo" VALUE="">;Yahoo <;P>; <;INPUT NAME=TEXT size=15 maxlength=200 VALUE=" ">; <;INPUT TYPE="BUTTON" VALUE="Buscar!" onClick="netsearch(engines)">; <;INPUT TYPE="RESET" VALUE="Borrar">; <;/FORM>; <;P>; <;hr>; <;/BODY>; <;/HTML>;

 

 

Menú desplegable con JAVASCRIPT

<;HTML>; <;HEAD>; <;TITLE>;Static Slide Menu<;/TITLE>; <;SCRIPT language="JavaScript">; <;!– /* Copyright © MaXimuS 1999-2000, All Rights Reserved. Site: http://www.absolutegb.com/maximus E-mail: [email protected] */ IE=document.all; NS=document.layers; /* Configure menu styles below NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors */ hdrFontFamily="Verdana"; hdrFontSize="2"; hdrFontColor="white"; hdrBGColor="#666666"; linkFontFamily="Verdana"; linkFontSize="1"; linkBGColor="white"; linkOverBGColor="#CCCCCC"; linkTarget="_top"; YOffset=20; staticYOffset=20; menuBGColor="black"; menuIsStatic="yes"; menuHeader="Gamarod.com.ar" menuWidth=150; // Must be a multiple of 5! staticMode="advanced" barBGColor="#333333"; barFontFamily="Verdana"; barFontSize="2"; barFontColor="white"; barText="Gamarod JavaScript"; function moveOut() { if (window.cancel) {cancel="";} if (window.moving2) {clearTimeout(moving2); moving2="";} if ((IE && ssm2.style.pixelLeft<;0)||(NS && document.ssm2.left<;0)) { if (IE) {ssm2.style.pixelLeft += (5%menuWidth);} if (NS) {document.ssm2.left += (5%menuWidth);} moving1 = setTimeout(‘moveOut()’, 5)} else {clearTimeout(moving1)}}; function moveBack() { cancel = moveBack1()} function moveBack1() { if (window.moving1) {clearTimeout(moving1)} if ((IE && ssm2.style.pixelLeft>;(-menuWidth))||(NS && document.ssm2.left>;(-140))) { if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);} if (NS) {document.ssm2.left -= (5%menuWidth);} moving2 = setTimeout(‘moveBack1()’, 5)} else {clearTimeout(moving2)}}; lastY = 0; function makeStatic(mode) { if (IE) {winY = document.body.scrollTop;var NM=ssm2.style} if (NS) {winY = window.pageYOffset;var NM=document.ssm2} if (mode=="smooth") { if ((IE||NS) && winY!=lastY) { smooth = .2 * (winY – lastY); if(smooth >; 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (IE) NM.pixelTop+=smooth; if (NS) NM.top+=smooth; lastY = lastY+smooth;} setTimeout(‘makeStatic("smooth")’, 1)} else if (mode=="advanced") { if ((IE||NS) && winY>;YOffset-staticYOffset) { if (IE) {NM.pixelTop=winY+staticYOffset} if (NS) {NM.top=winY+staticYOffset}} else { if (IE) {NM.pixelTop=YOffset} if (NS) {NM.top=YOffset-7}} setTimeout(‘makeStatic("advanced")’, 1)}} function init() { if (IE) { ssm2.style.pixelLeft = -menuWidth; ssm2.style.visibility = "visible"} else if (NS) { document.ssm2.left = -menuWidth; document.ssm2.visibility = "show"} else {alert(‘Choose either the "smooth" or "advanced" static modes!’)}} //–>; <;/SCRIPT>; <;STYLE>; A.ssm2Items:link {color:black;text-decoration:none;} A.ssm2Items:hover {color:black;text-decoration:none;} A.ssm2Items:active {color:black;text-decoration:none;} A.ssm2Items:visited {color:black;text-decoration:none;} <;/STYLE>; <;/HEAD>; <;BODY bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="init()">; <;script language="JavaScript1.2">; if (IE) {document.write(‘<;DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : ‘+YOffset+’px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">;’)} if (NS) {document.write(‘<;LAYER visibility="hide" top="’+YOffset+’" name="ssm2" bgcolor="’+menuBGColor+’" left="0" onmouseover="moveOut()" onmouseout="moveBack()">;’)} tempBar="" for (i=0;i<;barText.length;i++) { tempBar+=barText.substring(i, i+1)+"<;BR>;"} document.write(‘<;table border="0" cellpadding="0" cellspacing="1" width="’+(menuWidth+16+2)+’" bgcolor="’+menuBGColor+’">;<;tr>;<;td bgcolor="’+hdrBGColor+’" WIDTH="’+menuWidth+’">; <;font face="’+hdrFontFamily+’" Size="’+hdrFontSize+’" COLOR="’+hdrFontColor+’">;<;b>;’+menuHeader+'<;/b>;<;/font>;<;/td>;<;td align="center" rowspan="100" width="16" bgcolor="’+barBGColor+’">;<;p align="center">;<;font face="’+barFontFamily+’" Size="’+barFontSize+’" COLOR="’+barFontColor+’">;<;B>;’+tempBar+'<;/B>;<;/font>;<;/p>;<;/TD>;<;/tr>;’) function addItem(text, link, target) { if (!target) {target=linkTarget} document.write(‘<;TR>;<;TD BGCOLOR="’+linkBGColor+’" onmouseover="bgColor=\»+linkOverBGColor+’\’" onmouseout="bgColor=\»+linkBGColor+’\’">;<;ILAYER>;<;LAYER onmouseover="bgColor=\»+linkOverBGColor+’\’" onmouseout="bgColor=\»+linkBGColor+’\’" WIDTH="100%">;<;FONT face="’+linkFontFamily+’" Size="’+linkFontSize+’">; <;A HREF="’+link+’" target="’+target+’" CLASS="ssm2Items">;’+text+'<;/LAYER>;<;/ILAYER>;<;/TD>;<;/TR>;’)} function addHdr(text) { document.write(‘<;tr>;<;td bgcolor="’+hdrBGColor+’" WIDTH="140">; <;font face="’+hdrFontFamily+’" Size="’+hdrFontSize+’" COLOR="’+hdrFontColor+’">;<;b>;’+text+'<;/b>;<;/font>;<;/td>;<;/tr>;’)} //Only edit the script between HERE addItem(‘Buscador de Rutinas’, ‘buscar.htm’, »); addItem(‘Foros de Discusión’, ‘/foros/’, »); addItem(‘Lista de Correo’, ‘/lista.htm’, »); addItem(‘Comentarios’, ‘/comentarios.htm’, »); addItem(‘Contribución’, ‘/contribuir.htm’, »); addItem(‘Firmar el Libro’, ‘/firmar.htm’, »); addItem(‘Enlaces’, ‘/enlaces.htm’, »); addItem(‘Agregar URL’, ‘agregar.htm’, »); addHdr(‘Todos los Script’); addItem(‘Alertas’, ‘alertas.htm’, »); addItem(‘Banner’, ‘banner.htm’, »); addItem(‘Cookies’, ‘cookies.htm’, »); addItem(‘Dhtml’, ‘dhtml.htm’, »); addItem(‘Enlaces’, ‘enlaces.htm’, »); addItem(‘Fecha’, ‘fecha.htm’, »); addItem(‘Imagen’, ‘imagen.htm’, »); addItem(‘Juegos’, ‘juegos.htm’, »); addItem(‘Midis’, ‘midis.htm’, »); addItem(‘Otras’, ‘otras.htm’, »); addItem(‘Prompt’, ‘prompt.htm’, »); addItem(‘Reloj’, ‘reloj.htm’, »); addItem(‘Seguridad’, ‘seguridad.htm’, »); addItem(‘Texto’, ‘texto.htm’, »); addItem(‘Ventana’, ‘ventana.htm’, »); // and HERE! No more! document.write(‘<;tr>;<;td bgcolor="’+hdrBGColor+’">;<;font size="0" face="Arial">; <;/font>;<;/td>;<;/TR>;<;/table>;’) if (IE) {document.write(‘<;/DIV>;’)} if (NS) {document.write(‘<;/LAYER>;’)} if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);} <;/script>; <;br>;<;br>;<;br>; <;/BODY>; <;/HTML>;

 

 

 

Menú desplegable con categorías con JAVASCRIPT





<;html>; <;head>; <;title>; SlideMenu <;/title>; <;style type="text/css">; DIV.clSlide{position:absolute; ;z-index:10; left:0; width:138; height:22; clip:rect(0,138,22,0); padding:3px;} DIV.clSlideSub{position:absolute; ;z-index:10; padding:2px; clip:rect(0,127,20,0); width:127; height:20; left:8; visibility:hidden} DIV.clSlideSub2{position:absolute; ;z-index:10; padding:2px; clip:rect(0,118,20,0); width:118; height:20; left:8; visibility:hidden} #divSlideCont{position:absolute; z-index:10; left:0; top:100; height:600; width:170; visibility:hidden} A.clSlideLinks{font-family:Verdana, Helvetica, Helv; font-size:11px; font-weight:bold; text-decoration:none; color:white} A.clSlideSubLinks{font-family:Verdana, Helvetica, Helv; font-size:10px; text-decoration:none; color:Navy} A.clSlideSub2Links{font-family:Verdana, Helvetica, Helv; font-size:9px; text-decoration:none; color:Navy} <;/style>; <;script language="JavaScript" type="text/javascript">; /********************************************************************************** SlideMenu * Copyright (C) 2001 Thomas Brattli * This script was released at DHTMLCentral.com *********************************************************************************/ function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=(navigator.userAgent.indexOf("Opera")>;-1 && document.getElementById)?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>;-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>;-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>;-1 this.ns6=(this.dom && parseInt(this.ver) >;= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this } var bw=lib_bwcheck() //Opera didn’t seem to like the padding in the layers, it messes up the background-images, so here’s a version without it. if(bw.opera5) document.write("<;style>;DIV.clSlide{padding:0px; background-image:url(‘ ‘)}\nDIV.clSlideSub{padding:0px; background-image:url(‘ ‘)}\nDIV.clSlideSub2{padding:0px; background-image:url(‘ ‘)}<;/style>;") /************************************************************************************ Making cross-browser objects ************************************************************************************/ function makeMenuObj(obj,nest){ nest=(!nest) ? "":’document.’+nest+’.’ this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0; this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+’document.’+obj):0; this.ref=bw.dom || bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0; this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.offsetLeft; this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.offsetTop; this.hideIt=b_hideIt; this.showIt=b_showIt; this.movey=b_movey this.moveIt=b_moveIt; this.moveBy=b_moveBy; this.status=0; this.bgImg=b_bgImg; this.obj = obj + "Object"; eval(this.obj + "=this"); this.clipTo=b_clipTo; return this } function b_showIt(){this.css.visibility="visible"; this.status=1} function b_hideIt(){this.css.visibility="hidden"; this.status=0} function b_movey(y){this.y=y; this.css.top=this.y} function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y} function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x;this.css.top=this.y} function b_bgImg(img){if(bw.ie||bw.dom)this.css.backgroundImage="url("+img+")" else this.css.background.src=img } function b_clipTo(t,r,b,l,w){if(bw.ns4){this.css.clip.top=t;this.css.clip.right=r this.css.clip.bottom=b;this.css.clip.left=l }else{this.css.clip="rect("+t+","+r+","+b+","+l+")"; if(w){this.css.width=r; this.css.height=b}}} /******************************************************************************** Initiating page, making objects.. ********************************************************************************/ function SlideMenuInit(){ oSlideMenu=new makeMenuObj(‘divSlideCont’) oSlideMenu.moveIt(menux,menuy) oSlide=new Array() for(i=0;i<;menus.length;i++){ oSlide[i]=new makeMenuObj(‘divSlide’+i,’divSlideCont’) oSlide[i].subs=menus[i].subs oSlide[i].sub=new Array() oSlide[i].moveIt(0,mainheight*i) oSlide[i].starty=oSlide[i].y if(bw.opera) oSlide[i].css.paddingLeft="10px" if(!menus[i].seperator) oSlide[i].bgImg(level0_regular) for(j=0;j<;oSlide[i].subs;j++){ oSlide[i].sub[j]=new makeMenuObj(‘divSlideSub’+i+"_"+j,’divSlideCont’) oSlide[i].sub[j].moveIt(10,oSlide[i].y+subheight*j+between) oSlide[i].sub[j].starty=oSlide[i].sub[j].y oSlide[i][j]=new Array() oSlide[i][j].subs=menus[i][j].subs oSlide[i][j].sub=new Array() img=level1_round if(oSlide[i][j].subs!=0){ if(j!=oSlide[i].subs-1) img=level1_sub else img=level1_sub_round oSlide[i].sub[j].css.color="white" }else{ if(j!=oSlide[i].subs-1)img=level1_regular } oSlide[i].sub[j].origimg=img oSlide[i].sub[j].bgImg(img) for(a=0;a<;oSlide[i][j].subs;a++){ oSlide[i][j].sub[a]=new makeMenuObj(‘divSlideSub’+i+"_"+j+"_"+a,’divSlideCont’) oSlide[i][j].sub[a].moveIt(20,oSlide[i].sub[j].y+subheight*a+between-2) oSlide[i][j].sub[a].starty=oSlide[i][j].sub[a].y oSlide[i][j][a]=new Array() oSlide[i][j][a].subs=menus[i][j][a].subs oSlide[i][j][a].sub=new Array() if(a!=oSlide[i][j].subs-1) img=level2_regular else img=level2_round oSlide[i][j].sub[a].origimg=img oSlide[i][j].sub[a].bgImg(img) } } } oSlideMenu.showIt() } /******************************************************************************** Variables ********************************************************************************/ var active=-1;var going;var isthere; var sactive=-1; var sisthere=-1; var s2active=-1; var s2isthere=-1 /******************************************************************************** Switch menu function. ********************************************************************************/ function swmenu(num,snum,s2num){ if(snum!=-1){ if(oSlide[num][snum].subs==0) return } if(s2num!=-1){ if(oSlide[num][snum][s2num].subs==0) return } if((num!=active || snum!=sactive || s2num!=s2active) && !going){going=true;isthere=0;sisthere=0;moveUp(num,snum,s2num)} } /******************************************************************************** Moving the menus upward to their original position. ********************************************************************************/ function moveUp(num,snum){ if(snum==-1){ for(i=0;i<;oSlide.length;i++){ if(oSlide[i].y>;oSlide[i].starty+pxspeed && active!=i) oSlide[i].moveBy(0,-pxspeed) else{if(active!=i) oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty); isthere=i} } if(isthere<;oSlide.length-1) setTimeout("moveUp("+num+","+snum+")",timspeed) else swmenu2(num,snum) }else{ if(num==oSlide.length-1) isthere=num if(sactive!=-1){ //Is out! //Slide subs j=0 for(i=sactive+1;i<;oSlide[num].sub.length;i++){ j++ if(oSlide[num].sub[i].y>;oSlide[num].sub[i].starty+pxspeed) oSlide[num].sub[i].moveBy(0,-pxspeed) else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,oSlide[num].sub[i].starty); sisthere=i} } //Slide main for(i=num+1;i<;oSlide.length;i++){ if(oSlide[i].y>;oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j ) oSlide[i].moveBy(0,-pxspeed) else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j ); isthere=i} } }else{ //Slide to the one clicked for(i=num+1;i<;oSlide.length;i++){ if(oSlide[i].y>;oSlide[i].starty + snum*between+between) oSlide[i].moveBy(0,-pxspeed) else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + snum*between+between); isthere=i} } } if(isthere<;oSlide.length-1 || (sactive!=-1 && sisthere<;oSlide[num].sub.length-1 && sactive!=oSlide[num].sub.length-1)) setTimeout("moveUp("+num+","+snum+")",timspeed) else swmenu2(num,snum) } } /******************************************************************************** Switch menu 2, stuff that happens before the menus are moved down again. ********************************************************************************/ function swmenu2(num,snum){ isthere=0; sisthere=0; if(active>;-1 && snum==-1){ //Hiding submenus for(j=0;j<;oSlide[active].subs;j++){oSlide[active].sub[j].hideIt()} oSlide[active].bgImg(level0_regular) oSlide[active].moveIt(0,oSlide[active].starty) } if(sactive>;-1){ //Hiding submenus for(j=0;j<;oSlide[active][sactive].sub.length;j++){oSlide[active][sactive].sub[j].hideIt()} oSlide[active].sub[sactive].bgImg(oSlide[active].sub[sactive].origimg) oSlide[active].sub[sactive].moveIt(10,oSlide[active].sub[sactive].starty) //Move back to place for(i=sactive+1;i<;oSlide[active].sub.length;i++){ oSlide[active].sub[i].moveIt(oSlide[active].sub[i].x,oSlide[active].sub[i].starty) } } active=num //Showing submenus if(snum>;-1){ sactive=snum for(j=0;j<;oSlide[num][snum].sub.length;j++){oSlide[num][snum].sub[j].showIt()} oSlide[num].sub[snum].moveBy(10,3) oSlide[num].sub[snum].bgImg(level1_round2) }else{ sactive=-1 for(j=0;j<;oSlide[active].subs;j++){oSlide[active].sub[j].showIt()} oSlide[num].moveBy(10,3) oSlide[num].bgImg(level0_round) } if(num!=oSlide.length-1) moveDown(num,snum) else{ isthere=num moveDown(num,snum) } } /******************************************************************************** Moving the menus down ********************************************************************************/ function moveDown(num,snum){ //if(num==oSlide.length-1) isthere=num for(i=num+1;i<;oSlide.length;i++){ if(snum==-1){ if(oSlide[i].y<;(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed) oSlide[i].moveBy(0,pxspeed) else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between); isthere=i} }else{ if(oSlide[i].y<;(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed + (oSlide[num][snum].subs-1)*subheight+between) oSlide[i].moveBy(0,pxspeed) else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between + (oSlide[num][snum].subs-1)*subheight+between); isthere=i} } } if(snum!=-1){ for(i=snum+1;i<;oSlide[num].sub.length;i++){ if(oSlide[num].sub[i].y<;(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between-pxspeed) oSlide[num].sub[i].moveBy(0,pxspeed) else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between); sisthere=i} } } if(snum==-1){ if(isthere<;oSlide.length-1) setTimeout("moveDown("+num+","+snum+")",timspeed) else going=false }else{ if(isthere<;oSlide.length-1 || (sisthere<;oSlide[num].sub.length-1 && snum!=oSlide[num].sub.length-1)) setTimeout("moveDown("+num+","+snum+")",timspeed) else going=false } } var test=0 /******************************************************************************** Functions to write out the layers… ********************************************************************************/ menus=new Array(); var a=0; var b=0; var c=0; var d=0 function makeMenu(type,text,lnk,target,end){ str=""; tg=""; if(target) tg=’target="’+target+’"’ if(!lnk) lnk="#" self.status=lnk if(a==0) str='<;div id="divSlideCont">;\n’ if(type=="top"){ menus[a]=new Array(); if(text=="seperator"){ str+=’\t<;div id="divSlide’+a+’" class="clSlide">;<;/div>;\n’ menus[a].seperator=1 }else{ str+=’\t<;div id="divSlide’+a+’" class="clSlide">;<;a href="’+lnk+’" ‘+tg+’ onclick="swmenu(‘+a+’,-1,-1); if(bw.ie || bw.ns6) this.blur(); ‘ if(lnk=="#") str+=’return false’ str+=’" class="clSlideLinks">; ‘+text+'<;/a>;<;br>;<;/div>;\n’ } menus[a].subs=0; a++; b=0 }else if(type=="sub"){ str+=’\t\t<;div id="divSlideSub’+(a-1)+’_’+(b)+’" class="clSlideSub">;<;a ‘+tg+’ onclick="swmenu(‘+(a-1)+’,’+b+’,-1); if(bw.ie || bw.ns6) this.blur(); ‘ if(lnk=="#") str+=’return false’ str+=’" href="’+lnk+’" class="clSlideSubLinks">; ‘+text+'<;/a>;<;br>;<;/div>;\n’ b++; menus[a-1].subs=b; menus[a-1][b-1]=new Array(); c=0; menus[a-1][b-1].subs=0 }else if(type=="sub2"){ str+=’\t\t<;div id="divSlideSub’+(a-1)+’_’+(b-1)+’_’+c+’" class="clSlideSub2">;<;a ‘+tg+’ href="’+lnk+’" class="clSlideSub2Links">; ‘+text+'<;/a>;<;br>;<;/div>;\n’ c++; menus[a-1][b-1].subs=c; menus[a-1][b-1][c-1]=new Array(); d=0; menus[a-1][b-1][c-1].subs=0 } if(end) str+="<;/div>;" document.write(str) } function preLoadBackgrounds(){ for(i=0;i<;arguments.length;i++){ this[i]=new Image() this[i].src=arguments[i] } return this } <;/script>; <;/head>; <;body bgcolor="#FFFFFF">; <;script>; //Variables to set between=28 //The pixel between the menus and the submenus mainheight=25 //The height of the mainmenus subheight=22 //The height of the submenus pxspeed=13 //The pixel speed of the animation timspeed=15 //The timer speed of the animation menuy=80 //The top placement of the menu. menux=0 //The left placement of the menu //Images – Play with these level0_regular="ejemplos/level0_regular.gif" level0_round="ejemplos/level0_round.gif" level1_regular="ejemplos/level1_regular.gif" level1_round="ejemplos/level1_round.gif" level1_sub="ejemplos/level1_sub.gif" level1_sub_round="ejemplos/level1_sub_round.gif" level1_round2="ejemplos/level1_round2.gif" level2_regular="ejemplos/level2_regular.gif" level2_round="ejemplos/level2_round.gif" //Leave this line preLoadBackgrounds(level0_regular,level0_round,level1_regular,level1_round,level1_sub,level1_sub_round,level1_round2,level2_regular,level2_round) //There are 3 different types of menus you can make //top = Main menus //sub = Sub menus //sub2 = SubSub menus //You control the look of the menus in the stylesheet //makeMenu(‘TYPE’,’TEXT’,’LINK’,’TARGET’, ‘END (THE LAST MENU)’) //Menu 0 makeMenu(‘top’,’News’) makeMenu(‘sub’,’Newest news’,’/news/index.asp’) makeMenu(‘sub’,’News archive’,’/news/archive.asp’) //Menu 1 makeMenu(‘top’,’Scripts’) makeMenu(‘sub’,’New scripts’,’/script/search.asp?new=1′) makeMenu(‘sub’,’All scripts’,’/script/index.asp’) makeMenu(‘sub’,’Categories’) makeMenu(‘sub2′,’Menu scripts’,’/script/search.asp?category=menu’) makeMenu(‘sub2′,’Text scripts’,’/script/search.asp?category=text’) makeMenu(‘sub2′,’Animation scripts’,’/script/search.asp?category=animation’) makeMenu(‘sub2′,’Other scripts’,’/script/search.asp?category=other’) //Menu 2 makeMenu(‘top’,’Tutorials’) makeMenu(‘sub’,’Tutorials’,’/tutorials/index.asp’) //Menu 3 makeMenu(‘top’,’Forums’) makeMenu(‘sub’,’Cool sites’,’forums/forum.asp?FORUM_ID=1&CAT_ID=1&Forum_Title=Cool+sites’) makeMenu(‘sub’,’CoolMenus’,’forums/forum.asp?FORUM_ID=2&CAT_ID=1&Forum_Title=CoolMenus’) makeMenu(‘sub’,’Crossbrowser’,’forums/forum.asp?FORUM_ID=3&CAT_ID=1&Forum_Title=Crossbrowser+DHTML’) makeMenu(‘sub’,’Scripts’,’forums/forum.asp?FORUM_ID=4&CAT_ID=1&Forum_Title=DHTML+Scripts’) makeMenu(‘sub’,’dhtmlcentral.com’,’forums/forum.asp?FORUM_ID=5&CAT_ID=1&Forum_Title=dhtmlcentral%2Ecom’) makeMenu(‘sub’,’General’,’forums/forum.asp?FORUM_ID=6&CAT_ID=1&Forum_Title=General+DHTML+issues’) makeMenu(‘sub’,’Off-topic’,’forums/forum.asp?FORUM_ID=9&CAT_ID=1&Forum_Title=Off%2Dtopic’) makeMenu(‘sub’,’Active topics’,’forums/active.asp’) //Menu 4 makeMenu(‘top’,’CoolMenus’) makeMenu(‘sub’,’Examples’,’coolmenus/examples/’) makeMenu(‘sub’,’Download’,’coolmenus/download.asp’) makeMenu(‘sub’,’Tutorial’,’coolmenus/tutorial.asp’) makeMenu(‘sub’,’FAQ’,’faq/index.asp’) //Menu 5 makeMenu(‘top’,’Resources’) makeMenu(‘sub’,’DHTML Links’,’resources/default.asp’) //Menu 6 makeMenu(‘top’,’dhtmlcentral’) makeMenu(‘sub’,’dhtmlcentral’,’dhtmlcentral/index.asp’,"",1) //Starting the menu onload=SlideMenuInit; <;/script>; <;br>; Para de descargar este menú en forma completa debes hacer clic! <;a href="ejemplos/slide.zip">; aca<;/a>;. <;/body>; <;/html>;

 

 

Recargar una pagina Padre con JAVASCRIPT
window.opener.location.reload();

 

 

Reloj digital con JAVASCRIPT

Para poder disfrutar del reloj digital poner en el body de la página:

< BODY onLoad="clock()" >

Si queremos colocar el reloj en una posición absoluta:

 

 

Set Focus con JAVASCRIPT

Si queremos que nuestra página web cargue con el foco en un botón, caja de texto, datagrid o lo que sea, usaremos este magnífico JAVASCRIPT.
La función se coloca entre el HEAD de la página, y llamaremos la función cuando queramos.
Descárgate el fichero para ver el código.

 

 

Solucion a "Pinche aquí para activar este control" con JAVASCRIPT

Con el nuevo internet explorer 7 y el ultimo update del internet explorer 6, los objetos embebidos dentro del html (flash, quicktime, activex, etc.. ) de las paginas han dejado de activarse de forma automática, mostrando un mensaje y requiriendo que el usuario pinche en el control para activarlo.

La solución oficial es referenciar un script externo y en el mediante document.write escribir el código html que muestra el objeto .

Para facilitar esta labor he encontrado dos soluciones:

Al final de la pagina ( o después de los flash, porque el javascript se ha de ejecutar después de que se hayan insertado los objetos incrustados en la pagina) se referencia a un javascript que contiene el siguiente código:

objects = document.getElementsByTagName("object");
for (var i = 0; i <; objects.length; i++)
{
    objects[i].outerHTML = objects[i].outerHTML;
}

El javascript rescribe todos los objetos de la pagina, y estos se inicializan automáticamente. Esta solución es ideal para mantener la funcionalidad de forma sencilla en las paginas que ya están funcionando, incluyendo este código en el pie de pagina funcionaran todos los flashes que haya en el sitio web.

La segunda solución esta sacada de http://blog.deconcept.com/swfobject/ y consiste en una librería en javascript. Se instancia un objeto, se le asignan las propiedades y se ejecuta un metodo que sustituye un div por el código del objeto flash. La principal ventaja de esta librería es que facilita la comprobación de versión del flash del cliente, la instalación en caso de que no lo tenga, y sobre todo, el proveer de un contenido alternativo a quien no tenga instalado flash. (por poner un ejemplo, unos señores conocidos como google o yahoo.)

Ej.

<;div id="NoFlashContent">;
Contenido para quien no tenga flash
– navegación alternativa
<;/div>;

 

 

 

Subir un fichero al servidor con JAVASCRIPT

enctype="multipart/form-data">

onclick="LimitAttach(this.form, this.form.uploadfile.value)">
Texto con focos
Meter el codigo entre los tags
Ver si mi página se verá bien en una o otra resolución
P.- ¿Cómo puedo ver si mi página se verá bien a una resolución menor que la que tiene mi PC sin tener que cambiar la configuración de la pantalla de mi ordenador?
R.- Esto es un pequeño truco que se vale de la posibilidad de ejectar sentencias de JS en la barra de Dirección del navegador. Sólo se debe, una vez en la página que queremos ver a otra resolución, poner en la barra de dirección:
javascript:resizeTo(800,540);





También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *