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 15 replies - 1 through 15 (of 24 total)

  • How many files did you ended up with? How did you converted the flash? by using some automatic service?

    Have a look at the end code get the css and js out of the final project (css needs to be inside <style></style> tags and js needs to be inside <script></script> tags after that you an add them using the mentioned plugin.

    I’m not familiar with the plugin you are using but I’ve added css, js, and php to wp by using Custom css-js-php plugin. Have a look at this one too.

    If you still have questions ask away!

    Thread Starter yayaew

    (@yayaew)

    Thank you for the reply. I used flashcc export the flash animation so I got two files, one is html5 and another one is related external JS fill in the same folder.
    I use the “Custom css-js-php ” your mention but what should I do after I copies my script fill in the text box. I open the new page but preview showed nothing…. need help

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Please link the Webpage with the issue.

    Thread Starter yayaew

    (@yayaew)

    Please see the ink below. I made a bouncing ball in flash and covert into HTML5 and JS file. Then used the plugin to upload on the post. But nothing show up.
    https://yayanyc.freehostia.com/fashion/?p=7&preview=true&preview_id=7&preview_nonce=2282b0c7c6

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    We can’t see pages that are in draft mode

    Thread Starter yayaew

    (@yayaew)

    sorry, Please check this:
    https://yayanyc.freehostia.com/fashion/?p=7

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You have to load ‘bouncing_ball.js’ after you load ‘movieclip-0.6.0.min.js’

    Thread Starter yayaew

    (@yayaew)

    I just revised based on the suggestion, but still nothing show up.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    There is no longer a JavaScript error on your page, are you absolutely sure there’s no other bit of HTML you’re supposed to be using?

    Thread Starter yayaew

    (@yayaew)

    Please find the code below is all on my html5 file. I do not know what I am missing…

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from bouncing_ball</title>

<script src="https://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="https://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="bouncing_ball.js"></script>

<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>
</head>

<body onload="init();" style="background-color:#D4D4D4">
	<canvas id="canvas" width="551" height="400" style="background-color:#996633"></canvas>
</body>
</html>

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So on that Webpage there is no canvas element:

    <canvas id="canvas" width="551" height="400" style="background-color:#996633">

    Thread Starter yayaew

    (@yayaew)

    Thank you. Need more direction, So for the quote :
    <canvas id=”canvas” width=”551″ height=”400″ style=”background-color:#996633″>
    where can I copy it into:
    wp-common-post.php or function.php???
    Sorry I am new with wordpress…..

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can put it inside the “Text” editor when you edit that page/ post.

    Thread Starter yayaew

    (@yayaew)

    I got the canvas box. but the animation-JS file does not show up… do I missing anything?

    Thread Starter yayaew

    (@yayaew)

    The following is my JS file code.
    (function (lib, img, cjs) {

    var p; // shortcut to reference prototypes

    // stage content:
    (lib.bouncing_ball = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer 1
    this.instance = new lib.secondball();
    this.instance.setTransform(-67.9,37,1,1,0,0,0,41.5,41.5);

    this.timeline.addTween(cjs.Tween.get(this.instance).to({guide:{path:[-67.8,37.2,-17.3,37.2,33.1,37.2,139.7,49.3,196,87.3,207.2,94.9,216.4,103.4,236.4,122,245.5,144.2,252,160.2,252,175.5,252,191.6,238.4,207.8,226.9,221.6,207,234,190,244.6,171.4,251.6,154.3,258,145.5,258,103,258,103,189.5,103,134.4,171.8,98.5,183,92.6,196,87.3,247.3,66.1,325.7,53.6,397.6,42.1,486.9,38.6,522,37.1,576.8,37.1]}},79).wait(1));

    // ball
    this.instance_1 = new lib.bouncingball();
    this.instance_1.setTransform(-60.9,161,1,1,0,0,0,47.5,47.5);

    this.timeline.addTween(cjs.Tween.get(this.instance_1).to({regX:0,regY:0,rotation:45,x:285,y:387},39).to({regX:47.5,regY:47.5,rotation:-59.8,x:606,y:189},40,cjs.Ease.get(0.14)).wait(1));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-109.4,-4.4,96,213);

    // symbols:
    (lib.secondball = function() {
    this.initialize();

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f(“#CC99CC”).s().p(“AkkElQh6h5AAisQAAirB6h5QB5h6CrAAQCsAAB5B6QB5B5AACrQAACsh5B5Qh5B5isAAQirAAh5h5g”);
    this.shape.setTransform(41.5,41.5);

    this.addChild(this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0,0,83,83);

    (lib.bouncingball = function() {
    this.initialize();

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f().s(“#000000”).ss(1,1,1).p(“AHbAAQAADFiMCKQiKCMjFAAQjEAAiLiMQiLiKAAjFQAAjECLiLQCLiLDEAAQDFAACKCLQCMCLAADEg”);
    this.shape.setTransform(47.5,47.5);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f(“#FFFFFF”).s().p(“AlPFPQiLiLAAjEQAAjDCLiMQCMiLDDAAQDEAACLCLQCLCMABDDQgBDEiLCLQiLCLjEABQjDgBiMiLg”);
    this.shape_1.setTransform(47.5,47.5);

    this.addChild(this.shape_1,this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0,0,95,95);

    })(lib = lib||{}, images = images||{}, createjs = createjs||{});
    var lib, images, createjs;

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