We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 54939
    • 2 Posts
    I'm trying to run this code so I can have an image galley with limiters at the top. Each image will open an URL.

    <!-- MAIN (Center website) -->
    <h2>Programming Modules</h2>
    <div id="myBtnContainer">
    <div class="main">
    <script type="text/javascript">// <![CDATA[
    pagetitle = "[[*pagetitle]]";
    // ]]></script>
    <button class="btn active" onclick="filterSelection('all')"> Show all</button> <button class="btn" onclick="filterSelection('preschool')"> Pre-school</button> <button class="btn" onclick="filterSelection('ozobots')"> Ozobots</button></div>
    <!-- Portfolio Gallery Grid -->
    <div class="row">
    <div class="column preschool">
    <div class="content">
    <h4><img style="border: 15px solid white;" title="Babies' First Books" src="babybook.jpg" alt="Babies' First Books" width="150" height="150" />  <img style="font-size: 1em; font-weight: normal; border: 15px solid white;" title="Another pre-school program" src="babybook.jpg" alt="Another pre-school program" width="150" height="150" /></h4>
    </div>
    </div>
    <!-- END GRID --></div>
    <!-- END MAIN --></div>
    <script type="text/javascript">// <![CDATA[
    filterSelection("all")
    function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("column");
    if (c == "all") c = "";
    for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
    }
    }

    function w3AddClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
    }
    }

    function w3RemoveClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
    arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
    }
    element.className = arr1.join(" ");
    }


    // Add active class to the current button (highlight it)
    var btnContainer = document.getElementById("myBtnContainer");
    var btns = btnContainer.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
    });
    }
    // ]]></script>

    It works on my computer when I save it as a .html file, but not when I use HTML to upload it to ModX. When I click on the limiter, nothing happens in ModX.

      • 18373 ☆ A M B ☆
      • 3,141 Posts
      Maybe there's a javascript error visible in the browsers' developer console?
        Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

        Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.