I have used below code to append link tag in head section. It is having below behavior
1. I am able to see the attached link tag in firebug but not in page souce
2. my head section belongs to a different jsp file
Can i get some tips on this?
Below is the script I have used in body section
<script type="text/javascript">
var appendHTML= "<link rel='next' href='http://test.com'/>";
$('head').append(appendHTML);
</script>
Thanks,
Abhishek
You are not alone witch such kind of task on SO. Try to find around and you will see same themes - How to load up CSS files using Javascript?
Related
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>
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
With a bit of help from Stackoverflow I've managed to display blog content from Tumblr on my own website.
I've noticed that if the Tumblr site is slow, it effects the page loading speed of my own website.
I found this article on javascript.info. The article recommends using this code to create a variable of the external script URL.
var script = document.createElement('script')
script.src = 'http://ads.com/buyme?rand='+Math.random()
// now append the script into HEAD, it will fetched and executed
document.documentElement.firstChild.appendChild(script)
I (kind of) understand what's happening in the first two lines, but I don't understand how to use the last bit of the code:
document.documentElement.firstChild.appendChild(script)
How would I add the script variable into the src of the script?
<script type="text/javascript" src="URL OF SCRIPT TO GO HERE"></script>
Hope someone can help, this'd be useful for other third party scripts on my site.
UPDATE
Thanks to 'The Spooniest' for helping with this (see thread below).
I was having problems getting this to work with my current page, so I decided to strip it down and create a basic page to see if I could get just this script working.
The code below works, it drops the Javascript just before the </head> tag. Great! However there's somehting that bothers me when I inspect the page (using Dev Tools) I see this warning:
Uncaught SyntaxError: Unexpected token < ?rand=0.9741437959019095:1
Any ideas why this appears? Is it a problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
var script = document.createElement('script')
script.src = 'http://ads.com?rand=' + Math.random()
// now append the script into HEAD, it will fetched and executed
document.documentElement.firstChild.appendChild(script)
</script>
<title>Demo</title>
</head>
<body>
<p>A basic page</p>
</body>
</html>
UDATE 2
Figured out what the problem was. The URL in the script wasn't a .js file. When I enter a URL linking to a .js file (which I want) it works a treat!
You already added it.
Let's look over the code again:
var script = document.createElement('script')
script.src = 'http://ads.com/buyme?rand='+Math.random()
// now append the script into HEAD, it will fetched and executed
document.documentElement.firstChild.appendChild(script)
The first line creates the element that will become your script tag. The second line sets script.src to a particular URL: in this case it's to an ad site, but you would want to use the URL of your Tumblr code instead. The third line puts the your script at the end of the first tag inside the document element (which in this case means the head).
The magic happens in the first two lines. document.createElement looks at the name of the tag you're creating, in order to figure out the proper class to use for the element: for 'script', that means using HTMLScriptElement. This particular class knows that when you set its src property, that's supposed to go in the src attribute of the script tag. The instance you created remembers this even after you put it into the document, and so that's how the attribute gets there.
document.documentElement.firstChild.appendChild(script)
The above code will add the script to the head tag of your page. As document.documentElement.firstChild will point to head tag.
You don't have to add script variable into src, since it's already taken care by javascript code.
It's generally suggested that javasript files should always be added at the bottom of the page. So that the page loads faster.
By searching a bit, one could find this question about stopping chrome from loading a javascript file.
But this doesn't work for a script which is not linked, for example:
<!-- Some html here -->
<script id="script">
//Some script here
</script>
The script here is coded inside the html page and not linked from an external .js file. As you can see, I'm looking for a way to disable that and only that #script before it gets loaded.
Thanks in advance for your help.
I’m working on making my web site fade in and out every time I click a link to another page. I need to use jQuery to do this. Do I need to put the jQuery code on every page or can I write jQuery into the CSS Stylesheet? If so, how do I format the CSS Stylesheet to accept jQuery?
I’m experimenting with the code from this forum post: Fade Out between pages – CSS-Tricks
Edit to question based on comments
So, I now know that I can’t put JavaScript in CSS file. What’s the best way to put JavaScript code that applies to all pages in a site? I want to write this transition code and then not have to write/edit it into every page.
Save the JavaScript in a file with the extension .js, for example main.js. Then give it a public URL, in a similar way that your CSS files are accessible from a URL. An example URL: http://example.com/js/main.js. You might do that by putting it in a js folder in your public_html folder on your server – it depends on your server.
Then, near the end of each page’s HTML, right above </body>, add this HTML tag:
<script src="/js/main.js"></script>
The script tag with a src attribute will load the JavaScript at the given URL and then run it immediately.
I recommend putting it at the end of your <body> element and not inside the <head> because the script prevents the rest of the page from loading and displaying to the user while the script runs. If you make the script run only at the very end of the page, the page is already loaded and the user can see all of its content.
you need to do a $.fadeout on the window.beforeunload event, bye
PD: in a js file, not in a stylesheet, you can´t use JS in a stylesheet. bye.