Embed Partial Gist File - javascript

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.

Related

Adding a JavaScript embed to HTML

I am given this code which should display an embedded small coupon version of this page https://weedmaps.com/deals#/1118217:
<script type="text/javascript">var coupon_id = 17811;</script>
<script type="text/javascript">var coupon_type = "deliveries";</script>
<script type="text/javascript" src="https://weedmaps.com/embed/coupon.js"></script>
I do not know how to add the JavaScript to the HTML correctly. I have placed the following scripts in the head section. But I don't understand how to have the coupon generate in the div I want it to. I have tried calling the JavaScript function, but I've never worked with JavaScript before. Could someone please help me embed this coupon.
I've taken a look at your script and first of all: it definitely should be placed inside the document and not into the <head> section because coupon.js is writing out html at the placement of the coupon.js script import.
In theory you just need to place the script and it should work but there are some problems:
You need to execute it on a web server - when running as a plain html file the script just tries to find the libraries in your file system which does not work.
It still would not work because it would still try to find some resources at your web-server. In mycase it the script tried to load http://localhost:63342/restpoints/deliveries/17811/deal which will not work
To prove 2. just try https://weedmaps.com/restpoints/deliveries/17811/deal with the correct domain. Then you are receiving correct JSON which is used to fill the coupon pane.
=> Consequently the script you were given has problems if it should be executable from domains different from "weedmaps.com"
Javascript can be between head tag but it advisable to put it below before the body closing tag, to allow your page contents loads first before loading javascript. Just import your javascript. and call out. Hope this was helpful.
<!DOCTYPE html>
<html>
<head>
</head>
var coupon_id = 17811;
The JS indicates it is looking for an element with an id of #weedCouponPane. Do you have this in your html? i.e.
<div id="weedCouponPane"></div>

sigma.js How to plug a plugin on my own page

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

Including JavaScript

I know it is possible to put JavaScript is a specific .js file and then include this in any page by just doing...
<script src="MyJavaScript.js"></script>
I note that with respect to these .js files that are included:
They do not actually have to end with .js
Their content should not be enclosed with tags
However, I need to import some JavaScript that is in a file ending with extension .page (I am using force.com platform) where th JavaScript is enclosed with the tags. The reason I need to do this is so I can write som unit tests using quint. Now, my hands are tied here. The cleanest way is to obviously refactor out the JavaScript from .page file into a .js file but I can't do this. I want to know is there any way I can just import the script snippets enclosed with tags.
Many thanks
As #totero said, you can specify the script type with the attribute
<script type="text/javascript" src="myFile.annoyingExtension">
But please, don't forget to close the tag otherwhise you will get strage bugs:
<script type="text/javascript" src="myFile.annoyingExtension"></script>
Close the tag itself wont work so please, don't do this
<script type="text/javascript" src="myFile.annoyingExtension" />
Is this what you are looking for?
<script type="text/javascript" src="MyJavaScript.page">
John Resig has a good approach to deprecate Tags. Might be worth a look.
There is also a SO thread on this Tag issue. Please see here.
You mention including Javascript, and by the looks of it, you're including them in a HTML document. Do you have any other programming or scripting language available to you that allows you to edit the document? If you can use something like PHP or ASP within the platform, you could have it read the .page file and echo it into your HTML output document (possibly stripping the <script> tags from it at your convenience).

Web address virtual directory breaks external javascript link so it cannot find the files

so i have a little problem
my webadress looks a little like this:
http://localhost:23425/dynamicName/Home.aspx
the dynamicName part well....will be dynamically named. So because of that it breaks my
<script type="text/javascript" src="Scripts/jquery.js"> </script>
scripts since it can't find it. however if its
http://localhost:23425/Home.aspx
then the javascript works.
So my question is how can i get the javascript to work on the dynamic virtual directory and not have my links be broken?
i've tried this :
<script type="text/javascript" src="<%=ResolveClientUrl("~/Scripts/Menu.js")%>"> </script>
with the script links and the css links but it doesn't seem to do it. just a grey box drops down with no content.
Any help will be extremely apprectiated
Try:
<%=ResolveUrl("~/Scripts/Menu.js") %>
ResolveClientUrl creates a path which includes ../. That may be your problem.

Location of head.phtml in Magento

I am working with Magento and need to remove a Javascript that is being included in the <head> section by default.
I am using a modified theme called modern. I am looking for head.phtml in:
app/design/frontend/default/modern/template/page/html/head.phtml
It does not exist. I do have header.phtml and footer.phtml. The code from header.phtml starts well after the <body> of the document.
Where in the world would the head.phtml file be?
Thanks in advance.
Goto Core theme files in Magento :
app/design/frontend/base/default/template/page/html/head.phtml
copy this file from Base and Paste it to you theme, that is
app/design/frontend/default/modern/template/page/html/head.phtml
Now change here as per your requirement.
To Remove Javascripts goto its XML file i.e. page.xml.
Enjoy :)
I figured out what the problem was. I needed to look in the base directory under the default template:
app/design/frontend/base/default/template/page/html
I'm not exactly sure why though.
FWIW, JS should usually be removed by commenting/deleting relevant lines from the /layouts files in your theme, not the head template file itself. Unless someone added those script lines manually (naughty code monkey), of course.

Categories

Resources