Hello guys, I have a Joomla! site up. I created a custom javascript menu for a regular HTML site and then tried porting that over to Joomla! Here is the HTML version: www.pcti.tec.nj.us/demo And here is the Joomla! version: 130.156.50.253/pcti If you look at the HTML one and click on any of the menu links you'll see the navigation in action. The div shows up and you can slide through the different divs just like on ibm.com however, on the Joomla! site it does nothing even though the code is exactly the same. Here is my index.php file: PHP: <?php defined('_JEXEC') or die; require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php'; // Create alias for $this object reference. $document = & $this; // Shortcut for template base url. $templateUrl = $document->baseurl . '/templates/' . $document->template; // Initialize version-specific view. $view = $this->artx = ('1.6' == $GLOBALS['version']->RELEASE) ? new ArtxPage16($this) : new ArtxPage15($this); // Decorate component with Artisteer style. $view->componentWrapper(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $document->language; ?>" lang="<?php echo $document->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" media="screen" /> <link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/mb.scrollable.css" media="screen" /> <!--[if IE 6]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie6.css" type="text/css" media="screen" /><![endif]--> <!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]--> <script type="text/javascript">if ('undefined' != typeof jQuery) document._artxJQueryBackup = jQuery;</script> <script type="text/javascript" src="<?php echo $templateUrl; ?>/jquery.js"></script> <script type="text/javascript">jQuery.noConflict();</script> <script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script> <script type="text/javascript" src="<?php echo $templateUrl; ?>/mbScrollable.js"></script> <script type="text/javascript">if (document._artxJQueryBackup) jQuery = document._artxJQueryBackup;</script> <script language="JavaScript" type="text/javascript"> <!-- // This array holds the "friendly" day names var day_names = new Array(7) day_names[0] = "" day_names[1] = "" day_names[2] = "" day_names[3] = "" day_names[4] = "" day_names[5] = "" day_names[6] = "" // This array holds the "friendly" month names var month_names = new Array(12) month_names[0] = "Jan." month_names[1] = "Feb." month_names[2] = "Mar." month_names[3] = "Apr." month_names[4] = "May" month_names[5] = "June" month_names[6] = "July" month_names[7] = "Aug." month_names[8] = "Sept." month_names[9] = "Oct." month_names[10] = "Nov." month_names[11] = "Dec." // Get the current date date_now = new Date() // Figure out the friendly day name day_value = date_now.getDay() date_text = day_names[day_value] // Figure out the friendly month name month_value = date_now.getMonth() date_text += " " + month_names[month_value] // Add the day of the month date_text += " " + date_now.getDate() // Add the year date_text += ", " + date_now.getFullYear() // Get the minutes in the hour minute_value = date_now.getMinutes() if (minute_value < 10) { minute_value = "0" + minute_value } // Get the hour value and use it to customize the greeting hour_value = date_now.getHours() if (hour_value == 0) { time_text = (hour_value + 12) + ":" + minute_value } else if (hour_value < 12) { time_text = hour_value + ":" + minute_value } else if (hour_value == 12) { time_text = hour_value + ":" + minute_value } else if (hour_value < 17) { time_text = (hour_value - 12) + ":" + minute_value } else { time_text = (hour_value - 12) + ":" + minute_value } var display = date_text + time_text //--> </script> <script type="text/javascript"> function hide() { timer = setTimeout(function(){$('#wrapper').slideUp();},500); document.getElementById(which).className='plain'; } </script> <script type="text/javascript"> <!-- which='1'; function changePage(id) { $('#myScroll').goToPage(id,false);setTimeout(function(){$('#wrapper').slideDown();}) document.getElementById(which).className="plain"; document.getElementById(id).className="active"; which=id; } //--> </script> <script type="text/javascript"> $(function(){ $("#myScroll").mbScrollable({ width:850, elementsInPage:1, // elementMargin:2, // shadow:"#999 2px 2px 2px", height:250, controls:"#controls", slideTimer:600, autoscroll:false, scrollTimer:4000, changePageCallback:function(){ var positiondisplay= $('#myScroll').get(0).idx+'/'+$('#myScroll').get(0).totalPages; $('#controls .positiondisplay').html(positiondisplay); }, loadCallback:function(){ var positiondisplay= $('#myScroll').get(0).idx+'/'+$('#myScroll').get(0).totalPages; $('#controls .positiondisplay').html(positiondisplay); } }); //setTimeout(function(){$("#wrapper").slideDown();},2000); }); </script> </head> <body class="<?php echo $view->bodyClass(); ?>"> <div id="art-page-background-glare"> <div id="art-page-background-glare-image"> </div> </div> <div id="art-main"> <div class="art-header"> <div class="art-header-clip"> <div class="art-header-center"> <div class="art-header-jpeg"></div> </div> </div> <div class="art-header-wrapper"> <div class="topright"> <script language="JavaScript" type="text/javascript"> document.write(date_text + " | " + time_text)//--> </script> </div> <div class="art-header-inner"> <div class="art-headerobject"><img name="headerobject" src="templates/pcti_home/images/header-object.png" width="850" height="110" border="0" id="headerobject" usemap="#m_headerobject" alt="" /><map name="m_headerobject" id="m_headerobject"> <area shape="rect" coords="828,38,849,59" href="http://www.google.com" target="_blank" alt="" /> <area shape="rect" coords="802,38,823,59" href="http://www.twitter.com" target="_blank" alt="" /> <area shape="rect" coords="776,38,798,59" href="http://www.facebook.com/PCTI1" target="_blank" alt="" /> </map></div> <div class="art-logo"> </div> </div> </div> </div> <div class="cleared reset-box"></div> <?php if ($view->containsModules('user3', 'extra1', 'extra2')) : ?> <div class="art-nav"> <div class="art-nav-l"></div> <div class="art-nav-r"></div> <div class="art-nav-outer"> <div class="art-nav-wrapper"> <div class="art-nav-inner"> <ul class="art-hmenu"> <li><a id="1" onclick="changePage('1')"><span class="l"></span><span class="r"></span><span class="t">INSIDE PCTI</span></a></li> <li><a id="2" onclick="changePage('2')"><span class="l"></span><span class="r"></span><span class="t">PROGRAMS</span></a></li> <li><a id="3" onclick="changePage('3')"><span class="l"></span><span class="r"></span><span class="t">PARENTS</span></a></li> <li><a id="4" onclick="changePage('4')"><span class="l"></span><span class="r"></span><span class="t">FACULTY</span></a></li> <li><a id="5" onclick="changePage('5')"><span class="l"></span><span class="r"></span><span class="t">STUDENTS</span></a></li> <li><a id="6" onclick="changePage('6')"><span class="l"></span><span class="r"></span><span class="t">CONTACT</span></a></li> </ul> <?php if ($view->containsModules('extra1')) : ?> <div class="art-hmenu-extra1"><?php echo $view->position('extra1'); ?></div> <?php endif; ?> <?php if ($view->containsModules('extra2')) : ?> <div class="art-hmenu-extra2"><?php echo $view->position('extra2'); ?></div> <?php endif; ?> <?php echo $view->position('user3'); ?> </div> </div> </div> </div> <div class="cleared reset-box"></div> <?php endif; ?> <div id="wrapper" style="display:none"> <div id="horizontal"> <div id="myScroll"> <div class="scrollEl" style="background-color:#E4E8E7">Page 1</div> <div class="scrollEl" style="background-color:#E4E8E7">Page 2</div> <div class="scrollEl" style="background-color:#E4E8E7">Page 3</div> <div class="scrollEl" style="background-color:#E4E8E7">Page 4</div> <div class="scrollEl" style="background-color:#E4E8E7">Page 5</div> <div class="scrollEl" style="background-color:#E4E8E7">Page 6</div> </div> </div> </div> <div class="art-sheet"> <div class="art-sheet-tl"></div> <div class="art-sheet-tr"></div> <div class="art-sheet-bl"></div> <div class="art-sheet-br"></div> <div class="art-sheet-tc"></div> <div class="art-sheet-bc"></div> <div class="art-sheet-cl"></div> <div class="art-sheet-cr"></div> <div class="art-sheet-cc"></div> <div class="art-sheet-body"> <?php echo $view->position('banner1', 'art-nostyle'); ?> <?php echo $view->positions(array('top1' => 33, 'top2' => 33, 'top3' => 34), 'art-block'); ?> <div class="art-content-layout"> <div class="art-content-layout-row"> <div class="art-layout-cell art-content"> <?php echo $view->position('banner2', 'art-nostyle'); if ($view->containsModules('breadcrumb')) echo artxPost($view->position('breadcrumb')); echo $view->positions(array('user1' => 50, 'user2' => 50), 'art-article'); echo $view->position('banner3', 'art-nostyle'); if ($view->hasMessages()) echo artxPost('<jdoc:include type="message" />'); echo '<jdoc:include type="component" />'; echo $view->position('banner4', 'art-nostyle'); echo $view->positions(array('user4' => 50, 'user5' => 50), 'art-article'); echo $view->position('banner5', 'art-nostyle'); ?> <div class="cleared"></div> </div> <?php if ($view->containsModules('right')) : ?> <div class="art-layout-cell art-sidebar1"> <?php echo $view->position('right', 'art-block'); ?> <div class="cleared"></div> </div> <?php endif; ?> </div> </div> <div class="cleared"></div> <?php echo $view->positions(array('bottom1' => 33, 'bottom2' => 33, 'bottom3' => 34), 'art-block'); ?> <?php echo $view->position('banner6', 'art-nostyle'); ?> <div class="cleared"></div> </div> </div> <div class="art-footer"> <div class="art-footer-t"></div> <div class="art-footer-body"> <div class="art-footer-center"> <div class="art-footer-wrapper"> <div class="art-footer-text"> <?php if ($view->containsModules('copyright')): ?> <?php echo $view->position('copyright', 'art-nostyle'); ?> <?php else: ?> <?php ob_start(); ?> <p><b>Passaic County Technical Institute</b>, 45 Reinhardt Road, Wayne, New Jersey 07470 • 973-790-6000</p> <p>Copyright © 2011. All Rights Reserved.</p> <div class="cleared"></div> <p class="art-page-footer"></p> <?php echo str_replace('%YEAR%', date('Y'), ob_get_clean()); ?> <?php endif; ?> </div> </div> </div> <div class="cleared"></div> </div> </div> </div> <?php echo $view->position('debug'); ?> </body> </html> Any ideas? I have no idea what is wrong! Thanks in advance.
