I'm having 2 issues (see http://jsbin.com/umixuf/10/edit)
1) Hover works fine on the endpoints, but my connector won't accept colors on hover. Any thoughts? (See Source1 and Target1 in jsbin)
2) After I declare the endpoints and connect them the anchor point seems to be off. (See Source2 and Target2 in jsbin)
Thanks!
Solution to part 1:
The author of jsplumb suggested I use the following:
connectorHoverStyle: { strokeStyle:"red" }
Solution to part 2:
This was my html to begin:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"> </script>
<script src="http://stage-preview.gage.com/Creative/Microsoft/EZCourseDemo/scripts/jquery.jsPlumb-1.3.16-all-min.js"> </script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
.........
</body>
</html>
Once I removed
<!DOCTYPE html>
the endpoints went back into their proper locations. Not sure if this is a jsbin issue or one of jsplumb, but either way don't leave that tag inside your HTML if you're using jsbin.
The following image is the before/after of removing that tag. Note how the placement of the endpoint on Target2 (which supposed to be TopCenter) is offset a bit.
Related
I want to build a live Pythonn compiler similar to those at w3schools for Python, for some examples on my blog. I tried different approaches, and would like to hear different oppinions, but as of yesterday I'm trying to implement it using PyScript.
The documentation I found for PyScript doesn't help me a lot, as it seems like I can't understand it, or doing something wrong.
Here's the code that I'm trying to implement:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Writing to the page</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<textarea id="area1" rows="15">something</textarea>
<button onclick="myFunction()">Click me</button>
<py-script id="demo">
print("Hello, world!")
</py-script>
<py-terminal></py-terminal>
<script>
function myFunction() {
var text1 = document.getElementById('area1').value;
document.getElementById("demo").innerHTML = text1;
}
</script>
</body>
</html>
It just prints the content of the textarea above the terminal, without executing the code and printing the output, inside the terminal, as I imagined.
I'm expecting to make this functinal, and I tried a few things, but unsuccessfully.
I also tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Writing to the page</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<textarea id="area1" rows="15">print("something")</textarea>
<script>
let text1 = document.getElementById('area1').value;
</script>
<py-script>
def print_to_page(x):
exec(x)
</py-script>
<button py-click="print_to_page(text1)" id="print">Run!</button>
</body>
</html>
But I'm not sure how to pass the variable from JS to PyScript.
This 'Answer' is meant to help in addressing:
"I tried different approaches, and would like to hear different oppinions [sic],"
You may want to check out this post:
https://twitter.com/jtpio/status/1523660682708668416 May 2022
"The #SymPy Online Shell is now powered by the #pyodide stack and JupyterLiteš”
You can try the latest SymPy release directly in your browser, without installing anything, by visiting the following URL:
https://sympy.org/en/shell.html
Many thanks to Ivan Savov for leading this effort!"
Something like that may integrate well with your blog. You can hack around on it and hopefully put together what you need combined with that example and the documentation.
Related resources:
'Embedding the REPL on another website' section in the JupyterLite documentation
Embedding Jupyter Everywhere - Easily embed a console, a notebook, or a fully-fledged IDE on any web page.
Alternative approaches:
JupyterBook and MyST-NB seems to be moving along this route. For example see the Render option the left side there.
I'm not sure all the pieces are together but you can imagine with the JupyterLite/pyodide stuff it soon will be set for blogs.) Quarto may be heading that way, too.
See also Make Jupyter notebook executable in html format
Based on your description and the second example, it looks like you want to have a textarea where the user types in Python code, and run button that executes that entered code when clicked. If I've misunderstood your goal, you can disregard this answer.
The way to bring JavaScript objects/variables into Python is using Pyodide's import js syntax, which treats the JavaScript global namespace like a Python module. Here's a version very similar to your second example, which imports JavaScript's document object and uses that to extract the value of the textarea:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Writing to the page</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<textarea id="area1" rows="15">print("something")</textarea>
<py-script>
from js import document
def runTextInTag(id):
src = document.getElementById(id).value
exec(src)
</py-script>
<button py-click="runTextInTag('area1')" id="run">Run!</button>
</body>
To address your first example, which changes the innerHTML of the py-script tag itself: A <py-script> tag executes its contained code exactly once, when the custom element is attached to the DOM. This happens shortly after PyScript initializes and the custom HTML element <py-script> is defined, or when you add an additional <py-script> tag to the page.So, in your first example, setting the innerHTML/innerTEXT of a <py-script> tag does not cause that code to be executed again.
You could create a new <py-script> tag with the appropriate innerText and add it to the DOM, at which point its code would be executed, but I think the above method is cleaner for most purposes.
I'm following a tutorial that is trying to teach me how to setup a basic THREE.js scene and add animation keyframes that are triggered when scrolling. Inside of fiddle, i understand the way keyframes work and was able to get a result i liked. I tried to recreate the fiddle on my own website, but this error keeps getting thrown.
I checked other questions/answers that are similar to this but couldn't find a fix.
On line 17 of my 'index.js' I get an "Uncaught TypeError: Cannot read property: 'clientHeight' of null"
HTML showing div 'container':
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class='webgl'></div>
<div class='container'></div>
<span></span>
</body>
</html>
Line 17, where clientHeight throws an error
var maxHeight = (divContainer.clientHeight || divContainer.offsetHeight) - window.innerHeight
Here is a working JS Fiddle that i'm trying to use as a starting point for my own project.
Here is the original tutorial i was working from.
EDIT: Full index.js & Full index.html
In this instance, to fix the problem you can simply move the index.js file to right above the closing </body> tag.
The code inside index.js isn't waiting for the document to finishing loading before trying to reference the div which doesn't exist at time of execution. Hence the error.
There's a few different ways to fix this, defer script loading, running your JS logic inside a document ready type function to name a few. It's worth reading up on if you have the time :)
I am evaluating GrapesJS. I installed it like described here and added the module "blocks basic" and installed it like described here. (Simple basic installation.)
On a very simple, empty HTML5 page, I wanted to try things out:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/grapes.min.css">
</head>
<body>
<div id="gjs"></div>
</body>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="dist/grapes.min.js"></script>
<script src="node_modules/grapesjs-blocks-basic/dist/grapesjs-blocks-basic.min.js"></script>
<script type="text/javascript">
var editor = grapesjs.init({
fromElement: 1,
container : '#gjs',
// components: '',
style: '.txt-red{color: red}',
plugins: ['gjs-blocks-basic']
});
</script>
</html>
Everything is working great, but I cannot add any column block. When I drag on the one/two/three columns-elements on the editor, absolutely nothing happens. There is no error on the browser's console. Everything else works fine.
So I guess, I am missing some sort of configuration flag or so?
(Posted on behalf of the OP).
The code above works fine, it was an issue with my local development environment. After uploading this sample to http://brokenlande.de/grapesjs/ to share it with the lead developer on GitHub, the code works perfectly fine.
So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??
So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??