jQuery Uncaught TypeError: object is not a function. WordPress $ object conflict?

5 Views

By passing in the $ operator in the function construct, I thought I should be in the clear to use $ in the code. However, its throwing the “object is not a function” error instead. Any ideas what I’m doing wrong?

enter image description here

Read More

Full code below: 

<script>
function isElementVisible($elementToBeChecked)
{
        var TopView = $(window).scrollTop();
        var BotView = TopView + $(window).height();
        var TopElement = $elementToBeChecked.offset().top;
        var BotElement = TopElement + $elementToBeChecked.height();
        return ((BotElement <= BotView) && (TopElement >= TopView));
}

jQuery(window).scroll(function($) {
        $( ".counter" ).each(function() {
                $this = $(this);
                isOnView = isElementVisible($(this));
                if(isOnView && !$(this).hasClass('Starting')){
                        $(this).addClass('Starting');
                        startTimer($(this));
                }
        });
});

function startTimer($this) {
        setTimeout(function(){
                $this.html($this.html() - 1);
                startTimer($this);
        }, 1000); 
}
</script>
Post Views: 5

Related posts

Leave a Reply

1 comment

  1. You’re using the dollarsign multiple places, why would it be defined there if there is a conflict ?

    What you should be doing is wrap all that code in the recommended DOM ready handler for WordPress

    <script>

    jQuery(function($) {
        function isElementVisible($elementToBeChecked) {
                var TopView = $(window).scrollTop();
                var BotView = TopView + $(window).height();
                var TopElement = $elementToBeChecked.offset().top;
                var BotElement = TopElement + $elementToBeChecked.height();
                return ((BotElement <= BotView) && (TopElement >= TopView));
        }

        $(window).scroll(function() {
                $( ".counter" ).each(function() {
                        $this = $(this);
                        isOnView = isElementVisible($(this));
                        if(isOnView && !$(this).hasClass('Starting')){
                                $(this).addClass('Starting');
                                startTimer($(this));
                        }
                });
        });

        function startTimer($this) {
                setTimeout(function(){
                        $this.html($this.html() - 1);
                        startTimer($this);
                }, 1000); 
        }
    });

</script>