I'm totally new at coding and i have some trouble using the dragNodes plugin. I can make the plugin work by itself with the generated random graph example, but I am struggling to make it work with my own graph.
I don't understand what to put in the html. I tried to put only that:
`<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>sigma.plugins.dragNodes(s, s.renderers[0]);`
and it doesn't make my nodes move. I think I have to change the content of "s" and "s.renderers[0]" but I cannot find where., and I don't know how to do it...
Basically, I would love if anyone could give me some explanations about how to plug a plugin in my page?
If you could help me, I'm lost and that would be awesome! Thank you a lot!
I think you are mixing up two things:
How to use script into html
How to include external js files in a web page.
In order to insert javascript directly into an html page you have to use the script tag as follow (called inline js):
<body>
<script>
// some inline js
var a = 1;
</script>
</body>
In order to include js from an external file you have to reference the file with the src attribute just like you did.
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>
The only thing that you missed is that sigma.plugins.dragNodes(s, s.renderers[0]); is also some js code, you thus have to put it into script tags to that it can be interpreted as such by the browser.
Here is what you probably are trying to write:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
<script>
sigma.plugins.dragNodes(s, s.renderers[0]);
</script>
Having all this into <body>tags.
I should also mention that to render your graph using sigma you should have an instance of sigma in your page, and in your case it should be called s.
To learn more about js/web programming I would advise this: http://www.codecademy.com/
As far as documentation for sigma is concerned check out their tutorial: http://sigmajs.org/
In addition to Nicolas Joseph's answer (put javascript in script tag), you should also download the js library that is required and save the html file in the appropriate path.
For example if your file.html is in a directory dir (dir/file/.html)
Then the command:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
will search for a file named sigma.plugins.dragNodes.js in the following path:
dir/sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js
To check out which librarires you are missing you should open debug mode in your browser (right click->inspect element) and check the console tab.
Cheers
Related
I'm working on a website mostly just for fun and am using HTML and CSS. I have some limited knowledge of these languages, but have never used jQuery before. But for only one page of the website, I wanted to have "linked sliders," which I found could be created using jQuery. I found a jsdiddle with some sliders and modified them to fit my project.
Here's the jsdiddle with the end product that I'd like to be embedded on one page of my site: http://jsfiddle.net/7e8xwjer/8/
I looked up how to add jQuery to a page, and took the following steps:
1) Downloaded jquery-1.12.3.js and renamed it jquery.js.
2) Added the following line of code in the head of the page:
<script type="text/javascript" src="jquery.js"></script>
3) Created a new .js file called js1.js with all the jQuery code from the jsdiddle.
4) Added the following line of code in the head of the page (in addition to the first):
<script type="text/javascript" src="js1.js"></script>
5) Added the CSS styling and HTML table from the diddle as needed.
The CSS and HTML table work fine, but none of the jQuery works. I'm sure I've made a simple error here, but I can't figure it out! Please let me know what other steps I need to take to get the jQuery script functioning on the site.
Thanks in advance for the patience and help.
JSFiddle, usually, (depends on the settings you choose [see image, point 1]) encloses all JS code into a document ready event so your js1.js should look something like:
$(document).ready( function(){
// your code from JSFiddle here
});
EDIT:
looking at your Fiddle, you are using JqueryUI [see image, point 2] so have to include it as others said in comments.
EDIT 2
your fiddle is set "onLoad" [see image, point 3] so to reproduce exactly the same condition you would have to replace $(document).ready with $(window).load; however I'm not sure that in your case you need to wait until all resources are loaded... So don't change it unless needed.
jQuery is a library of functions. You need to import them. When you download the library, you need to point the src= correctly. The directory where jquery is in relation to the overall file structure.
myharddrive
\ myfolders
\ mysubfolders
\ jquery
index.html
mycss.css
\ myfolders
src=/jquery/jquery.min.js
I am using a simple plugin from http://www.highcharts.com/demo/pie-basic which has a javascript file stored in view options. I am using this file in my index.html code as <script src="js/pie1.js"></script> inside <body> tag where pie1 is a javascript file stored in js folder. When i run my html page nothing happens.
can anyone help me where I am getting wrong? I am new to using plugins so please bear with me and correct me if anything is wrong.
Most likely you have this situation because javascript start running the plugin before your html is ready.
Place <script src="js/pie1.js"></script> just before closing tag </body>
I have just started learning jQuery today, i have written up a code in a javascript file. This code is designed to make a button fade when hovered over it, and then return to normal after moving the mouse away. Now as i have just said, i am very new to jQuery, and that means i am thinking this is down to setting it up wrong. Here is my javascript contents :
$(document).ready(function(){
$(".buttons").mouseenter(function(){
$(".buttons").fadeTo("fast",0.25);
});
$(".buttons").mouseleave(function(){
$(".buttons").fadeTo("slow",1);
});
});
This javascript file is saying to fade my class "buttons" when i hover over them.. I have linked my HTML file to this js file with:
<script type="text/javascript" src="script.js">
I know that links up to the javascript file correctly, as i open my html and the console says "$ is not defined" on line 1. Now that is the very first line of my javascript. So clearly my html is opening my JS file, but isnt liking the $ on the very first line.
Again, ill repeat, i am very new to this and anything that should be obvious, will not be obvious to me. Thanks for any help i get.
The dollar sign belongs to jQuery libraries namespace so you need to include jQuery before using it. After including the library you can use these functions, e.g. for selection via $('.classname').
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
This includes the latest jQuery release in the minified version. You can load and host this file local as well.
Did you include jQuery in your html file? Something like
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
This must be included before the first use of $, thus before including your script.js
I have a gist setup here. I use the following code to embed a single file from my gist to a webpage.
<script src="https://gist.github.com/4672365.js?file=1.java" type="text/javascript"></script>
But what I want is to embed a single line from file 1.java. You can say that I want to embed only line #2 from file 1.java into my webpage. Thanks in advance for help :)
After I got no helpful answers to this question, I tried myself to do some javascript coding. I have uploaded that code on github. The file on this link does the magic. To embed a single line into your webpage you need to add reference to my javascript file in HEAD tag. Here is a simple code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://github.com/kashif-umair/gist-embed/raw/feature/show_single_line/gist-embed.js" ></script>
</head>
<body>
<code id="gist-<YOUR_GIST_ID>" data-file="<YOUR_FILE_NAME_IN_GIST>" data-line="<LINE_NUMBER>"></code>
</body>
</html>
You need to replace YOUR_GIST_ID with the ID of your gist, YOUR_FILE_NAME_IN_GIST with the file name from which you want to embed the line and LINE_NUMBER with the line number in file which you want to embed.
NOTE:
If you want to embed a single line then both the file name and line number should be present in code tag.
If you want to embed multiple selective lines from a file then you should put values something like MS Word page ranges for printing. e.g. data-line="1-4,10,12-15". Please make sure that you used the correct syntax to put these values to avoid getting odd results.
If you want to embed whole file then remove the data-line attribute from code tag.
Hopefully I've helped for the people who have or will face this problem.
As I am continuously making changes to my javascript file so I think updating this answer every time is not a good idea at all. So from now I'll update the README.md file in the GitHub repository. Anyone having problems can visit the github to read README.md file. For reference I'm adding the link to my repository here.
https://github.com/kashif-umair/gist-embed
P.S: Please take a look at my javascript file in the github repository and suggest any good practices for coding.
The Right and fastest way to do is just append the .js address with ?file=file.name : )
<script src="https://gist.github.com/kashif-umair/4672365.js?file=MyApplication.java"></script>
Create a gist containing only the line you need.
My site calls an external JavaScript file to create the footer on every page. I would like to include a follow button in the footer. However, all of the examples on the developer page are geared toward creating the button from an HTML file with embedded script, and I am not experienced enough with JS to figure out how to rewrite the code to work without the HTML. I have already tried storing the whole HTML blob as a string and writing it to the document. I also took the JS out of the blob and added it to the file, but that didn't work either.
Here is the HTML they provide, and I tried to extract
Follow #dbb0
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>
To answer your main question: yes it's possible.
You should use the DOM, innerHTML (be careful with this) or jQuery to create a very similar html structure, and then add it to your document.
You should ask more specific questions to get further, this is too vague :)