I am trying to load a different Javascript file if the site is viewed on ipad.
I have the following code but it puts the code in head section (between head tags) because of this line of code:
var h = document.getElementsByTagName('head')[0];
I was just wondering how I can place the code where ever I want i.e. between a div without name or at the bottom of the page instead of placing automatically in between the head tags?
<script language="javascript">
if (navigator.userAgent.match(/iPad/i) != null){ // may need changing?
var js = document.createElement('script');
js.type = "text/javascript";
js.src = "mainaPPiPad.js";
var h = document.getElementsByTagName('head')[0];
h.appendChild(js);
}
</script>
Thanks in advance
You need to change this line to point at another element in the document:
var h = document.getElementsByTagName('head')[0];
To append it to the end of <body>, you'd do:
var h = document.getElementsByTagName('body')[0];
Or to append it to <div id="foobar">:
var h = document.getElementById('foobar');
Just select the element via JavaScript and append it. For example:
<div id="magic-div"></div>
document.getElementById('magic-div').appendChild(myNode);
Related
I have an ad script running, which is hardcoded into my HTML. Now I want to refresh that ad tag after 240 seconds. Easy way would be to simply load the ad tag in an iframe, and put a refresh on that, but iframes cannot be used in my case.
Right now the ad tag loads like this:
<div class="banner_728">
<script type="text/javascript"><!--
bb = new Object();
bb.size = "728x90";
//--></script>
<script type="text/javascript" src="//adserver.com/tags/tags.js"></script>
</div>
How could I re-execute that javascript after a set amount of seconds, whilst leaving that ad-tag hardcoded into my site.
Apparently You'll need to load the Ad Server JS again.
var bb, created=false;
function reRun() {
bb = new Object();
bb.size = "728x90";
if(created) document.body.removeChild( document.getElementById("id-ads") );
// try this instead
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "//adserver.com/tags/tags.js";
js.id = "id-ads";
document.body.appendChild(js);
created = true;
}
var TIMEOUT = setTimeout( reRun , 240 * 1000 );
reRun();
You may or may not have security issues loading external js on the fly.
Please read this post which is going to be helpful for your needs:
How do you dynamically load a javascript file from different domain?
I got a challenge trying to better understand how things work in this world. There are two html pages:
one.html
<html>
<script>
var ifrm = document.createElement("iframe");
var c = document.head;
ifrm.src = 'two.html';
(c = document.head || document.body) && c.appendChild(ifrm);
//ifrm.parentNode && ifrm.parentNode.removeChild(ifrm)
</script>
</html>
two.html
<html>
<script>
var newL = parent.document.createElement("img");
newL.src = 'http://qwerty.com';
parent.document.body.appendChild(newL);
</script>
</html>
I can control contents of two.html and I'm trying to create something in a parent, which would persist even after uncommenting the last line in the JS from one.html. As of now, the tag is successfully created but once I uncomment the line with removeChild(), it's gone. Can one explain me why, and if there is a way to complete the task under specified circumstances? Thanks in advance!
I'm trying to create master pages using javascript. I created Javascript objects containing the html code then including the js the html files. The problem is that I cant inject css in the head of the html. the jquery append function is not working..
You don't really need to inject CSS in the head for it to style your page. I think you can just include the <link> tag anywhere in the DOM and it should work.
However, if you must include it in the head, try this:
function addcssfile(cssfile){
var head = document.head || document.getElementsByTagName('head')[0];
var s = document.createElement('link');
s.setAttribute('rel', 'stylesheet');
s.setAttribute('href', cssfile);
head.appendChild(s);
}
If you want to append just the CSS styles and properties, and not an actual CSS file, you can do this:
function addcss(css){
var head = document.head || document.getElementsByTagName('head')[0];
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
if (s.styleSheet) { // IE
s.styleSheet.cssText = css;
} else { // the world
s.appendChild(document.createTextNode(css));
}
head.appendChild(s);
}
We are using the Ning platform, and in order to add a new container DIV underneath the blog content (but before the comment section), we added the following before the body tag:
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("DIV.xg_module.xg_blog.xg_blog_detail.xg_blog_mypage.xg_module_with_dialog").after('<div>CONTENT GOES HERE </div>');
}
else{
}
</script>
However, then the content we need to load is javascript from an affiliate program, who sent us this code to add into that div:
<div style="width:750px;">
<div style="border-bottom:1px solid #FFFFFF;color:#FFFFFF;font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:bolder;margin-bottom:10px;padding-bottom:2px;text-transform:uppercase;">From Around the Web</div>
<script type='text/javascript'>
var _CI = _CI || {};
(function() {
var script = document.createElement('script');
ref = document.getElementsByTagName('script')[0];
_CI.counter = (_CI.counter) ? _CI.counter + 1 : 1;
document.write('<div id="_CI_widget_');
document.write(_CI.counter+'"></div>');
script.type = 'text/javascript';
script.src = 'http://widget.crowdignite.com/widgets/29949?_ci_wid=_CI_widget_'+_CI.counter;
script.async = true;
ref.parentNode.insertBefore(script, ref);
})(); </script>
</div>
And obviously, that does not work.
THE QUESTION: is there a better way to do this? Is it just a matter of all the conflicting 's and "s? Is there an easier way to format this or output it? Is it failing because it's simply not loading the javascript after the JQuery has already run post-page load? I have been trying different things and none seem to work and my eyes are ready to pop out of their sockets because I know there's something stupid I'm missing, so I thought I'd get some more eyes on it.
Thanks for any help/ideas/suggestions.
Try appending your new script element to the head element on your page. Most dynamic script loaders do this.
See Ways to add javascript files dynamically in a page for an example.
let say..
<span id="Singer">Bieber</span>
I know by using DOM I can duplicate 'Bieber' to anywhere..
<script>
x=document.getElementById("Singer");document.write("<span>" + x.innerHTML + "</span>");</script>
..but id doesn't seems working when I want to insert the DOM script into the script below. Is there any way to put 'Bieber' into the script below?
<script language=JavaScript src="http://lyricfind.rotator.hadj7.adjuggler.net/servlet/ajrotator/275968/0/vj?z=lyricfind&dim=35518&click=&kw=<I WANT TO PUT BIEBER HERE>"></script>
The problem you have is the browser will be firing off the request for the script before it is able to access the span element. It could be done by dynamically inserting the script tag after the span is read:
window.onload = function(){
var x = document.getElementById("Singer");
var s = document.createElement("script");
s.src = "http://lyricfind.rotator.hadj7.adjuggler.net/servlet/ajrotator/275968/0/vj?z=lyricfind&dim=35518&click=&kw=" + encodeURIComponent(x.innerHTML);
s.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(s);
};
This assumes your page has a <head> section. If not, you could append to the body instead.