Develop Reference

htmx: Load JS lib and execute function?

I do update a html fragment via htmx.
How to load a JS library which is needed for this new snippet?
How to execute a function after the snippet got loaded?
Example:
I want to show an joyful animation (confetti) after the html snippet got added to the page.
This means the browser needs to load this:
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti#1.4.0/dist/confetti.browser.min.js"></script>
After loading above lib a JS function needs to get executed.
How to do this with htmx?

I found a solution. I guess it could get improved. Please leave a comment if you know a simpler way.
// lala.js
// this file gets loaded in the page (before the hx-post call)
function loadScript(url, callback) {
// https://stackoverflow.com/a/950146/633961
// Adding the script tag to the head as suggested before
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
};
document.body.addEventListener("confetti", function(evt){
var target = document.getElementsByClassName('htmx-settling')[0];
loadScript('https://cdn.jsdelivr.net/npm/canvas-confetti#1.4.0/dist/confetti.browser.min.js',
function () {
var myCanvas = document.createElement('canvas');
var rect = target.getBoundingClientRect();
myCanvas.setAttribute('style', 'position: absolute; top:' +
rect.top + 'px; left:' + rect.left + 'px');
target.appendChild(myCanvas);
var myConfetti = confetti.create(myCanvas, {
resize: true,
useWorker: true
});
myConfetti({
particleCount: 100,
spread: 160
// any other options from the global
// confetti function
})
})
})
On the server side I return the response like this (Django):
def confetti_hx(request):
...
response = HttpResponse(html)
response['HX-Trigger-After-Swap'] = 'confetti'
return response

Right now there is no way to load a new library on a page built in to htmx (this is a necessary feature IMO, please log an issue for it) so the confetti library should be included initially as part of your main site.
After you have included the external library in the main website, you can include a normal script tag that executes the confetti code necessary inline:
<script>
var myCanvas = document.createElement('canvas');
document.appendChild(myCanvas);
var myConfetti = confetti.create(myCanvas, {
resize: true,
useWorker: true
});
myConfetti({
particleCount: 100,
spread: 160
// any other options from the global
// confetti function
});
</script>

What I've been doing is use some Hyperscript to do something like this:
<script
src="https://cdn.jsdelivr.net/npm/canvas-confetti#1.4.0/dist/confetti.browser.min.js"
_="
on load
js
<enter code here>
end
end
"
></script>

postMessage function not working with window.onload?

OK, so here's the setup. I have an expandable banner that swaps out the HTML of the smaller initial banner to the larger expanding banner. (In this test it expands from 160px wide to 600px wide.) I also have the second HTML page jump to a specific scene in my exported Tumult Hype (An HTML 5 animation program) files.
The function
"postToHype()"
uses postMessage to pass off to the second HTML document HypeExample to tell it to open to the second scene of the document. So in theory, what happens is the ad not only expands and loads the second HTML document, but it also then jumps to the second scene in that document.
This is working for me; it triggers the "postToHype()" function when I mouseover the ad. This also works when I tested using a button which also triggers the
"combine()"
function. The "combine()" function ALSO triggers the function
"autoExpand()"
which opens the ad for 7 seconds and then closes it again.
What I can't get to work is having window.onload call the "combine();" function. When window.onload fires "combine()" , "autoExpand()" works but "postToHype()" does not. Why does the button click and onmouseover work with my "postToHype()" function, but "window.onload" does not?
Not all of the code is shown here (such as the linked .js libraries) but I tried to include the most pertinent bits. Any and all ideas are greatly appreciated.
<head>
<script type="text/javascript">
var exampleHTMLToPage = ExpandableBanners.banner("exampleHTMLToPage", "HypeExample.html", 600, 600);
exampleHTMLToPage.setCloseImage("images/close.png", 'right', 'bottom');
exampleHTMLToPage.animated = true;
exampleHTMLToPage.setDirection('down', 'right');
animated = true;
exampleHTMLToPage.expandOnClick = false;
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;
});}
else if (!window.onload) window.onload = function(){documentReady=true;}
</script>
<script type="text/javascript">
function autoExpand() {
setTimeout("ExpandableBanners.openAd('exampleHTMLToPage')",0000);
setTimeout("ExpandableBanners.closeAd('exampleHTMLToPage')",7000);
}
</script>
<script> function combine() {
autoExpand();
postToHype();
} </script>
<script>
function postToHype(){
document.getElementById('exampleHTMLToPage_expanded_media').contentWindow.postMessage(['start', 'Scene2'], '*')
}
</script>
</head>
<body>
<div onmouseover="postToHype()" id="exampleHTMLToPage" style="width:150px; height:600px; background-color:rgb(30,167,221); position:relative; color:white; font-weight:bold">
<div style="display:inline-block;
width:140px; font-size:22px; margin-top:20px; margin-left:5px; margin-right:5px;">This is an HTML banner RK V7. Click to see exported HYPE interactive that loaded inside.</div>
</div>
<button onclick="combine();">Click me</button>
</body>
<script>
window.onload = function(){
combine();
};</script>

