I have been trying to use the library to make material for my students.
https://glorious.codes/demo
I want to make animations, but I cannot understand how to use or where to use the library. I think it is necessary to use it from an html file. install the library but when opening the page it only creates the text that I place as a test.
I am using WebStorm as IDE, creating a node.js project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/#glorious/demo/dist/gdemo.min.css">
<script src="node_modules/#glorious/demo/dist/gdemo.min.js"></script>
</head>
<body>
</body>
</html>
Can someone guide me on what program or how to work with the library. It is the first time that I try to perform animation with JavaScript.
If you are new to web technologies, there is a pretty steep curve here. Personally, I'd take a step back and familiarize myself with the tools. If you have a minute, check out W3school's site. There is plenty of information to get you moving quickly with HTML/CSS/JS. Specifically focus on CSS selectors and Javascript and this will make a lot more sense.
Now for the question you asked:
First, NodeJS isn't necessarily required to achieve your goal. You can create a simple HTML file and reference the Glorious libraries directly from the web. See what I did in the <script> and <link> elements below.
Once you have the libraries loaded, you need to:
Instantiate the library and assign it to a variable to use in the future (see const demo = new GDemo(...))
Tell the library where in your HTML you want it to render the animation. In this case it is a <div/> with id='container'.
Tell the library what to render. This is the gDemo.openApp(...) section. I pulled this example directly from this library's GitHub page.
const gdemo = new GDemo('#container');
const code = 'console.log("Hello World!");'
gdemo
.openApp('editor', {
minHeight: '400px',
windowTitle: 'demo.js'
})
.write(code, {
onCompleteDelay: 2000
})
.openApp('terminal', {
minHeight: '400px',
promptString: '$'
})
.command('node ./demo')
.respond('Hello World!')
.command('')
.end();
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#glorious/demo/dist/gdemo.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/#glorious/demo/dist/gdemo.min.css" rel="stylesheet" />
</head>
<body>
<div id="container"></div>
</body>
</html>
Could you please detail a bit more the problem. From your example you just created an empty page. What are you trying to put in your page ? Tables ?
Also I would suggest the use of framework like Materials (https://material.io/components) within React if you are starting a Js project from scratch except if you have something specific in this lib you really want to display.
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 have homework for my programming class which requires that I work with JS classes. On top of that, I have to work with HTML and the classes have to be defined on a separate .js file. I've done all the work, and it runs ok if the classes are defined on the same .js file, but it stops working as soon as I paste the code on a different file. I've tried importing the classes on the primary file, but I could make it work (I've tried different import codes because I've found different answers to this question on Google but no one worked, that's why I'm asking here). I believe it's probably because I'm doing something wrong at importing, but I just can't find the error.
Although your code works, keeping js files at the top of the HTML will delay the load time of the page. In a simple scenario like a homework, there's no need to worry, but in large projects it becomes crucial.
And by reading your code, it just starts when all page has already loaded, so no need to put it in the head.
Have you tried doing this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="first.js"></script>
<script src="second.js"></script>
<p>Hello World!</p>
</body>
</html>
First, I'll share some code. This is my HTML head:
<head>
<meta charset="utf-8">
<title>Obligatorio1</title>
<link rel="stylesheet" href="css/estilos.css">
<script src="js/funciones.js"></script>
<script src="js/clases.js"></script>
</head>
This is my relevant code on the first JS:
window.addEventListener('load',inicio)
function inicio(){
document.getElementById("botonAgregarPersonas").addEventListener("click",registroPersonas);
}
let personas=[];
function registroPersonas(){
let nombre=document.getElementById("nombrePersonas").value.trim();
let seccion=document.getElementById("seccionPersonas").value;
let mail=document.getElementById("emailPersonas").value.trim();
let esta=false;
for (i=0;i<personas.length&&!esta;i++){
if (nombre==personas[i].nombre) {
esta=true;
}
}
if (esta){
alert("Nombre ya ingresado");
}else {
let Per = new Persona (nombre, seccion, mail);
personas.push(Per);
let texto=Per.nombre+" - Sección: "+Per.seccion+" - "+Per.mail;
agregarElementoEnLista(texto);
agregarEnComboCompras(Per.nombre);
agregarCheckboxes(Per.nombre);
}
}
function agregarElementoEnLista (texto){
let nodoLi=document.createElement("LI");
let nodoTexto=document.createTextNode(texto);
nodoLi.appendChild(nodoTexto);
document.getElementById("lista").appendChild(nodoLi);
And this is the code of my second JS file (the one with the class):
class Persona{
constructor(nombre, seccion, mail){
this.nombre=nombre;
this.seccion=seccion;
this.mail=mail;
}
}
I'll start saying that, while I've found out the issue, I don't understand why does it happen.
Ok, as you can see on the last piece of code, the parameters have the same name as the class attributes. If I would try copying the code on the first JS file, it would work without any issue, but as soon as I work with that code on a separate JS file it would stop working. After touching every part of the code, I ended up changing the parameters name so it would be different than the class attributes, it looks like this now:
class Persona{
constructor(_nombre, _seccion, _mail){
this.nombre=_nombre;
this.seccion=_seccion;
this.mail=_mail;
}
}
And that code right there works totally fine, without changing anything on the rest of the files (neither the first JS file nor the HTML one).
If anyone understands more than me on why does this happens, feel free to edit this answer.
Thanks everyone for the help!
I am trying to initialize foundation tool-tip without initializing everything (i.e. $(document).foundation()) and I am failing in this simple task.
I am wondering (1) How to use new Foundation.Tooltip instead (2) do I need modernizr because documentation in foundation website did not mention modernizr as a requirement.
I mentioned modernizr because without that tool-tip would not have any styles nor html inside that would show.
Thank you
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" />
<body>
<div class="row">
<span class="has-tip" title="Tooltips are awesome, you <a>link</a> totally use them!">
Hover me
</span>
</div>
<script id="jsbin-javascript">
$(document).ready(function() {
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
// $(document).foundation();
})
</script>
</body>
</html>
To answer the second part first: Foundation 6 doesn't require Modernizr (but F5 did) (see: http://foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6) so you can use all of the Foundation 6 components entirely without Modernizr.
In your example I think you are mixing creating a tooltip dynamically:
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
With initialising a tooltip:
$(document).foundation(); // initialise ALL Foundation script - usually required by Foundation generally
OR
$('.has-tip').foundation() // just scripts associated with this element (e.g. tooltips)
So to create and then initialise JUST the tooltips:
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
$('.has-tip').foundation();
For obvious reasons creation must precede initialisation.
See example: https://jsfiddle.net/tymothytym/b6eoh2yg/1/
I haven't worked with foundation before so I'm definitely no expert. However, I think I've figured out why your code isn't working.
Working Code
You can get all the links needed and see an example of working code in the CodePen located here: http://codepen.io/SupposedlySam/pen/ybbYMp.
What you need to get Foundation Tooltip plugin working
Foundation.css
Modernizr.js (placed in the head tag or below all other scripts before body close (via Foundation's JavaScript Setup Page)
JQuery.js
Foundation.js
Foundation.tooltip.js (only needed if not using foundation.min.js which includes all plugins)
Weird Stuff Not Really Told To You
The tooltip will appear at the top-left of the body (at origin 0,0) if there isn't enough space for the height of the word plus the height of the tooltip.
If you want your tooltips to stay open when clicking on the word associated to it, a tabIndex must be set on the element.
If you're extending the options of a Foundation plugin you must initialize each element you want the functionality on individually.
You must use " instead of double quotes (") in html attributes and they cannot be escaped with a backslash (\).
if you do not want to initialise foundation on your entire document, you can initialise it on specifice elements, like :
$('.has-tip').foundation();
foundation do not depend on modernizer, it works without any problem without modernizer.
and a codepen to a tooltip without calling document.foundation:
https://codepen.io/faw/pen/vmZjzg
I am trying to use jQuery for the first time and I am coding it by hand. But my jQuery code doesn't work at all... Here's my setup :
Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="mainCSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mainJQuery.js"></script>
</head>
<body>
<div class="test"> </div>
</body>
</html>
mainCSS.css
.test {
background-color:#FF0004;
border-radius:25px;
display:block;
height:500px;
width:500px;
}
mainJQuery.js
// JavaScript Document
$(document).ready(function() {
$('.test').click(function() {
$('.test').fadeOut('slow');
});
});
Just to state it for the record:
In order for your jQuery code to work, you need to link to the jQuery library in your HTML.
If you are following a tutorial that doesn't include this in the first step, you should find another tutorial to follow. If you got to this question because you did not follow the first step of your tutorial, you should read more carefully before falling back on StackOverflow, or risk getting some serious downvotes.
The two most common ways of including jQuery in your HTML page are:
1) Downloading the library, and linking to a local copy. In your <head> section:
<script type="text/javascript" src="/url/path/to/local/jquery.min.js"></script>
2) Linking to a remote copy of the jQuery on Google's CDN. Again, in <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
If you don't link to jQuery using one of those options, or something similar, your code will not work. In most browsers you will be able to tell that this is the problem by opening the Javascript console, typing "jQuery" and getting an error like jQuery is not defined.
It's amazing that I couldn't find a duplicate question to close this in favor of, but then again I didn't click on every single "Why doesn't this simple jQuery script work" question on StackOverflow.
And there are a lot.
I realize this is a horribly newbie question, but Ive been trying to fix it for days trying different methods so I just wanted to ask what would you do.
I am attempting to create a web program to use at work, and I have this setup:
Windows 7
IE 7 - Cannot Upgrade.
The "website" is not a webhost, basicly I have a folder on my desktop with html/css/js files and I use IE to run the scripts, no host.
I want to keep a set of vars, mostly strings, in an external JS file and pull the JS into different HTML pages. I want it to write on load of the document.. not on ready. It does not have to be user dynamtic.
Also, When I make the js file, does it have to have a header.. like HTML has doctypes?
I really appreciate your help as I am trying to learn and will cont on my own from here. My setup is much different than most, and im not sure which part was causing my problem so I finally broke down and posted.
When you write your JavaScript file it doesn't have to have any header or doctype. For example you can have a variables.js file that looks just like this:
var x = "abc";
var y = "def";
and have many HTML files that include variables.js like this:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<!-- page content -->
<script src="variables.js"></script>
<script>
alert(x);
</script>
</body>
</html>
and your variables should be available there. Any script that is included after the reference to your variables.js should have access to everything that was included before without the need to listen to any events.
If you need to listen to the events then I suggest to use jQuery or some other JavaScript framework. An example for jQuery would be:
$(window).load(function() {
alert(x);
});
A more advanced example of changing the DOM elements:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<p>Select variable:</p>
<p>
Show x
Show y
</p>
<p>Value:</p>
<p id="value"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="variables.js"></script>
<script>
$('#show-x').click(function (e) {
e.preventDefault();
$('#value').html(x);
});
$('#show-y').click(function (e) {
e.preventDefault();
$('#value').html(y);
});
</script>
</body>
</html>
If it's not a global variable, you can't display/print/access or whatever you call it because it has a local scope, defined in a function.
You can probably only use a debugger simply to debug it