Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    expand/collapse div script

    Hello, I`m testing script which allows to expand and collapse divs on page. I nested script on my website: 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:

    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <?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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •