I am not a JS expert so any help on this would be appreciated. I have the below script that needs to run on the page, the first is a fix to prevent a white flash when the next iframes are loaded. The last portion of the script will load an iframe depending on css media screen (different size iframe for different view ports). Problem is that both, when combined, use an onload function and because there are two, only the last one is being applied and thus renders the first onload useless.
Any ideas on how I can get both of these to work?
The code:
<script type="text/javascript">
// Prevent variables from being global
(function () {
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
onload=function(){
var el1=document.getElementById("frameContainer")
el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"></iframe>"
var el2=document.getElementById("frameContainer_medium")
el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>"
var el3=document.getElementById("frameContainer_small")
el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\"> </iframe>"
var el4=document.getElementById("frameContainer_very_small")
el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\"> </iframe>"
}
</script>
Thanks,
B
You can call it all in one function, like this:
<script type="text/javascript">
// Prevent variables from being global
(function () {
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
window.onload = function() {
div.parentNode.removeChild(div);
var el1=document.getElementById("frameContainer");
el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"></iframe>";
var el2=document.getElementById("frameContainer_medium");
el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>";
var el3=document.getElementById("frameContainer_small");
el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\"> </iframe>";
var el4=document.getElementById("frameContainer_very_small");
el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\"> </iframe>";
};
})();
</script>
By the way, you are missing some ";".
Related
How can we change the styling of a iframe that is loaded trough JavaScript?
The script is loaded trough:
We would like to hide a navigation bar with class .navbar
Already tried the following but that does not work:
<script type="text/javascript">
window.onload = function() {
let myiFrame = document.querySelector('iframe');
let doc = myiFrame.contentDocument;
doc.body.innerHTML = doc.body.innerHTML + '<style>.navbar {display:none !important;}</style>';
}
</script>
Any ideas?
I have to create the effect of a popup using a DIV with DOM, I used an iframe, inside the frame is a form, I can not get rid of the div with Javascript in the submit button because the DOM sees only after the iframe his creation and not the div that contains it ... how should I do?
<html>
<body >
<h1>Title</h1>
</body>
</html>
//Global variable which contain reference to divPopup's element
var divPopup;
function hideDiv() {
window.alert("Content of DIV POPUP " + divPopup );
divPopup.className = "overlayHidden";
}
function load_page() {
var nodoDiv = document.createElement("DIV");
divPopup = nodoDiv;
nodoDiv.className = "overlay";
nodoDiv.setAttribute("id", "popup1");
//nodoDiv.addEventListener("click", function () { hideDiv(); }, false);
document.body.appendChild( nodoDiv );
var nodoDivPopup = document.createElement("DIV");
nodoDivPopup.setAttribute("id", "popup2");
nodoDivPopup.className = "popup";
var elem = document.getElementById("popup1");
divPopup = elem;
elem.appendChild( nodoDivPopup );
var nodoDivEsami= document.createElement("DIV");
nodoDivEsami.setAttribute("id", "contenitoreEsami");
nodoDivEsami.className = "content";
var elem = document.getElementById("popup2");
elem.appendChild( nodoDivEsami );
var nodoIFrame = document.createElement("IFRAME");
nodoIFrame.className = "content";
nodoIFrame.setAttribute("src", "esami_da_importare_TEST.html");
var nodoDivEsami = document.getElementById("contenitoreEsami");
nodoDivEsami.appendChild( nodoIFrame );
//window.alert( document.body.innerHTML );
}
_______file css
.overlayHidden{
visibility:hidden;
opacity:0;
}
the function hideDiv() is in the form, activated onClick on submit button.
the window.alert( ) in function hideDiv return "undefined"...
I think you're trying too hard, as iFrames are notoriously problematic. You don't need to use an iFrame, and you can predefine your DIVs in the HTML (unless you really need to create the DIV dynamically). For example:
<div id="popup1" class="overlayHidden">
<div id="contenitoreEsami" class-"content">
...
</div>
</div>
No code is needed for page load. When you want to display the pop-up, change its class to something that isn't hidden.
I have one div content whose height should be 300px when i click on another div name button.
But how can i reset the height, when again clicked on button div?
Here is the javascript code for reference:
function chk()
{
var x = document.getElementById('content').style.height = '300px';
}
This is the HTML code
<div id="content">
This is dummy text.
</div>
<div id="button" onclick="chk()">
click to read
</div>
When button div is click content height increases, but how can i reduce the height by clicking on same div with same onclick event?
Use CSS:
#content {
height: auto;
}
#content.expand {
height: 300px;
}
In your script:
function chk()
{
var node = document.getElementById('content');
node.classList.toggle('expand');
}
This keeps the state local to the element you're working on, which makes for more flexible code.
See also: classList API
You could use a flag:
var isSet = false:
function chk(){
if(!isSet) {
var x = document.getElementById('content').style.height = '300px';
isSet = true;
}
else {
// some other computation
isSet = false;
}
}
Either a flag
var flag;
function chk() {
var height = flag ? '0px' : '300px';
document.getElementById('content').style.height = height;
flag = !flag;
}
or by checking the current height
function chk() {
var currHeight = document.getElementById('content').style.height;
var setHeight = height == '300px' ? '0px' : '300px';
document.getElementById('content').style.height = setHeight;
}
If you are just learning HTML, CSS, and JavaScript you should start by making your code more clear.
// HTML should look more like
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'common.css'; #import 'page.css';
</style>
</head>
<body>
<div id='content'>
This is dummy text.
</div>
<input type='button' value='click to read' id='button' />
<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='page.js'></script>
</body>
</html>
Notice, your button should be a button, not a div. XHTML is more expandable for scraping and XSLT, and will work on HTML pages, but not the other way around.
// learn to keep your JavaScript separate pages for caching - common.js
//<![CDATA[
// reduce objects to smaller variables and never use `document.getElementById()`
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
//]]>
// page.js
//<![CDATA[
var button = E('button');
/* The self-executing Anonymous Function below creates scope for `var test` and
returns an unexecuted function you can call later. Note that a function is
basically a variable that if you add `()` to will execute. */
var changeHeight = (function(){
var test = false;
return function(id, before, after){
E(id).style.height = test ? before : after;
test = !test;
}
})();
/* This is a backward compatible way of creating an `onclick` function, unlike
`.addEventListener()` and `attachEvent()`, this is assignment, so it will
write over your last `onclick` assiged to this specific Element */
button.onclick = function(){
changeHeight('content', '20px', '300px');
}
// To combat the comment above you could do something like this:
/*
button.onclick = function(){
changeHeight('content', '20px', '300px');
}
function anotherFunction(){
console.log('wow');
}
var before = button.onclick;
button.onclick = function(){
if(before)before();
anotherFunction();
}
*/
/* An executed function, would execute before the event is handled. The only
thing that is automatically passed to your variable function or Anonymous
Function is the Event Object. In this case it is not necessary, because we
are not accessing the Event Object. */
//]]>
I need to be able to show an advertisement banner using JavaScript while the page is loading (before other HTML elements are loaded). I've tried the following, but it only loads a few seconds after the rest of the body content has loaded:
document.onreadystatechange = function () {
if (document.readyState != 'uninitialized') checkCookie();
}
How should I go about making the ad load before the other HTML elements? Thank you!
first you can set
body { display: none; }
and then call the preload function to load all the required images. like this
preload('image1.jpg,image2.jpg,image3.jpg');
and at the end of function you can change style of body tag to make it visible again.
.visible { display: block; }
function preload(images) {
if (document.images) {
var i = 0;
var imageArray = new Array();
imageArray = images.split(',');
var imageObj = new Image();
for(i=0; i<=imageArray.length-1; i++) {
//document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
imageObj.src=imageArray[i];
}
// ------ add class to body tag to make it visible again
var d = document.getElementsByTagName("body")[0];
d.className = d.className + " visible";
}
}
You can execute JavaScript is in a script tag before the document is parsed:
<head>
<script>
// your script here
alert(); //for example
</script>
</head>
After searching Google and Stack Overflow I decided to ask if this is even possible.
Currently I am loading an iFrame on my site. I wish to hide a certain element loaded in the iFrame.
<span id="blahblah">
function collapseAll(){
var body = document.getElementById('body');
var spans = body.getElementsByTagName("span");
var span;
for (i = 0; i < spans.length; i++){
span = spans[i];
if(span.class=='blahblah'){
span.style.visibility = "hidden";
}
}
}
However this did not work. Question number one is can this be done? If yes could you explain how?
Thank you kindly.
You'll have to put that script inside the contents of the iframe. You can't access the DOM of another frame, especially if it's from another domain.
Sorry, but you cannot access elements within an iframe from the outer window, due to security controls.
You would have to try this, but you might be able to create a function on the window object of the iframe and the call it from the outer window.
In the iframe:
<script type="text/javascript">
window.collapseAll = function() {
.....
}
</script>
In the outer window:
<script type="text/javascript">
function doCollapse() {
document.getElementById('my_iframe").window.collapseAll();
}
</script>
Again, that's untested but I'm pretty sure Facebook does something similar to that.
if the iframe is from the same domain as your javascript is from then this is doable.
using plain javascript you would write the following
`
function collapseAll(){
var body = document.getElementById('body');
var spans = body.getElementsByTagName("span");
var span;
for (i = 0; i < spans.length; i++){
span = spans[i];
if(span.class=='blahblah'){
**span.style.display = "none";**
}
}
}
this fixes the issue.
if the iframe is from a different site (domain) then things would get really difficult..
there are solutions like greasemonkey which can operate on pages from different domains.
you can try
document.frame.document.getElementsByTagName('span')
<script type="text/javascript">
function remove_elemment() {
var body = document.getElementById('body');
var divs = body.getElementsByTagName("div");
var div;
for (i = 0; i < divs.length; i++){
div = divs[i];
if(div.class=='buybox'){
**div.style.display = "none";**
}
}
};
function doRemove() {
document.frame.document.getElementById('my_iframe').remove_elemment();
}();
</script>
<div class="floating-widget">
<iframe id="my_iframe" src="http://www.nodebeginner.org/index-vi.html" frameborder="0" width="100%" height="500">
</iframe>
</div>