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>
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?
Weave: http://kodeweave.sourceforge.net/editor/#5dbb5ce4a85bcaf4c5805e337c829e73
I have three textareas:
1 for HTML
1 for CSS
and 1 for JavaScript code
Whenever code is added in these textareas (I'm using keyup for the same of this post) I call a function called runEditor which adds the code into the iframe.
What I'm trying to figure out is how can I call the same function when CSS is added without adding the HTML or the JavaScript again?
var htmlEditor = document.querySelector(".html")
var cssEditor = document.querySelector(".css")
var jsEditor = document.querySelector(".js")
function runEditor() {
var previewFrame = document.querySelector(".preview")
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document
preview.open()
preview.write("<style>"+ cssEditor.value +"</style>" + htmlEditor.value + "<scr"+"ipt>"+ jsEditor.value +"</scr"+"ipt>")
preview.close()
}
runEditor()
htmlEditor.onkeyup = function() {
runEditor()
}
cssEditor.onkeyup = function() {
runEditor()
}
jsEditor.onkeyup = function() {
runEditor()
}
textarea {
width: 30%;
height: 100px;
}
.preview {
width: 100%;
}
<textarea class="html">
<button>
Hello world
</button>
<div class="output"></div>
</textarea>
<textarea class="css">body {
background: #52b165;
}</textarea>
<textarea class="js">
var output = document.querySelector(".output")
var btn = document.querySelector("button")
var counter = 0
function addElm() {
var node = document.createElement("div")
var txt = document.createTextNode("hi " + counter++)
node.appendChild(txt)
output.appendChild(node)
}
btn.addEventListener("click", function() {
addElm()
})
</textarea>
<iframe class="preview" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts"></iframe>
When you set up the iframe, you have access to both window and document objects inside the iframe. You have access to methods like document.getElementById and friends.
To reload the CSS, suggesting you create a <style> element in the iframe. When CSS changes, wipe out the contents of that element and put in the new CSS. HTML can do the same, wiping out the HTML of <body> and replacing it with the new HTML. innerHTML will be your friend. JS will be a bit tricky. You will need to recreate the iframe from the beginning to start fresh.
I would like to implement a Table of Contents in the sidebar of a Google Docs document which will take you to the appropriate sections when clicked. I am generating the HTML for the sidebar element by element, and I see that there is a moveCursor(position) function in Document class, but I can't see how to actually call it using onclick. Not the full code but shows the problem:
function generateHtml() {
var html = HtmlService.createHtmlOutput('<html><body>');
var document = DocumentApp.getActiveDocument();
var body = document.getBody();
//Iterate each document element
var totalElements = body.getNumChildren();
for(var i = 0; i < totalElements; ++i) {
var element = body.getChild(i);
if(element.getType() == DocumentApp.ElementType.PARAGRAPH) {
var text = paragraph.getText();
if(text.trim()) { //Not blank paragraph
var position = document.newPosition(element, 0);
/**Would like to have <a onclick=document.moveCursor(position)> here**/
//Show first 20 chars as preview in table of contents
html.append('Detected paragraph ')
.append(text.substring(0, 20))
.append('<br />');
}
}
}
html.append('</body></html>');
return html;
}
How can I accomplish this in Apps Script? The code can be completely restructured as needed.
This line:
/**Would like to have <a onclick=document.moveCursor(position)> here**/
Change to:
<div onmouseup="myClientFunction()">Text Here</div>
Add a <script> tag to your HTML:
<script>
var valueToSend = code to get value;
window.myClientFunction = function() {
google.script.run
.myGsFunctionToMoveCursor(valueToSend);
};
</script>
Then you need a myGsFunctionToMoveCursor() function in a script file (.gs extension)
function myGsFunctionToMoveCursor(valueReceived) {
//To Do - Write code to move cursor in Google Doc
. . . Code to move cursor
};
I set up an e-commerce website for a friend using javascript and html, and with the nearlyfreespeech hosting service. I have made sure to load the html page correctly, and there are no errors (in both the console and on the actual page). I have also tried with both the javascript embedded in the html, and with 2 seperate files, but neither works. I am using no external libraries either. I added alerts for when the page loads, but nothing showed up. The page constructor is hooked up to the page via the onload event set on the body tag. I have tried it with Firefox, Google Chrome, and Internet Explorer, but neither worked. When I moved the creation of the controls into the html, the controls were there (meaning that the html is working), but the alerts still didn't show (signifying that the javascript is either being omitted or that the onload event is not being fired). Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>GetLost</title>
<script type="text/javascript">
function loadcontrols()
{
var items = ["Green cuff", "Red cuff"];
var prices = ["20.00", "30.00"];
var colors = ["Green", "Red"];
var urls = ["http://media-cache-ak0.pinimg.com/736x/0f/f8/11/0ff811addad9b0165263eb73ba9806f0.jpg", "http://www.opalona.com/images/produits/big/big_2049-3.jpg"];
var controls = [];
for(var i = 0; i < items.length; i++)
{
var item = new loaditem(items[i], prices[i], colors[i], urls[i]);
controls.concat(item);
}
alert("All items loaded.")
}
function loaditem(name, value, color, imageUrl)
{
this.name = name;
this.value = value;
this.color = color;
this.imageUrl = imageUrl;
var container = document.CreateElement("div");
container.style.height = "300px";
container.style.width = "200px";
container.style.backgroundColor = color;
scroller.appendChild(container);
var image = document.CreateElement("img");
image.style.height = "220px";
image.style.witdh = "180px";
image.setAttribute("src", imageUrl);
container.appendChild(image);
var name = document.CreateElement("h4");
name.innerHTML = name + " for $" + value;
container.appendChild(name);
alert("The product " + name + "has been loaded.")
}
</script>
</head>
<body onload="loadcontrols">
<h1><b>Choose a product, and click on it to open it.</b></h1>
<div style="overflow-x: scroll" name="scroller" height="310px" width="650px"></div>
</body>
</html>
onload doesn’t take a function name; it takes some JavaScript code to run. If you had a single line of JavaScript code just referencing a variable:
loadcontrols
Then, well, nothing happens. If you want to call it, you need parentheses:
loadcontrols()
I have fetched json through
<script>
function getjs()
{
var script =document.createElement("script");
script.setAttribute("type","text/javascript");
script.setAttribute("src","http://localhost:8080/vigs/f4json?user=3&callback=gr");
document.body.appendChild(script);
}
var i=0;
function gr(data)
{
for(i=0;i<data.size;i++)
{
document.getElementById('w').innerHTML =data.itemr[i].itmurl;
}
}
</script>
so, after fetching the urls it simply displays url of images in my div. I just confused how to write up code in jquery for same above task but also display images (by generating dynamix image tag appended to next one by one based on size in div) in my div with id mydiv.Or any alternative ?
your help would be appreciated..
thanks
Using JavaScript
function gr(data)
{
var w = document.getElementById('w');
for(i=0;i<data.itemr.length;i++)
{
var img = document.createElement('img');
img.src = data.itemr[i].itmurl;
w.appendChild(img);
}
}
$("<img>").attr("src", data.itemr[i].itmurl).appendTo($("#w"));