Conflicting Scripts - conflict

I've read the Jquery docs page on conflicting scripts. But i'm not really understanding it. As well, it's multiple .js files that are conflicting, and they have the same names to boot. (but they aren't the same within.)
I have a set of .js for a fisheye effect. Then i have another set of .js for draggable. Draggable won't work with the fisheye scripts, and vice versa.
These links are for the fisheye effect.
<script type="text/javascript" src="HandFan/jquery-1.js"></script>
<script type="text/javascript" src="HandFan/ui_003.js"></script>
<script type="text/javascript" src="HandFan/ui.js"></script>
<script type="text/javascript" src="HandFan/effects.js"></script>
<script type="text/javascript" src="HandFan/ui_002.js"></script>
These files are for draggable.
<script type="text/javascript" src="Draggable/jquery-1.js"></script>
<script type="text/javascript" src="Draggable/ui.js"></script>
<script type="text/javascript" src="Draggable/ui_002.js"></script>
From what i understand of what the doc said,
File1.noConflict();
// Use script File1 via File1(...)
File1(document).ready(function(){
File1("div").hide();
});
// Use script File2 with $(...), etc.
$('someid').hide();
I'm not sure what to do with regards to the multiple files, I'm sure that speaks to how new i am to this.
EDIT
After looking online, i thought it would do me good to use a single jquery.1.3.2.js file, hosted by google. However, that didn't work. So it would seem my problem is that i need each of the scripts above for my effects to work, and this just seems wasteful to me. Is there a more efficient way to do this?

I don't fully understand why you need to include jQuery more than once. For example, the draggable plugin will work fine if you've already included jQuery further up on the page. The same goes for any UI scripts you're including.
Your script declarations will likely work better like this:
<script type="text/javascript" src="scripts/jquery-1.js"></script>
<script type="text/javascript" src="scripts/ui.js"></script>
<script type="text/javascript" src="scripts/ui_002.js"></script>
<script type="text/javascript" src="HandFan/effects.js"></script>
<script type="text/javascript" src="HandFan/ui_003.js"></script>
The draggable stuff should work fine without needing to have its own set of the same base libraries defined.
Given this might not be working for you, let's see if it's the jQuery files that are the problem at all.
The jQuery noConflict() method allows you to assign different variables to call jQuery instead of the very common $ symbol. See if the following works:
var j = jQuery.noConflict();
You can then use the letter j where you would ordinarily use $. For example:
j('#myElement').draggable();

Related

Can't import pixi in module

This seems so simple, but I just can't get pixi to work in my module.
in the index.html
<script id="main" type="module" src="./src/index2.js"></script>
in the index2.js
import * as PIXI from './pixi.js';
let app = new PIXI.Application();
Error: Uncaught TypeError: PIXI.Application is not a constructor
I have the pixi file in the right place. Can't figure out why I can't get this thing to work. Do I need any other support files? Thanks
Oh weird. With my limited understanding of modules, I thought you could never just go like this:
<script type="text/javascript" src="./src/pixi.js"></script>
<script id="main" type="module" src="./src/index2.js"></script>
I thought with modules, a module could not communicate with scripts included this way. Turns out they can I guess. That was the big thing missing this whole time...I think.

How to download this working jsfiddle?

The example given in jsfiddle.net/jjx86sqb/ is excellent and would like to download all the files.
Pls let me know how to download it.
I want to run the sample html file example locally
Simply copy and paste the HTML and jQuery sections of the fiddle to your own document.
Don't forget to include the four relevant external files:
https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css
https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js
https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/css/dataTables.alphabetSearch.css
https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/js/dataTables.alphabetSearch.min.js
You'll also need to reference jQuery itself (version 1.11.0 in the fiddle).
Version 1.11.0 can be found at:
https://code.jquery.com/jquery-1.11.0.min.js
Note that jQuery must be referenced before the four DataTables scripts.
Your <head> should look like this:
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/css/dataTables.alphabetSearch.css">
<script type="text/javascript" src="https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/js/dataTables.alphabetSearch.min.js"></script>
</head>
The jQuery code itself must be placed between <script> tags after the five external files have been included.
Hope this helps! :)
it is possible. and easy.
add /embedded/ to the URL of the jsfiddle you want to download.
click on the result tab
right click on the screen and select view frame source (and not! view page source)
save the complete html you see to html file.
It is impossible and unnecessary feature to download the code. There are max 3 codes for you to copy viz. HTML, CSS and the script.
Just click on any of the code > Ctrl+A > and copy and paste it wherever you want.
Repeat the same steps for each code.

