Firstly I apologise for the fact that this question has been asked many times before, however none of the answers solved my problem so I thought that I would ask the question here.
I downloaded jQuery 1.11.2 (uncompressed) to locally develop my website however my code which worked using the jQuery built in to jsfiddle did not work locally. Therefore I added the following code to check if the jQuery had loaded:
<script src="file:///Applications/MAMP/htdocs/phpv1/v1/jquery-1.11.2.js">
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
</script>
However I didn't get either alert box making me wonder if it was the Javascript which was not working, however I got Javascript to work using some simple form validation code. I am using MAMP to host the PHP and Google Chrome as the broswer. The file is saved as a HTML file and the code is as follows:
<html>
<style>
#test{
max-height: 150px;
max-width: 200px;
overflow: auto;
background: #50a8ff;
}
</style>
<head>
<script src="file:///Applications/MAMP/htdocs/phpv1/v1/jquery-1.11.2.js">
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
</script>
</head>
<body>
</body>
</html>
I obviously can't use the Google hosted library as I am running the website locally. To determine the file path for the Javascript I opened it in Google Chrome.
You shouldn't put content inside a <script> tag that has a src attribute. Use two separate tags to test it:
<script src="file:///Applications/MAMP/htdocs/phpv1/v1/jquery-1.11.2.js"></script>
<script>
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
</script>
You have two options here: either you use the jQuery hosted by Google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
or then you would need to change to use relative path to file with something like this
<script src="jquery-1.11.2.js"></script>
when the jquery-1.11.2.js is on the same folder as your HTML page.
If you're running this from MAMP you need to change this line -
<script src="file:///Applications/MAMP/htdocs/phpv1/v1/jquery-1.11.2.js">
to this -
<script src="phpv1/v1/jquery-1.11.2.js" type="text/javascript">
if your HTML files are in 'htdocs'. I included type="text/javascript" in the event you're not using HTML5.
Related
::SOLVED::
I have an index.php and I define some JavaScript function for do some thing in this page. I use jQuery in this functions. When I put the functions in the index.php between tags all thing work good but I need to put this functions in external is file. When I do it and then import it in index.php, the js file load and the part that don't use jQuery, work good but the jQuery actions not work! I have put the jQuery before is in head of index.php. the jQuery load and I test it by simple alert. I tried to put $(function).ready() surrounding the js function and other time surrounding the function content but it doesn't work!
<script language='javascript' src="/js/jquery-3.4.1.js"></script>
<script type="text/javascript" language='javascript' src="/js/external.js"></script>
And external js file like this:
function doSomething(){
//some JavaScript code that work good
//some jQuery code that doesn't work!
}
Where is wrong?!
Excuse me for my stupid question!
First of all write better HTML code.
<script src="/js/jquery-3.4.1.js"></script>
<script src="/js/external.js"></script>
function doSomething(){
console.log("I'm executed");
if (typeof jQuery !== 'undefined') {
console.log(jQuery.fn.jquery);
} else {
console.log("jQuery library not loaded check your Network tab");
}
}
Then seems your jQuery not loaded check your network tab for loaded scripts.
I have a website that I want to work online and offline. I want to decrease load time, so I minified the slow loading scripts. It didn't work enough. Locally, some of the scripts are taking 4-6 seconds to load.
I know that linking scripts externally speeds it up drastically. I have tried it and it works. But some of the users will not have internet access. Is there a way to link a group of scripts to an external site, and locally if they do not have internet access?
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="ui/jquery-ui.min.js" type="text/javascript"></script>
You can do something similar to this answer. Basically, the idea is that you attempt to load the Internet based script for jQuery. Afterward, you do a normal script where you check if jQuery === undefined. If it does, you want to load the local copy.
Basically, an example of what you want to do:
<script src="[jQueryURL]" type="text/javascript"></script>
<script src="[dataTablesURL]" type="text/javascript"></script>
<script src="[jQueryUIURL]" type="text/javascript"></script>
<script type="text/javascript">
if(jQuery === undefined) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "js/jquery-1.9.1.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
//repeat for other two scripts here
}
</script>
What will happen is that it will attempt to load the scripts in question, and afterward it will check if jQuery is defined. If it's not, that means the scripts didn't load, so you want to load the local versions and append them to your header.
Ensure that the script declares a global variable you can test for. Then generate a local script loading element if the external script fails to load (which you can determine by testing for that variable).
<script src="http://example.com/example.js"></script>
<script>
if !(window.Example) {
document.write('<script src="../scripts/example.js"><\/script>');
}
</script>
<script type="text/javascript">
if(navigator.onLine)
{
alert("Connected");
}
else
{
alert("Not Connected");
}
</script>
First Check if internet connection exist then load external file other wise load internal file
I'm trying to implement a simple play button for youtube video on a WordPress page.
<a id="play-video" href="#">Play Video</a><br />
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript">
jQuery('#play-video').on('click', function(ev) {
jQuery("#video")[0].src += "&autoplay=1";
ev.preventDefault();
});
</script>
Original code pen I found: here
It works fine on Codepen and js fiddle but has no effect on the WP page.
Am I missing something fundamental?
Any help is greatly appreciated
Almost guaranteed you are not loading jQuery in this project, and your code that you are adding relies on jQuery.
In your functions.php file (in your theme folder), add the below code (be sure it is between php open / close tags, not before / after them. php open tag look like <?php and closing tag ?>):
add_action('wp_enqueue_scripts', 'enqueue_my_jquery');
function enqueue_my_jquery() {
wp_enqueue_script('jquery');
}
You may find other resources that show you how to add jQuery directly to the header.php file - do not do that. it can (and will) cause a variety of problems.
<script type="text/javascript">
document.body.addEventListener('load', function() {
//jQuery should almost definitely be accessible in this scope
var $ = jQuery;
$('#play-video').on('click', function(ev) {
$('#video')[0].src += "&autoplay=1";
ev.preventDefault();
});
});
</script>
This is what I would consider a hacky way of adding javascript to Wordpress.
I would recommend always having your scripts in separate files and utilizing Wordpress's PHP function wp_enqueue_script in order to ensure script dependency order.
I found this at: https://codex.wordpress.org/Using_Javascript
Under the JavaScript in Posts section:
To include Javascript inside a post, you need to combine the call to
the script file with the call to the JavaScript itself.
<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>
I needed to put the script into a .js file and call for that file as well as the script itself.
Thanks so much for the help!
So lets say you're implementing a website that uses jQuery HEAVILY. You could put some code like
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and import it from some repository. If you're developing it without internet you could download the source and store it somewhere locally, then access it with some script like
<script src="js/jquery-1.10.2.min.js"></script>
But is there a simple way to have both? Such as if you can reach the repository use that, but if you can't use the local copy.
Check for a variable in the first script. If it is not found, use document.write to create the second script tag. Here is an example for jQuery I found here:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
The fail-safe way of referencing scripts on a CDN is to link to the local copy only if the CDN has failed for any reason.
The way to do this is simply to check if anything within the script has executed. For jQuery this is simply checking whether jQuery exists:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
if (!window.jQuery) document.write('<script type="text/javascript" src="/path/to/jquery-ver.sion.min.js"><\/script>');
</script>
Personally I have never had a script fail due to a CDN being offline, however I have had periods of internet outage. With scripts set up with a proper fallback, I've been able to continue local development as the pages still work without needing to connect to a CDN.
You can add resources dynamically if required one is not available. for eg:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
if( typeof $ != "function")
{
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'js/jquery-1.10.2.min.js';
head.appendChild(script);
}
</script>
</head>
<body>
</body>
</html>
Though JQuery hosted on Google CDN should be safe enough, the codes below can be used as a fallback with requireJS.
requirejs.config({
enforceDefine: true,
paths: {
jquery: [
'//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js',
'js/jquery-ui.min.js'
]
}
});
require(['jquery'], function ($) {
});
http://www.javascriptkit.com/script/script2/plugindetect.shtml
I am trying to detect flash plugin with Javascript from the above url, but the code doesn't seem to work for IE. Am I doing anything wrong here?
I just need to see whether the flash plugin is installed on the browser or not.
if (pluginlist.indexOf("Flash")== -1)
{
alert("You do not have flash player plugin installed.Please install flash player");
window.location = "/home";
}
swfobject is the established quasi-standard for dealing with flash in JavaScript.
There's a tutorial for Detecting Flash Player versions and embedding SWF files with SWFObject 2
i too tried the same flash plugin but in different link. I tried the following javascript code:
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
This text is replaced by the Flash movie.
</div>
<script type="text/javascript">
var so =
new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
so.write("flashcontent");
</script>
Prepare an HTML element that will hold our Flash movie. The content placed in the ‘holder’ element will be replaced by the Flash content, so users with the Flash plug-in installed will never see the content inside this element. This feature has the added bonus of letting search engines index your alternate content.
var so = new SWFObject(swf, id, width, height, version, background-color
[, quality, xiRedirectUrl, redirectUrl, detectKey]);
And get succeeded. You can also try this code and tell me what happens. I hope you will get success. All The Best.
I tried to use the same plugin of the link you posted.
I used following code and it worked fine in my IE too..
<html>
<head>
<script language="javascript" type="text/javascript" src="plugins.js" ></script>
<script language="javascript" type="text/javascript">
if (pluginlist.indexOf("Flash")== -1)
{
alert("You do not have flash player plugin installed.Please install flash player");
window.location = "/home";
}
else{
alert("You have it installed");
}
</script>
</head>
<body>
</body>
</html>
I think the problem seems with the way of writing tag.
Have you made it exactly like mine? Or you can go with my HTML.
Thanks!
Hussain