Posted 10 years ago
·
Author
This basic code will allow you to add pages to your profile without needing to create html files that are hosted offsite saving you time, money and headaches. It is designed to be small and simple so it doesn't use anything fancy or any offsite code. For a slightly more advanced way, see this thread: viewtopic.php?f=115&t=9033
This logic of the code is as follows:
The content of the pages is held in divs that are hidden to the user:
When a user clicks on one of the links, it copies the content of one of the hidden pages and places it in the visible page:
Modification
To add more pages, create more divs inside of the hidden div:
Then add links to those pages i the navigation div:
If you need more help on how to use this code or modify it to suit your needs, feel free to contact me.
------------------------------------------------------------------
Full Code
This logic of the code is as follows:
The content of the pages is held in divs that are hidden to the user:
<div id="hidden" style="visibility:hidden">
<div id="box1">
<p>This is box 1 contents</p>
</div>
<div id="box2">
<p>This is box 2 contents</p>
</div>
<div id="box3">
<p>This is box 3 contents</p>
</div>
<div id="box4">
<p>This is box 4 contents</p>
</div>
</div>When a user clicks on one of the links, it copies the content of one of the hidden pages and places it in the visible page:
<div id="navigation">
<ul>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box1').innerHTML">Page 1</span></li>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box2').innerHTML">Page 2</span></li>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box3').innerHTML">Page 3</span></li>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box4').innerHTML">Page 4</span></li>
<li class="last"><span onClick="document.getElementById('display').innerHTML = ''">Clear</span></li>
</ul>
</div>Modification
To add more pages, create more divs inside of the hidden div:
<div id="hidden" style="visibility:hidden">
<div id="box1">
<p>This is box 1 contents</p>
</div>
<div id="box2">
<p>This is box 2 contents</p>
</div>
<div id="box3">
<p>This is box 3 contents</p>
</div>
<div id="box4">
<p>This is box 4 contents</p>
</div>
</div>Then add links to those pages i the navigation div:
<div id="navigation">
<ul>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box1').innerHTML">Page 1</span></li>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box2').innerHTML">Page 2</span></li>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box3').innerHTML">Page 3</span></li>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box4').innerHTML">Page 4</span></li>
<li class="last"><span onClick="document.getElementById('display').innerHTML = ''">Clear</span></li>
</ul>
</div>If you need more help on how to use this code or modify it to suit your needs, feel free to contact me.
------------------------------------------------------------------
Full Code
<html>
<head>
<title>Simple Javascript Navigation Menu</title>
<style type="text/css">
#display {
border: 1px solid #000000;
width: 500px;
height: 190px;
background-color: #666666;
margin: 0px auto;
text-align: center;
}
#navigation {
width: 500px;
height: 20px;
margin: 0px auto;
text-align: center;
}
#navigation ul {
margin: 0px auto;
}
#navigation ul li {
display: inline;
border-right: 1px solid #000000;
}
#navigation span {
padding: 0px 5px;
}
#navigation span:hover {
text-decoration: underline;
cursor: pointer
}
.last {
border-right: 0px none #000000 !important;
}
</style>
</head>
<body>
<div id="display">
<p></p>
</div>
<br/>
<div id="navigation">
<ul>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box1').innerHTML">Page 1</span></li>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box2').innerHTML">Page 2</span></li>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box3').innerHTML">Page 3</span></li>
<li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box4').innerHTML">Page 4</span></li>
<li class="last"><span onClick="document.getElementById('display').innerHTML = ''">Clear</span></li>
</ul>
</div>
<br/>
<div id="hidden" style="visibility:hidden">
<div id="box1">
<p>This is box 1 contents</p>
</div>
<div id="box2">
<p>This is box 2 contents</p>
</div>
<div id="box3">
<p>This is box 3 contents</p>
</div>
<div id="box4">
<p>This is box 4 contents</p>
</div>
</div>
</body>
</html>