Question

I’m trying to add a slider to a website.

When I am testing locally it works fine in a standard html file, but when I try transfer it to a wordpress site I keep getting this error:

Uncaught TypeError: Cannot read property ‘browser’ of undefined

and it points to line 11 in the code for the problem

isIE = $.browser.msie,

I’m not sure what’s going on as it works in the basic file and not the wordpress live site.

Here is the jquery file for the slider – I’m sure its something simple, but I’ve just not figured it out.

Thanks
Ryan

var current       = 0,
imagenum          = {},
heroName          = {},
speed             = 500,
messageDelay      = 10000,
expanded          = false,
animating         = false,
easeType          = 'easeOutQuint',
scrollEase        = 'easeInOutExpo',
easeTypeCB        = 'cubic-bezier(0.770,  0.000, 0.175, 1.000)',
isIE              = $.browser.msie,
currenth          = 0,
anim              = false,
isLoading         = false,
autoHero          = '',
heroSlideLoading  = false,
heroSlideDuration = 1000,
gt1000            = false,
scrollSpeed       = 1000,
scrollAnimation   = false,
autoCarousel      = true,
heros, winw, heroc, herobtns, herobg, wbTimeout, image2, heromax, currentbg, tabindex, tabDiv, showing, tabLinks, clientList, num, anchor_max, anchors;


$(document).ready(function(){

  checkHash();
  heroCarousel();

});


function getHash(){
 var hash = window.location.hash;
 return hash.substring(1);
}


function checkHash(){
var currentHash = getHash();
if(currentHash.length > 0){
    var src;
    var projectLink;

    if( currentHash.charAt(0) == '!' ){
        src         = currentHash.substr(1).replace('-', ' ');
        projectLink = $.inArray(src, projectName);

        scrollToProject((projectLink+1));
    } else if( currentHash.charAt(0) == '@' ){
        src         = currentHash.substr(1);
        projectLink = $.inArray(src, heroName);

        if(projectLink > -1){
            loadHero(projectLink);
            $('.slider-wrapper img').imagesLoaded( function(){
                autoCarousel = false;
            });
        }
    }
  }
 }

function getWindowWidth(){
 return $(window).width();
}


function heroCarousel(auto){

heros    = $('.hero');
heroc    = $('#hero-carousel');
herobtns = $('.slider-wrapper .pager-btn');
herobg   = $('.heroimgbg');
heromax  = $('.hero').length-1;

if(heroc.size()){



    $(window).resize(function(){

        winw = $(window).width();
        heroc.width(winw * (heromax+1));
        $('.hero, .heroimgbg').width(winw);



        var heroPos = -(winw * (currenth));
        if(isIE){
            heroc.animate({
                'left' : heroPos
            }, 0);
        } else {
            heroc.css({
                '-webkit-transform' : 'translate3d(' + heroPos + 'px, 0, 0)',
                '-moz-transform' : 'translate(' + heroPos + 'px, 0)',
                '-o-transform' : 'translate(' + heroPos + 'px, 0)',
                '-ms-transform' : 'translate(' + heroPos + 'px, 0)',
                'transform' : 'translate(' + heroPos + 'px, 0)',
                '-webkit-transition': 'none',
                '-moz-transition': 'none',
                '-o-transition': 'none',
                '-ms-transition': 'none',
                'transition': 'none'
            });
        }
        isLoading = false;
        anim      = false;
        loadHero(currenth);

    }).resize();

    //previous/next buttons
    herobtns.click(function(){
        if( $(this).hasClass('next') ){
            loadHero('next');
        } else {
            loadHero('prev');
        }
        autoCarousel = false;

        return false;
    });
    //simple nav buttons
    snav.click(function(){
        var ind = $('.simple-nav li a').index(this);
        loadHero(ind);
        autoCarousel = false;

        return false;
    });

           loadHero(0);

  }


 }

