So I have this thing called "AdHitz" on my website (I'm not old enough for AdSense), and I need to put ad code on every page in order for it to work. The thing is, you have to change the script link from time to time, and I didn't want to have to edit every single webpage every time the link changed, so here's what I did:
Original:
<script type="text/javascript" src="http://adhitzads.com/745025"></script>
Newer:
<script id="ad1"></script>
In the CSS Stylesheet file:
#ad1 {
type="text/javascript";
src="http://adhitzads.com/745025";
}
The thing is, the ads are no longer showing up! What should I do?
Here do this.. Include this script tag on each one of your pages:
<script type="text/javascript" src="ads.js"></script>
Then make a file called ads.js and put this in it
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://adhitzads.com/745025";
document.head.appendChild(script);
Then everytime your ad company changes your url, just open ads.js and change the URL there.
Your best option would be to use a server side include to put the script on each page.
You could put your script into a script file (ad-script.js, the name does not matter) and include it in your pages like this:
<script src="ad-file.js">
You could also create a file like ad-file.html and then paste the script into it. Then include it in each page like this:
<!--#include file="ad-file.html" -->
Also, CSS is a styling language, so it cannot handle scripting.
You seem to be confused about how CSS works. While your CSS correctly targets elements with the ID of "ad1", CSS is formatted like "display: none;" and not with equal signs. Secondly, 'type' and 'src' are more than likely not valid CSS attributes that you can modify.
I understand that you are worried about having to change this link on multiple pages. If you want another way to solve this problem, you can use PHP for your website, and make a PHP file for the portion of your website that has the Javascript includes. Then all you have to do is edit the one PHP file and every site will include that one file. Alternatively, you can use a better and free text editor, such as KomodoEdit, to do a mass replace with very little trouble or time required.
Related
How can I add my script directly to my page instead of putting it in <head> or <footer>? For example,
<div>
My script here
My html
My html
</div>
Thanks!
What you are trying to achieve is not the WordPress way and is not advised but it can be done ... that's for sure.
The normal way how to do this (is to include/enqueue the js or css file, using wp_enqueue_style function to enqueue css files and wp_enqueue_script to enqueue js files. Proper documentation on how to use those functions can be found on the WordPress Coding reference guide if you search on the internet.
If you want to add your script just to one of your pages/posts, etc ... you can do the old way by inserting the script tag inside the post like this:
< script scr="script-src">< /script>
if the script is not external, is just some small functionality you want to add then you can simply use:
< script>alert('hello world');< /script>
These scripts cant be added on the backend side ... they need to be added on the theme's code ...
Remove all extra spaces i had to add here because of the script tags being filtered for security measures.
Hope i have helped you to achieve what you wanted.
Its the same, use
<script>
xxxxxxx
</script>
I am little new to web development and when I was searching internet about other topics, I have seen many people has put popular JS Libraries in Different Places of their websites.
eg: Inserting JS Libraries on the Very Beginning or Start of the <head> </head> section. (Before loading any JS Code or a CSS File)
eg: Inserting JS Libraries on the End of the <head> </head> section. (After loading all JS Codes and CSS Files)
eg: Inserting JS Libraries on the End of the <body> </body> section. (After loading all JS Codes, Texts, Images, Videos, CSS Files etc...)
So my question is this.
What is the best practice for inserting (where) following JS Libraries, Plugins and CSS Style Sheets to a web page for the most faster loading times and other advantages? - Please mention the reason -
JQuery and it's Plugins
Bootstrap 3.js
Modernizr.js
Angular.js
And another widely used JS Libraries which I couldn't mention here...
Normalize.css
reset.css
bootstrap.css + more
Thank You..!
There is no so called "standard" method. The choice of where to put the lines boils down to one question: When will I need the library?
You see, web files loads line by line, let's take the following as an example of what I mean:
<script>
document.getElementById("target").innerHTML = "changed"
</script>
<p id="target">unchanged</p>
#target isn't altered because the script was loaded before the element did. Web files loads procedurally. When the line of JavaScript is loaded. It is executed immediately, but the target element isn't. So it couldn't change the element.
Even with jQuery, there is the same problem:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#target").text("changed");
</script>
<p id="target">unchanged</p>
Therefore, we often use $(function(){}).
Back to the loading problem
People who put their <script> tags or <link> tags in the body (in front) or in the head, wanted to execute the script immediately, sometimes they won't use $(function()) or document.onload
People who put their <script> tags or <link> tags in the body (in the end) wanted to ensure all elements are loaded then execute the script or load CSS.
Conclusion
You should load independent resources such as jQuery first, then load dependent resources such as jQuery plugins. Then you try to decide when you want the resources to start loading, then put the lines in places.
You should put CSS links in the <head> tag because you don't want visitors seeing unstyled content before loading the CSS files.
If you can't decide or don't care about the time, put every <script> and <style> tags in the <head>.
Here is another post you might be interested in: Load and execution sequence of a web page?
CSS can added inside header tag & but put all JS Libraries and custom files just before closing closing body tag
<body>
//other tags
<script> All Scripts here </script>
</body>
By doing so you wont have to check if DOM content has loaded.
It decrease page loading time.Otherwise a js need to be completely loaded before DOM loading.
It also makes sure that all events are attached properly to DOM element.
I think this address all your concern specially the third one
CSS Sheets go in the < head >. The order of the CSS files matter so libraries should be put in first then you can put in the specific ones you have.
Javascript links go in the < body > but place them at the very end. That way your HTML content loads first then the JS loads and it will recognize all your selections. It is more efficient to do it this way.
The most important thing to note when placing your css and script tags is that the order you place them determines the order they are loaded in and if style or code is loaded later it over writes the code written before. So if you have css styling that assigns different styles to the same attributes of the same element then it is the one loaded later that takes effect. And with script tags it's important to remember that for dependency reasons. You should load the dependencies first so that they are there for the other scripts to use. Aside from that normally css tags are in the head and script tags at the bottom of your body element
We're using a webprogram that uses ajax and jquery and the like (Netsuite). I want to change something on a page and have tried to use document.ready and window.load to get an external script loaded on the page. I've tried to load the external script in the head and body.. but the contents aren't written. The external file looks for a specific div id and then prepends some code to that. It never works, because the page itself loads dynamically and the div I'm looking for loads when the rest of the page is done. So window.load, etc. never work...
At last I'm in the program itself that loads parts and pieces and am trying to simply write the external script file in there. Now this time the external file has a simple document.write in it, so it's straightforward. In other words, the script is in the middle of html code in the body of the page. (I know this is a terrible way of doing it, but I've got to try something to get this to work....)
According to firebug, it writes the external file where it should be (check!) and firebug shows me the contents of that file (check!), but ... it never 'writes' it onto the page...
The file just contains this:
document.write('<div id="shpblk" style="border:2px solid #ffa500;border-radius:7px;color:#000066;margin:5px;padding:5px;text-align:left;"><img border="0" width="12" height="12" src="/images/icons/store/icon_exclamation2c.gif">Hazardous conditions blahblah... Potential delays and disruptions can be anticipated.</div>');
What am I missing?
Edit: some more clarification is necessary...:
Situation: I have to be able to put a piece of html on the page every now and then that creates a message.
Environment: What I have is a page that loads a header and footer first (which are set up in separate files) and then it takes a second or so to load the rest of the page. From what I understand, this "rest of the page" is written in a certain code, similar to javascript/jquery.
What I CAN do is: edit the files for the header and footer and put javascript in there to make modifications to the rest of the page. I can access some of the files that contain parts and pieces of the "rest of the page", but this is a huge pile of spaghetti.
What I've tried:
Since I want to be flexible with the html that I need to put into the page, I preferably would like to create a piece of javascript or html or whatever on another site and have the "environment" pick up that code. I can do this with javascript or iframe. But since it's a secure area (https), I thought it would be best to use a javascript file instead of an iframe. So....
I created the javascript file and tried it out in a normal environment where I knew for sure it would work.. and it works like a charm. But when I tried this in the before mentioned "environment", I am running against a wall...
The javascript file has document.ready jquery statement in it and it would prepend the html div to an existing div on the page.
This way it would load the page and write the page.. easy as pie.
However.. since the header and footer load first (which includes the external script file), and then the rest of the page, SOMEHOW the div where the script checks for DOES NOT EXIST YET. So I tried window.load instead of document.ready. Same result.
Now, it WOULD appear ONLY when I refresh the page. So there may be a way to have it refresh the page, but I only want this as the absolute last attempt.
So then I tried to see if I could go around this by changing the script so that, instead of using a document.ready it would just do a simple javascript document.write statement.
Then I call the script in the middle of the body of the page (I put it in one of the files that load in the middle of the page). I know this is not something I would do normally, but wanted to try it out anyway. So.... I would have something like this:
<div id="block1">
<div id="block2">stuff here<div>
<script type="text/javascript" src="https://someotherdomain.com/include.js" ></script>
<div id="block3">stuff here<div>
<div id="block4">stuff here<div>
</div>
Now when I run this, I do not get any errors, but nothing is being done with the contents of that js file. In firebug it shows me the contents of that file though.. so I assume it's being read.
But I have no idea why it doesn't run.
Again.. back to 'normal' practices: I've tried window.load, because this would run the statement after the page loads, HOWEVER.. like I said before, I have the feeling it builds the contents of the (middle of the) page through this somehow and my script runs before this; it cannot find the div (block3) where it would prepend to. Whenever I stop running the page at my script, the div it's depending on doesn't exist yet...
I hope this made sense...
Solution
For the external script file to work as expected, OP will need to load it using an asynchronous script tag like this:
<script type="text/javascript" src="include.js" ></script>
Yet, the file contains a document.write() statement, which is generally something to avoid. A better alternative would be remove document.write() from the file and save it as a plain HTML file. This could then be safely loaded using using jQuery:
$("#include1").load("include.html");
( Requires adding a target DIV to the page where the content should load. )
DETAILS
The question doesn't tell us how the external file is included on the page. And without that information it's difficult to understand the problem or provide a solution ... which is probably why this question has gone unanswered.
Yet, let's assume the the script is being injected into the page on the client side using JavaScript or jQuery. And if that's true then it will fail if not done the correct way.
Let's look at some ways we might add the script to the page:
These script tags will all fail because the file contains a document.write statement and the script is loaded asynchronously.
<script type="text/javascript" src="include.js" async ></script>
<script type="text/javascript" src="include.js" defer ></script>
<script type="text/javascript" src="include.js" async defer ></script>
The browser does load the file, but reports:
Failed to execute 'write' on 'Document': It isn't possible to write
into a document from an asynchronously-loaded external script unless
it is explicitly opened.
This jQuery sort of works. It loads the script, but the document.write implicitly calls document.open, which erases the original content of the page. That's probably not what OP wants.
$.getScript('include.js');
This synchronous method works so long as the document.write is executed on load, i.e., is not inside function called later. So this is a possible solution for OP.
<script type="text/javascript" src="include.js" ></script>
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.
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.