How to insert JS file and HTML5 inside wordpress

  • Resolved yayaew

    (@yayaew)


    9 years, 8 months ago

    I coverted Flash file into HTML5 and JS file in one folder. Then download and installed “Specific CSS/JS for Posts and Pages” Plug in inside my wordpress.
    Now I got two text fields in the “Specific CSS/JS for Posts and Pages” to fill in. I am confused.
    -which folder should I copy my js file into….. That related with what I should fill in” URL for JS”
    – what should I copy into the ” Write here custom CSS or Javascript…” text field:. Is it the everything in between the <header> </header> from the HTML5 file?
    I am using my local computer for the testing sever.

Viewing 9 replies - 16 through 24 (of 24 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Instead of this:

    <script>
var canvas, stage, exportRoot;

function init() {
createjs.MotionGuidePlugin.install();

canvas = document.getElementById("canvas");
exportRoot = new lib.bouncing_ball();

stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();

createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
}
</script>

    Try this:

    <script>
var canvas, stage, exportRoot;

function init() {
    jQuery(document).ready(function() {
        createjs.MotionGuidePlugin.install();

        canvas = document.getElementById("canvas");
        exportRoot = new lib.bouncing_ball();

        stage = new createjs.Stage(canvas);
        stage.addChild(exportRoot);
        stage.update();

        createjs.Ticker.setFPS(24);
        createjs.Ticker.addEventListener("tick", stage);
    }
}
</script>

    Thread Starter yayaew

    (@yayaew)

    Thank , i did…. but still nothing show.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    My bad, replace it with this instead:

    <script>
var canvas, stage, exportRoot;

function init() {
    jQuery(document).ready(function() {
        createjs.MotionGuidePlugin.install();

        canvas = document.getElementById("canvas");
        exportRoot = new lib.bouncing_ball();

        stage = new createjs.Stage(canvas);
        stage.addChild(exportRoot);
        stage.update();

        createjs.Ticker.setFPS(24);
        createjs.Ticker.addEventListener("tick", stage);
    });
}
</script>

    Thread Starter yayaew

    (@yayaew)

    so sorry, still not showing

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    No worries, try this instead:

    function init() {
    createjs.MotionGuidePlugin.install();

    canvas = document.getElementById("canvas");
    exportRoot = new lib.bouncing_ball();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(24);
    createjs.Ticker.addEventListener("tick", stage);
}

jQuery(document).ready(function() {
    init();
});
</script>

    Thread Starter yayaew

    (@yayaew)

    It works!!! Thank you a million. I really appreciate.
    Is this script works for all the similar html5 and JS cover from flash?
    ….Just change “bouncing_ball” into other name?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t think so, it sounds like you’re going to run into the same sorts of problems with the code that was given to you.

    If you haven’t already, look into using a Child Theme to make your theme modifications; https://codex.www.ads-software.com/Child_Themes

    Thread Starter yayaew

    (@yayaew)

    Thank you. That is a huge help. If I want to the ball animation be showing on top of the word”ball”, should I add some CSS code on this page?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Could you open a new thread for that: https://www.ads-software.com/support/theme/twentytwelve#postform

Viewing 9 replies - 16 through 24 (of 24 total)
  • The topic ‘How to insert JS file and HTML5 inside wordpress’ is closed to new replies.