PDA

View Full Version : explain collaps/expan menu in javascript



croatiankid
13 Jan 2006, 04:27 AM
there's a website i've seen with a really cool feature i like, here it is (http://www.ec-labs.com). i like the (about) 6 menus that u can expand/collapse in windows style. i have the external .js file that's used, here's it:


<!--

if(parent.frames[0])
{
parent.location.href = self.location.href;
}

if(document.getElementById&&!document.all){ns6=1;}else{ns6=0;}
var agtbrw=navigator.userAgent.toLowerCase();
var operaaa=(agtbrw.indexOf('opera')!=-1);
var head="display:''";
var folder='';
function expandit(curobj){
if(document.getElementById(curobj)){
folder=document.getElementById(curobj).style;
}else{

if(ns6==1||operaaa==true){
folder=curobj.nextSibling.nextSibling.style;
}else{
folder=document.all[curobj.sourceIndex+1].style;
}
}
if (folder.display=="none"){folder.display="";}else{folder.display="none";}
}


function urljump(url){
top.window.location = url;
}

function open_window(url,type) {
if('full' == type){
pwindow = window.open(url);
} else {
pwindow = window.open(url,'Name', 'top=100,left=100,resizable=yes,width=600,height=400,scrollbars=yes,menubar=yes')
}
}

function ejs_preload(ejs_path, ejs_imageString){
var ejs_imageArray = ejs_imageString.split(',');
for(ejs_loadall=0; ejs_loadall<ejs_imageArray.length; ejs_loadall++){
var ejs_LoadedImage=new Image();
ejs_LoadedImage.src=ejs_path + ejs_imageArray[ejs_loadall];
}
}

function textCounter(field,cntfield) {
cntfield.value = field.value.length;
}

function openwindow() {
opener = window.open("htmlarea/index.php", "popup","top=50,left=100,resizable=no,width=670,height=520,scrollbars=no,menubar=no");
}
function setCheckboxes(the_form, do_check){
var elts = (typeof(document.forms[the_form].elements['perms[]']) != 'undefined') ? document.forms[the_form].elements['perms[]'] : document.forms[the_form].elements['perms[]'];
var elts_cnt = (typeof(elts.length) != 'undefined') ? elts.length : 0;
if(elts_cnt){
for(var i = 0; i < elts_cnt; i++){
elts[i].checked = do_check;
}
}else{
elts.checked = do_check;
}
return true;
}

var ref=""+escape(top.document.referrer);
var colord = window.screen.colorDepth;
var res = window.screen.width + "x" + window.screen.height;
var eself = document.location;




//-->

it's actually only part of the external .js file (i deleted the rest, it didn't seem related). and here's the part of the html code i'm interested in:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<SCRIPT language=JavaScript>
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</SCRIPT>

<SCRIPT src="e107.js" type=text/javascript></SCRIPT>


<SCRIPT type=text/javascript>
<!--

document.write( '<link rel="stylesheet" type="text/css" href="e107_plugins/log/log.php?referer=' + ref + '&color=' + colord + '&eself=' + eself + '&res=' + res + '">' );


ejs_preload('e107_themes/Infrade1337v2/images/','2tbgF.png,bar.jpg,bar2.gif,bar2edge.gif,blank.gif,bullet2.gif,button.png,cap1.png,fcap.png,index. php,INFADE1337meny_md1.png,INFADE1337meny_md2.png,INFADE1337meny_mdbg.png,INFADE1337meny_mleft.png,I NFADE1337meny_mright.png,INFADE1337meny_mt1.png,INFADE1337meny_mt2.png,INFADE1337meny_mtbg.png,INFAD E1337meny_r2_c2.png,INFADE1337meny_r3_c1.png,INFADE1337meny_r3_c3.png,INFADE1337_r1_c1.png,INFADE133 7_r1_c2.png,INFADE1337_r1_c3.png,INFADE1337_r1_c4.png,INFADE1337_r1_c5.png,INFADE1337_r2_c1.png,INFA DE1337_r2_c2.png,INFADE1337_r2_c3.png,INFADE1337_r2_c4.png,INFADE1337_r3_c1.png,INFADE1337_r3_c2.png ,INFADE1337_r3_c3.png,INFADE1337_r3_c4.png,INFADE1337_r4_c1.png,INFADE1337_r4_c2.png,INFADE1337_r4_c 3.png,INFADE1337_r4_c4.png,INFADE1337_r5_c1.png,INFADE1337_r5_c2.png,INFADE1337_r5_c3.png,INFADE1337 _r5_c4.png,logo.png,logoLARGE.png,logoSMALL.png,nbg.png,newthread.png,nforumcaption.png,nforumcaptio n2.png,pspbrwse.jbf,t1.png,t2.png,tbg.png');

