I am working on sprucing up a site i've been working on with some ajax menus. I decided to use a tabbed menu for this site. I found a script that seems to fit what I want and am trying to integrate it into my php site. The script is called easy tabs version 1.2. This script loads the pages as soon as you put your mouse on the tab. I am using 2 menus and the first seems to work fine but the links on the second dont work at all.
The copy I downloaded had all the code in one html file. I decided to split the java into its own file, the css in my existing css file and the rest I added to my php file. I looked at some other demos and modified the javascript file to have 2 seperate menus. The first menu works great. When going to the 3rd page the second menu shows up. I modified the javascript file to auto load each of the pages on the second menu and that seemed to work, although I still seem to have some problems with saved cache causing the page not to update after I update the file.
There are two paramaters set in the javascript file used to load the page. One is the link name and the other is the content name. The auto load function uses the content name to load the page content directly. Since I have seen at least 2 of my 3 pages load at one time or another without changing that section of the code I believe the content tag is working. I assume I have a syntax error or bad formatting as thats almost always what it is but I cant seem to locate the problem. Here are the 2 files used. Any help is apprecitated.
index.php
<?
require "config.php";
include 'opendb.php';
echo '<link rel="stylesheet" href="/httest.css" type="text/css">
<script type="text/javascript" src="includes/easytabs.js"></script>';
include 'hthead.htm';
echo '<div id="contentarea"><div id="tabcontent1">
<h2>Introduction</h2>
<p>Home Teaching is a way for members of the "Church of Jesus Christ of Latter Day Saints" to reach out and strengthen each other. The members of a ward (members in a specific geographical area) are each given families or individuals who they have responsibility over. They in turn are required to visit each of these families at least once a month to strengthen them spiritually and provide any assistance they may need. Because of this often times you gain many new friends even after one is no longer assigned to that family and they continue to keep in contact and visit them on special occasions.</p>
<i>Note:
<p>Sometimes it can be hard to visit every family when there are conflicting schedules. This site in no way tries to replace these visits with an online message. This is simply a place for anyone regardless of who there hometeacher is to find a personalized home teaching message based off the official message reccomended by the church. I welcome comments about any message you read or about this site. Please use the contact page if you would like to provide me any feedback. If you should find yourself in need of help and cannot get ahold of your home teachers, or do not know who they are please contact your bishop, elders quorum president, or any other leader of your local ward.</p></i>
</div>
<div id="tabcontent2">';
//Begin code for article preview
$offset=$_GET['offset'];
if(strlen($offset) > 0 and !is_numeric($offset)){
echo "Data Error";
exit;
}
$pages = ($offset - 0);
$limit = 1; // The layout of the results requires this to be one to look correct.
$this1 = $pages + $limit;
$back = $pages - $limit;
$next = $pages + $limit;
// Find the number of records in table to determine total number of pages needed.
$query2=" SELECT * FROM htarticles where archived=0 order by date desc ";
$result2=mysql_query($query2);
echo mysql_error();
$numrec=mysql_num_rows($result2);
$query=" SELECT * FROM htarticles where archived=0 order by date desc limit $pages, $limit ";
$result=mysql_query($query);
echo mysql_error();
//Get a list of active articles to be displayed in a drop down menu
$sqlmonth="Select id, date_format(date, '%b %Y') as datelist from htarticles where archived=0 order by date desc";
$rsltmonth=mysql_query($sqlmonth);
$options="";
while ($rowmonth=mysql_fetch_array($rsltmonth)) {
$did=$rowmonth['id'];
$datelist=$rowmonth['datelist'];
$months.="<option value=\"$did\">".$datelist."</option>";
}
//Display info from database
while($data = mysql_fetch_array($result))
{
//Change the date of the displayed article to show the month abbr and year
$selid=$data[id];
$datequery="Select date_format(date, '%b %Y') as seldate from `htarticles` where id=$selid";
$seldate=mysql_query($datequery);
while($data2 = mysql_fetch_array($seldate))
{
$artdate=$data2[seldate];
}
$seltitle=$data[title];
//Display articles
echo '<center><h2>Home Teaching</h2>
<h3>Keeping Church Members Together!</h3></center>
<center><div id="main">
<div id="bk-div1">
<div id="content"><h2><a href="arttest.php?id='.$data[id].'">
'.$data[title].'</a></h2>
<h3>'.$artdate.'</h3>
<a href="images/'.$data[picname].'.jpg"><img src="images/'.$data[picname].'.jpg" alt="'.$data[picname].'" title="'.$data[picname].'"></a><br><a href="htcontact.php?id='.$data[id].'"><img src="images/comment.png" alt="Feedback" title="Feedback" height="10%" width="20%"></a><br>
<div id="para"><b>Summary:</b><br>'.$data[summary].'</div>
<br><div id="info"><a href="arttest.php?id='.$data[id].'">View Full Article</a></div>';
}
echo '</div></div></div></center>';
if($numrec > $limit ){ // Display links to switch between database entries
echo "<table align = 'center' width='50%'><tr><td align='left' width='30%'>";
if($back >=0) {
print "<a href='$self?offset=$back'>PREV</a>";
}
if (isset($_POST['month'])){
$pid = $_POST['months'];
header("HTTP/1.1 301 Moved Permanently");
header("Location: arttest.php?id=$pid");
exit();
}
echo '</td><form action="httest.php" method="post"><td>
<SELECT NAME=months>
<OPTION VALUE=0>Choose Month</option>='.$months.'
</SELECT><input type="submit" name="month" value="Go"></td></form>';
echo "<td align='right' width='30%'>";
if($this1 < $numrec) {
print "<a href='$self?offset=$next'>NEXT</a>";}
echo "</td></tr></table><br>";
//End of Links for database entries
} //End of Article Preview Code
echo '<a href="archtest.php"><h3>Archives</h3></a><p>In an effort to enhance this website there is a preview for each active message. Due to the time it would take for the site to load with a large list this site keeps each message active for a period of 6 to 8 months. After that period all messages are archived and can be viewed from a seperate page. To view all the archived messages click on "Archives" above.</p>
</div></div></center>
<center><div id="tabcontent3">
<div class="menu">';
echo '<ul>
<li><a href="#" onmouseover="easytabs("2", "1");" onfocus="easytabs("2", "1");" onclick="return false;" title="" id="twolink1">Generic Feedback</a></li>
<li><a href="#" onmouseover="easytabs("2", "2");" onfocus="easytabs("2", "2");" onclick="return false;" title="" id="twolink2">Request Article</a></li>
<li><a href="#" onmouseover="easytabs("2", "3");" onfocus="easytabs("2", "3");" onclick="return false;" title="" id="twolink3">Request Access</a></li>
</ul>
</div>';
echo '<div id="twocontent1">';
echo 'generic';
echo '</div>
<div id="twocontent2">';
echo 'request';
echo '</div>
<div id="twocontent3">';
echo 'access';
echo '</div>
</div></center>';
?>/*
EASY TABS 1.2 Produced and Copyright by Koller Juergen
www.kollermedia.at | www.austria-media.at
Need Help? http:/www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange
You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you.
*/
//EASY TABS 1.2 - MENU SETTINGS
//Set the id names of your tablink (without a number at the end)
var tablink_idname = new Array("tablink","twolink")
//Set the id name of your tabcontentarea (without a number at the end)
var tabcontent_idname = new Array("tabcontent","twocontent")
//Set the number of your tabs
var tabcount = new Array("3","3")
//Set the Tab wich should load at start (In this Example:Tab 2 visible on load)
var loadtabs = new Array("1","1")
//Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)
var autochangemenu = 0;
//the speed in seconds when the tabs should change
var changespeed = 3;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 1;
//END MENU SETTINGS
/*Swich EasyTabs Functions - no need to edit something here*/
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}
window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}