I am confused about js file of jQuery which one i have downloaded just now.
downloaded a zipped folder contains a lot of folder and files inside it. How can i know which one js file exactly is for particular plugin?
Lets say, i have to downloaded for Dialog and i download from this page by selecting Model under Widget section. It downloads a zip folder and has many folder and files inside it.
When you've configured your download you just need to use the 2 folders: js and css.
You need to reference
jquery.js
jquery-ui-1.8.13.custom.min.js
jquery-ui-1.8.13.custom.css
I import this folder development-bundle\ui\i18n as well when I need the localized datetime-picker.
You have to look at the demos to see how they work and then go from there. This is like the Matrix. No one can tell you how jQuery UI works, you have to see if for yourself.
Also this is jQuery UI and not straight jQuery which is a single js file which you will find in the download.
Basically find out which stylesheets, js files you need, how to implement that (demos on the website will help with this) and then test it out on your own site.
As an alternative to download and host jQuery yourself, you can use googles cdn.
They serve a lot of different javascript frameworks, including jQuery and jQuery UI.
If you for example want to enable your site with jQuery all you structly have to do is include this in your html code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
You can find the different js frameworks that they host on this page: http://code.google.com/intl/no/apis/libraries/devguide.html
The thing that you have downloaded is JQUERYUI. Its a UI customisation and enhancement library based on the Jquery library. But you have specified in the question as JQUERY library. This can be downloaded here: jquery.com
this post does a pretty nice job:
jquery from cdn
They include a failsafe incase the CDN doesn't load properly...here's the code excerpt from the post
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>
this could be modified for various plugins too, like jqueryUI
(also referenced from http://html5boilerplate.com/ as noted in linked post)
Basically you have to include three things in the following order,
jquery API placed under js folder(something like jquery-1.5.1.min.js)
jquery UI library placed under js folder (something like jquery-ui-1.8.13.custom.min.js)
jquery ui css file placed under css\ui-lightness folder (something like jquery-ui-1.8.13.custom.css).
You can even refer the first two js files from any CDN.
Related
I want to know if installing jquery/bootstrap/font-awesome can be done automatically, instead of installing it via npm and then manually dragging the code to my css/js/fonts folder?
Is there no program that can update and automatically drag them to the correct folder?
I know people are saying that you can just manually drag the javascript file to the correct location, but bootstrap for example consists of more than a single javascript file. It includes font and css files.
If I were to include them in this manner:
\web
-\css
--\app
---\main.css
--\font-awesome
---\font-awesome.min.css
-\fonts
etc.
Then it wouldn't work, because font-awesome expects it's fonts to be one folder aside.
JQuery, Bootstrap and Fontawesome are not softwares or applications that you install in a webpage. They are just CSS and Javascript files. So these are like any other javascript or CSS file you may have written from scratch for your webpage. Except that they are well maintained, highly optimized and made for a particular application. (Like Bootstrap primary purpose is to provide a framework for making webpages responsive.)
To include them to a webpage all you have to do is tell the HTML file to use those files. And this is done by linking them to the HTML using the <script> tag and its src* attribute. (*W3schools link. Hehe).
Now in src attribute you may provide a URL to a location on the web containing the file or you may provide a relative local path to a location in your server or local machine containing the file. Yes, you can manually drag the files into your css/js folder and just include the files using that path. No Im not aware of any softwares to automate the process. But you need only place the file in one location for an entire webpage and its sub pages to access it. So its not a very intensive process.
As for why CDN's host such files for public access, an insight is given here : How cloudfare provides free service. And security, well, they are pretty darn secure, it is literally their job to provide secure access to the files they host. And why people use CDN in the first place is because this (in short performance).
Update:
As for how to include files in your HTML, it goes like this (Bootstrap example) :
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
You need to provide the path to the required CSS and JS files. In the case of Bootstrap these two are the only ones you need to include to get full functionality of the library.
I think it is not a good idea to use local files instead of CDNs until you are not working offline.
Here you can read about CDNs vs Local Files:
https://halfelf.org/2015/cdn-vs-local/
Multiple files on CDN vs. one file locally
https://www.sitepoint.com/7-reasons-to-use-a-cdn/
Although there is one another link that is just opposite:
7 Reasons NOT to use a Content Delivery Network
Nevertheless if you want to use the files locally you can follow the instructions below:
Move at the cdn link in your project
Copy the link from src or href and open it in your browser.
Save the file locally and give the reference of the file in your project.
I am working on a project that I want to use JQuery for since many people have recommended learning JQuery while learning Javascript and CSS to help enhance your programming abilities.
I looked into JQuery and downloaded both the compressed and uncompressed versions as well as the addition map files and notes, but I am semi-stuck on what to do next.
I understand that I must somehow import the script and implement it into my code, but I was reading online that Brackets.io may not support JQuery extensions or something about an issue with JSLint errors and files? I have no clue what any of this really means and I am just looking for a quick way to get JQuery plug-ins and code working in my current project.
I moved all the JQuery related files to my programming folder. What should I do next?
In your HTML document head, insert the following tag:
<script src="jquery-1.11.3.min.js"></script>
replacing the jQuery version with the version you downloaded.
Then jQuery will be available from any script running from within that html document. You will need to include this line in the head of every document you plan to use jQuery with.
To add jQuery plugins, add additional script tags below the jQuery script tag, with each src pointing to the .js file of the plugin.
I am loading the following javascript files from a CDN. Is there any way I can check if these have been loaded correctly and if not, load them from a local folder?
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js
http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js
http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js
I know I can check the jquery file but not sure about the others. Any tips?
In your HTML, you can do something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
The example shown is loading jquery from Google CDN and falls back on a local copy of JQuery if that fails.
Credits to HTML5 Boilerplate for showing the trick
YepNope.js is a more robust solution for loading resources (like js files), checking whether they've been loaded or not, and then providing a fallback if necessary. This is just 1 feature among many provided by the library.
Let's say I want to give my partners a simple <script src> tag to include some dynamic content on their site, loading from my site.
Is there any way I can use some javascript framework in my .js file so I can do some more fancy things? jQuery? I assume this is a problem as it might conflict the site's own javascript code? What if they already included jQuery on their page? Or some other conflicting library?
You can use jQuery's noConflict mode:
<script>
myOwnJQuery = jQuery.noConflict(true);
</script>
You can find more details in an excellent answer to a similar question.
I suggest using the LazyLoad library.
Then modify the original LazyLoad js file and at the end append the appropriate LazyLoad.XXX calls which then loads any other .js you are interested in. This is then the file you hand to your partners to include.
e.g. if you then want to load jQuery just load it via LazyLoad and use the noConflict() function.
For more details about that. Check these and similar references
Using jQuery with Other Libraries
How do I run different versions of jQuery on the same page?
I am using Eclipse Ganymede and Tomcat 5.5. I would like to add some javascript and especially ajax functionality to a dynamic web project and need some help.
I would like to use jquery (but I am open to other suggestions, if you tell me why another library would be better in this case, but I have chosen jquery because it is supposed to be simple (which on the first look it seems to be)).
I am having two problems:
1- Tomcat can't find the jquery library. I tried several things in my jsp file like:
<script type="text/javascript" src="WEB-INF/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/WEB-INF/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./WEB-INF/lib/jquery-1.3.2.min.js"></script>
As you can see, I threw the jquery library in /WEB-INF/lib. Executing the jsp file within a browser without tomcat (with the last path version) works, so the path is correct.
2- There is no proper syntax highlighting within the dynamic web project for jquery and no popup suggestions. I also tried the information in this article, but it didn't change much.
To be more specific (because it took me about half an hour to figure this out after getting to this point):
When you create a Dynamic Web Project with Tomcat in Eclipse, among other things in the project you get a folder named "WebContent". That's the actual folder that gets deployed to the Tomcat server, in Eclipse's equivalent of Tomcat/webapps/<project name> (I'm not sure where it really exists). For security reasons, as a special case nobody can access the META-INF and WEB-INF folders in there, so putting your scripts in those places will not help.
What you have to do is create a folder inside of WebContent, and stick your Javascript in there. This folder will be globally visible, so visitors to your site (like you, when you test it) can actually get to the Javascript.
What I did, for instance, was create a folder named "script" in WebContent and put my Javascript in there; then, when I needed to reference it in a page, I put in src="ProjectName/script/AwesomesauceJavascript.js"
I'd like to add to what #Tacroy responded with. Within the server you're using in Eclipse, check the server.xml. Make sure:
Context docBase="SomeProjectName" path="/SomeProjectName" <-- path and docBase attributes need to be the same.
I had two different things there, and had to make them identical for the src attribute to work in the jsp.
First you must to add resource mapping to your folder where you put jquery.js script library. That folder must be public.
To make folder public use this line of code:
<resources mapping="/scripts/**" location="/WEB-INF/scripts/**" />
Now you just need to add reference in your page to this path:
<script type="text/javascript" src="scripts/jquery-1.10.2.js" ></script>
Below are the steps to enable jQuery syntax highlighting and content assist highlighting in Eclipse.
Download jqueryWTP0.40foEn.jar.
Find your Eclipse Plugin org.eclipse.wst.jsdt.core_version.jar, backup the plugin.
(e.g. C:\DEV\EclipseIndigo37\eclipse\plugins
\org.eclipse.wst.jsdt.core_1.1.100.v201104272153.jar)
Double click the JAR file or run with command java -jar jqueryWTP0.40foEn.jar.
On the opened swing UI, choose org.eclipse.wst.jsdt.core_version.jar, and output directory.
Click the generate button.
Replace the old org.eclipse.wst.jsdt.core_version.jar file with the generated file.
Delete the directory workspace/.metadata/.plugins/org.eclipse.wst.jsdt.core
Start Eclipse.
Open a HTML file or a JavaScript file, edit JavaScript content.
jQuery content assist is now available.
Plugin Developer & Source