Rich-text Reply

JavaScript/JQuery Error

gauteremen 03-16-16
Accepted Solution

JavaScript/JQuery Error

Hi guys,

 

I am having difficulties getting the last bit of this code to run. I am trying to get a button to follow the scrolling and stick to the top when doing that. The code is working great in JSFiddle, but not so much in the Optimizely editor. This is also in the mobile version of the web page, but that should not be any different. 

 

The last part "$(function () {......." is not recognized by Optimizely. I get the error "$ is not a function".

 

The code is as follows:

 

$('head style:first-child').append(".stick{width:100%;position:fixed;transition:width 2s;}");

var $ = window.$;
function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#topbanner').offset().top;
    if (window_top > div_top) {
        $('.ctavismaorange').addClass('stick');
    } else {
        $('.ctavismaorange').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

Hope to get some help! Smiley Happy

 

Best Regards, 

Gaute

 

DavidS 03-17-16
 

Re: JavaScript/JQuery Error

Hi gauteremen,

 

Thanks for reaching out to Optimizely Support!

I understand that you are having an issue with running some custom Javascript code.

 

I am curious to know: if the "$ is not a function" error due to the first jQuery selector (line 1) or the $(function()) line?

If it only triggers the error for the $(function()) line, I am suspecting this piece of code to be responsible:

var $ = window.$;

Where exactly are you putting this piece of code (variation code or Experiment Javascript) ?

Could you try replacing the $ with jQuery and see if this makes a difference? 

 

The answers to these questions will allow me to give you a more precise answer. 

In the mean time, let me know if there is anything else I can help you with.

 

Best,
David

 

Optimizely
robertchan 03-17-16
 

Re: JavaScript/JQuery Error

Bump on what David asked, where is this code being placed?

 

Not sure whether this is your entire code, but is head defined in line 1? Even prior to var $, if head is not defined then you cannot even append, and if it is defined, and you are appending, I highly recommend for what you're doing, you at least set a timeout or add load to either your entire code, or the append. 

 

To QA the issue, try console logging different sections of your code to see whether all parts are loading appropriately. For example, you can do:

 

$('head style:first-child').append(".stick{width:100%;position:fixed;transition:width 2s;}
console.log('This section runs');

In addition, have you tried adding debugger to your code? While it only runs in console, it's extremely useful in determining what part of your code is or isn't running, here's an example:

 

var $ = window.$;
function sticky_relocate() {
    var window_top = $(window).scrollTop();
    debugger;
    var div_top = $('#topbanner').offset().top;
    if (window_top > div_top) {
        $('.ctavismaorange').addClass('stick');
    } else {
        $('.ctavismaorange').removeClass('stick');
    }
}

In console, the debugger will highlight where your code stops working.

Robert Chan

gauteremen 03-21-16
 

Re: JavaScript/JQuery Error

[ Edited ]

@DavidS and @robertchan,
So I tested the code in force variation, and it worked great! I guess Optimizely will show errors sometimes (?).
It was variation code by the way. Smiley Happy


Thanks for the replies!

Best,
Gaute

robertchan 03-21-16
 

Re: JavaScript/JQuery Error

@gauteremen - sometimes your code might save prematurely, to check this, I'll type optimizely.revision in your console with force parameters on to see what revision I'm on and make sure that I'm on a new rev number when I save again. If your experiment's not saving appropriately then can try a little hack within your experiment. Click on "Experiment Type" and click to confirm the settings. This will refresh your cache so that when you save again, you can guarantee yourself that you're saving the latest version of your experiment.
Robert Chan

gauteremen 03-21-16
 

Re: JavaScript/JQuery Error

Thanks, valuable advice!