I have an the following element in my html:
<img id="teamshot" onload="load.hide()" src="img/images.jpeg" alt="image">
load.hide references a function in an included javascript file. The contents of this included javascript file are as follows:
var load = {
hide: function()
{
alert("pre");
$("#teamshot").hide();
alert("post");
}
}
I know the function is running because I get an alert box that says "pre" when the element loads, but it breaks on the jquery call. It doesn't hide the element, and it doesn't give me an alert box with the dialogue "post".
What is wrong?
Make sure you are loading jQuery and also the order in which you load your JavaScript files is important. You should load jQuery first, then your custom js file. For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="path/to/your/file/custom.js"></script>
Related
I have a web page which does navigation using templates and filling / showing them depending of user interactions.
It works quite well, but the templates contains some JS included with them. This JS code is correctly loaded (in the example below, it provides an alert saying "Hi") when the page is just loaded. However, I don't see the code within the debugger console, either in Chrome or Firefox.
I've provided a minimal example below, where I see in the console > Source, under localhost, only my HTML page and jquery.min.js in the asset/js sub-folder.
Here is my HTML :
<script src="assets/js/jquery.min.js"></script>
<template id="my_screen">
Hello
<script type="application/javascript" src="assets/js/testouille.js"></script>
</template>
<section class="container">
<div class="my_screen hide"></div>
</section>
<script type="application/javascript">
function useTemplate(elem) {
var myTemplate = $('#' + elem),
normalContent = $('.' + elem),
clonedTemplate = myTemplate.html();
normalContent.empty();
normalContent.append(clonedTemplate);
}
$(document).ready(function() {
useTemplate('my_screen');
}
)
</script>
And here is my Javascript :
alert("Hi");
Any idea?
Since testouille.js is in a <template>, it's not loaded automatically by the browser when the page is loaded.
When you clone the template and append it to a regular DIV, jQuery emulates loading the file using $.getScript(). In the Chrome debugger, code that's loaded this way will be shown in a VM:#### filename (where #### is an arbitrary number) in Sources, rather than with its actual filename.
You can make the debugger give this a filename by putting the following comment in testouille.js:
//# sourceURL=testouille.js
I have an index file that appends an external javascript file (a file generated from a game creator). I am trying to check if the images inside that javascript file are loaded so that I can remove the preloader by adding the class ".loaded" to the body. I cannot find a function that allows me to do this. I've tried .load, onLoad, document.ready, etc. I thought window.onload only executed after all dependent resources were also loaded (the images) but it is firing after the appended javascript file is loaded but before the images have.
Sample code:
<body>
<!---PreLoader--->
<div id="loader-wrapper">
<div id="loader"></div>
</div>
<div id="content">
(Modernizer code here that appends the js file, using function below)
jQuery(function () {
$('body').append("<script src='" + widgetName + ".js'></script>");
}
</div>
One option I tried that fired before images:
$(document).ready(function() {
$('body').addClass('loaded');
});
Thanks in advance for any help.
As my website has only one page, and the index.html was getting really long and impossible to read. So I decided to put each section in a different HTML file and use jQuery to included it.
I used jQuery's include in the way as it has been mentioned here to include a external HTML file but apparently it doesn't work for my website. I really don't know what is the problem.
Here is the link of my workspace.
Here is what I am doing in index.html file to include other sections
<script src="./js/jquery-1.11.1.min"></script>
<script>
$(function() {
$("#includedContent").load("./page1.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page2.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page3.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page4.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page5.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page6.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page7.html");
});
</script>
I also used this method to make sure the file is accessible and everything was fine. So the problem is not the accessibility of the files
You are overwriting the contents of #includedContent seven times (see documentation of jQuery.load). With AJAX, there is no guarantee which request will complete first so you will end up with random page content inside the container.
The solution is to create containers for each page and load each page inside its dedicated container, something like this:
<div id="includedContent">
<div class="page1"></div>
<div class="page2"></div>
<div class="page3"></div>
</div>
$(document).ready(function() {
$("#includedContent .page1").load("page1.html");
$("#includedContent .page2").load("page2.html");
$("#includedContent .page3").load("page3.html");
});
NB: Having said all that, I do not understand how AJAX solves the problem of the page being too long/impossible to read.
There are several things that look odd to me:
all your load functions run at document ready, which is weird while having all the same target. load replaces (not adds) the content of the selected element with what is being loaded, you probably are trying to add all the html contents, but your current setup would actually just load page7.html into #includedContent
the paths look strange to me, i guess ./ may cause errors, try to leave out ./ everywhere.
rather than loading an entire html page, you might just want to load a piece of that file (i dont know how pageX.html looks), for example you would not want to load the <html> node entirely, rather the content only: .load('page1.html #content')
are you including jquery correctly? there is no .js in your inclusion
I have this short Javascript code that I want to put in a external file. The reason being is because there will be many .htm pages that would use it. So instead of putting it all inline at every single file, I want to put it in an external file.
But the thing is, it doesn't work. The script is basically a "back to top" button. It works flawlessly when I put the script in the .htm file. Another note by the way, I'm loading the .htm file in a Div, could that cause problems? Edit: The file is loaded through the .load() jQuery function.
I have also tried putting the script inline in my index.html but it fails to work there too.
Here is the code:
$('.backtotopwrapper').click(function(){
$('body,html').animate({scrollTop: "0px"},1500);
});
Update: I have tested my other .js code and the ones that have nothing to do with the .htm file work. The code that is specific to the elements inside the .htm is the only one that doesn't work.
OK, 3 files :
main.html
loremIpsum2.html
myScroll.js
1). In main.html I call jQuery and myScroll.js external files
Also I have an empty wrapper div (<div id="loader"></div>) where I put the contents of loremIpsum2.html using jQuery .load() so
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>link to external js file</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="myScroll.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#loader").load("loremIpsum2.html");
}); // ready
/* ]]> */
</script>
</head>
<body>
<div id="wrap">
<div id="loader"></div>
</div><!--wrap-->
</body>
</html>
2). In loremIpsum2.html, I have just a bunch of paragraphs but at the end I have my button :
<a class="backtotopwrapper" href="javascript:;">go to top</a>
3). In myScroll.js i Have the function for my scrolling button :
$(function () {
$('body').on("click", ".backtotopwrapper", function () {
$('body,html').animate({
scrollTop: 0
}, 1500);
});
});
Since I am loading the file where the button is via .load(), I am using .on() in its delegated form.
See DEMO and feel free to explore the source code.
NOTE : .on() requires jQuery v1.7+
I had the same problem but didn't perform any solution mentioned here, i actually dicovered what made it work for me when my external scripts werent working but the same code works internally.
Just remove any spaces/special characters from your external script filename e.g instead of calling it "admin-script.js", call it "adminscript.js", without the special characters like the hyphen, then refer to the script with the new name and thats it, it worked for me.
I can't get javascript to work with Twitter's Bootstrap.
I've got this
<p>
<a href="#" rel="tooltip" title="first tooltip" id="example">
hover over me
</a>
</p>
And I want it to appear as a tooltip.
It won't work, so I added this inside the HEAD:
<script type="text/javascript">
window.onload = function()
{
if(!window.jQuery)
{
alert('jQuery not loaded');
}
else
{
$(document).ready(function(){
$('#example').tooltip({'placement':'top', 'trigger' : 'hover'});
});
}
}
Noting thta it still wasn't working, I've deleted all script reference inside the page and added only this inseide the HEAD:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js"></script>
I´m not calling any particular file that I've downloadad, but hotlinking the original ones, and still the tooltip won't appear.
Note: I´m trying to set a new Drupal theme, so my site is inside Drupal (and the page is a tpl.php file).
Thanks for your insight!!
If you're wanting to use github files directly you need to use the raw, so you should point at https://raw.github.com/twitter/bootstrap/master/js/bootstrap-tooltip.js not https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js