We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Jquery will not work in Modx

    • 32347
    • 143 Posts
    wholein1 Reply #1, 17 years, 1 month ago
    I am not able to get the jquery pager ot work in MOdx. I have it working in an html enviorment.

    Template
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script>
     var $j = jQuery.noConflict();
     
     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>

<title>[(site_name)] - [*pagetitle*]</title>
<base href="http://www.thehannahgroupunlimited.com/"></base>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="http://www.thehannahgroupunlimited.com/assets/files/Styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.thehannahgroupunlimited.com/assets/plugins/jquery/lavalamp3.css" />
<link href="/assets/files/Styles.css" rel="stylesheet" type="text/css">

<style type="text/css">
.pics {
	height:  240px;
	width:   320;
	padding: 0;
	margin:  0;
}  
.pics img {      
background-color: #eee;      
height:  240px;      
width:   320px;      
top:  0;     left: 0 
} 

#nav {
	margin: 10px;
	color: #FFF;
}
#nav a {
	color: #FFF;
	margin: 5px;
	padding: 3px 5px;
	border: 1px solid #FFF;
	background: #000;
	text-decoration: none
}
#nav a.activeSlide {
	background: #999
}
#nav a:focus { outline: none; }

</style>
<script type="text/javascript" src="assets/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="assets/js/chili-1.7.pack.js"></script>
<script type="text/javascript" src="assets/js/jquery.cycle.all.js"></script>
<script type="text/javascript">

$(function() {
    $('#slideshow').cycle({
		fx:         'fade',
        timeout:     3000,
        pager:      '#nav',
        pagerEvent: 'mouseover',
        fastOnEvent: true,
		pause: 1
    });
});
</script>[/color]{{lava_menu}}

</head>
<body>
<table width="1004" height="100%" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="1026" align="left" valign="top" bgcolor="#797D7E"><table width="1004" height="1103" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
      <tr>
        <td width="1026" height="75" colspan="5" align="left" valign="top" ><table width="1004" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="75"  align="center" valign="top"  > {{horizontal_menu}} </td>
          </tr>
        </table></td>
      </tr>
      <tr align="left" valign="top">
        <td height="19" colspan="5"><table width="1004" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="top"><img src="/Main/main3303-3.jpg" width="1004" height="19"></td>
          </tr>
        </table></td>
      </tr>
      <tr align="left" valign="top">
        <td height="294" colspan="5" bgcolor="#797D7E"><table width="1004" border="0" cellspacing="0" cellpadding="0">
          <tr align="left" valign="top">
            <td width="649"><table width="649" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="649" align="left" valign="top"><img src="/Main/main3404-4.jpg" width="649" height="222"></td>
              </tr>
              <tr>
                <td width="649" align="left" valign="top"><img src="/Main/main3707-7.jpg" width="649" height="72"></td>
              </tr>
            </table></td>
            <td width="320"><table width="320" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="left" valign="top" background="/Main/main3_05-5.jpg" bgcolor="#000000"><table width="320" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td height="240" align="left" valign="top" bgcolor="#000000">
                   [color=red] <div id="slideshow" class="pics"> 
    <img src="http://www.cofbsa.org/mothersday_luncheon_2008/mothersday_luncheon_2008 (2).JPG" width="320" height="240" />
<img src="http://www.cofbsa.org/mothersday_luncheon_2008/mothersday_luncheon_2008 (3).JPG" width="320" height="240" />
<img src="http://www.cofbsa.org/Vacation_bible_school_cofbsa_2008/vacation_bible_school_2008 (3).JPG" width="320" height="240" />
</div> [/color] 
      
                    </td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td height="53" align="left" valign="top" background="/Main/main3808-8.jpg"><table width="320" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td align="left" valign="top">
                    
               [color=red]<div id="nav"></div>[/color]     
                    
                    
                    </td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
            <td width="35"><table width="35" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="35"><img src="/Main/main3606-6.jpg" width="35" height="294"></td>
              </tr>
            </table></td>
            </tr>
        </table></td>
      </tr>
      <tr align="left" valign="top">
        <td height="5" colspan="5"><img src="http://www.thehannahgroupunlimited.com/Main/Main3909-9.jpg" width="1004" height="5" alt=""></td>
      </tr>
      <tr align="left" valign="top">
        <td height="590" colspan="5"><table width="1004" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="32" height="100%" align="left" valign="top" background="/Main/main3_10-10.jpg"><table width="32" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="100%" align="left" valign="top" background="http://www.thehannahgroupunlimited.com//Main/main3_10-10.jpg"><img src="http://www.thehannahgroupunlimited.com/Main/main3_10-10.jpg" width="32" height="590" alt=""></td>
              </tr>
            </table></td>
            <td width="3" align="left" valign="top" bgcolor="#FFFFFF"><table width="936" border="0" cellspacing="0" cellpadding="5">
              <tr>
                <td width="936" align="left" valign="top"><p>[*longtitle*] 
                  
                  [*#content*] </p>
                  

                  </p></td>
              </tr>
            </table></td>
            <td height="100%" align="left" valign="top" background="http://www.thehannahgroupunlimited.com/Main/Main31212-12.jpg"><table width="36" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="left" valign="top"><img src="http://www.thehannahgroupunlimited.com/Main/Main31212-12.jpg" width="36" height="590" alt=""></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
      <tr align="left" valign="top">
        <td height="15" colspan="5"><img src="http://www.thehannahgroupunlimited.com/Main/Main31313-13.jpg" width="1004" height="15" alt=""></td>
      </tr>
      <tr align="left" valign="top">
        <td colspan="5" bgcolor="#797D7E"><table width="1004" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="75" align="left" valign="top">{{copyright}}</td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>


    Hopefully the red text will show up. If it does this is the jquery code. I need to know if any one can give m some help to get it to work or help in giving me another another solution

    Thank you

    Jeff Darst
      • 26931
      • 2,314 Posts
      anonymized-26931 Reply #2, 17 years, 1 month ago
      Hi there,

      you are still using the $-sign ind your jQuery-js:

      var $j = jQuery.noConflict(); -> var jq = jQuery.noConflict();

      and replace all $ instances of your jQuery-js with "jq". you can use whatever you want as variable, but no "$" smiley

      to make sure their won’t be a conflict with prototype, disable (for testing purposes) your QuickEdit-plugin which uses mootools and clear your browser (& MODx-cache) cache properly. Quite often pressing F5 doesn’t do the job for me, and i need to go to "Extras" -> "delete private data" -> "cache" (firefox)

      j
        • 32347
        • 143 Posts
        wholein1 Reply #3, 17 years, 1 month ago
        Hey thanks worked great