So I found a nice website on CodePen and I want to copy/paste it local so I can play with it a bit. I have created all 3 files ( html, css, javascript ) in the same folder and I linked them in the html file.
In the local folder I have : index.html + stylesheet.css + Javass.js.
I have linked them in respectively like this:
<link rel="stylesheet" href="stylesheet.css">
<script src="Javass.js"></script>
I think the css file is showing but not the js one. Can you help me?
Edit: https://codepen.io/TurkAysenur/pen/gORaboY (this is the codepen)
It is hard to tell like this.
Though here are the common things:
Copy code pen's html into the body html element (don't replace the whole code)
Make sure JS runs after page loaded ( window.onload=()=>{...} ) or any other solution for that.
Edit: according to Yogi there is an export button. This could be the simplest solution for you
Related
I'm working on a website with play framework and I have a little problem.
I am using a main.scala.html page which includes a <script src="#routes.Assets.versioned("javascripts/jquery.js")"></script>
Then to create a page I use #main("pagename") {body content here}
The problem is that when I start the webserver it doesn't include the javascript file. It does work for the CSS however: <link href="#routes.Assets.versioned("stylesheets/main.css")" rel="stylesheet">
This is showing in chrome developer tool:
The jquery.js is located in: /public/javascripts/jquery.js
Does somebody know how to fix this? Thanks
I have put the script tags inside the body now and it works. Don't know why it doesnt work when I put it in the main.
Alright, so I have Jekyll running my site locally and it runs perfectly fine. When I pushed everything to Github and made it a gh-page all styling and js functions disappeared. When I go onto the site I see that the css files that it is pointing to are empty, though they clearly have styling in github... So i've tried several of the solutions that I could see on here, but to no avail. This is the gh-page currently: https://jacobprice.github.io/Webpage/
The code is here: https://github.com/JacobPrice/Webpage
I've been changing stuff around based off solutions here, so hopefully I haven't broken something else... Any help is greatly appreciated.
Note** if the site is down it will show an old ruby on rails project with a countdown. That is not the gh-page site.
View page source your website.
I see your url failed
Edit Your Url load css and js file:
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/js/functions.js" type="text/javascript"></script>
You should use relative path for url
Okay, so this is kind of a work around... Not sure why it wasn't directing to the proper folder, but the fix for me was to copy my main.css (the full css that sass compiles) and then create another main.css file where it kept pointing too. Kind of a hack and not proper, but it works...
In _config.yml, set baseurl: /Webpage and call your resources like this :
<script src="{{ site.baseurl }}/assets/js/jquery-2.1.1.min.js"></script>
It will now work both locally and on gh pages.
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
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.
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.