Grow your CSS skills. Land your dream job.

Moved javascript to new page, not working

  • # August 24, 2013 at 11:35 am

    Hello,

    I know very little about javascript, so I hired someone to copy a js slider from one page to my test page. Now that I’m putting it on the live page, though, the slider isn’t working. I did move the items referenced in the JS to be included in the wordpress theme, but I believe I’ve linked the items correctly because the pictures are showing up. But there is no slider.

    Important note – Site is built on a Genesis Child Theme for wordpress. Site I’m trying to get working is here and the site where it is working is here
    Any thoughts?

    # August 24, 2013 at 7:49 pm

    There are a bunch of <p> in your JS that is throwing an error: http://cl.ly/image/3q2t1X1r3y0Y

    # August 24, 2013 at 10:43 pm

    What is strange – that in working example there is too error about paragraph :)

    # August 25, 2013 at 12:07 pm

    Hmm, I wonder if WordPress is automatically adding that. The code I have shows no

    <

    p>’s
    `

        jQuery(function ($) {
        // Load dialog on click
          $("#slides #viewSample").click(function (e) {
    
              $("#youtube-channel").modal({onOpen: function (dialog) {
                dialog.overlay.fadeIn('slow', function () {
                 dialog.container.slideDown('slow', function () {
                  dialog.data.fadeIn('slow');
                 });
                });
              }});
          return false;
          });
        });
    
    <script type="text/javascript">
        jQuery(document).ready(function($) {
        // Creating hoverscroll with fixed arrows
        $('#my-list').hoverscroll({
            fixedArrows: true,
            rtl: true
        });
        // Starting the movement automatically at loading
        // @param direction: right/bottom = 1, left/top = -1
        // @param speed: Speed of the animation (scrollPosition += direction * speed)
        var direction = -1,
            speed = 2;
        $("#my-list")[0].startMoving(direction, speed);
        });
    </script>
    
    $(".customerLogos").hide(0).delay(3000).fadeIn(1000);
    
    
    jQuery(document).ready(function($) {
         $('#menu li').hoverIntent({
            sensitivity: 7,
            over: function(e){
               $(this).find('ul.megamenu').css({visibility: 'visible',display: 'none'}).slideToggle();
            },
            out:function(e){
                $(this).find('ul.megamenu').css({visibility: 'hidden', display: 'none'});
            },
            timeout: 500
        });
    
    
        $('#fadeZoom1').cycle({ 
            animIn:'fadeZoom',
            fx:    'fadeZoom',
            speed: 1000, 
            sync:  false, 
            delay: 200 
        });
    
        $('#fadeZoom2').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 700 
        }); 
    
        $('#fadeZoom3').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 1300 
        });
    
        $('#fadeZoom4').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 1800 
        });
    
        $('#fadeZoom5').cycle({ 
            animIn:'fadeZoom',
            fx:    'fadeZoom',
            speed: 1000, 
            sync:  false, 
            delay: 200 
        });
    
        $('#fadeZoom6').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 700 
        }); 
    
        $('#fadeZoom7').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 1300 
        });
    
        $('#fadeZoom8').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 1800 
        });
    
        $('#fadeZoom9').cycle({ 
            animIn:'fadeZoom',
            fx:    'fadeZoom',
            speed: 1000, 
            sync:  false, 
            delay: 200 
        });
    
        $('#fadeZoom10').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 700 
        }); 
    
        $('#fadeZoom11').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 1300 
        });
    
        $('#fadeZoom12').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 1800 
        });
    
        $('#fadeZoom13').cycle({ 
            animIn:'fadeZoom',
            fx:    'fadeZoom',
            speed: 1000, 
            sync:  false, 
            delay: 200 
        });
    
        $('#fadeZoom14').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 700 
        }); 
    
        $('#fadeZoom15').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 1300 
        });
    
        $('#fadeZoom16').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 1800 
        });
    
        $('#fadeZoom17').cycle({ 
            animIn:'fadeZoom',
            fx:    'fadeZoom',
            speed: 1000, 
            sync:  false, 
            delay: 200 
        });
    
        $('#fadeZoom18').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 700 
        }); 
    
        $('#fadeZoom19').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 1300 
        });
    
        $('#fadeZoom20').cycle({ 
            fx:    'fadeZoom', 
            speed: 1000,
            sync:  false, 
            delay: 1800 
        });
    });
    
    `.
    
    # August 25, 2013 at 12:39 pm

    You should be adding this code at a template level. Are you trying to enter it into the WordPress page editor?

    # August 25, 2013 at 12:44 pm

    Yes, it is in the WP editor. The gentleman I hired to copy the code said he had to do it that way because the page uses a child theme using the genesis framework and it would break the theme otherwise.
    There is a section built in to put in script before the end of the footer, but he seemed to think it wouldn’t work there. Do I need to try to move it there?

    # August 25, 2013 at 3:12 pm

    But the whole point of using a child theme is so that you can make changes to the theme files… Hmmmmm…

    # August 25, 2013 at 5:28 pm

    So are you saying this should be added at the footer? When I try adding to the footer, I get the same problem. It’s supposed to be in the sub-footer, but it does the same thing as well. ERRRR.

    # August 26, 2013 at 12:52 pm

    Methinks your dev you hired was a tad lazy.

    I’d take those script blocks and externalize them in separate files (better if you can concat + minify them) then register and enqueue them based on whatever criteria you need.

    You can take care of all that in your theme’s or child theme’s functions.php file.

    WP Register Script

    WP EnqueueScript

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".