Moving JS generated CANVAS inside DIV (canvas-sketch) - javascript

i'm experimenting a bit with creative coding and creating visuals with javascript. And put them on a website. It's using canvas-sketch (https://github.com/mattdesl/canvas-sketch), comparable to Processing or p5.js.
The problem i'm facing:
It generates automatically a canvas div inside a "main" div, so i can't really control it by placing it inside parent divs. Is there a way to do that? Thanks in advance.
Similar solution for p5.js: https://github.com/processing/p5.js/wiki/Positioning-your-canvas#relocating-the-canvas
<html>
<body>
<script src="p5.js"></script>
</body>
</html>
Online example: https://jellekok.com/vonk/p5/p5b.html
JS file: https://jellekok.com/vonk/p5/p5.js (made with canvas-sketch)

Related

How to get inline svg from an external svg file with D3 v6?

I've just lost my whole morning to what should have been a very basic and straightforward task. Sorry if the solution to this problem is obvious to you, I'm beginning on D3.js and Javascript.
I'm looking to load, in D3, an external svg file, and have it as an inline svg to do further operations, not as a static image, and working on local files. I don't understand how there couldn't be a way to do such a simple and basic thing. I've tried anything I could:
Using this library: https://github.com/iconfu/svg-inject . This library promises to do the exact thing I want to do. However their basic examples (Basic usage section) give me static images, and not inline svg as promised (with Firefox 98.0), so I can't use it.
I tried the example here: http://www.zevross.com/blog/2019/08/20/load-external-svgs-with-d3-v5/ (section "Get the XML data / Load one illustration, one time") with a local svg, it just renders a blank window; "Inspect Element" shows nothing was loaded
Solutions such as the accepted one on this post (How to access SVG elements with Javascript) are not helpful either, as not working on local files
A call to d3.xml (https://bl.ocks.org/mbostock/1014829) proved to be completely useless too, as it doesn't render anything :
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
d3.xml('nameOfMysvgFile.svg')
.then(data => {
document.body.append(data.documentElement)
})
</script>
</body>
</html>
So far the best I achieved was to load my svg as an object (as done here: http://dahlström.net/svg/html/get-embedded-svg-document-script.html), and then I'm stuck, as I can't do any operation in Javascript on that object. How to transfer the contents of the object to inline svg? Or how to take out that #document "wrapping" that prevents from doing anything on the svg? Or even better, add the contents to an existing svg container (mySvgContainer.append("g").[magic command to add the contents of external svg file])?

How can I create an html/javascript file to play swf file of my choice?

OK, so here's the rub. I downloaded a ton of SWF games online, and I want to create my own way to use them. I want to create a directory in the main menu of my HTML file that brings me to another menu with a ton of different choices of games. I know how to play them using the embed tag, but I don't want to create 40 different HTML files for each different game. I know there's a way to click any game you want and go to one HTML page, remembering which game you clicked, and play it, I just don't know what it is. I want every game to point to one embed.html page and it play the SWF file that you clicked. Any help would be much appreciated. I'm working on a work-around to play games on our crappy school Chromebooks. I might be overlooking something really simple, but I don't care. This would be amazing to have. Thanks StackOverflow!
Changing SRC of <embed> to change file being shown
Here is something you can try. You can have a button for each game, name the button to the game. Then you can have an <embed> item with the src set to a default item. Then using the following JS: document.getElementById("game").src = "game.swf" to change the src of the item to whichever game you would like. Here is an example site I created with two random .swf files I downloaded off the the internet. There is a .swf file and when you click the button the .swf file is changed to a different file:
<html>
<head></head>
<body>
<button onclick="changeGame()">Click to change</button>
<embed id="game" src="BannerSnack-ad-336x280.swf" type="">
<script>
function changeGame() {
document.getElementById("game").src = "Car-speakers-590x90.swf"
}
</script>
</body>
</html>
You can create a function for each button and game you want to use, this should be the simplest way to do this as I assume you are new to JS. This allows you to have one page with a number of buttons and one <embed> tag to hold the game.
Edit
For your problem it looks like using something like this might help:
<button onclick="clicked()">click</button>
<script>
function clicked() {
var opened = window.open("");
opened.document.write("<html><head><title>Game</title></head><body><embed id=\"game\" src=\"game.swf\" type=\"\"></body></html>");
}
</script>
This basically uses JS to create a new web page with an embed section. You can create a new function for each game like above. Hope this is what you were looking for.
It sounds like you could either make a new tab with a variable linked to the game you click on or use something like this as a template. It uses JSON object data to load content onto an HTML doc. You can do that with links to each of your games!

Debugging iframe in Readymag

I want to embed an interactive diagram in my Readymag page via iframe, but the diagram won't show up. I performed a test in JSFiddle: https://jsfiddle.net/TheFelipeGarcia/2p3aguck/, and it works there.
First, I exported my infographic as HTML + JavaScript from Adobe Animate. Then, I used Readymag's Widget Code to add the code to my page. A side note: originally the HTML had a link to the JS file
<script src="infographic.js?1578942235513"></script>
but I pasted the JS inline (it's very long so I won't repaste here).
Does anyone have experience with Readymag or a similar issue of embedding iframes, that might have ideas what I could be doing wrong?

Embedding large portions of CSS and JS into <head> without links

So... Just so you have less reasons to call me an idiot, here's why I need this:
I'm currently working on an offline project that uses jruby. So, to generate reports on the fly, it was decided (by my superiors) to use JavaFX's WebView component - so, HTML, CSS and JS.
But here's the catch: no using file system. All the content is drawn from DB and generated on the fly. No internet either. So all the content to be loaded into the WebView is to be in a single file, however enormous.
I have an HTML page and two huge files - one js, one css. When I use <link> tag for css and <script src="..."> for js - all works. Both in a browser and if I artificially load the page into a WebView. But if should I copy-paste the files into corresponding <style> and <script> tags (as it, probably, will be handled in the program), half the things do not work. Is there a special way for doing it right?
Here are the html, css and JS I'm working with (html is filled with sample data so it can be seen if everything works):
html filecss filejavascript file
You could try and merge them. Read more about this here.

Basic Javascript Image Gallery

I'm trying to setup a very basic jQuery image gallery.
You can see my attempts here: http://training.customstudio.co.uk/portfolio/detail/ee_project_four
I've duplicated the code from another site we created, have changed all the relevant div reference, but can't for the life of me get it working.
The images seem to be loading, but the jQuery effects not working.
Hopefully one of you guys can see the problem.
Thanks in advance,
Tom Perkins
This question is beyond simple.
Check in your head tag and find this..
<script type="text/javascript" src="-/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="-/js/jquery-1.4.3.min.js"></script>
Correct them because they do not refer to actual javascript files but Html files

Categories

Resources