Go4Expert

Go4Expert (http://www.go4expert.com/)
-   PHP (http://www.go4expert.com/forums/php/)
-   -   Javascript not running in index.php (http://www.go4expert.com/forums/javascript-running-indexphp-t26646/)

hanleyhansen 9Sep2011 00:22

Javascript not running in index.php
 
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 Code:

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


All times are GMT +5.5. The time now is 13:35.