How to avoid ”flickering”

By default, the javascript / jQuery code you write is executed at Document ready. This means that the whole page is loaded before your changes are made. This can sometimes cause “flickering”.

You can avoid this by changing the way Symplify executes javascript / jQuery. To do this you first have to add /* no_doc_ready */ in the top of the code in the javascript / jQuery tab.

/* Write custom javascript / jQuery here! */
/* no_doc_ready */

Important things to consider using /* no_doc_ready */

• Always remember to use intervals and check that the element you wish to modify exist on the page before you make your changes.
• Use unique variable names in your interval functions so they don’t collide with other variables you used before (in other projects). Tip: use the project ID at the end of the variable name.
• If you refer to two or more elements in your code you need to check that all exist before you make your changes.
• Do not set all changes in one huge interval. Make separate intervals for each change (see example below).
• Always set a timeout on Document ready that clear all your intervals, to avoid ticking intervals if an element you checked for did not exist for some reason.

One element

In the example below, we modify one element. We change the product title to Symplify.

/* no_doc_ready */

var change_product_title_192491281 = setInterval(function (){
    if($('.product-title h1').length > 0) { // Check that the element you want to change really exists. 
        clearInterval(change_product_title_192491281); // Clear the interval after the element has been found/exist so the changes only happen once.
        $('.product-title h1').text('Symplify'); // Make your changes.
    }
},10); // intervals running every ten milliseconds. 

$(document).ready(function (){ // when the page has loaded.
    setTimeout(function (){ // set a timeout to be sure that every element has been loaded, even those who come in after document ready.
        clearInterval(change_product_title_192491281); // Clear the interval on document ready if the element hasn't been found so the interval doesn't keep on ticking.
    },5000); // this timeout is set on 5 seconds.
});

Two elements or more

In the example below, we modify two elements. We move the image container to the left of the product description container.


Important to remember;

• Always check that both (all) elements you refer to exist in your if statement.

/* no_doc_ready */

var move_image_to_left_192491281 = setInterval(function (){ 
    if($('.content-left').length > 0 && $('.content-right').length > 0) { // Check that both elements you want to change really exists, 
        clearInterval(move_image_to_left_192491281); // Clear the interval after the element has been found/exist so the changes only happen once.
        $('.content-left').before($('.content-right')); // Make your changes.
    }
},10); // intervals running every ten milliseconds. 

$(document).ready(function (){ // when the page has loaded
    setTimeout(function (){ // set a timeout to be sure that every element has been loaded, even those who come in after document ready.
        clearInterval(move_image_to_left_192491281); // Clear the interval on document ready if the element hasn't been found so the interval doesn't keep on ticking.
    },5000); // this timeout is set on 5 seconds
});

The two changes combined

In the image below you see how we combined the two examples. Notice that we only use one Document ready function to clear all intervals and the two changes have their own intervals and is therefore not dependent on each other.