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 Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Dynamically Switching DIV's

    Hi guys,

    Wonder if I could get some help regarding the following matter. I'm currently in the process of finishing a web-site for the company I work for - it is literally one page of HTML, with lots of DIV's with the appropriate content.

    The main DIV's are set to be visible when the page loads, and when you click a link, the first set of DIV's are set to be hidden, and certain hidden DIV's will then be set to show.

    Now, I did this very quickly using Dreamweaver's built-in Show/Hide Layer behaviour. It works perfectly, no issues with that at all, but the HTML needed is very bloated.

    I'm just wondering if there could be another easy method I could implement to perform the same functions that would cut back on the amount of generated HTML.

    I have posted the site's HTML and the JavaScript needed to perform the swapping.

    Cheers.

    Code:
    <!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" lang="en">
    <head>
    <!-- Cyberdan Ltd v.3 - Copyright 2008 -->
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-language" content="en-gb" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="copyright" content="Copyright 2007 Cyberdan Ltd" />
    <meta name="revisit-after" content="3 days" />
    <title>CYBERD@N</title>
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" media="screen" title="Cyberdan Ltd" href="css/default.css" />
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <!-- JavaScript -->
    <script type="text/javascript" src="include/div_switch.js"></script>
    <script type="text/javascript" src="include/rollovers.js"></script>
    </head>
    
    <body>
      <div id="container">
        <div id="header">
          <div id="navigation">
            <a href="#" title="Home" onclick="MM_showHideLayers('about_header','','show');MM_showHideLayers('about_text','','show');MM_showHideLayers('services_header','','show');MM_showHideLayers('services_img','','show');MM_showHideLayers('services_text','','show');MM_showHideLayers('blurb','','show');MM_showHideLayers('dr_text','','hide');MM_showHideLayers('db_text','','hide');MM_showHideLayers('sc_text','','hide');MM_showHideLayers('sd_text','','hide');MM_showHideLayers('contact_form','','hide');MM_showHideLayers('contact_form_header','','hide');MM_showHideLayers('contact_form_text','','hide');MM_showHideLayers('company','','hide');MM_showHideLayers('company_header','','hide');MM_showHideLayers('company_text','','hide');MM_showHideLayers('support','','hide');MM_showHideLayers('support_header','','hide');MM_showHideLayers('support_text','','hide');MM_showHideLayers('privacy_terms','','hide');MM_showHideLayers('privacy_terms_header','','hide');MM_showHideLayers('privacy_terms_text','','hide');">home</a> &middot;
            <a href="#" title="Support" onclick="MM_showHideLayers('support','','show');MM_showHideLayers('support_header','','show');MM_showHideLayers('support_text','','show');MM_showHideLayers('contact_form','','hide');MM_showHideLayers('contact_form_header','','hide');MM_showHideLayers('contact_form_text','','hide');MM_showHideLayers('about_header','','hide');MM_showHideLayers('about_text','','hide');MM_showHideLayers('services_header','','hide');MM_showHideLayers('services_img','','hide');MM_showHideLayers('services_text','','hide');MM_showHideLayers('blurb','','hide');MM_showHideLayers('company','','hide');MM_showHideLayers('company_header','','hide');MM_showHideLayers('company_text','','hide');MM_showHideLayers('privacy_terms','','hide');MM_showHideLayers('privacy_terms_header','','hide');MM_showHideLayers('privacy_terms_text','','hide');">support</a> &middot;
            <a href="#" title="Contact" onclick="MM_showHideLayers('contact_form','','show');MM_showHideLayers('contact_form_header','','show');MM_showHideLayers('contact_form_text','','show');MM_showHideLayers('support','','hide');MM_showHideLayers('support_header','','hide');MM_showHideLayers('support_text','','hide');MM_showHideLayers('about_header','','hide');MM_showHideLayers('about_text','','hide');MM_showHideLayers('services_header','','hide');MM_showHideLayers('services_img','','hide');MM_showHideLayers('services_text','','hide');MM_showHideLayers('blurb','','hide');MM_showHideLayers('company','','hide');MM_showHideLayers('company_header','','hide');MM_showHideLayers('company_text','','hide');MM_showHideLayers('privacy_terms','','hide');MM_showHideLayers('privacy_terms_header','','hide');MM_showHideLayers('privacy_terms_text','','hide');">contact</a> &middot;
            <a href="#" title="Company" onclick="MM_showHideLayers('company','','show');MM_showHideLayers('company_header','','show');MM_showHideLayers('company_text','','show');MM_showHideLayers('contact_form','','hide');MM_showHideLayers('contact_form_header','','hide');MM_showHideLayers('contact_form_text','','hide');MM_showHideLayers('support','','hide');MM_showHideLayers('support_header','','hide');MM_showHideLayers('support_text','','hide');MM_showHideLayers('about_header','','hide');MM_showHideLayers('about_text','','hide');MM_showHideLayers('services_header','','hide');MM_showHideLayers('services_img','','hide');MM_showHideLayers('services_text','','hide');MM_showHideLayers('blurb','','hide');MM_showHideLayers('privacy_terms','','hide');MM_showHideLayers('privacy_terms_header','','hide');MM_showHideLayers('privacy_terms_text','','hide');">company</a>
          </div>
        </div>
    	
        <div id="about_header"><h1>about us</h1></div>
        <div id="about_text">
          <p>Cyberdan Ltd has been established for over 6 years and we have over <br />15 years experience in the computing industry.</p>
          <p>Based in Southend-on-Sea in Essex we are ideally placed to cover the <br />South and East of England including London. Being a technology based <br />company we perform lots of support and work remotely using the<br /> Internet, so location is less important.</p>
          <p>If you do not see what you are looking for please contact us.</p>
        </div>
    
        <div id="services_header"><h1>services</h1></div>
        <div id="services_img">
          <span class="dr_holder"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services_dr','','images/services_dr_over.jpg',1)" onclick="MM_showHideLayers('blurb','','hide');MM_showHideLayers('dr_text','','show');MM_showHideLayers('db_text','','hide','db_text','','hide');MM_showHideLayers('sc_text','','hide','sd_text','','hide');MM_showHideLayers('sd_text','','hide')"><img src="images/services_dr.jpg" alt="Disaster Recovery" title="Disaster Recovery" width="58" height="55" class="dr_holder" id="services_dr" /></a></span>
          <span class="db_holder"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services_db','','images/services_db_over.jpg',1)" onclick="MM_showHideLayers('blurb','','hide');MM_showHideLayers('db_text','','show');MM_showHideLayers('dr_text','','hide','db_text','','show');MM_showHideLayers('sc_text','','hide','sd_text','','hide');MM_showHideLayers('sd_text','','hide')"><img src="images/services_db.jpg" alt="Database Consultancy" title="Database Consultancy" width="58" height="55" class="db_holder" id="services_db" /></a></span>
          <span class="sc_holder"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services_sc','','images/services_sc_over.jpg',1)" onclick="MM_showHideLayers('blurb','','hide');MM_showHideLayers('sc_text','','show');MM_showHideLayers('dr_text','','hide','db_text','','hide');MM_showHideLayers('sc_text','','show','sd_text','','hide');MM_showHideLayers('sd_text','','hide')"><img src="images/services_sc.jpg" alt="Systems Consultancy" title="Systems Consultancy" width="58" height="55" class="sc_holder" id="services_sc" /></a></span>
          <span class="sd_holder"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services_sd','','images/services_sd_over.jpg',1)" onclick="MM_showHideLayers('blurb','','hide');MM_showHideLayers('sd_text','','show');MM_showHideLayers('dr_text','','hide','db_text','','hide');MM_showHideLayers('sc_text','','hide','sd_text','','show');MM_showHideLayers('sd_text','','show')"><img src="images/services_sd.jpg" alt="Software Design" title="Software Design" width="58" height="55" class="sd_holder" id="services_sd" /></a></span>
        </div>
    	
        <div id="services_text">
          <div id="blurb"><p>Cyberdan offer a range of services to suit your needs. To receive more information on these services, please click the icons to the left.</p>
            <p>We are more than happy to tailor our services to meet <br />your specific requirements. </p>
            <p>If you do not see what you require or would like some more information on our services please don't hesitate to contact us. Our details are on the right hand side.</p>
          </div>
          <div id="dr_text">
            <p><strong>Disaster Recovery </strong></p>
            <p>Our disaster recovery service works with you to provide strategies to safeguard against the effects of disaster and to ensure that backup procedures are in place to allow
            recovery. Backups are tested off site to ensure they are valid but also to document the procedures required to perform a successful restore. With today's applications
            becoming more complex, simply restoring files is usually not enough. Planning in advance and testing procedures gives the greatest confidence.</p>
            <p>We offer this service on Windows and Unix platforms andcover common applications such as Exchange and SQL Server. We also offer an Oracle service too.</p>
          </div>
          <div id="db_text">DB text</div>
          <div id="sc_text">SC text</div>
          <div id="sd_text">SD text</div>
        </div>
    	
        <div id="contact">
          <div id="contact_text">
            <h1>contact us</h1><p>Cyberdan Ltd<br />2 Cedar House<br />Chandlers Way<br />Southend-on-Sea<br />Essex<br />SS2 5SE</p>
            <p>Tel: 01702 615646</p>
            <p>E-Mail: <a href="#" title="E-Mail" onclick="MM_showHideLayers('contact_form','','show');MM_showHideLayers('contact_form_header','','show');MM_showHideLayers('contact_form_text','','show');MM_showHideLayers('support','','hide');MM_showHideLayers('support_header','','hide');MM_showHideLayers('support_text','','hide');MM_showHideLayers('about_header','','hide');MM_showHideLayers('about_text','','hide');MM_showHideLayers('services_header','','hide');MM_showHideLayers('services_img','','hide');MM_showHideLayers('services_text','','hide');MM_showHideLayers('blurb','','hide');MM_showHideLayers('company','','hide');MM_showHideLayers('company_header','','hide');MM_showHideLayers('company_text','','hide');MM_showHideLayers('privacy_terms','','hide');MM_showHideLayers('privacy_terms_header','','hide');MM_showHideLayers('privacy_terms_text','','hide');">Please click here</a></p>
          </div>
        </div>
    
        <div id="support">
          <div id="support_header"><h1>support</h1></div>
          <div id="support_text"><p>Support text here</p></div>
        </div>
    
        <div id="contact_form">
          <div id="contact_form_header"><h1>contact us</h1></div>
          <div id="contact_form_text">
            <form name="contactform" method="post" action="/include/email_script.php">
              <p>Name:<br /><input name="pname" type="text" id="pname" size="40" maxlength="50"><br /><br />
              E-Mail:<br /><input name="pemail" type="text" id="pemail" size="40" maxlength="50"><br /><br />
              Telephone:<br /><input name="ptelephone" type="text" id="ptelephone" size="40" maxlength="20"><br /><br />
              Enquiry: (max 250 characters)<br /><textarea name="penquiry" cols="45" rows="8" id="penquiry"><?php if(!empty($penquiry)) print($penquiry); ?></textarea><br /><br />
              Request Reply Via:<br/>
                <select name="preply" id="preply">
                  <option selected>E-Mail</option>
                  <option>Phone</option>
                  <option>None</option>
                </select><br /><br />
              <input type="submit" name="Submit" value="Send" onClick="return checkForm();">
              <input type="reset" name="reset" value="Clear">
            </form>
          </div>
        </div>
    	
        <div id="company">
          <div id="company_header"><h1>company</h1></div>
          <div id="company_text"><p>Company text here</p></div>
        </div>
    	
        <div id="privacy_terms">
          <div id="privacy_terms_header"><h1>privacy policy / terms &amp; conditions</h1></div>
          <div id="privacy_terms_text"><p>Privacy policy and terms &amp; conditions text here</p></div>
        </div>
    
        <div id="footer"><a href="#" title="Privacy / Terms &amp; Conditions" onclick="MM_showHideLayers('privacy_terms','','show');MM_showHideLayers('privacy_terms_header','','show');MM_showHideLayers('privacy_terms_text','','show');MM_showHideLayers('about_header','','hide');MM_showHideLayers('about_text','','hide');MM_showHideLayers('services_header','','hide');MM_showHideLayers('services_img','','hide');MM_showHideLayers('services_text','','hide');MM_showHideLayers('blurb','','hide');MM_showHideLayers('dr_text','','hide');MM_showHideLayers('db_text','','hide');MM_showHideLayers('sc_text','','hide');MM_showHideLayers('sd_text','','hide');MM_showHideLayers('contact_form','','hide');MM_showHideLayers('contact_form_header','','hide');MM_showHideLayers('contact_form_text','','hide');MM_showHideLayers('company','','hide');MM_showHideLayers('company_header','','hide');MM_showHideLayers('company_text','','hide');MM_showHideLayers('support','','hide');MM_showHideLayers('support_header','','hide');MM_showHideLayers('support_text','','hide');">Privacy / Terms &amp; Conditions</a> &middot; <a href="http://validator.w3.org/check?uri=referer" title="XHTML Valid" target="_blank">XHTML Valid</a> &middot; <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.cyberdan.co.uk/css/default.css" title="CSS Valid" target="_blank">CSS Valid</a><br />Cyberdan Ltd is a registered company in England and Wales No 4523560</div>
      </div>
    </body>
    </html>
    Code:
    // Service DIV Switching
    <!--
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_showHideLayers() { //v6.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
        obj.visibility=v; }
    }
    //-->
    If need be I can upload a functional demo of the site to my own site later, when I can remember my FTP password.

  • #2
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hey all, I posted this topic in October and received a good reply but for some reason my original post is the only one here, and being a twunt, I didn't save the reply I received.

    Could anyone take a look at my question and it'd be great if whoever posted a solution originally could post it again.

    Thanks.


  •  

    Posting Permissions

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