Change it lite this:
<script type="text/javascript">
function autoExpand() {
setTimeout("ExpandableBanners.openAd('exampleHTMLToPage')",0000);
setTimeout("ExpandableBanners.closeAd('exampleHTMLToPage')",7000);
}
function postToHype(){
document.getElementById('exampleHTMLToPage_expanded_media').contentWindow.postMessage(['start', 'Scene2'], '*')
}
function combine() {
autoExpand();
postToHype();
}
</script>
You need to defining the function postToHype() before you are calling it. And it is better to just use one script tag and write all your code in it.

While Removing div using javascript, the backgroundimage stayed

I am having a problem with the background-image inside a div.
I am trying to program a html-webgame, using mainly canvas. So as a result, my index looks like this.
<head>
<title>Cardgame</title>
<link rel="stylesheet" type="text/css" href="resoursces/css/index.css">
</head>
<body>
<div class='game_object' id='game_object'>
<canvas class='main_canvas' id='main_canvas'>Error</canvas>
</div>
<script type="text/javascript" src='main.js'></script>
</body>
The problem comes along like this:
window.onload = (function() {
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
drawing();
} resizeCanvas();
})();
in the function "drawing()" i am doing 2 things.
The first one is to remove all divs, i have created so far,
and the second is the i am drawing all div's new with new x-coordinate, y-coordinat, hight and width. So it looks like this
function drawing() {
delete_div();
create_div();
}
function delete_div() {
battlefield_div.style.removeAttribute("backgroundImage", false);
battlefield_div.parentNode.removeChild(battlefield_div);
}
funtciont create_div() {
var board_div= document.createElement("div");
board_div.setAttribute("id", "board");
board_div.style.position = 'absolute';
board_div.style.top = board.y1+"px";
board_div.style.left = board.x2+"px";
board_div.style.height = board.y2 - board.y1+"px";
board_div.style.width = board.x1 - board.x2+"px";
board_div.style.zIndex = '2';
board_div.style.backgroundImage="url(resoursces/images/board.png)";
board_div.style.backgroundSize = "100% 100%";
game_object.appendChild(board_div);
}
This game is a cardgame and i wanted to make it to resize when ever you change the height and the width of the browser without loosing its function. The divs i am creating are part of the functionality.
Everything works fine with it, except one thing: Whenever you resice the browser, the divs are getting remove and new ones are calculated but the background-images is still there. So when you resized your browser like 4 times, you are just seeing the background-images.
What am i doing wrong?
Can anyone help me?

