Displaying and hiding contents

Page 1 of 1

1 Replies - 226 Views - Last Post: 05 November 2012 - 04:30 AM

#1 kadesa112  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 04-November 12

Displaying and hiding contents

Posted 05 November 2012 - 04:22 AM

Hello members,
I have little work in hand and I a missing one concept in web development.I need to change the web contents dynamically.I want if users click Home or downloads on the navigation menu the contents should change without changing the URL.Study the code below ,run them on a browser and see where I am I missing.Once I am able to fix this one,I expect to use the concept for my other web related jobs.I am a beginner in web development haven't made one live website,someone told me the best way to learn is to start a small project.Thanks you in advance


<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>Displaying and hiding elements</title>
<style type="text/css">

div.menuTest{border-style:solid;border-width:thin;border-color:transparent;}
div.menuTest:hover{border-style:solid;border-width:thin;border-color:black;cursor:pointer;background-color:#009900;}
div.menuTest:Active{border-style:dotted;border-width:thin;border-color:black;cursor:pointer;background-color:#009900}
td.menuCell{width:25%;color:white;font-family:calibri,sans-serif;text-align:center;}
div#content{width:100%;height:100%;text-align:left;background-color:#009900;font-size:12px;font-family:verdana;overflow:auto;white-space:nowrap;}
div#contentArea{width:100%;height:100%;text-align:left;background-color:#009900}
div#contentHead{font-weight:bold;color:white;}
div#contentBody_Home{display:block;color:white}
div#contentBody_Downloads{display:none;color:white}
div#contentBody_Articles{display:none;color:white }
div#contentBody_Contacts{display:none;color:white}
hr {color:black;background-color:black;border:0px;height:1px;}
fieldset{height:25%;width:43%;background-color:#009900;border-color:black;border-style:solid;border-width:1px}
</style>
<script type="text/javascript">

function changeContent(page){
  var header=document.getElementById('contentHead');
  var pgHome=document.getElementById('contentBody_Home');
   var pgArticles=document.getElementById('contentBody_articles');
  var pgDownloads=document.getElementById('contentBody_Downloads');
   var pgContact=document.getElementById('contentBody_Contact');

                 switch(page)
	                            {
								default:alert("This should not happen.....");
								break;
								case "Home": pgHome.style.display='block';
								            pgArticles.style.display='none';
											pgDownloads.style.display='none';
											pgContact.style.display='none';
											header.innerHTML='Home';
											break;
								case "Articles": pgHome.style.display='none';
								            pgArticles.style.display='block';
											pgDownloads.style.display='none';
											pgContact.style.display='none';
											header.innerHTML='Articles';
											break;			
								case "Downloads": pgHome.style.display='none';
								            pgArticles.style.display='none';
											pgContact.style.display='none';
											pgDownloads.style.display='block';
											header.innerHTML='Downloads';
											break;		
								case "Contact": pgHome.style.display='none';
								            pgArticles.style.display='none';
											pgDownloads.style.display='none';
											pgContact.style.display='block';
											header.innerHTML='Contact';
											break;					
								}
							}
  </script>							
  </head>
  
  <body bgcolor="grey">
<centre>
<!-- Horizontal menu goes here -->
<table style="min-width:45%;border-style:solid;border-width:thin;border-color:black;"cellspacing="5" padding="0";>
<tr style="width:100%;background-color:#00af00;">
<td class="menuCell" ><div class="menuTest" onclick="changeContent('Home');"><b>Home</b><div></td>
 <td class="menuCell" ><div class="menuTest" onclick="changeContent('Articles');"><b>Articles</b></div></td>
  <td class="menuCell" ><div class="menuTest" onclick="changeContent('Downloads');"> <b>Downloads</b></div></td>
   <td class="menuCell" ><div class="menuTest" onclick="changeContent('Contact');"> <b>Contact</b></div></td>
    </tr>
	</table>
	<br/>
	<fieldset align="center" id="contentArea">
	<div id="content">
	<div id="contentHead">Home</div>
	
	<hr/>
	
<div id="contentBody_Home">
<p>Welcome to our home page.Home contents goes here...</p>
</div>
<div id="contentBody_Contact">
<p>Welcome to our contact page.You can reach us via <br/>
  Tel :097872647646<br/>
  Po.Box 56<br/>
  Mafinga.</p>
</div>

 <div id="contentBody_Articles">
 <p>Welcome to our articles page.Article contents goes here...</p>
 </div>
 
 <div id="contentBody_Downloads">
  <p>Welcome to our downloads page.Download contents goes here...</p>

</div>
 

</div>
</fieldset>
</centre>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Displaying and hiding contents

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 87
  • View blog
  • Posts: 411
  • Joined: 28-July 09

Re: Displaying and hiding contents

Posted 05 November 2012 - 04:30 AM

Hello,

If the DIV you want to change the content of is called contentBody_Home, at least as an example, there are two methods you could take.

The first and most simple, modify it's innerHTML with some static HTML, like you are doing with the header. The second and one I prefer more, would be to load another page and push it inside the contentBody_Home.

You can achieve this easily in jQuery like so..
$.get('anotherPage.html', function(data)
{
	$('#contentBody_Home').html(data);
});


or in plain Javascript with AJAX like so...
var x = false;
if (window.ActiveXObject)
	x = new ActiveXObject("Microsoft.XMLHTTP");
else
	x = new XMLHttpRequest();
	
x.open("GET", "anotherPage.html" ,true); 
x.send(null);
x.onreadystatechange = function ()
{
	if (x.readyState == 4 && x.status = 200)
		document.getElementById('contentBody_Home').innerHTML = x.responseText;
	else
		alert ('Error: ' + x.status);
}


The above snippets are quick examples to be used as reference, if you need further help or I have misunderstood the question, let us know!
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1