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>';

?>

easytabs.js

/*
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();}
}

Eagled,

Suggest you start by tracking down the code that initialises the second menu after it has been delivered via AJAX.

Does such code exist?
Is it called?
Does it successfully attach Easy Tabs functionality to the second menu?

Airshow

Thanks for the reply. According to the instructions that came with this script the 4 arrays in the javascript file are used to specify more than one menu. The link name and link content arrays specify the menu name and link name. The other 2 arrays specify information for how to process that menu. Then in the php file I specify the menu and link name by enclosing the menu inside a div tag with an id matching the name specified in the javascript file. I know very little about javascript but the part of the .js file that processes it seems to be written to make as many menu's you specify in the settings section. Here are the sections of code i'm referring to.

index.php

<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>

easytabs.js

//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")

Eagled,

I know very little about javascript but the part of the .js file that processes it seems to be written to make as many menu's you specify in the settings section.

I'm sure that's right but I think the problem is that each secondary menu delivered by ajax needs to have easyTabs functionality attached to it after it has been inserted into the document. This is so even if all secondary menus have the same id.

With this in mind, my questions above might make more sense.

Airshow

I don't know anything about now javascript is formatted but I believe the code at the bottom of the .js file is programmed to automatically add menus and links for extra menus.

I tested this theory and have figured out why the second menu is not working properly. To test this I compiled the current code i'm using into a single html file keeping the javascript in a seperate file. I also turned on the autochange feature so the second menu would scroll through all the tabs confirming that they work. In order for the menu to work properly the quotes in the link section of the code have to be formatted exactly as shown here. I had previously changed the single quotes to double quotes so my echo statement would work.

<div class="menu"> 
<ul> 
<li><a href="#" onmouseover="easytabs('2', '1');" onfocus="easytabs('2', '1');"  onclick="return false;" title="" id="anotherlink1">Tab 1</a></li> 
<li><a href="#" onmouseover="easytabs('2', '2');" onfocus="easytabs('2', '2');"  onclick="return false;" title="" id="anotherlink2">Tab 2</a></li> 
<li><a href="#" onmouseover="easytabs('2', '3');" onfocus="easytabs('2', '3');"  onclick="return false;" title="" id="anotherlink3">Tab 3</a></li> 
<li><a href="#" onmouseover="easytabs('2', '4');" onfocus="easytabs('2', '4');"  onclick="return false;" title="" id="anotherlink4">Tab 4</a></li> 
<li><a href="#" onmouseover="easytabs('2', '5');" onfocus="easytabs('2', '5');"  onclick="return false;" title="" id="anotherlink5">Tab 5</a></li> 
<li><a href="#" onmouseover="easytabs('2', '6');" onfocus="easytabs('2', '6');"  onclick="return false;" title="" id="anotherlink6">Tab 6</a></li> 
</ul> 
</div>

The reason the first menu works and not the second is that the first menu is inside an html header file and using that formatting. The second menu is inside the main php file. The problem i'm having now is I don't know the proper syntax for making a php file echo the above code correctly.

Eagled2,

Good detective work.

All you need now is to master the escape character "\".

In both javascript and php (and other languages), if you need to put quotes (or a single-quote used as an apostrophe) inside a quoted string of the same type (single- or double-quotes), then you must escape it or the language parser will see the quote character as the end of the string and will most probably then generate an error from what comes after.

$myString = "Frank's bicycle";//OK
$myString = 'Frank's bicycle';//not OK
$myString = 'Frank\'s bicycle';//OK again

Taking one of your lines of HTML,

echo '<li><a href="#" onmouseover="easytabs('2', '1');" onfocus="easytabs('2', '1');"  onclick="return false;" title="" id="anotherlink1">Tab 1</a></li>';//not OK
echo '<li><a href="#" onmouseover="easytabs(\'2\', \'1\');" onfocus="easytabs(\'2\', \'1\');"  onclick="return false;" title="" id="anotherlink1">Tab 1</a></li>';//OK. Escaped single-quotes in a single-quoted string
echo "<li><a href=\"#\" onmouseover="easytabs('2', '1');" onfocus=\"easytabs('2', '1');\"  onclick=\"return false;\" title=\"\" id=\"anotherlink1\">Tab 1</a></li>";//OK. Escaped double-quotes in a double-quoted string.

Airshow

Thank you very much. That's exactly the type of answer I was looking for. It works like I want it to now. The only thing I don't understand about it now is why the easytabs paramaters have to be enclosed in single quotes and everything else in double quotes.

Eagled,

If you think about it, you already know the answer, or at least 90% of it from my earlier answer.

Consider this fragment of the served page:

... onmouseover="easytabs('2', '1');" ...

This is an HTML string containing a javascript statement, and the same rules apply as they did in php (which generated the fragment in the first place).

Here, we have single- inside double-quotes - OK.
Alternatively, double- inside single-quotes - also OK.
Both [double- inside double-quotes] and [single- inside single-quotes] - not OK.

The reason for this is that the browser's HTML parser works (in this regard) the same way as the php parser. If it sees an unescaped quote of the same type, then it will treat it as the terminating quote of the HTML attribute. Unlike php, browsers are (generally) tollerant of HTML errors, and will ignore the remaining string without necessarily generating an observable error - however the intended functionality of the HTML attribute will be lost.

Hope this helps.

Airshow

I never thought of it that way. Now that you mention it it makes perfect sense.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.