Web Analytics Made Easy -
StatCounter container div expanding when link is clicked - CodingForum

Announcement

Collapse
No announcement yet.

container div expanding when link is clicked

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • container div expanding when link is clicked

    Hey

    odd little error started cropping up when I introduced the container div "mainDisplay". whenever I click one of my links (which currently don't work due to a script adjustment that needs fixing)... the div expands to fit the entire width of the page and hides the links.

    I set the background color to red so you could see what i meant (click a link)
    www.enviromark.ca/Collab/tests/T1.htm

    here's the code.

    why would this be occuring?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>The Concordia Collaboration Lab</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="JavaScript" type="text/javascript" src="js/borderFade.js"></script>
    <script type="text/javascript"> 
      var arrPrevDiv = [null, null];
    
      function toggle(id, linkGroup) {
    
    	if (arrPrevDiv[linkGroup] != null) {
    		arrPrevDiv[linkGroup].style.display = "none"; 
    	}         
    
    	var s = document.getElementById(id);
    					
    	s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none"; 
    	arrPrevDiv[linkGroup] = s; 
    	// window.location.href='#'+ id;
    	window.status=''
    
    	}  
    
    </script>
    
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    html, body {
    height: 100%;
    text-align: center;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    background-color: white;
    }
    #pageContainer {
    min-height: 100%;
    }
    * html #pageContainer {
    height: 100%;
    }
    A:link, A:visited, A:active {
    text-decoration: none; 
    color: blue;
    }
    .mainLinks {
    position: relative;
    text-decoration: none;
    margin-left: 25px;
    margin-right: 25px;
    }
    #welcome {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    font-size: 14pt;
    }
    #links {
    float: left;
    display: inline;
    height: 100px;
    width: 100px;
    margin-left: 75px;
    margin-top: 75px;
    position: relative;
    text-align: left;
    border-right: 1px #ccc solid;
    }
    #mainDisplay {
    position: relative;
    background-color: red;
    margin-right: 100px;
    }
    #mainLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 300px;
    width: 210px;
    padding: 20px;
    }
    #Link2, #Link3, #Link4, #Link5  {
    display: none;
    }
    </style>
    
    
    </head>
    
    <body onload="zxcInit('mainLinks','#FFFFFF','#000000',15)">
    <div id="pageContainer">
    	<div id="welcome">Welcome to the Concordia Collaboration Lab</div>
    	<div id="links">
    		<a class="mainLinks" href="#Link2" onclick="return toggle('Link2', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 2</a>
    		<br>
    		<a class="mainLinks" href="#Link3" onclick="return toggle('Link3', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 3</a>
    		<br>
    		<a class="mainLinks" href="#Link4" onclick="return toggle('Link4', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 4</a>
    		<br>
    		<a class="mainLinks" href="#Link5" onclick="return toggle('Link5', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 5</a>
    	</div>
    	<div id="mainDisplay">
    		<div id="mainLogo">
    			<img src="images/toddler.gif">
    		</div>
    		<div id="Link2">Link 2</div>
    		<div id="Link3">Link 3</div>
    		<div id="Link4">Link 4</div>
    		<div id="Link5">Link 5</div>
    	</div>
    </div>
    </body>
    </html>
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    what i'm essentially trying to do is this, but with divs

    So the mainDisplay div has to remain static where it is (height will vary), and i'm simply loading other divs into it.
    Last edited by canadianjameson; Sep 25, 2006, 10:56 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

    Comment


    • #3
      Hmm you need to add a left margin to #mainDisplay of at least 175px so it doesn't overlap your menu which is currently does.
      ||||If you are getting paid to do a job, don't ask for help on it!||||

      Comment


      • #4
        as always, perfect
        Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

        Comment

        Working...
        X