We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 25773
    • 73 Posts
    Ive finally got it working.
    this is what I did:

    <!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">
    
    <head>
    <title>[*title*]</title>
    <meta name="keywords" content="[*keywords*] "/>
    <meta name="description" content="[*description*] "/>
      <meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
    <link rel="canonical" href="[(site_url)][~[*id*]~]" />
      <base href="[(site_url)]" /></base>  
      <link rel="stylesheet" href="assets/templates/express/layout.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="assets/templates/express/modxmenu2.css" type="text/css" media="screen" /> 
      <link rel="stylesheet" href="assets/templates/express/form.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="assets/templates/express/modx.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="assets/templates/express/print.css" type="text/css" media="print" />
      <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
    <script src="assets/templates/express/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="assets/templates/express/jquery.cycle.all.min.js" type="text/javascript"></script>
    
    <script>   var  jquery=$.noConflict();    
    jquery(document).ready(function(){
        jquery('#slideshow').cycle({
            fx:     'fade',
            speed:  'slow',
            timeout: 5000,
            pager:  '#slider_nav',
            pagerAnchorBuilder: function(idx, slide) {
                // return sel string for existing anchor
                return '#slider_nav li:eq(' + (idx) + ') a';
            }
        });
    });
    </script>
    <script src="manager/media/script/mootools/mootools.js" type="text/javascript"></script>
    <script src="assets/templates/express/drop_down_menu.js" type="text/javascript"></script>
    
    
    </head>
    <body>
    <div id="container">
    <div class="header">
    [*top-header*]
    <div class="clear"></div>
    
       <div id="ajaxmenu"> [[Wayfinder?startId=`0` &outerTpl=`mh.OuterTpl` &innerTpl=`mh.InnerTpl` &rowTpl=`mh.RowTpl` &innerRowTpl=`mh.InnerRowTpl` &firstClass=`first` &hereClass=``]] </div>
                    
    
    
    </div>
    
    
    <div class="clear"></div>
    <div class="clear"></div>
    <div class="top-content">
     <div id="left">[*left-boxes-home*]</div>
    <div id="slideshow">
     <div class="slider-item"><a href="bifoldingdoors.html"target="blank"><img src="assets/images/gallery/top1.jpg" alt="bi-folding doors,folding doors" width="710" height="360" border="0" 
     /></a></div>
            <div class="slider-item"><a href="patio_doors.html" target="blank"><img src="assets/images/gallery/top2.jpg" alt="sliding doors, patio doors" width="710" height="360" border="0" /></a></div>
            <div class="slider-item"><a href="bifoldingdoors.html"target="blank"><img src="assets/images/gallery/top3.jpg" alt="bifolding doors,sliding doors, patio doors,composite doors" width="710" height="360" border="0" /></a></div>
            <div class="slider-item"><a href="bifoldingdoors.html"target="blank"><img src="assets/images/gallery/top4.jpg" alt="bifolding doors,sliding doors, patio doors,composite doors"width="710" height="360" border="0" /></a></div>
            <div class="slider-item"><a href="bifoldingdoors.html"target="blank"><img src="assets/images/gallery/top5.jpg" alt="bifolding doors,sliding doors, patio doors,composite doors"width="710" height="360" border="0" /></a></div>
     </div>
    [*topContent*]
    </div>
    </div>
     [*#content*]
    <div class="clear"></div>
    </div>
    <div id="footer">
    [*footer*]
    </div>
    </div>
    </body>
    </html>
    
    So I changed the no conflict to this:
    
    <script> var jquery=$.noConflict();
    jquery(document).ready(function(){
    jquery('#slideshow').cycle({
    fx: 'fade',
    speed: 'slow',
    timeout: 5000,
    pager: '#slider_nav',
    pagerAnchorBuilder: function(idx, slide) {
    // return sel string for existing anchor
    return '#slider_nav li:eq(' + (idx) + ') a';
    }
    });
    });
    </script>


    then I called the other js libraries after the no conflict as calling them first still stopped the drop down menu from working.
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      Just a side note to this; I haven't had to use any other libraries besides JQuery for a few years now. Anything any other library has, JQuery will have at least one or two plugins to do the same thing, or maybe even better. Usually a quick Google search finds at least a dozen plugins to choose from to get exactly what I want to do.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 6038
        • 228 Posts
        then I called the other js libraries after the no conflict as calling them first still stopped the drop down menu from working.
        Because you used the $ reference, that requires you to load and call the noConflict method before any other libraries. If you had used
        jQuery.noConflict
        then the sequence of loading of the jquery library and calling of noConflict wouldn't matter. Hope that makes it clearer [ed. note: christianhanvey last edited this post 15 years, 1 month ago.]
          • 40506
          • 1 Posts
          This is perfect..