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

javascript in modx

    • 30086
    • 110 Posts
    tintincute Reply #1, 15 years, 6 months ago
    Hello

    I would like to know if javascript will work in modx? Any idea?

    Thanks
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #2, 15 years, 6 months ago
      MODx doesn’t care what HTML or Javascript you use. The only thing to watch out for is a possible conflict with the Javascript used by QuickManager, but that’s no different than any HTML page using several Javascript applications or libraries.
        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
        • 30086
        • 110 Posts
        tintincute Reply #3, 15 years, 6 months ago
        hi sottwell
        thank you for your reply.

        I tried this code inserting in one of my page data and it didn’t work.
        Could you tell me why? 
        <!DOCTYPE html>
<html>
<head>
  <style>
    span { color:red; cursor:pointer; }
    div { margin:3px; width:80px; display:none;
      height:80px; float:left; }
      div#one { background:#f00; }
      div#two { background:#0f0; }
      div#three { background:#00f; }
    </style>
  <script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
  <span>Click here...</span>

    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
<script>
      $(document.body).click(function () {
        $("div:hidden:first").fadeIn("slow");
      });
    </script>

</body>
</html>


          • 33968
          • 863 Posts
          Lucas Reply #4, 15 years, 6 months ago
          This doesn’t look right:
                  $("div:hidden:first").fadeIn("slow");

          Did you mean it to be:
          "div.hidden:first"

          ie. <div class="hidden">
            • 30086
            • 110 Posts
            tintincute Reply #5, 15 years, 6 months ago
            hi is this not correct?

            Yes some thing like that.
            Do I need to change this into <div class="hidden">
              • 33968
              • 863 Posts
              Lucas Reply #6, 15 years, 6 months ago
              What you are doing here:
              $("div:hidden:first").fadeIn("slow");

              is telling jQuery which element you want to apply the fade to.

              So if you want to fade in div#one (from your example), you need to do it like this:
              $("div#one").fadeIn("slow");


              Make sense?
                • 30086
                • 110 Posts
                tintincute Reply #7, 15 years, 6 months ago
                ok. I don’t have background with JS, it’s my first time trying this.

                I will try this one and will let you know if this will work
                  • 30086
                  • 110 Posts
                  tintincute Reply #8, 15 years, 6 months ago
                  This didn’t work either. 

                  <!DOCTYPE html>
<html>
<head>
  <style>
    span { color:red; cursor:pointer; }
    div { margin:3px; width:80px; display:none;
      height:80px; float:left; }
      div#one { background:#f00; }
      div#two { background:#0f0; }
      div#three { background:#00f; }
    </style>
  <script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
  <span>Click here...</span>

    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
<script>
      $(document.body).click(function () {
        $("div#one").fadeIn("slow");

      });
    </script>
    
    
</body>
</html>
                    • 33968
                    • 863 Posts
                    Lucas Reply #9, 15 years, 5 months ago
                    I just tested exactly what you have in the post above and it worked fine for me...

                    Do a quick Google search and you’ll find hundreds of jQuery tutorials to help get you started. Or if you just want to get something up and running there are plenty of plugins for galleries, tabs, etc that are available for free.
                      • 30086
                      • 110 Posts
                      tintincute Reply #10, 15 years, 5 months ago
                      @Luca: I googled about jQuery/javascript integrating to Modx, but couldn’t find.
                      Btw, I would like to have this integrated in the website. Not sure how.
                      I would be happy if there is some tutorials you could recommend