Javascript Code works in jsfiddle and but not in the Browser [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have tried searching similar problems but have not been able to find the reason why my code works in jfiddle but not in a browser. I have also tried making a copy of my code from jfiddle to another fiddle project and the code doesn't work in the new project. You can find my project here. I am making a interactive food game where someone picks a food item, example acorn squash and then the user can drag that image around.
My first attempt was pasting the code within the head.
<script language="JavaScript">
code
</script>
Do I need an onpage load event? Does the javascript need to be put in a function? Am I using something from the jfiddle framework thats not being used on my local host that I need to call?
Below is the code I am using without the extra food options
var stage, layer;
var sources = {
plate: 'http://www.healncure.com/wp-content/uploads/2014/03/plate1.jpg',
acornsquash: 'http://www.healncure.com/wp-content/uploads/2014/03/acorn-squash.png',
};
loadImages(sources, initStage);
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function () {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images) {
stage = new Kinetic.Stage({
container: 'container',
width: 936,
height: 550
});
layer = new Kinetic.Layer();
stage.add(layer);
// plate
var plateImg = new Kinetic.Image({
image: images.plate,
x: 218,
y: 20,
width: 503,
hei4ht: 502,
draggable: false,
visible: true
});
layer.add(plateImg);
// acornsquash
var acornsquashImg = new Kinetic.Image({
id: "acornsquash",
image: images.acornsquash,
x: 50,
y: 20,
width: 134,
height: 114,
draggable: true,
stroke: 'orange',
strokeWidth: 5,
strokeEnabled: false,
visible: false
});
layer.add(acornsquashImg);
layer.draw();
$(".food").click(function () {
var node = stage.find("#" + $(this).attr("id"));
node.show();
layer.draw();
console.log($(this).attr("id"));
});
document.getElementById('hide').addEventListener('click', function () {
acornsquashImg.hide();
layer.draw();
}, false);
}

The usual reason for this is that you're putting your code above the elements that it operates on, and not delaying the code using onload or "ready" events. jsFiddle's default is to put your JavaScript in an onload handler, which delays it until very late in the page load process.
Fundamentally, before your code can do something with an element on the page, the element has to exist. For it to exist, the browser must have processed the HTML for it. So this fails:
<html>
<head>
<script>
// FAILS
document.getElementById("foo").style.color = "green";
</script>
</head>
<body>
<div id="foo">This is foo</div>
</body>
</html>
but this works:
<html>
<head>
</head>
<body>
<div id="foo">This is foo</div>
<script>
// Works
document.getElementById("foo").style.color = "green";
</script>
</body>
</html>
Do I need an onpage load event?
Almost certainly not.
Does the javascript need to be put in a function?
Not necessarily. What you do is put the script tag at the very end of the HTML, just before the closing </body> tag.

Include jQuery library in the head section of your document
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
then wrap your custom scripts between script tags and document ready function
<script>
$(function() {
...your custom scripts...
});
</script>
just before the </body> tag.

Getting IE8 compatibility with EaselJS and ExplorerCanvas

I am using EaselJS and want to allow for backwards compatibility with ExplorerCanvas.
This should be possible using the following code (see here):
createjs.createCanvas = function () { ... return canvas implementation here ... }
However, If I put an alert in this function and run the code, the function is never run.
How do I go about getting this to work?
Edit:
Here is a simplified example of the code I am using:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script src='/Scripts/jquery-1.7.1.js'></script>
<script src="/Scripts/excanvas/excanvas.compiled.js"></script>
<script src="/Scripts/easeljs/lib/easeljs-0.5.0.min.js"></script>
<script src='/Scripts/core/jquery.mousewheel.js'></script>
<style>
canvas
{
border: 1px solid #ccc;
}
</style>
<script type='text/javascript'>
$(document).ready(function () {
// Variables
var img;
var stage;
var bmp;
// Bindings
$('#load').click(function () { initialize() }); // DELETE
// Functions
function initialize() {
img = new Image();
img.onload = imageLoadedEvent;
img.src = '/Scripts/viewer/June.jpg';
}
function imageLoadedEvent() {
var canvasElement = generateContext('testCanvas', 400, 400);
stage = new createjs.Stage('testCanvas');
bmp = new createjs.Bitmap(img);
stage.autoClear = true;
stage.addChild(bmp);
stage.update();
}
function generateContext(canvasID, width, height) {
var canvasElement = document.createElement('canvas');
if (typeof (G_vmlCanvasManager) != 'undefined')
canvasElement = G_vmlCanvasManager.initElement(canvasElement);
canvasElement.setAttribute("width", width);
canvasElement.setAttribute("height", height);
canvasElement.setAttribute("id", canvasID);
document.getElementById('viewer').appendChild(canvasElement);
}
});
</script>
</head>
<body>
<div id='viewer'>
<button id='load'>load</button>
</div>
</body>
</html>
This example will run in Chrome and IE9 as a native canvas element is created and used. However in IE8 it fails.

I ran across this issue as well, trying to get ExCanvas to play nice with EaselJS. Here is how I got it working. Hope this helps with your image issue.
Get the source code for EaselJS : https://github.com/gskinner/EaselJS.git. This will get all the javascript files separated out into their own parts.
Copy all those files over to a "easel" folder in your project directory.
The order in which the files are loaded is important, so see below on how to do it.
EaselJS has an option to override the createCanvas method, which is required to use ExCanvas with it. This happens after loading the SpriteSheet.js file, and BEFORE loading Graphics.js, DisplayObject.js, Container.js, etc. In the code below, I used jQuery to load the rest of the js files that easelJs needed. This all happens in the $(document).ready() function.
If done correctly, you should see a 700 x 700 canvas with a red line from top left to bottom right in IE (tested in 8).
head>
<!--
Load ExCanvas first, and jquery
-->
<script type='text/javascript' src='./javascript/excanvas.js'></script>
<script type='text/javascript' src='./javascript/jquery-1.8.2.min.js'></script>
<!--
Have to load Easel js files in a certain order, and override the createCanvas
function in order for it to work in < IE9.
-->
<script type='text/javascript' src='./javascript/easel/UID.js'></script>
<script type='text/javascript' src='./javascript/easel/Ticker.js'></script>
<script type='text/javascript' src='./javascript/easel/EventDispatcher.js'></script>
<script type='text/javascript' src='./javascript/easel/MouseEvent.js'></script>
<script type='text/javascript' src='./javascript/easel/Matrix2D.js'></script>
<script type='text/javascript' src='./javascript/easel/Point.js'></script>
<script type='text/javascript' src='./javascript/easel/Rectangle.js'></script>
<script type='text/javascript' src='./javascript/easel/Shadow.js'></script>
<script type='text/javascript' src='./javascript/easel/SpriteSheet.js'></script>
<script type='text/javascript'>
var canvas, stage;
createjs.createCanvas = function () { return getCanvas(); };
function getCanvas() {
// This is needed, otherwise it will keep adding canvases, but it only use the last one it creates.
canvas = document.getElementById("myCanvas");
if (canvas != null) {
document.getElementById("container").removeChild(canvas);
}
canvas = document.createElement("canvas");
document.getElementById("container").appendChild(canvas);
if (typeof (G_vmlCanvasManager) != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
canvas.setAttribute("height", "700");
canvas.setAttribute("width", "700");
canvas.setAttribute("style", "height:700px; width:700px;");
canvas.setAttribute("id", "myCanvas");
}
return canvas;
}
</script>
<script type="text/javascript">
$(document).ready(function () {
loadOtherScripts();
stage = new createjs.Stage(canvas);
// Draw a red line from top left to bottom right
var line = new createjs.Shape();
line.graphics.clear();
line.graphics.setStrokeStyle(2);
line.graphics.beginStroke("#FF0000");
line.graphics.moveTo(0, 0);
line.graphics.lineTo(700, 700);
stage.addChild(line);
stage.update();
});
function loadOtherScripts() {
var jsAr = new Array(13);
jsAr[0] = './javascript/easel/Graphics.js';
jsAr[1] = './javascript/easel/DisplayObject.js';
jsAr[2] = './javascript/easel/Container.js';
jsAr[3] = './javascript/easel/Stage.js';
jsAr[4] = './javascript/easel/Bitmap.js';
jsAr[5] = './javascript/easel/BitmapAnimation.js';
jsAr[6] = './javascript/easel/Shape.js';
jsAr[7] = './javascript/easel/Text.js';
jsAr[8] = './javascript/easel/SpriteSheetUtils.js';
jsAr[9] = './javascript/easel/SpriteSheetBuilder.js';
jsAr[10] = './javascript/easel/DOMElement.js';
jsAr[11] = './javascript/easel/Filter.js';
jsAr[12] = './javascript/easel/Touch.js';
for (var i = 0; i < jsAr.length; i++) {
var js = jsAr[i];
$.ajax({
async: false,
type: "GET",
url: js,
data: null,
dataType: 'script'
});
}
}
</head>
<body>
<div id="container"></div>
</body>
</html>

You should instantiate the quasi canvas element by making reference to the original canvas source as provided on the project page example:
<head>
<!--[if lt IE 9]><script src="excanvas.js"></script><![endif]-->
</head>
var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');
EDIT:
After further investigation i came to the following conclusions!
There are multiple reasons for not being able to include the image into the canvas:
1st probably there is a bug in the excanvas code for not being able to mimic the native canvas features. I used with more success the modified sancha code, which you can obtain here: http://dev.sencha.com/playpen/tm/excanvas-patch/excanvas-modified.js. See live example here: http://jsfiddle.net/aDHKm/ (try it on IE).
2nd before Easeljs initialize the core objects and classes first is searching for the canvas element existence. Because IE < 9 doesn't have implemented the canvas it's obvious that easeljs core graphics API's can not be instantiated. I think these are the two main reasons that your code is not working.
My suggestion is to try to remake the code without the easeljs. I made a fiddle with the necessary modification to show you how can be done without easeljs: http://jsfiddle.net/xdXrw/. I don't know if it's absolute imperative for you to use easeljs, but certainly it has some limitations in terms of IE8 hacked canvas.