function loadHero(dir){
if(!isLoading){
    isLoading = true;

    if( dir == 'next' ){
        if( currenth >= heromax ){
            currenth = 0;
        } else {
            currenth++;
        }

    } else if( dir == 'prev' ) {
        if( currenth <= 0 ){
            currenth = heromax;
        } else {
            currenth--;
        }
    } else {
        currenth = dir;
    }

    var slide = $('#hero-carousel .hero').eq(currenth);
    slide.addClass('next-slide');

    //load current slide
    if(getWindowWidth() > 1200){
        if(!slide.hasClass('loaded1200')){
            slide.removeClass('loaded');
            $('.tab-container:eq(0) h1').hide();
            $('#spinner').show();


            image2 = $('<img src="'+$('.heroimgbg'+currenth).attr('data-src')+'" alt="" />');
            currentbg = $('.heroimgbg'+currenth);
            currentbg.html(image2);


            if(slide.find('.heroimg').length){


                //load carousel images
                slide.find('.heroimg').each(function(){
                    var image;
                    if(getWindowWidth() > 1200){
                        image = $(this).attr('data-src-large') ? $('<img src="'+$(this).attr('data-src-large')+'" alt="" />') : $('<img src="'+$(this).attr('data-src')+'" alt="" />');
                    } else {
                        image = $('<img src="'+$(this).attr('data-src')+'" alt="" />');
                    }
                    $(this).html(image);
                    //image.delay(500).animate({'opacity': 1},500, easeType);
                });
                slide.find('img').imagesLoaded(function(){
                    changeTheme(slide);
                    slide.addClass('loaded1200');
                    //animate carousel
                    animHero(dir);
                });


            } else {
                changeTheme(slide);
                slide.addClass('loaded1200');
                animHero(dir);
            }
        } else {
            changeTheme(slide);
            animHero(dir);
        }
    } else {
        if(!slide.hasClass('loaded')){
            slide.removeClass('loaded1200');
            $('.tab-container:eq(0) h1').hide();
            $('#spinner').show();


            image2 = $('<img src="'+$('.heroimgbg'+currenth).attr('data-src')+'" alt="" />');
            currentbg = $('.heroimgbg'+currenth);
            currentbg.html(image2);


            if(slide.find('.heroimg').length){


                //load carousel images
                slide.find('.heroimg').each(function(){
                    var image;
                    if(getWindowWidth() > 1200){
                        image = $(this).attr('data-src-large') ? $('<img src="'+$(this).attr('data-src-large')+'" alt="" />') : $('<img src="'+$(this).attr('data-src')+'" alt="" />');
                    } else {
                        image = $('<img src="'+$(this).attr('data-src')+'" alt="" />');
                    }
                    $(this).html(image);
                    image.delay(500).animate({'opacity': 1},500, easeType);
                });
                slide.find('img').imagesLoaded(function(){
                    changeTheme(slide);
                    slide.addClass('loaded');
                    //animate carousel
                    animHero(dir);
                });


            } else {
                changeTheme(slide);
                slide.addClass('loaded');
                animHero(dir);
            }
        } else {
            changeTheme(slide);
            animHero(dir);
        }
    }
  }
 }

function changeTheme(slide){
$('.tab-container:eq(0) h1').show();
$('#spinner').hide();

//set theme
if(slide.attr('data-theme')){
    $('body').attr('class', 'anchors');
    $('body').addClass('theme-' + slide.attr('data-theme'));
}
}


