I am wondering if we could use pyscript on HTML pages inside a Django project.
I'd tried to use it but unfortunately, it doesn't work.
this is the code :
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12" >
<center><h3><py-script> print('Now you can!') </py-script></h3></center>
</div>
</div>
</body>
</html>
I was using Django==2.2.28 then I upgraded it to the last version Django==4.0.4 both didn't work and I get a black page!.
Any suggestions?
I get the solution.
I was using IDM that was catch any download in the browser.
So I deleted the file extension from IDM (.TAR) so my browser was able to download and use the pyodide_py.tar file.
(you should wait for a little python is slow :) )
Many thanks
Related
I am at my wits end with linking a javaScript file to my main.html, they are both in the same folder.
I have viewed multiple Stack overflow topics regarding this question, and for some reason none of the solutions solve my answer.
My current code is what I have below:
[main.html]
<!DOCTYPE html>
<head>
<link rel="javascript" href="jsfile.js">
<title>JavaScript</title>
</head>
<body>
<div class="Header">
<h1>JS Basics</h1>
</div>
</body>
[jsfile.js]
document.write("Hello World");
This code does not display the "Hello World" message, however if i insert the code directly into the HTML file it does.
I appreciate any and all help on this matter.
Add like following not with link.
<script type="text/javascript" src="jsfile.js"></script>
Just type:
<script src="yourJavascriptFilename.js"></script>
Most importantly add this line to the bottom of your body tag to avoid your browsing requesting JavaScript to be loaded before displaying your HTML.
You're using the incorrect link for JavaScript.
Try using this instead
<script src="jsfile.js"></script>
I am trying to reference external js file inside my html as follow, did I miss something? The pie chart is supposed to appear but I am not getting it.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script_src
<script src="http://benpickles.github.io/peity/jquery.peity.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>
<div><span class="pie">1/5</span></div>
Your code has 4 main problems:
You didn't call jQuery inside the HTML document <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>, that must be called before the plugin
You called twice the plugin: both the minified and not minified version (if available, always request for the minified version since it's lighter)
You requested the plugin over HTTP instead the always better HTTPS
You didn't call the function inside the document with $(".pie").peity("pie")
Here's a working snippet.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://benpickles.github.io/peity/jquery.peity.min.js"></script>
</head>
<body>
<div>
<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span>
</div>
<script>
$(document).ready(function() {
$(".pie").peity("pie");
});
</script>
</body>
</html>
There are three changes to be made in your code.
You need to include jQuery.
You need to call the peity() function on the span.
You need not include both jquery.peity.js and jquery.peity.min.js. Including either one is sufficient.
See code below.
$(document).ready(function() {
$("span.pie").peity("pie");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>
<div><span class="pie">1/5</span></div>
Seems you have missed the JavaScript snippet
1. Loading order Should be changed ,
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="http://benpickles.github.io/peity/jquery.peity.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("span.pie").peity("pie");
});
</script>
</head>
<body>
<div><span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span></div>
<body>
</html>
In addition to the other answers, your Dojo snippet isn't working because you're trying to load the Peity plugin over HTTP from a page being served over HTTPS. Your web browser console will tell you that the browser blocks loading mixed content from an HTTPS page.
Load peity.js from https://benpickles.github.io/peity/jquery.peity.js. But when you publish your site, download peity.min.js and host it on your own server. Github is not a CDN.
URL:
http://qualitygameservers.com.gridhosted.co.uk/
I am attempting to install the JQuery lightbox demonstrated here:
https://designshack.net/articles/javascript/create-a-simple-jquery-image-lightbox-gallery/
Console is returning that it is not in fact a function, however my script experience is minimal.
Any ideas what the problem is? Have i missed something basic or is this an issue with the open source code?
Thank you.
Make sure that you get both the jquery resource and the lightbox code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://designshack.net/tutorialexamples/lightbox-gallery/js/jquery.lightbox-0.5.min.js">
And if you might want to host that jquery.lightbox file on your own site, in case that tutorial page ever gets moved/deleted.
$(function() {
$('#thumbnails a').lightBox();
});
<link href="https://designshack.net/tutorialexamples/lightbox-gallery/css/jquery.lightbox-0.5.css" rel="stylesheet"/>
<link href="https://designshack.net/tutorialexamples/lightbox-gallery/css/styles.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://designshack.net/tutorialexamples/lightbox-gallery/js/jquery.lightbox-0.5.min.js"></script>
<div id="thumbnails">
<img src="https://designshack.net/tutorialexamples/lightbox-gallery/images/photos/01-turntable-illustration-graphic-thumbnail.png" />
<img src="https://designshack.net/tutorialexamples/lightbox-gallery/images/photos/08-extreme-fish-bowl-thumbnail.png" />
</div>
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
I'm working on a website here and I have discovered the video.js plugin for the next part of my project. I have done everything exactly as the video.js site said to do in order to get it to set up on the page properly, and even moved external file links around on the page, and that didn't affect anything. I just want to be able to style it so that it looks similar to the website that it is on. Sample code below. Also I'm using bootstrap 3.0 I don't know if that is a problem.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='<?=$up_level?>assets/css/bootstrap.css'>
<link rel='stylesheet' type='text/css' href='<?=$up_level?>assets/video-js/video-js.css'>
</head>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-lg-4 col-lg-offset-2'>
</div>
<div class='col-lg-4'>
<video id='intro-video' class='video-js vjs-default-skin' preload='auto' width='640' height='264' poster='' data-setup='{controls:true}' >
<source src='http://techslides.com/demos/sample-videos/small.mp4' type='video/mp4' />
</video>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript' src='<?=$up_level?>assets/js/bootstrap.min.js'></script>
<script type='text/javascript' src='<?=$up_level?>assets/video-js/video.js'></script>
</body>
</html>
for other references the
<?=$up_level?>
is just a directory level calculator. There is no problem with that function. Also I have double and triple checked the video-js folder is in its proper directory location, and is loading. So again just to recap, using the video.js extension, it isn't letting me style anything, or overwrite the normal html5 styles. How do I fix this?
I actually have figured out the problem, it had something to do with how I was sending the JSON data under
data-setup: '{controls:true}'
it should be formatted like
data-setup: '{"controls":true}'
then the rest is in the css file