How to control the order of JS and CSS files in Xpages themes for better performance and especial files like Handlebars and Less

I like to know if there is a way to control css and js resources order in XPages Themes or Custom controls. Two reasons for this:
1. Performance: Is well known that when you place js files before the closing body tag the render is faster for the user (link). I can do that placing a script tag at the bottom of the Xpage or custom control but if I do so I'll lost the huge performance adventages I got when I use the resource tag and then check Application > Properties > Xpages > Performance > Use runtime optimized Javascript and CSS resources (in the latter case, js files are placed in the head tag).
2. libraries like Handlebars and Less: using resources tags I can add js and css with content-type text/css or application/x-javascript but with libraries like Handlebars and Less (really useful libs) I need different content-type or attributes.
This question is mainly on performance because it already works using link and script tags in custom controls like this:
Handlebars:
<script id="entry-template" type="text/x-handlebars-template">
template content
</script>
Less:
<link rel = "stylesheet/less" type="text/css" href="css/styles.less" />
<script src = "js/vendor/less-1.6.0.min.js" type="text/javascript" ></script>
...but I feel a little dirty :)
If possible try to use the non-blocking pattern for your JavaScript libraries. This should prevent performance problems:
<script>
var s = document.createElement("script"),
t = document.getElementsByTagName("script")[0];
s.src="js/vendor/less-1.6.0.min.js";
t.parentNode.insertBefore(s, t);
</script>
EDIT:
<xp:script clientSide="true" type="text/x-handlebars-template" contents="template content">
<xp:this.attrs>
<xp:attr name="id" value="entry-template" />
</xp:this.attrs>
</xp:script>
<xp:linkResource type="text/css" href="css/style.less" rel="stylesheet/less" />

Flexslider - what am I doing wrong?

I had a really simple question.
I'm trying to implement Flexslider (http://www.woothemes.com/flexslider/) onto my page http://www.gofree.com/123-LAC/ but it does not seem to work (the images appear really large and are listed).
I followed all of the directions on the page. What am I doing wrong?
Thanks in advance!
Use jquery library above the flexslider.
<link rel="stylesheet" href="styles/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="styles/jquery.flexslider-min.js"></script>
And dont use another jquery library in that page. It create the conflict of both jquery library.
Always Use jquery latest.. It improve the efficiency and performance
of the site
Learn jquery

How to set up DOJO

I am a beginer to DOJO , finding difficulty to set up DOJO
This is my Program :
<html>
<head>
<script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
</script>
<title>button</title>
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
function init()
{
alert('Click on the Hello World Button');
}
dojo.addOnLoad(init);
</script>
</head>
<body bgcolor="#FFFFCC">
</body>
</html>
I have used the dojo.js file from the external site itself that is by
**<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>**
But still i am getting errors .
Please see the screen shot related to errors
http://imageshack.us/f/545/dojoh.jpg/
Also i have downloaded , the DOJO Latest relaese , and kept this in C:\dojo-release-1.6.1
Could anybody kindly please tell me , as what should be the source path to dojo js , i tried the below way , but doesn't know why this js file hasn't been recognized
Thank you for your time .
You are on the right track, there's just a small issue with your HTML. The following snippet is not valid:
<script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
</script>
You can't have a <script> tag within another <script> tag. Remove the outer tags, so you're left with just this:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
This is what caused the "unexpected end of XML source" error. Also, since the error prevents dojo from being loaded, you get the "dojo is not defined" right afterwards.
Secondly, you cannot require dojo modules with wildcards ('*'). You have to explicitly require the ones you want to use. So the following is not valid:
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
Lastly, you probably want to run your Dojo application through a web server, not just as a local file. It may work for now, but you're bound to run into some weird issues after a while.
Hope this helps.
In the HTML code you have here Dojo won't load, as script tag loading dojo is inside another script tag. Get rid off the outside script tag.
You should only require modules that you need. Here you do not seem to need any of the extra dojo modules.
Here is an example of having dijit.form.Button http://dojotoolkit.org/reference-guide/dijit/form/Button.html It will give you better idea of how you can load modules.
To load dojo.js file from your computer, if your HTML file is in projects dir then you may add your dojo-release-1.6.1 dir inside projects dir and may want to rename it as libs. Then in your HTML file you should load dojo.js file as
<script type="text/javascript" src="libs/dojo/dojo.js"></script>
In addition to the other answers, please note that your sample code reflects Dojo 0.4 APIs from about 5 years ago. The code has been refactored significantly since then. Most widgets live in the dijit package