Having problem with OnClick

Discussion in 'JavaScript' started by winsonlee, Apr 2, 2008.

0
  1. #1 
    
    <script type="text/javascript">
    var objTest3 = document.getElementId('test3');
    objTest3.style.display = 'none';
    var objTest1 = document.getElementId('test1');
    objTest1.style.display = 'block';
    objTest1.style.position = 'absolute';
    objTest1.style.width = '500 px';
    objTest1.style.height = '500 px';
    objTest1.onclick = function () {hideBox(); return false;}

    function hideBox(){
    var objTest1 = document.getElementId('test1');
    objTest1.style.display = 'none';
        
    }

    function openLayer(){
    var objTest3 = document.getElementId('test3');
    objTest3.style.display = 'block';
   }
    </script>

<div id="test1">
<img src="picture.jpg">
          <div id="test2">
           <a href="#" onclick="openLayer()">LINK TO OPEN LAYER</a>
          </div>
</div>

<div id="test3">
HELLLO
</div>
    Code (markup):
    When the user click on "Link to open layer" what the code does is it test1 is hidden and test3 appears.

    How can i code in a way that when the user click on the picture, the layer is hidden and when the user click on "Link to open layer", the test3 appear on top of the test1 layer ?
     
    winsonlee, Apr 2, 2008 IP
  2. So1

    So1 Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    i wonder that test3 appears!! What is document.getElementId() function? :confused: There is no such function in javascript!
    hide element: document.getElementById('element_to_manipulate').display = "none";
    display element: document.getElementById('element_to_manipulate').display = "block";
    to make this boxes relative to each other use CSS position: relative (document.getElementById('element_to_manipulate').style.position = "relative";)
    to change cordinates use CSS: { left:50px; top:20px; } etc...
     
    So1, Apr 3, 2008 IP
  3. winsonlee

    winsonlee Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3 
    

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="">

	<title>Untitled 2</title>
</head>

   <script type="text/javascript">
    function init(){
    var objTest3 = document.getElementById('test3');
    objTest3.style.display = 'none';
    var objTest1 = document.getElementById('test1');
    objTest1.style.display = 'none';
    var objLink = document.getElementById('link');
    objLink.style.display = 'none';
    objTest1.style.position = 'absolute';
    objTest1.style.width = '500 px';
    objTest1.style.height = '500 px';
	}
    function hideBox(){
    var objTest1 = document.getElementById('test1');
    objTest1.style.display = 'none';
        
    }

    function openLayer(){
    var objTest3 = document.getElementById('test3');
	var background = document.getElementById('close');
    objTest3.style.display = 'block';
	background.style.display = 'block';
	objTest3.onclick = function () {closeMe(); return false;}
	background.onclick = function () {closeMe(); return false;}
   }
   
    function openLayer1(){
    var objTest3 = document.getElementById('test1');
	var background = document.getElementById('close2');
	var objLink = document.getElementById('link');
    objTest3.style.display = 'block';
	background.style.display = 'block';
	objLink.style.display = 'block';
	objTest3.onclick = function () {closeMe2(); return false;}
	background.onclick = function () {closeMe2(); return false;}
   }   
   function closeMe()
   {
   var objTest3 = document.getElementById('test3');
	var background = document.getElementById('close');
    objTest3.style.display = 'none';
	background.style.display = 'none';
   }
   
   function closeMe2()
   {
   var objTest1 = document.getElementById('test1');
   var objLink = document.getElementById('link');
	var background = document.getElementById('close2');
    objTest1.style.display = 'none';
	background.style.display = 'none';
	objLink.style.display = 'none';
   }
   
    </script>
	<style type="text/css">
	#test3
	{
	display: none;
    position: absolute;
    top: 37%;
    left: 37%;
    width: 25%;
    height: 25%;
    padding: 16px;
    border: 16px solid #fc6;
    background-color: #fff;
    z-index:1001;
    overflow: auto;
	}
	#link{
	display: none;
    position: absolute;
    top: 29%;
    left: 27%;
    z-index:1000;
		
	}
	
	#test1
	{
	display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid #fc6;
    background-color: #fff;
    z-index:999;
    overflow: auto;
	}
	.back
	{
	display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: #aaa;
    z-index:1000;
    opacity:.80;
    filter: alpha(opacity=80);
	}
	.back1
	{
	display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: #aaa;
    z-index:998;
    opacity:.80;
    filter: alpha(opacity=80);
	}
	
	#closeme
	{
	font-size:7pt;
	float:right;
	cursor:pointer;
	text-decoration:underline;
	color:#f00;
	}
	

	</style>
<body onload="init()">


           <a href="#" onclick="openLayer1();return false;">First Layer</a>

<div id="link"><a href="#" onclick="openLayer();return false;">Second Layer</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="openLayer();return false;">Second Layer</a></div>
<div id="test1">
<img src="background.jpg">
          <div id="test2">
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. Big Rock is Flowing this Direction.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. Big Rock is Flowing this Direction. 
          </div>
</div>


<div id="test3">
<span id="closeme" onclick="closeMe()">Close</span>
HELLLO
</div>

<div id="close" class="back"></div>
<div id="close2" class="back1"></div>
</body>
</html>
    Code (markup):
    I manage to get what I want to work with the above code.
    I wonder if there is any more effective way of doing this.

    Currently I have a layer with just text only and another layer with links on it. If user click on anywhere other then the link, the current layer will be hidden else another layer will appear.
     
    winsonlee, Apr 3, 2008 IP