...

View Full Version : expand/collapse div script



bezul555
07-10-2007, 11:10 PM
Hello, I`m testing script which allows to expand and collapse divs on page. I nested script on my website: www.bezulski.com (http://www.bezulski.com). I see no errors in FireBug, but first expanding (after page is already loaded) works after double-click on selected row (see on my website).

Here is a code:



// JavaScript Document
/////////////////////////////////////////////////////////////
var rows = new Array('row1', 'row2', 'row3', 'row4');
var switched = false;

function collapseRow(id)
{
if (document.getElementById)
{ // DOM3 = IE5, NS6

document.getElementById(id).style.display = 'none';

}
else {
if (document.layers)
{ // Netscape 4
document.id.display = 'none';
}
else
{ // IE 4
document.all.id.style.display = 'none';
}
}

}

///////////////////////////
function collapseRows()
{
for(var i=0; i<rows.length; i++)
{
collapseRow(rows[i]);
}
}

function switchMenu(id) {

//var el = document.getElementById(id);
if ( document.getElementById(id).style.display != 'none' ) {
document.getElementById(id).style.display = 'none';
}
else {
collapseRows();
document.getElementById(id).style.display = 'block';
}
}


Does anyone can help me improve that script.

Best regards
Adam

vwphillips
07-12-2007, 02:15 AM
<?xml version="1.0" encoding="iso-8859-2"?><!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">
<head>
<title>Adam Bezulski | www.bezulski.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Init(zxcid){
var zxcp=document.getElementById(zxcid)
zxcp.lst=null
var zxcclds=zxcNoTxtNodes(zxcp);
for (var zxc0=0;zxc0<zxcclds.length;zxc0+=2){
zxcclds[zxc0].content=zxcclds[zxc0+1];
zxcAddEvt(zxcclds[zxc0],'zxcShowHide','click');
zxcES(zxcclds[zxc0+1],{display:'none'});
}
}

function zxcShowHide(){
if (this.parentNode.lst&&this.parentNode.lst!=this.content) zxcES(this.parentNode.lst,{display:'none'});
zxcES(this.content,{display:(this.content.style.display=='none')?'':'none'});
this.parentNode.lst=this.content;
}

// Looks Large but these are 'common use' function
function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

var zxcEvt=0;

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

/*]]>*/
</script></head>
<body onload="Init('box');">onload="switchMenu('row1');"

<div id="content">
<div id="box">
<div class="headerMain">
<h2 class="main" ><strong>Main</strong></h2>

</div>
<div id="row1">
<div class="content">
<p>
Hello, my name is Adam Bezulski. I am web designer and developer with five years of expirience.<br />
This is my personal online portfolio which covers selected work.
</p>
<p>Content of this website is splited into rows. Expand the content, by clicking header of each row.</p>
<p>"Profile" row contains informations about me and my CV. In row "Selected Work" you will find my latest project in which creation I was involved.
Last row "Contact" contains a contact form.<br />

</p>
</div>
</div>

<div class="headerProfile">
<h2 class="profile" ><strong>Profile</strong></h2>
</div>
<div id="row2">
<div class="content">
<dl>
<dt>Name:</dt>

<dd>Adam Bezulski</dd>
<dt>Date and place of birth:</dt>
<dd>16 Oct 1983 in Brzeg Dolny, Poland</dd>
<dt>Education:</dt>
<dd>2003-2007 - Copernicus College in Wroclaw graduated with diploma - Computer science<br />
1998-2002 - J.M. Ossolinski High School in Brzeg Dolny</dd>

<dt>Skills:</dt>
<dd> Code &raquo;<br />
HTML, XHTML, CSS, PHP&amp;mySQL (intermediate), ASP.NET&amp;MS SQL
Server2000 (still improving)<br />
<br />
Design &raquo;<br />

Adobe Photoshop, Macromedia Dreamweaver, Video editing experience
with<br />
Adobe Premiere 6<br />
<br />
Website production &raquo;<br />
Web design and coding, integration of programmers` and designers`
work. </dd>
<dt>Hobbies:</dt>

<dd>Design, internet, media, music, film, motorsports (World Rally
Championship, Formula One Racing)</dd>
<dt>Favourite music bands:</dt>
<dd>Pink Floyd, Garbage, Led Zeppelin, Rage Against The Machine, Massive
Attack</dd>
<dt>Favourite films:</dt>
<dd>Usual Suspects, 2010, Miś, Ronin, La Femme Nikita, Blade Runner</dd>
<dt>Favourite food:</dt>

<dd>Italian and Polish</dd>
</dl>
<p class="cv">
<img src="gfx/pdf.gif" class="pdf" alt="PDF file" width="17" height="16" /><a href="AdamBezulski.pdf">Download my CV &raquo;</a>
</p>
</div>
</div>

<div class="headerWork">
<h2 class="work" ><strong>Selected Work</strong></h2>

</div>
<div id="row3">
<div class="content">
<div class="entry">
<div class="image"><img src="gfx/work/work_kp.jpg" width="85" height="85" alt="www.kp.brzegdolny.pl" /></div>
<h3>Football Club Brzeg Dolny &raquo; <a href="http://www.kp.brzegdolny.pl" target="_blank">www.kp.brzegdolny.pl</a></h3>
<dl class="item">
<dt>Project type:</dt>

<dd>website (under construction)</dd>
<dt>Contribution</dt>
<dd>project managment, design, code development, xhtml/php integration</dd>
<dt>Technology used</dt>
<dd>XHTML, CSS, PHP, Smarty, MySQL</dd>
<dt>Description:</dt>

<dd>I designed, developed and maintained website for Football Club in Brzeg Dolny. This website is also equipped with custom-made CMS.</dd>
</dl>
</div>

<div class="sep"></div>

<div class="entry">
<div class="image"><img src="gfx/work/work_protec.jpg" width="85" height="85" alt="www.protec.net.pl" /></div>
<h3>Protec Research&amp;Technology Poland &raquo; <a href="http://www.protec.net.pl" target="_blank">www.protec.net.pl</a></h3>

<dl class="item">
<dt>Project type:</dt>
<dd>website</dd>
<dt>Contribution</dt>
<dd>project managment, design, code development, xhtml/php integration</dd>
<dt>Technology used</dt>

<dd>XHTML, CSS, PHP, Flash</dd>
<dt>Description:</dt>
<dd>I designed, developed and maintained website for Protec Research&amp;Technology Poland.<br />The company is specialized in projects on installing machines, particularly in factories related to automobile industries.</dd>
</dl>
</div>

<div class="sep"></div>

<div class="entry">
<div class="image"><img src="gfx/work/work_bd.jpg" width="85" height="85" alt="www.brzegdolny.pl" /></div>
<h3>Official website of Brzeg Dolny town &raquo; <a href="http://www.brzegdolny.pl" target="_blank" >www.brzegdolny.pl</a></h3>
<dl class="item">
<dt>Project type:</dt>
<dd>website</dd>
<dt>Contribution</dt>

<dd>design, code development, xhtml/php integration</dd>
<dt>Technology used</dt>
<dd>XHTML, CSS, XML, PHP, MySQL, Flash</dd>
<dt>Description:</dt>
<dd>As employee of "Bureau of regional advancement and information" I designed, developed and maintained official website of Brzeg Dolny town.<br /></dd>
</dl>

</div>

<div class="sep"></div>

<div class="entry">
<div class="image"><img src="gfx/work/work_asp.jpg" width="85" height="85" alt="ASP.NET web application" /></div>
<h3>ASP.NET application - website and CMS with online seats booking for cinema</h3>
<dl class="item">
<dt>Project type:</dt>
<dd>website, web application</dd>

<dt>Contribution</dt>
<dd>design, code development and integration, database design</dd>
<dt>Technology used</dt>
<dd>ASP.NET 1.1, MS SQL Server 2000, XHTML, CSS</dd>
<dt>Description:</dt>
<dd>I designed, developed web application and website as my thesis. More information and samples available on request.</dd>

</dl>
</div>

<div class="sep"></div>

<div class="entry">
<div class="image"><a href="javascript: displayWindow('ext.php?id=1', '464', '535')"><img src="gfx/work/work_ecology.jpg" width="85" height="85" alt="Cover" /></a></div>
<h3>Ten years of Grand Ecological Competitions</h3>
<dl class="item">
<dt>Project type:</dt>

<dd>occasional publication</dd>
<dt>Contribution</dt>
<dd>cover design</dd>
<dt>Technology used</dt>
<dd>Adobe Photoshop</dd>
<dt>Description:</dt>

<dd>Cover design in cooperation with M. Kryszak.<br /></dd>
</dl>
</div> </div>
</div>

<div class="headerContact">
<h2 class="contact" ><strong>Contact</strong></h2>
</div>
<div id="row4">
<div class="content">

<form method="post" action="mail.php" onsubmit="return checkForm()">
<fieldset>
<p>
<label for="name">Name: </label><br /><input type="text" id="name" />
</p>
<p>
<label for="mail">E-mail address: </label><br /><input type="text" name="mail" id="mail" />
</p>

<p>
<label for="subject">Subject: </label><br /><input type="text" name="subject" id="subject" />
</p>
<p>
<label for="message">Message: </label><br /><textarea name="message" id="message" cols="50" rows="8"></textarea><input type="submit" class="button" value="Send message" />
</p>
</fieldset>

</form>
</div>
</div>
<div id="bottomBorder"></div> <div class="spacer"></div>
</div>
</div>

<div id="footer">

<div id="footer_cnt">
<div id="inspiration"><img src="gfx/head_inspiration.png" class="htc" alt="Inspiration" width="80" height="12" />
<ul>
<li><a href="http://www.stylegala.com">Stylegala</a></li>

<li><a href="http://www.cssglobe.com">CSS Globe</a></li>
<li><a href="http://www.mostinspired.com">Most Inspired</a></li>
<li><a href="http://www.cssmania.com">CSS Mania</a></li>
<li><a href="http://www.csselite.com">CSS Elite</a></li>
</ul>
</div>
<div id="stuff"><img src="gfx/head_tech.png" class="htc" alt="Inspiration" width="131" height="12" />
<ul>

<li><a href="http://www.asp.net">asp.net - official asp.net 2.0 site</a></li>
<li><a href="http://meyerweb.com">meyerweb.com - Eirc Meyer`s site</a></li>
<li><a href="http://javascriptkit.com">javascriptkit.com - javascript
tutorials</a></li>
</ul>
</div>
<div id="copy"><img src="gfx/head_bezulski.png" alt="www.bezulski.com" width="92" height="12" class="htc" /><br />
&copy;2007 Adam Bezulski<br />

</div>
</div>
</div>
<div id="ajax">
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum