CODEWITHSUNDEEP
javascriptjqueryhtml
Warriorsfury
Warriorsfury

Reputation: 65

Javascript file links not working properly

I have four different files linked together. Index.html - style.css - script.js - script2.js

script2.js contains a small test script to test and see if it all works, which it does.

index.html contains the following:

    <DOCTYPE html>
<html>
    <body>
        <head>
            <script type="text/javascript" src="jquery-1.12.1.min.js"></script>
            <script type="text/javascript" src="script.js"></script>
            <script type="text/javascript" src="script2.js"></script>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <div id="container">
          <div id="message">
            <a id="animate" href="#">Transmit</a>
          </div>
        </div>
    </body>
<html>

Now my script.js file contains this:

(function () {
    var $animate, $container, $message, $paragraph, MESSAGES, animate, initialise, scramble;
    MESSAGES = [];
    MESSAGES.push({
        delay: 0,
        text: 'Incoming transmission...'
    });
    MESSAGES.push({
        delay: 1200,
        text: 'You don\'t talk to anybody.'
    });
    MESSAGES.push({
        delay: 2200,
        text: 'You don\'t interact with anybody.'
    });
    MESSAGES.push({
        delay: 3600,
        text: 'Your whole sense of reality is, pretty warped...'
    });
    MESSAGES.push({
        delay: 5200,
        text: 'Does it bother you that we\'re not real?'
    });
    $container = $('#container');
    $message = $('#message');
    $animate = $('#animate');
    $paragraph = null;
    scramble = function (element, text, options) {
        var $element, addGlitch, character, defaults, ghostCharacter, ghostCharacters, ghostLength, ghostText, ghosts, glitchCharacter, glitchCharacters, glitchIndex, glitchLength, glitchProbability, glitchText, glitches, i, j, k, letter, object, order, output, parameters, ref, results, settings, shuffle, target, textCharacters, textLength, wrap;
        defaults = {
            probability: 0.2,
            glitches: '-|/\\',
            blank: '',
            duration: text.length * 40,
            ease: 'easeInOutQuad',
            delay: 0
        };
        $element = $(element);
        settings = $.extend(defaults, options);
        shuffle = function () {
            if (Math.random() < 0.5) {
                return 1;
            } else {
                return -1;
            }
        };
        wrap = function (text, classes) {
            return '<span class="' + classes + '">' + text + '</span>';
        };
        glitchText = settings.glitches;
        glitchCharacters = glitchText.split('');
        glitchLength = glitchCharacters.length;
        glitchProbability = settings.probability;
        glitches = function () {
            var j, len, results;
            results = [];
            for (j = 0, len = glitchCharacters.length; j < len; j++) {
                if (window.CP.shouldStopExecution(1)) {
                    break;
                }
                letter = glitchCharacters[j];
                results.push(wrap(letter, 'glitch'));
            }
            window.CP.exitedLoop(1);
            return results;
        }();
        ghostText = $element.text();
        ghostCharacters = ghostText.split('');
        ghostLength = ghostCharacters.length;
        ghosts = function () {
            var j, len, results;
            results = [];
            for (j = 0, len = ghostCharacters.length; j < len; j++) {
                if (window.CP.shouldStopExecution(2)) {
                    break;
                }
                letter = ghostCharacters[j];
                results.push(wrap(letter, 'ghost'));
            }
            window.CP.exitedLoop(2);
            return results;
        }();
        textCharacters = text.split('');
        textLength = textCharacters.length;
        order = function () {
            results = [];
            for (var j = 0; 0 <= textLength ? j < textLength : j > textLength; 0 <= textLength ? j++ : j--) {
                if (window.CP.shouldStopExecution(3)) {
                    break;
                }
                results.push(j);
            }
            window.CP.exitedLoop(3);
            return results;
        }.apply(this).sort(this.shuffle);
        output = [];
        for (i = k = 0, ref = textLength; 0 <= ref ? k < ref : k > ref; i = 0 <= ref ? ++k : --k) {
            if (window.CP.shouldStopExecution(4)) {
                break;
            }
            glitchIndex = Math.floor(Math.random() * (glitchLength - 1));
            glitchCharacter = glitches[glitchIndex];
            ghostCharacter = ghosts[i] || settings.blank;
            addGlitch = Math.random() < glitchProbability;
            character = addGlitch ? glitchCharacter : ghostCharacter;
            output.push(character);
        }
        window.CP.exitedLoop(4);
        object = { value: 0 };
        target = { value: 1 };
        parameters = {
            duration: settings.duration,
            ease: settings.ease,
            step: function () {
                var index, l, progress, ref1;
                progress = Math.floor(object.value * (textLength - 1));
                for (i = l = 0, ref1 = progress; 0 <= ref1 ? l <= ref1 : l >= ref1; i = 0 <= ref1 ? ++l : --l) {
                    if (window.CP.shouldStopExecution(5)) {
                        break;
                    }
                    index = order[i];
                    output[index] = textCharacters[index];
                }
                window.CP.exitedLoop(5);
                return $element.html(output.join(''));
            },
            complete: function () {
                return $element.html(text);
            }
        };
        return $(object).delay(settings.delay).animate(target, parameters);
    };
    animate = function () {
        var data, element, index, j, len, options;
        for (index = j = 0, len = MESSAGES.length; j < len; index = ++j) {
            if (window.CP.shouldStopExecution(6)) {
                break;
            }
            data = MESSAGES[index];
            element = $paragraph.get(index);
            element.innerText = '';
            options = { delay: data.delay };
            scramble(element, data.text, options);
        }
        window.CP.exitedLoop(6);
    };
    initialise = function () {
        var index, j, len, text;
        $animate.click(animate);
        for (index = j = 0, len = MESSAGES.length; j < len; index = ++j) {
            if (window.CP.shouldStopExecution(7)) {
                break;
            }
            text = MESSAGES[index];
            $message.append('<p>');
        }
        window.CP.exitedLoop(7);
        $paragraph = $container.find('p');
        animate();
    };
    initialise();
}.call(this));

Which does not work. Why? I don't understand why one file works, yet the other doesn't...

Upvotes: 4

Views: 6220

Answers (4)

noodlejutsu
noodlejutsu

Reputation: 852

So I had a buddy of mine running into the same issue but he wanted to use window.CP.shouldStopExecution. So I inspected codepen's javascript files and found the file where it comes from.

You can save the contents below to a js file and then import it into your javascript script. The window.CP function subset should completely work after that.

"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(o){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(JSON.stringify(o),"*")}else this._throwAnErrorToStopPen()}catch(o){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact [email protected]."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang\S+:(\d+):\d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;var i=t-this._loopTimers[o];if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){var t=window.CP.PenTimer.shouldStopLoop(o);return t===!0&&console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"),t},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};

Upvotes: 4

Uzi
Uzi

Reputation: 81

Your script.js doesn't work because window.CP is undefined. window.CP is part of CodePen to prevent infinite loops from hanging your tab or browser.

Take the original coffee script (not the compiled one) from http://codepen.io/wagerfield/pen/wftcE and convert it to javascript using http://js2.coffee, and use that as your script.js

Here is the converted javascript (use it as your script.js):

var $animate, $container, $message, $paragraph, MESSAGES, animate, initialise, scramble;

MESSAGES = [];

MESSAGES.push({
  delay: 0,
  text: "Incoming transmission..."
});

MESSAGES.push({
  delay: 1200,
  text: "You don't talk to anybody."
});

MESSAGES.push({
  delay: 2200,
  text: "You don't interact with anybody."
});

MESSAGES.push({
  delay: 3600,
  text: "Your whole sense of reality is, pretty warped..."
});

MESSAGES.push({
  delay: 5200,
  text: "Does it bother you that we're not real?"
});

$container = $("#container");

$message = $("#message");

$animate = $("#animate");

$paragraph = null;

scramble = function(element, text, options) {
  var $element, addGlitch, character, defaults, ghostCharacter, ghostCharacters, ghostLength, ghostText, ghosts, glitchCharacter, glitchCharacters, glitchIndex, glitchLength, glitchProbability, glitchText, glitches, i, j, k, letter, object, order, output, parameters, ref, results, settings, shuffle, target, textCharacters, textLength, wrap;
  defaults = {
    probability: 0.2,
    glitches: '-|/\\',
    blank: '',
    duration: text.length * 40,
    ease: 'easeInOutQuad',
    delay: 0.0
  };
  $element = $(element);
  settings = $.extend(defaults, options);
  shuffle = function() {
    if (Math.random() < 0.5) {
      return 1;
    } else {
      return -1;
    }
  };
  wrap = function(text, classes) {
    return "<span class=\"" + classes + "\">" + text + "</span>";
  };
  glitchText = settings.glitches;
  glitchCharacters = glitchText.split('');
  glitchLength = glitchCharacters.length;
  glitchProbability = settings.probability;
  glitches = (function() {
    var j, len, results;
    results = [];
    for (j = 0, len = glitchCharacters.length; j < len; j++) {
      letter = glitchCharacters[j];
      results.push(wrap(letter, 'glitch'));
    }
    return results;
  })();
  ghostText = $element.text();
  ghostCharacters = ghostText.split('');
  ghostLength = ghostCharacters.length;
  ghosts = (function() {
    var j, len, results;
    results = [];
    for (j = 0, len = ghostCharacters.length; j < len; j++) {
      letter = ghostCharacters[j];
      results.push(wrap(letter, 'ghost'));
    }
    return results;
  })();
  textCharacters = text.split('');
  textLength = textCharacters.length;
  order = (function() {
    results = [];
    for (var j = 0; 0 <= textLength ? j < textLength : j > textLength; 0 <= textLength ? j++ : j--){ results.push(j); }
    return results;
  }).apply(this).sort(this.shuffle);
  output = [];
  for (i = k = 0, ref = textLength; 0 <= ref ? k < ref : k > ref; i = 0 <= ref ? ++k : --k) {
    glitchIndex = Math.floor(Math.random() * (glitchLength - 1));
    glitchCharacter = glitches[glitchIndex];
    ghostCharacter = ghosts[i] || settings.blank;
    addGlitch = Math.random() < glitchProbability;
    character = addGlitch ? glitchCharacter : ghostCharacter;
    output.push(character);
  }
  object = {
    value: 0
  };
  target = {
    value: 1
  };
  parameters = {
    duration: settings.duration,
    ease: settings.ease,
    step: function() {
      var index, l, progress, ref1;
      progress = Math.floor(object.value * (textLength - 1));
      for (i = l = 0, ref1 = progress; 0 <= ref1 ? l <= ref1 : l >= ref1; i = 0 <= ref1 ? ++l : --l) {
        index = order[i];
        output[index] = textCharacters[index];
      }
      return $element.html(output.join(''));
    },
    complete: function() {
      return $element.html(text);
    }
  };
  return $(object).delay(settings.delay).animate(target, parameters);
};

animate = function() {
  var data, element, index, j, len, options;
  for (index = j = 0, len = MESSAGES.length; j < len; index = ++j) {
    data = MESSAGES[index];
    element = $paragraph.get(index);
    element.innerText = '';
    options = {
      delay: data.delay
    };
    scramble(element, data.text, options);
  }
};

initialise = function() {
  var index, j, len, text;
  $animate.click(animate);
  for (index = j = 0, len = MESSAGES.length; j < len; index = ++j) {
    text = MESSAGES[index];
    $message.append("<p>");
  }
  $paragraph = $container.find("p");
  animate();
};

initialise();

// ---
// generated by coffee-script 1.9.2

Upvotes: 8

Nirav Patel
Nirav Patel

Reputation: 520

First of all check out in browser with Inspect Element(F12) -> Network or console which path you are getting for script.js . Use ~ for set path. ~ will set root of your folder structure.

<script type="text/javascript" src="~/Set folder name from Root/script.js"></script>

if your file is place in Assets -> Script folder then your path will be "~/Assets/Script/script.js"

<script type="text/javascript" src="~/Assets/Script/script.js"></script>

Upvotes: 0

kwingkwingko
kwingkwingko

Reputation: 801

Make it sure that the file path is correct.

Base in your code you include your javascript file like this:

<script type="text/javascript" src="script.js"></script>

So make it sure that your file index.html and script.js is in the same folder.

if it's not, try to include your javascript file like this:

<script type="text/javascript" src="../script.js"></script>

I hope this will help.

Upvotes: 0

Related Questions