CODEWITHSUNDEEP
javascriptjquery
Angelo
Angelo

Reputation: 33

My script needs page refresh for it to run

Every time I load my page for the first time my script does not load, I need to refresh the page at least 3 times for it to run. How can I make my script run without a page refresh? This particular script is in BABEL.

'use strict';

var deg = 0;
var index = 0;

$('#' + index).css('opacity', '1');
$('.navbar').contextmenu(function () {
    return false;
});
$('.navbar').on('mousewheel', function (e) {
    var move = -60;
    var nextIndex = nextIndex = (index + 1) % 6;
    if (e.originalEvent.wheelDelta / 120 <= 0) {
        // wheel up
        move = 60;
        nextIndex = index  -1 < 0 ? 5 : index - 1;
    }
    $('.scroll-list').css('transform', 'rotateX(' + (deg + move) + 'deg)');
    $('#' + index).css('opacity', '0.01');
    $('#' + nextIndex).css('opacity', '1');
    index = nextIndex;
    deg = deg + move;
    event.stopPropagation();
    console.timeEnd('cache');
});

Upvotes: 1

Views: 1696

Answers (3)

Chtioui Malek
Chtioui Malek

Reputation: 11515

And what if you wrapped your code inside a window.onload function?

window.onload = function() { 
  // your code
}

Your code will only run when the html document is "ready" and fully loaded.

Upvotes: 5

Tavish Aggarwal
Tavish Aggarwal

Reputation: 1060

$(document).ready(function () {
var deg = 0;
var index = 0;

$('#' + index).css('opacity', '1');
$('.navbar').contextmenu(function () {
    return false;
});
$('.navbar').on('mousewheel', function (e) {
    var move = -60;
    var nextIndex = nextIndex = (index + 1) % 6;
    if (e.originalEvent.wheelDelta / 120 <= 0) {
        // wheel up
        move = 60;
        nextIndex = index - 1 < 0 ? 5 : index - 1;
    }
    $('.scroll-list').css('transform', 'rotateX(' + (deg + move) + 'deg)');
    $('#' + index).css('opacity', '0.01');
    $('#' + nextIndex).css('opacity', '1');
    index = nextIndex;
    deg = deg + move;
    event.stopPropagation();
    console.timeEnd('cache');
});
});

Wrap your code in ready function, so that your JavaScript executes after DOM is loaded.

Upvotes: 1

CREM
CREM

Reputation: 1991

You are running Javascript that depends on page elements and the javascript is executed before the elements are on the page;

Wrapp all your code inside document.ready function

Upvotes: 3

Related Questions