function animHero(dir){

//$('body').css('cursor', 'auto');
if( !anim ){
    anim = true;
    var finishAnim;

    //load background image
    var image2src = $('.heroimgbg'+currenth).attr('data-src');

    if(currenth !== dir || dir === 0){
        currentbg = $('.heroimgbg'+currenth);
        $('.heroimgbg').each(function(){
            if($(this).css('opacity') > 0){
                $(this).animate({'opacity': 0}, heroSlideDuration, easeType);
            }
        });
        currentbg.css('background-image', 'url(' + image2src + ')').delay(500).animate({'opacity': 1}, heroSlideDuration, easeType);
    }

    //clear classes
    $('.hero').removeClass('exit enter fromleft fromright active');
    //$('.simple-nav li').removeClass('active');


    var currentSlide = $('.hero:eq('+currenth +')');
    currentSlide.addClass('enter');

    $('.hero:gt('+ currenth +')').addClass('fromright');
    $('.hero:lt('+ currenth +')').addClass('fromleft');


    /*heroc.animate({
        'left' : (currenth * -winw),
        leaveTransforms:true
    }, heroSlideDuration, 'easeInOutQuint', function(){
        anim      = false;
        isLoading = false;
        $('.hero:eq('+currenth +')').addClass('active');
    }).css('z-index','20');*/

    var heroPos = (currenth * -winw);
    if(isIE){
        heroc.animate({
            'left' : heroPos
        }, heroSlideDuration, 'easeInOutQuint', function(){
            anim      = false;
            isLoading = false;
            $('.hero:eq('+currenth +')').addClass('active');
        });
    } else {
        heroc.css({
            '-webkit-transform' : 'translate3d(' + heroPos + 'px, 0, 0)',
            '-moz-transform' : 'translate(' + heroPos + 'px, 0)',
            '-o-transform' : 'translate(' + heroPos + 'px, 0)',
            '-ms-transform' : 'translate(' + heroPos + 'px, 0)',
            'transform' : 'translate(' + heroPos + 'px, 0)',
            '-webkit-transition': '-webkit-transform 1s ' + easeTypeCB,
            '-moz-transition': '-moz-transform 1s ' + easeTypeCB,
            '-o-transition': '-o-transform 1s ' + easeTypeCB,
            '-ms-transition': '-ms-transform 1s ' + easeTypeCB,
            'transition': 'transform 1s ' + easeTypeCB
        });
        clearTimeout(finishAnim);
        finishAnim = setTimeout(function(){anim = false; isLoading = false;}, 1000);
        $('.hero:eq('+currenth +')').addClass('active');
    }

    clearTimeout(autoHero);
    if(autoCarousel === true){
        autoHero = setTimeout(function(){
            loadHero('next');
        }, 6000);
    }

 }
 }


 var showSwitch = ($('.slider-wrapper').length) ? true : false;
 //var scrollOffset = -30;


 (function($,undefined){$.fn.imagesLoaded=function(callback){var $this=this,$images=$this.find("img").add($this.filter("img")),len=$images.length,blank="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";function triggerCallback(){callback.call($this,$images)}function imgLoaded(){if(--len<=0&&this.src!==blank){setTimeout(triggerCallback);$images.unbind("load error",imgLoaded)}}if(!len)triggerCallback();$images.bind("load error",imgLoaded).each(function(){if(this.complete||this.complete===
 undefined){var src=this.src;this.src=blank;this.src=src}});return $this}})(jQuery);


 (function(){var special=jQuery.event.special,uid1="D"+ +new Date,uid2="D"+(+new Date+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer)clearTimeout(timer);else{evt.type="scrollstart";jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind("scroll",handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind("scroll",jQuery(this).data(uid1))}};special.scrollstop=
{latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer)clearTimeout(timer);timer=setTimeout(function(){timer=null;evt.type="scrollstop";jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind("scroll",handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind("scroll",jQuery(this).data(uid2))}}})();

Answer 1

By default I think WordPress puts jQuery into “no conflict” mode, so using $ as a shortcut for jQuery won’t work. I would guess that’s your problem, since the error indecates that $ is undefined.

From the WordPress docs:

In order to use the default jQuery shortcut of $, you can use the
following wrapper around your code:

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

Or, you could use jQuery whereever you’ve used $ in your code:

isIE = jQuery.browser.msie

You can read more about this in the WordPress docs.