How to use jQuery in affiliate sites? - javascript

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?

Related

Installing and using JQuery in Brackets.io (mac)

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.

What does the script tag do

Yo everyone. I am Admin's relative. Just a beginner in javascript. I would like to ask what is the following line, its purpose, what it does, where you put it and so on. My question might be simple but it would be really much appreciated if anyone can give good explanation to this question.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Thank you very much.
As you can see, this loading jQuery library from the CDN.
what is the following line
This will include jQuery library on your page
its purpose, what it does
As you might have read jQuery Tag WiKi on SO,
jQuery (Core) is a cross-browser JavaScript library (created by John Resig) which provides abstractions for common client-side tasks such as DOM traversal, DOM manipulation, event handling, animation and Ajax.
You might want to visit jQuery homepage.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.
where you put it
You can put this in head or at the end of body tag. You just need to add this before any jQuery plugin.
I'll highly recommend you to take this tutorial.
This line loads jQuery, a javascript library (see http://jquery.com for details on jQuery), in to your page. It is customary to put it in the <head> tag of your page, and as you're just beginning I would recommend that.
There are some cases, however, where you want to optimize your page load time and it may be better to put it at the end of the <bod> tag, right before </body>. But for now I'd put it in the <head>.
The src tells the script tag where to load the file from. In this case, it's from a CDN (content delivery network) which hosts the files, and is used for slightly faster download times (not something you'll need to worry about at this point).
And welcome to stackoverflow!
This line is usually placed in the header section of a webpage, but can always be placed anywhere depending on your need.
What the code does is it loads the javascript codes found at the link, onto the page.
This avoids having lengthy javascript codes within your webpage.
It is a link to an external script. It basically copies and pastes the code from that location into the file where you write it. You usually put it at the top of the file where you need it.
<script> tag is used for importing a script. (can be java script or vbscript.)
jQuery is a framework for JavaScript.
So the line you mentioned is to invoke the jQuery script code in your code.
Now, you can do it in two ways, either download it, and then give the src, or use it from cdn. The src in this line is from the CDN. For more details of how to use jQuery, the minimal you can read is: this.
It will load the content of the external script file. In this way you can better organise your code and reuse code libraries in different projects.
It is best practise to load the script files last in order for the browser to load the html first.

Registering a Widget Javascript Dependency on Sitefinity

I'm trying to see if there is a way like Wordpress's enqueue script to properly include scripts onto the footer. I looked up the documentation, but all I could find was a way to do it for Widget Designers. I am looking for the ways to include the script properly and I'm using MVC.
I dug this up from the forums: http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity-/where-to-store-mvc-widget-css-and-javascript-and-how-to-link-it
You could also include the js reference in your master page, which I know isn't ideal if the widget isn't used on every page. You could always bundle and minify site wide scripts to reduce the overhead a bit.
You could also try using a the Sitefinity js widget on the page the widget is used, there is an option to refrence a file and include it before the closing body tag: http://www.sitefinity.com/documentation/documentationarticles/user-guide/widgets/scripts-and-styles-widgets-group/configuring-the-java-script-widget

How can I include/require foreign JavaScript libraries in WordPress?

I am writing an interactive google map in javascript for a wordpress page. As far as I know, the only way to use javascript with wordpress is by creating a separate .js file and just calling the methods from there within the wordpress page. So my question is, if I need to use the google maps api in my javascript code, how do I 'include' it within the .js file instead of using a <script> tag in the html?
AFAIK there is no include in javascript. Take a look at wp_enqueue_script().
Edit
Just stumbled over the yepnope.js library by Alex Sexton. Maybe this is what you are looking for.

How to download jQuery js plugin?

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.

Categories