View Single Post
  #6  
Old 07-18-2013, 06:27 AM
re210m re210m is offline
Registered User
 
Join Date: May 2013
Posts: 4
Thumbs up Workaround

So, I couldn't get any type of link anchors within the document to work. They all bring you to a blank page, so I tried to find a way to make dynamic content without it.So, I couldn't get any type of link anchors within the document to work. They all bring you to a blank page, so I tried to find a way to make dynamic content without it.

My solution was to create all the content in divs and put buttons at the top. Each button calls a JavaScript that sets the Style of all divs to not display and sets the style of the corresponding div to be inline. This effectively hides all other divs except for that button's div.



Code:
<!DOCTYPE html>
<html>
<body>

<div> <!-- Start of Content Div -->
		
<img width="450px" height="108px" style="margin:0px; display:block; position:relative; top:5px;" src="http://<ABSOLUTEPATH>.com/header.png" alt="Header" />
		
<div style="background-color:white; width:450px; text-align:center; margin-top:0px;"> <!-- Start of Div that holds the buttons and script table. -->
		
<br> <h2>Select script type: </h2> 
<button onClick="setSCRIPTStoTAB1()">TAB1</button> &nbsp; &nbsp;
<button onClick="setSCRIPTStoTAB2()">TAB2</button> &nbsp; &nbsp;
<button onClick="setSCRIPTStoTAB3()">TAB3</button> &nbsp; &nbsp; 
<button onClick="setSCRIPTStoTAB4()">TAB4</button> <br>
		
<div id="TAB1TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB1 TABLE! -->
<br>

<table style="margin-left:10px; margin-right:10px">	
<tr>
<td style="padding-right:10px"><button name=SCRIPT1 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT1";>SCRIPT1</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>	
</tr>
		
<tr>
<td style="padding-right:10px"><button name=SCRIPT2 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT2";>SCRIPT2</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>	
</tr>
		
<tr>
<td style="padding-right:10px"><button name=SCRIPT3 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT3";>SCRIPT3</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>	
</tr>
		
<tr>
<td style="padding-right:10px"><button name=SCRIPT4 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT4";>SCRIPT4</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>	
</tr>
</table> <br>
</div><!-- End of the DIV that holds JUST THE TAB1TABLE! -->
		
<div id="TAB2TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB2 TABLE! -->
<br>TAB2 TABLE NOT YET POPULATED<br>
</div><!-- End of the DIV that holds JUST THE TAB2 TABLE! -->
		
<div id="TAB3TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB3 TABLE! -->
<br>TAB3 TABLE NOT YET POPULATED<br>
</div><!-- End of the DIV that holds JUST THE TAB2 TABLE! -->
		
<div id="TAB4TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB4 TABLE! -->
<br>TAB4 TABLE NOT YET POPULATED<br>
</div><!-- End of the DIV that holds JUST THE TAB2 TABLE! -->
		
<input name=ButtonHandler value="Nothing Clicked Yet" type=hidden >
</div> <!-- End of Div that holds the buttons and script table.. -->
</div> <!-- End of Content Div -->

<script>
function setSCRIPTStoTAB1()
{
document.getElementById("TAB1TABLEDIV").style.display="inline";
document.getElementById("TAB2TABLEDIV").style.display="none";
document.getElementById("TAB3TABLEDIV").style.display="none";
document.getElementById("TAB4TABLEDIV").style.display="none";
}

function setSCRIPTStoTAB2()
{
document.getElementById("TAB1TABLEDIV").style.display="none";
document.getElementById("TAB2TABLEDIV").style.display="inline";
document.getElementById("TAB3TABLEDIV").style.display="none";
document.getElementById("TAB4TABLEDIV").style.display="none";
}

function setSCRIPTStoTAB3()
{
document.getElementById("TAB1TABLEDIV").style.display="none";
document.getElementById("TAB2TABLEDIV").style.display="none";
document.getElementById("TAB3TABLEDIV").style.display="inline";
document.getElementById("TAB4TABLEDIV").style.display="none";
}

function setSCRIPTStoTAB4()
{
document.getElementById("TAB1TABLEDIV").style.display="none";
document.getElementById("TAB2TABLEDIV").style.display="none";
document.getElementById("TAB3TABLEDIV").style.display="none";
document.getElementById("TAB4TABLEDIV").style.display="inline";
}
</script>

</body>
</html>
Reply With Quote