PDA

View Full Version : Ajax Content and DD Tab Menu II



deonteach
02-28-2006, 12:51 PM
http://www.dynamicdrive.com/dynamicindex1/ddtabmenu2.htm
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Refers to the above scripts.

Hello all,
Thank you for your quick and great responses from my other posts. It seems the website I am trying to convert is too large to transfer all the links to use just the ajax content script and it breaks to many forms. I have thought about the best way to incorporatethe ajax content script and decided a combination top menu (based on dd tab menu II) with seperate links then loading through ajax content.

I setup both scripts on teh referring page. The tab menu shows up great then when trying to invoke the second level links using ajax content the page doesn't do anything. Are both of these compatible with each other?

page code below


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html<?php echo $direction ?>>
<head>
<?php echo $meta ?>
<meta name="keywords" content="moodle, <?php echo $title ?> " />
<title><?php echo $title ?></title>
<link rel="shortcut icon" href="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>/favicon.ico" />
<?php include("$CFG->javascript"); ?>

<script type="text/javascript">

/***********************************************
* DD Tab Menu II script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=1 //0 for no (default), 1 for yes


////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById && turntosingle==0){
highlighttab(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collectddimagetabs()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collectddimagetabs()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload


/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}









</script>

</head>

<body<?php
echo " $bodytags";
if ($focus) {
echo " onload=\"setfocus()\"";
}
?>>

<div id="page">


<?php if ($heading) { // This is what gets printed on any other page with a heading
?>

<div id="header">

<div class="schoolname"><?php echo "Demo School Site" ?></div> <!-- END schoolname DIV -->

<div class="headermain"><?php echo $heading ?></div><!-- END heading DIV -->

<div class="login"><?php echo $loggedinas ?></div><!-- END headermenu DIV -->

</div><!-- END header DIV -->




<div class="headercalendar">

<div class="plannertext"><?php echo "My Planner" ?> </div><!-- END plannertext DIV -->

<?php require_once($CFG->dirroot.'/calendar/lib.php');?>
<?php //require_once($CFG->dirroot.'/blocks/moodleblock.class.php');?>
<?php //require_once($CFG->dirroot.'/blocks/calendar_month/block_calendar_month.php');?>
<?php echo calendar_set_referring_course($courseshown)?>
<?php echo calendar_set_filters($courses, $group, $user, $filtercourse, $filtercourse)?>
<?php echo calendar_overlib_html()?>
<?php echo calendar_get_mini($courses, $group, $user, $_GET['cal_m'], $_GET['cal_y'])?>
<?php echo calendar_top_controls('course', array('id' => $course->id, 'm' => $_GET['cal_m'], 'y' => $_GET['cal_y']))?>

</div> <!-- END headercalendar DIV -->


<div id="coursemenu">';

<div id="ddimagetabs">
<a href="http://url/" onMouseover="expandcontent('sc1', this)">My Classroom</a> <a href="http://url/" onMouseover="expandcontent('sc2', this)">My Grades</a> <a href="http://url/" onMouseover="expandcontent('sc3', this)">My Attendance</a><a href="http://url/" onMouseover="expandcontent('sc4', this)">My Messages</a>
</div> <br style="clear:left" />

<div id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
<?php echo "<a href= javascript:ajaxpage('$CFG->wwwroot/grade/indexcontent.php?id=".$this->course->id.
"','content');>My Grades</a>"?>
</div>

<div id="sc2" class="tabcontent">
See the new scripts recently added to Dynamic Drive. <a href="http://www.dynamicdrive.com/new.htm">Click here</a>.
</div>

<div id="sc3" class="tabcontent">
A listing of scripts recently changed, plus description of the changes. <a href="http://www.dynamicdrive.com/revised.htm">Revised Section</a>.
</div>

<div id="sc4" class="tabcontent">
Have a great script you wish to submit to Dynamic Drive for possible inclusion? <a href="http://www.dynamicdrive.com/submitscript.htm">Click here</a>.
</div>

</div>

<div class="closecontent">

</div><!--end closecontent-->







<?php } ?>





<div class="clearer">&nbsp;</div>


Thanks for your assistance :),
Deon