// -->

</SCRIPT>

<META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
<BODY onLoad="externalLinks(); ">
<TABLE style="WIDTH: 100%" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=picback1
style="WIDTH: 100%; WHITE-SPACE: nowrap"></TD></TR></TBODY></TABLE>
<TABLE style="WIDTH: 100%" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=pick2_left><IMG class=ffimgfix height=22 alt=""
src="EC Labs News_files/blank.gif" width=16> </TD>
<TD class=picback2_m style="WIDTH: 100%; WHITE-SPACE: nowrap"></TD></TR></TBODY></TABLE>
<TABLE style="MARGIN-TOP: 0px; WIDTH: 100%" cellSpacing=0 cellPadding=0
border=0>
<TBODY>
<TR>
<TD style="VERTICAL-ALIGN: top; WIDTH: 20%">
<DIV style="CURSOR: pointer" onClick="expandit('exp_menu_1')">
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=top_left><IMG class=ffimgfix height=23 alt=""
src="EC Labs News_files/blank.gif" width=21> </TD>
<TD class=top_middle style="WIDTH: 100%; WHITE-SPACE: nowrap">Main
Menu</TD>
<TD class=top_right><IMG class=ffimgfix height=33 alt=""
src="EC Labs News_files/blank.gif" width=30>
</TD></TR></TBODY></TABLE></DIV>
<DIV id=exp_menu_1>
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=middle_left><IMG height=23 alt=""
src="EC Labs News_files/blank.gif" width=21> </TD>
<TD class=middle_middle style="WIDTH: 100%"><IMG alt=""
src="EC Labs News_files/bullet2.gif"> <A title=""
href="http://www.ec-labs.com/index.php">Home</A> <BR><IMG alt=""
src="EC Labs News_files/bullet2.gif"> <A title=""
href="http://www.ec-labs.com/links.php">Links</A> <BR><IMG alt=""
src="EC Labs News_files/bullet2.gif"> <A title=""
href="http://www.ec-labs.com/forum.php">Forum</A> <BR><IMG alt=""
src="EC Labs News_files/bullet2.gif"> <A title=""
href="http://www.ec-labs.com/download.php">Downloads</A> <BR><IMG
alt="" src="EC Labs News_files/bullet2.gif"> <A title=""
href="http://www.ec-labs.com/user.php">Members</A> <BR><IMG alt=""
src="EC Labs News_files/bullet2.gif"> <A title=""
href="http://www.ec-labs.com/e107_plugins/autogallery/autogallery.php">Image
Gallery</A> <BR><IMG alt="" src="EC Labs News_files/bullet2.gif"> <A
title=""
href="http://www.ec-labs.com/e107_plugins/newsletter_menu/newsletter.php?caseid=archive">Newsletter</A>
<BR></TD>
<TD class=middle_right><IMG height=23 alt=""
src="EC Labs News_files/blank.gif" width=30>
</TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0>

</BODY></html>

croatiankid
13 Jan 2006, 04:29 AM
o to see exactly what the two files make, just put them in the same directory and open the html doc. Please, somebody explain to me the javascript part of it line-by-line?