If I have some Mootools script, do I include the script in HTML like so?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
window.addEvent("domready", function(){
$$('div.rj_insertcode a.glossarylink, .no_glossary a.glossarylink').each(function(el) {
new Element("span", {
html: el.get("html")
}).replaces(el);
});
});
</script>
</head>
I am using Joomla with "System - Mootools Upgrade" plugin enabled (so MT 1.2.4 is already included and ready to use).
I am using Joomla with "System - Mootools Upgrade" plugin enabled (so MT 1.2.4 is already included and ready to use).
if mootools is already included then your domready script block needs to be after the call to include mootools so its symbols and methods are defined.
typically:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent("domready", function() {
// code here
});
</script>
if your script is unlikely to produce anything that relates to template variables you are outputting and you just work the DOM, then I'd suggest moving it to an external .js file instead.
Other best practices ATM seem to point to putting all js at the bottom so it's non-blocking and faster but this negates the point of domready as by the time you run the js all page elements are defined, it won't fire any earlier (you can reference dom already).
<script type="text/javascript" src="your-mootools-file.js"></script>
Related
I have an issue with the path definition of the libraries and models that are used in an HTML file using WebGL. The HTML file can be found here, which is an example code for a WebGL2 book.
The HTML file itself is sitting locally in the following directory in my computer.
C:\Users\bob\Desktop\Book\ch01\ch01_04_showroom.html
The libraries and other sources are located in
C:\Users\bob\Desktop\Book
├───ch01
| └───ch01_04_showroom.html
├───ch02
└───common
├───images
│ └───cubemap
├───js
├───lib
└───models
├───audi-r8
├───bmw-i8
├───ford-mustang
├───geometries
├───lamborghini-gallardo
└───nissan-gtr
The parts of the code that I have issues with are in the following
ch01_04_showroom.html
<html>
<head>
<title>Real-Time 3D Graphics with WebGL2</title>
<link rel="shortcut icon" type="image/png" href="/common/images/favicon.png" />
<!-- libraries -->
<link rel="stylesheet" href="/common/lib/normalize.css">
<script type="text/javascript" src="/common/lib/dat.gui.js"></script>
<script type="text/javascript" src="/common/lib/gl-matrix.js"></script>
<!-- modules -->
<script type="text/javascript" src="/common/js/utils.js"></script>
<script type="text/javascript" src="/common/js/EventEmitter.js"></script>
<script type="text/javascript" src="/common/js/Camera.js"></script>
...
<script type="text/javascript">
'use strict';
// ...
function configure() {
carModelData = {
// This is the number of parts to load for this particular model
partsCount: 178,
// The path to the model (which I have issue with on my computer)
path: '/common/models/nissan-gtr/part'
};
}
...
I have issue defining the path for hrefs and srcs. Also the one in the javascript function:
path: '/common/models/nissan-gtr/part'
If I use the code as it is posted in here nothing will be displayed in my Google Chrome, just an empty page.
So, I have changed paths from
/common
to relative paths:
./../common
but still, I am not able to load the HTML correctly. I see the gridded floor with an incomplete menu but the car is not displayed yet as in the following snapshot.
It's a security, Chrome doesn't let you load local files through file:///... for security reasons.
The purpose of this security is to prevent external resources from gaining access to your system, which could allow them to modify or steal files
Solutions
The best solution is to run a little http server locally since you can follow the steps from this SO answer or this one.
Or, maybe others will bring it up so I'll mention it, you can also launching Google Chrome from the command line with the flag: --allow-file-access-from-files, but this isn't recommended since Chrome doesn't allow this behaviour to protect you.
I'm deploying a Google web app to write commutative diagrams with LaTeX/Xy-pic.
In the heading of html page I put the following configuration:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
"HTML-CSS": {
styles: {".MathJax_Preview": {visibility: "hidden"}}
},
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
TeX: {extensions:
["AMSmath.js","AMSsymbols.js","http://sonoisa.github.io/xyjax_ext/xypic.js"]}
});
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js">
</script>
The problem is that the file http://sonoisa.github.io/xyjax_ext/xypic.js is not loaded because it is from an http source. This is the message I read in console:
MathJax.js:19 Mixed Content: The page at 'https://script.google.com/' was loaded over HTTPS, but requested an insecure script 'http://sonoisa.github.io/xyjax_ext/xypic.js?V=2.7.5'. This request has been blocked; the content must be served over HTTPS.
I try to use https://sonoisa.github.io/xyjax_ext/xypic.js instead, but this doesn't work at all.
Any suggestions?
One way to prevent the error message described on the question is to copy the code from the referred JavaScript library to the Google Apps Script project.
The above could be done in several ways that will depend on how you prefer to manage your code, but according to the best practices on https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascriptHTML, CSS and JavaScript should be kept on separate files. This implies to use a template like the following:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
</body>
</html>
Where JavaScript is the file name of the file holding the JavaScript code. The name actually could be almost anything that makes sense to you and even you would have your JavaScript code on several files, like having one for you own code and another for the referred JavaScript library.
Can we use async attribute to load script asynchronously for script loaded dynamically?
By script loaded dynamically, if you mean adding javascript code dynamically to your page, then the answer is No.
async attribute can only be used on loading external scripts that are referred to via a URL specified in src attribute.
The async attribute is only for external scripts (and should only be used if the src attribute is present)
Example, You can load only scripts like this asyncronously
<script src="external-file.js" async></script>
It is an interesting point.
Here is an example, some Similar StackOverflow questions, and jQuery Document link For use of Async attribute
Example:
<!DOCTYPE html>
<html>
<head>
<title>Async Test Attribute</title>
</head>
<body>
<script src="async_demo.js" async></script>
<h2>Welcome to Demo!</h2>
<script>
console.log('HELLO NON-async');
</script>
</body>
</html>
async_demo.js
console.log('HELLO Async');
Screencast for above code: https://hareen-nipl.tinytake.com/sf/MzEwNzYzOV85MzEzNTgz
Async jQuery : http://forum.jquery.com/topic/jquery-ajax-async-vs-html5-script-async
W3School Document: https://www.w3schools.com/tags/att_script_async.asp
Similar StackOverflow questions
Add defer or async attribute to dynamically generated script tags via javascript
Is the "async" attribute/property useful if a script is dynamically added to the DOM?
Please comment down below if you have any questions for the same.
I have a page that uses jQuery UI. Ideally I would like to use the google cached version if possible, but if that was unavailable I would like to fall back on a local version.
Is this possible? I have been hunting through the html <script> tag reference but cant find anything to do a check and fallback.
You can do something like this (while of course changing the URLs to suit your needs):
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>window.jQuery.ui || document.write('<script src="/libs/jquery-ui.js"><\/script>');</script>
This was answered before:
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
The same applies for jQueryUI ofcourse.
<script src="/path/to/external/jqueryui"></script>
<script>
if (!window.jQuery.ui) {
document.write('<script src="/path/to/local/jqueryui"><\/script>');
}
</script>
I am wondering if there is a service or solution to creating a website search that will allow me to have the results populate into a dropdown window below my search bar, rather than have to populate the results to a new page. Kind of like google's word prediction/suggestion, but rather than on-the-fly suggestions, I would like a new DIV to drop down with the results upon submission.
The website I am working on is at: http://www.conceptsuppliers.com/beta
I highly recommend using the jQuery Tokeninput plugin. I recently implemented this on a site for live searching functionality and it works perfectly.
The library provides options for styling every aspect of the search bar and dropdown results list.
Example:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tokeninput.js"></script>
<link rel="stylesheet" type="text/css" href="token-input.css" />
<script type="text/javascript">
$(document).ready(function () {
$("#searchbar").tokenInput("/url_to_your_search_endpoint");
});
</script>
The plugin can be found, along with documentation, here: http://loopj.com/jquery-tokeninput/