These are working in a JSFiddle that andi posted on the answer to my original question. I'm stumped as to what I've missed that it isn't working in the browser. I know this is going to be a very simple fix. Thanks in advance.
HTML:
<div class="blackwrap">
<header class="blackbar">
<h2>Before he knew it, he couldn't see a thing.</h2>
<h4>He fumbled around for the <a id="flash">flashlight</a> on his phone.</h4>
</header>
</div> <!-- .blackwrap-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
CSS:
.blackbar {
background: black;
color: white;
}
.blackbar.lit {
background:yellow;
color:black;
}
Javascript:
$("#flash").on("mouseover", function(){
$(".blackbar").addClass("lit");
}).on("mouseout", function(){
$(".blackbar").removeClass("lit")
});
The problem may be, you are running the Jquery include code in your local machine with using the file:// protocol.
So on your local machine use
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
change to this on the server
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
at the server, it will be http: or https: , so server will automatically select the corresponding one.
your jquery is not loaded properly use http: in src as below:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Its really simple fix in the cdn link to jquery you should make a http call
instead of this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
change it to this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
The problem is if you dont keep http the browser thinks it is a local file in your pc.
Related
I know this question has been asked many times , I have gone through all solutions but could not solve the issue.
I am new to programming and want to make a page that load some content in a div with id "content" through java script.
This is my index page
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
home
about
<div id="content">
<script src="loader.js"></script>
</div>
</body>
</html>
and this is my loader.js
$(document).ready(function() {
$('#content').load('home.html');
});
when I run index.html i get
jquery-3.1.1.js:9536 XMLHttpRequest cannot load file:///C:/Users/Desktop/my_folder/home.html.
all the files are in same folder named my_folder.
Unfortunately XMLHttpRequest can not be called to local resources, EVEN IF the HTML ist stored locally.
Its because you can programatically read the contents of local files and send them into the web, what is not allowed.
i have found the answer of my question
i have changed my script to
function load_home(){
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
return false;
}
and call this function in content div
thanks for the help :)
I am attempting to get jQuery waypoints to work and I am doing a very basic example and it won't display the window alert that I am attempting to show when scrolled to. I was watching a video of this and I had exactly what the guy had, so I am not sure why it isn't working for me.
Any ideas of why this not initiating?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section>
<img src="images/big-smile-face.png" class="dipper" alt="">
</section>
<script src="js/waypoints.js"></script> <!-- js/waypoints.js file -->
Javascript - js/waypoints.js file
$(document ).ready(function(){
var $dipper = $('.dipper');
$dipper.waypoint(function () {
alert('waypoint!');
});
});
What browser are you using? There might be some issue there. It seems to be working fine for me and I am not getting any errors.
This is probably the weirdest thing I've encountered while programming in JavaScript, and I can't find a solution anywhere online.
So all I've done is created an html document and a JS file that is externally linked to it. When I try to reference an element from the page in the JS file, it doesn't do anything, and there aren't any errors in the console. Here's an example:
$('#box').click(function() {
alert('test');
})
<html>
<head>
<script src="script.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
</body>
</html>
It works wonderfully in the fiddle, but on my machine it doesn't. Also tried hosting on Google Drive, nothing. I opened it on another computer, nada. Here's the live page:
https://7568fa8ec856c21498701e0edd220440c5c75264.googledrive.com/host/0B4rWYiw5-JZtfm1wNE1iMkY1b0tuaXFnaUZmaWFsSU5XLXQtaTh5U2ozVFB0NHgyVXpOOW8/test.html
I don't understand!?!?
How does it behave if you define HTML like below:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
</body>
<script src="script.js" type="text/javascript"></script>
</html>
It is actually recommended to include custom JavaScript after document body.
In addition to fixing your issue, the HTML will be displayed on the page before JavaScript execution will finished.
If scripts.js is using jquery, you need to load the jquery before you load scripts.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
<script src="script.js" type="text/javascript"></script>
You have two separate issues:
First you must load jQuery before your script so that it is available when your script runs. So, switch the order of your two script tags to fix that issue.
Your script cannot run until the DOM is loaded. When you run it in the <head> tag, it is running BEFORE the DOM has loaded and thus the page is empty at that point so your code can't find the proper elements to install click handlers. There are a couple ways to solve this issue. The simplest is to move all your script tags to right before </body>. This will ensure that the DOM is available when the scripts run and you won't have to do anything else special.
Here's a revision of your HTML that should work:
<html>
<head>
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
You could also just switch the order of your two scripts and leave them in the <head> tag and then change your script to this:
$(document).ready(function() {
$('#box').click(function() {
alert('test');
})
});
In jQuery, the $(document).ready(fn) construct instructs jQuery to call a specific function only when the DOM has finished loading. This allows you to place this initialization script anywhere and jQuery will make sure that your callback function is not called until the DOM is ready.
I am currently embedding a third-party javascript file directly on my page.
However, the website I'm embedding it from takes a while to respond so it stops the rendering of my site for several seconds.
I'm currently embedding it on my page on the spot where it will write some values:
<script language="javascript" type="text/javascript" src="[third-party site/file.js]"></script>
The response from the embedded script is just some JavaScript:
document.write('<div class="value">Value 1</div><div class="value">Value 2</div>');
I was thinking that after the page loads use jQuery to make an AJAX request and somehow parsing the response so I can get the values I need.
Is there be a better approach?
You can place this script inside a hidden element on the end of the body (just before </body>) and, after the page has loaded, move it to the desired location with jQuery.
<div id="hiddenElement">
<script type="text/javascript" src="[third-party site/file.js]"></script>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#hiddenElement").appendTo("#someOtherElement");
});
</script>
</body>
Another solution would be to use jQuery .getScript() to load the script in the desired location as you said and #James McDonnell said.
$(document).read(function()
{
$.getScript(/* src */)
});
This will run after the page has loaded.
$.getScript()
Perhaps this could be part of your solution. Here is a stand-alone jQuery example where a button is used to trigger a change event on a DIV. This example just shows you how to access the html content of the div and to see how to manipulate/change it. This is not a solution for you but parts of it might be useful when combined with rcdmk's and James' ideas.
<html>
<head>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button_test').click(function() {
$('.value').html('New stuff').change();
});
$('.value').change(function(){
$('div').each(function() {
alert($(this).html());
});
});
});
</script>
</head>
<body>
<div class="value">Value 1</div>
<div class="value">Value 2</div>
<button id="button_test">Click me</button>
I'm a complete newbie as far as jQuery is concerned. I also don't know much of JavaScript except for some very basic stuff.
I'm following this tutorial here: http://docs.jquery.com/How_jQuery_Works
And nothing's working! :-)
I created a folder on my machine's hard drive here: C:\rnd\jQuery
Then, in that folder, I put the jquery.x.x.js file that I downloaded from the jQuery website and I created a test.html file and wrote the following code in it:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
It just does the normal behavior of taking me to the jQuery website. I ran it on Chrome, IE and Firefox. I have JavaScript enabled in the browsers. It's all the same everywhere. It doesn't do anything that I expected it to do. It just takes me to the website.
Except on IE, it shows me that message box saying an error occurred in your script. When I click "Yes" to debug, it opens up the debugger but it doesn't highlight any line of code so I don't really know what's happening.
Then, when I had the following line to my code:
$("a").hide("slow");
And my complete code looks like this:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
$("a").hide("slow");
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
At this, nothing different happens in Firefox and Chrome, but in IE, it breaks again into the debugger, this time with this line highlighted in yellow, and it reports that the identifier jQuery is not defined.
(function($) {
$.fn.textDropShadow = function(){
$(this).html('<span class="jq-shadow">'+$(this).html()+'</span><span>'+$(this).html()+'</span>');
return $(this);
}
})(jQuery);
And that, I believe is some JavaScript code on the jQuery website.
I feel completely lost. Any help would be appreciated.
Update:
I have my complete HTML and it is valid XHTML. It's too bad the browser displays that as an HTML response stream and I can't even get it to show up here as a script. Damn! How do you make HTML show up here?
I can see one issue. You have a . following the $ in the document ready statement.
$.(document).ready(function()
^--- remove the .!
It should look like this:
$(document).ready(function()
First off make sure you have the jQuery library referenced before writing any jQuery code (or loading any plugins)
<script type="text/javascript" src="{path to jquery.x.x.js}" ></script>
Also, it should be $(document).ready(function() { });
not $.(document)
Obviously the problem was an extra dot in the $.document part however here is a tip for you when learning jquery.
You may find yourself in the situation that you have another javascript library running on the page and it's using the $ symbol too. A good way to keep your jquery separate from the other library but still share the $ symbol is to alias $ inside your jquery init statement.. like so.
// the dollar symbol doesn't exist outside of this as we started it with jQuery so i personally like this approach.
jQuery(document).ready(function($) {
$('#...');
});
Did you include the line:
<script type="text/javascript" src="jquery.js"></script>
You need to show more of your page for us to know what's wrong.