I have js file and if I put <script src="link_to_file"></script> on bottom of my html page, it doesn't work.
Instead, if I put <script>function( etc..</script> on bottom of my html page, it works.
What is problem?
Try this:
HTML
bottom
<script src="external-script.js><script>
EXTERNAL JS
Add $(document).ready(function () {})
Make sure jQuery is loaded first.
Check your global variables.
Make sure that you're using the right path, that's depending om your folder structure. For example, if the js file is in the same folder as your html file, use
<script src = 'fileName.js'></script>
Do not forget to include the .js extension at the end of the file name. The file name should be same as the name of your js file.
Anyhow, you do not have to put the script in the head section as someone has suggested. It's in fact, not a good practice.
Related
When i add this:
<script src="script.js"></script>
<script src="jquery-3.5.1.min.js"></script>
to my index.html file in the head of the file, and i create a JavaScript file, it looks like the html doesn't recognize it.
But when i add this:
<script type="text/javascript">
//code
</script>
to my index.html file in the body of the file, all of the code i done in JavaScript works.
Can somebody explain why this happens?
It’s always a good practice to add jQuery code just before the closing </body> tag. If you have not done that, then use the defer attribute.
Also if you’re writing jQuery code make sure that your code is placed after the jQuery link code.
Don't add your JS files in the head. You are most likely going to be accessing DOM elements, and those elements are defined in the HTML. If you insert a script above the html, the elements won't be recognized because they're not defined yet. Add all of your scripts after the body, I add mine after the closing html just to be safe. And please add your script after your jQuery script.
I am wondering, is it possible to provide an alternative path for a file if it cannot be found from the original one?
For example I provide an src which points to an external source, this should be the default src, but if it cannot be reached for some reason, then it should load the file from the source folder.
Example:
Original:
<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"></script>
And if this cannot be loaded, then:
<script src="js/swagger-ui-bundle.js"></script>
So I could load the newest from the js file, or the default I have.
Thanks!
Try just putting them in order in your script like so:
<script src="js/swagger-ui-bundle.js"></script>
<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"></script>
so that it loads one and then tries to load the other. This should work unless you have conflicting scripts.
I'm using asciidoctor-maven-plugin to convert .adoc files to html file...
Would want to include a link to javascript in the generated html file...
Basically would like to see something like below in the html file that is generated from the .adoc file
<script src="custom.js"></script>
Tried setting attributes like linkcss scriptsdir etc..but of no luck...
Any help?
One way is like in
http://mrhaki.blogspot.ie/2014/06/awesome-asciidoc-include-raw-html.html
But then have to add it in every .adoc file...is there a way to get it automatically added just like the CSS (using stylesheet)
Use docinfo files, see the documentation for more detail.
You create docinfo files by adding another file named <doc_file_name>-docinfo.html for HTML generation or <doc_file_name>-docinfo.xml for docbook generation. The contents of the docinfo file are copied into the generated output, in the head section for html. If you want to add things to the bottom of the document there are footer docinfo files for that. It follows the same as a normal docinfo but the file name is <doc_file_name>-docinfo-footer.html or <doc_file_name>-docinfo-footer.xml
Happy docing :) Let me, or preferably the list know of any other maven issues you find.
You can use the passthrough block for that using ++++:
++++
<p>
Content in a passthrough block is passed to the output unprocessed.
That means you can include raw HTML, like this embedded Gist:
</p>
<script src="http://gist.github.com/mojavelinux/5333524.js">
</script>
++++
Source: http://asciidoctor.org/docs/asciidoc-syntax-quick-reference/#more-delimited-blocks
I'm trying to clean up my code so I'm putting all the stuff in my
<style></style>
In a CSS file. And I'm trying to do the same for my jQuery. So I created a Custom.js file. But do things like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
Stay in html file or can I move them the Custom.js file? Also, I'm using a jQuery plugin called uscrollbar so I have this piece of code in my html file:
<script>
$(document).ready(function(e) {
$('#scroll_form').uscrollbar();
});
</script>
Can I also move that to Custom.js?
A much better question.
It's best to keep links to external scripts in your HTML, it's perfectly fine to have a few <script> tags. Especially ones using a CDN!
You can move your document.ready() function to external JS, where all of your other JS is kept. But sometimes it's easier to include small snippets like that directly in pages where it concerns only that page.
When moving things to separate files, it's important to include them in the right order.
Usually something like Modernizr at the top (<head>), with jQuery near the bottom (just before </body>), followed by your plugins, followed by your custom scripts.
Check out RequireJS, it gives you a super simple way to include javascript files as you need them, rather than stuffing your header / footer full of tons of <script> tags.
Keep your references to Javascript files (local or remote) in your HTML code. Place them at the bottom of the page before the closing body tag if they do not need to be ready until the DOM is ready. For instance, your jQuery reference should almost always be in your 'head' section because any references to jQuery while the HTML loads need to be defined even though functions that aren't called until after document is ready do not need to be defined. Many other supporting files like 'jquery.easing' for instance, can go at the bottom which improves page load times.
You can move the uscrollbar() call to a .js file, but I would recommend putting all of your "ready" commands in one function, and then in your HTML simply call that function on ready. IE:
<script type="text/javascript">
jQuery(document).ready(function() {
fn_LoadFunctionName_Thats_InYour_Custom_js_files();
});
</script>
Don't forget to include type="text/javascript" in your script tags.
If you're using custom js that's more than just one little function call, I'd separate into a new js file and just call that in your <script> tag. Same with css. If you're changing styles with your jquery, then usually I use addClass, removeClass, and toggleClass to modify my styles. That way you don't lose track of your styling from css to js files.
You can certainly move them to Custom.js file. Just make sure you have included the file in your html file as you've included the jQuery library.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="Custom.js"></script>
Just make sure the path for Custom.js is correct. Also, you don't put script tag in the js file. So the Custom.js would be:
$(document).ready(function(e) {
$('#scroll_form').uscrollbar();
});
OK i downloaded all the files and put them into a directory on m server call "lightbox" when I try to use it on a page, the image pops up on the bottom of the page, not overlapping modal like. I changed the images sources in the lightbox.js file to include the lightbox/ directory. The images in the css file are still relative to the css document . So I am not sure why it is not working correctly. Here is a link to the page Clicky
Does anyone have a clue what I am doing wrong?
Thanks!!
UPDATE the text page located here:clicky which is inside the lightbox directory works fine. So I am pretty sure this is happening because I put the files into a folder on my server instead of just on my server, but I would like to keep my files organized so if anyone knows how to make it work from inside a directory?
There is some image paths in the js file. You can modify them there... or better yet add this before the lightbox.js script
<script type="text/javascript">
LightboxOptions = {
fileLoadingImage: '/lightbox/images/loading.gif',
fileBottomNavCloseImage: '/lightbox/images/closelabel.gif'
};
</script>
<script src="js/lightbox.js" type="text/javascript"></script>
This is pretty silly but I put in the correct address for the javascript files but I had put in an incorrect address for the CSS file, after correcting that it worked.