Hello everyone! I need help. How do I stop a typing text, how to hide/show a class/id, and load a content everytime a button is press. The problem in my code is it doesn't hide the website, everytime I click the button it always reload the content. Then when I try to click on the other button its still loading the content that has been loaded before.
Information.html
<html>
<head>
<title>Alexander</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<script src="jquery.js"></script>
<script>
function loadContent()
{
$("#includedQandAContent").load("QandA_body.html");
$("#includedCreditsContent").load("Credits_body.html");
}
$(document).ready(function()
{
$('#includedInformationContent,#includedQandAContent,#includedCreditsContent').hide();
$('a#homeAnchor').click(function()
{
var number=1;
if(number==1){
$("#includedHomeContent").load("home_body.html");
number++;
}
})
$('a#informationAnchor').click(function()
{
$('#includedInformationContent').show();
$('#includedHomeContent,#includedQandAContent,#includedCreditsContent').hide();
$("#includedInformationContent").load("information_body.html");
$('#example3').hide();
})
$('a#QandAAnchor').click(function()
{
})
$('a#creditsAnchor').click(function()
{
})
});
</script>
<script type="text/javascript" src="TypingText.js">
/****************************************************
* Typing Text script- By Twey @ Dynamic Drive Forums
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
****************************************************/
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Alexander.psd) -->
<div class="main">
<table id="Table_01" width="1025" height="769" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="13">
<img src="images/Alexander_01.png" width="1024" height="149" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="7">
<img src="images/Alexander_02.png" width="252" height="528" alt=""></td>
<td colspan="2" rowspan="3">
<a href="#" id="homeAnchor"><div id="home"></div></a></td>
<td colspan="9">
<img src="images/Alexander_04.png" width="660" height="3" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/Alexander_05.png" width="29" height="106" alt=""></td>
<td rowspan="3">
<a href="#" id="informationAnchor"><div id="information"></div></a></td>
<td rowspan="4">
<img src="images/Alexander_07.png" width="28" height="106" alt=""></td>
<td rowspan="3">
<div id="QandA"></div></td>
<td colspan="5">
<img src="images/Alexander_09.png" width="379" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/Alexander_10.png" width="29" height="105" alt=""></td>
<td colspan="2">
<div id="Credits"></div></td>
<td colspan="2" rowspan="5">
<img src="images/Alexander_12.png" width="238" height="524" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="56" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/Alexander_13.png" width="112" height="49" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/Alexander_14.png" width="112" height="49" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Alexander_15.png" width="112" height="45" alt=""></td>
<td>
<img src="images/Alexander_16.png" width="112" height="45" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Alexander_17.png" width="45" height="419" alt="">
</td>
<td colspan="7">
<div class="insidebody">
<div id="includedHomeContent"></div>
<div id="includedInformationContent"></div>
</div>
</td>
<td rowspan="2">
<img src="images/Alexander_19.png" width="63" height="419" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="393" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/Alexander_20.png" width="426" height="26" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Alexander_21.png" width="225" height="91" alt=""></td>
<td colspan="11">
<img src="images/Alexander_22.png" width="574" height="71" alt=""></td>
<td rowspan="2">
<img src="images/Alexander_23.png" width="225" height="91" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="71" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images/Alexander_24.png" width="574" height="20" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="225" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="45" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="67" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="29" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="112" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="28" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="112" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="29" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="49" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="225" height="1" alt=""></td>
<td></td>
</tr>
</table>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
Information_Body.html
<script>
$('#example3').hide;
</script>
<script>
$('a#NextAnchor').click(function()
{
$('#example2').hide;
$('#example3').show;
})
</script>
<br />
<div id="example1" align="center">
Welcome to my Information Page! Here you can check all of my likes and dislike.
</div>
<p id="example2" align="justify">
Hi and welcome! This is the Information Page. you can get some intel on my life. personal achievements and more.
My complete name is Alexander Paul Asuncion Areola. I got my name Alexander Paul from Alexander III of Macedon. a.k.a Alexander the great. My hobbies are simply: Playing computer (DotA and Ragnarok. respectively), and Watching TV. Reading entertainment books and sleeping. (great. sleeping)
<br />
<a href="#" id="NextAnchor">next</a>
</p>
<div id="example3" align="justify">
RAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATA
KATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKA
<br />
<a href="#" id="NextAnchor1">next</a>
</div>
<script type="text/javascript">
//Define second typing example (use "slashing" cursor at the end):
new TypingText(document.getElementById("example2"), 10, function(i){
var ar = new Array("\\", "|", "/", "-"); return " " + ar[i.length % ar.length]; })
//Type out examples:
TypingText.runAll();
jQuery(".next").live("click", function(){
jQuery(".main")
.trigger({type: "play"})
.trigger({type: "stop"});
return false;
});
</script>
`