Alert After All Elements Have Loaded - javascript

I have a quiz, and if you get 100%, when you load the last page, it will alert "You got 100%!". Although, it loads in before the background loads in. This is my code:
var chanceoflive1 = parseInt(localStorage.getItem("chanceoflive1"));
var chanceoflive2 = parseInt(localStorage.getItem("chanceoflive2"));
var chanceoflive3 = parseInt(localStorage.getItem("chanceoflive3"));
var chanceoflive4 = parseInt(localStorage.getItem("chanceoflive4"));
var chanceoflive7 = parseInt(localStorage.getItem("chanceoflive7"));
var chanceoflivefinal = (chanceoflive1||0) + (chanceoflive2||0) + (chanceoflive3||0) + (chanceoflive4||0) + (chanceoflive7||0);
var chanceoflivepercent = chanceoflivefinal * 4;
function startup(){
if (chanceoflivefinal == 25) {
alert("You Got 100%!");
}
}
<body onload="startup">
<center>
<h2 class="text">Final Results</h2>
<p id="print" class="text"></p>
<p id="print2" class="text"></p>
<img src="qrcode.jpg" height="300" length="300">
<br>
<div class="wrapper">
<a href="index.html">
<button align=center onclick="handleClick()" id="button">
<canvas width="200" height="50" id="canvas" align=center></canvas>
<span class="text" id="submit">Retry</span>
</button>
</a>
</div>
</center>
</body>
How can I fix this?

You could always do something like this within a script tag:
(function(){ // on document load
alert("Ready!"); // alert "ready"
})();
Oh, and as #Barmar said, to call that function, you need to change startup to startup()

You are just missing (); like this onload="startup();".
Perhaps you can also use
document.onload = startup();
or even
window.onload = startup();

Related

how to create button displays image file

I'm working on a webpage and I'm still learning HTML/CSS/Javascript. I'm trying to create a button such that it displays a random image file from my computer or database, but I'm not sure how to go about writing it. Here's my code:
function display() {
var popup = document.getElementById("img").src = "img_1.jpg";
}
<button class="popup" onclick="display()">ITERATION.
<span class="popupimg" id="img">img_1.jpg</span>
</button>
This, should be an img tag :)
<span class="popupimg" id="img">img_1.jpg</span>
like that:
<img src="img_1.jpg" id="img" />
Also, it doesnt have to be inside the button.
Your code should look something like
<button class="popup" onclick="display()">ITERATION.</button>
<img src="img_1.jpg" id="img" />
You can do something like following. But you should checkout jQuery too.
function display(imagepath) {
var img = document.getElementById("img");
img.src = imagepath;
img.style.display = 'block';
}
<img src='' style='display:none' id='img' width='120'>
<button class="popup" onclick="display('https://i.imgur.com/avAMfAu.jpg')">Show Image</button>
See example on jsfiddle
You need to use an <img>instead of a <span> if you want to display a image.
function display() {
var popup = document.getElementById("img").src = "img_1.jpg";
}
<button class="popup" onclick="display()"><!-- What is this ? => ITERATION. -->
<img id="img" src="">
</button>

Compressing a button-based image changer to an array

I'm still quite new to JavaScript so sorry for any incorrect terms etc.
I've got an image changer that uses buttons, and has the image stored within the button, but I know there's a way to compress these into an array and print out image by using 'image_array(0)' for example to get the image from the array.
Code below;
<!DOCTYPE html>
<html>
<body>
<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>
<button onclick="document.getElementById('image').src='green_light.jpg'">Green</button>
<p></p>
<button onclick="document.getElementById('image').src='yellow_light.jpg'">Amber</button>
<p></p>
<button onclick="document.getElementById('image').src='red_and_yellow_light.jpg'">Red/Amber</button>
<p></p>
<button onclick="document.getElementById('image').src='red_light.jpg'">Red</button>
<p></p>
<button onclick="document.getElementById('image').src='blank_light.jpg'">Reset</button>
</body>
</html>
I looked for a good 20 minutes for a similar thread but couldn't find anything specific, and with a cheap understanding of JavaScript and HTML, everything I found was too vague for what I'm looking for.
Thanks in advance.
The image is not stored within the button, you are just changing the image source on click. If by compress you mean that the image will have less bytes, then you are wrong, an array does not do that. It just keeps information contiguously. The only advantage is you can handle more dynamic things and maybe be more organized.
var imageSources = ["green_light.jpg", "yellow_light.jpg", "red_and_yellow_ligh", "red_light.jpg", "blank_light.jpg"]
var buttons = document.getElementsByClassName("change-image")
for (let i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
document.getElementById("image").src = imageSources[i]
}
}
<!DOCTYPE html>
<html>
<body>
<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>
<button class = "change-image">Green</button>
<p></p>
<button class = "change-image">Amber</button>
<p></p>
<button class = "change-image">Red/Amber</button>
<p></p>
<button class = "change-image">Red</button>
<p></p>
<button class = "change-image">Reset</button>
</body>
</html>
If I understand you correctly, you need altering the source of images through keeping images in an array.
[].slice.call(document.querySelectorAll('button'), 0)
Above line is to access all buttons in the DOM.
Do something like this.
var images = ['green_light.jpg',
'yellow_light.jpg',
'red_and_yellow_light.jpg',
'red_light.jpg',
'blank_light.jpg'
];
var imageElement = document.getElementById('image');
[].slice.call(document.querySelectorAll('button'), 0).forEach(function(button, index){
button.addEventListener('click',function(e){
imageElement.src = images[index];
console.log("Image changed to: ", images[index]);
});
});
<html>
<body>
<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>
<button>Green</button>
<p></p>
<button>Amber</button>
<p></p>
<button>Red/Amber</button>
<p></p>
<button>Red</button>
<p></p>
<button>Reset</button>
</body>
</html>

image disappears after click on javascript

I can't figure out why my image goes away after I click.
var GOT = function() {
document.getElementById("sigil").onclick = function sigilchoice() {
var name = prompt("who goes there! what is our house name?");
document.getElementById("message").innerHTML = name;
return('message');
};
};
GOT();
html:
<h1>Choose a King</h1>
<a href="">
<img id="sigil" src="http://i.imgur.com/sUnMg32.jpg">
</a>
<p id="message"></p>
http://jsfiddle.net/RznH4/
I copied and pasted your code into a JSFiddle, but just removed the <a> tag, and it seems to work fine without it, with the <a href=""> it just reloads the page because the href is set to: href=""
HTML:
<h1>Choose a King</h1>
<img id="sigil" src="http://i.imgur.com/sUnMg32.jpg">
<p id="message"></p>
JavaScript:
document.getElementById("sigil").onclick = function sigilchoice() {
var name = prompt("who goes there! what is our house name?");
document.getElementById("message").innerHTML = name;
return('message');
};
(As you can see same exact code except HTML)
JSFiddle

play pause multiple vimeo videos

I have found a solution to starting/pausing multiple vimeo videos from seperate buttons, but I would like to use images for the play and pause buttons.
Can anyone help me ammend the code? I guess I need to replace the html button code with images and then reference them in the javascript, but I can't seem to get it to work.
Many thanks.
my html is:
<div>
<h1>Player 1</h1>
<div class="api_output"></div>
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?js_api=1&js_swf_id=player_1" width="500" height="281" frameborder="0"></iframe>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
<div>
<div>
<h1>Player 2</h1>
<div class="api_output"></div>
<iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
The javascript is:
var VimeoEmbed = {};
VimeoEmbed.init = function(e)
{
//Listen to the load event for all the iframes on the page
$('iframe').each(function(index, iframe){
iframe.addEvent('onLoad', VimeoEmbed.vimeo_player_loaded);
});
};
VimeoEmbed.vimeo_player_loaded = function(player_id)
{
$('#'+player_id).prev('.api_output').append('VimeoEmbed.vimeo_player_loaded ' + player_id+'<br/>');
var loop = 0;
var volume = 100;
//Simple Buttons
$('#'+player_id).nextAll('button.simple').bind('click', {'player_id': player_id}, function(e){
var iframe = $('#'+e.data.player_id).get(0);
iframe.api( $(e.target).attr('id'), null );
});
//API EVENT LISTENERS
VimeoEmbed.setupAPIEventListeners($('#'+player_id).get(0));
};
//On document ready
$(document).ready(VimeoEmbed.init);
I think it'll be something like this
<div>
<h1>Player 1</h1>
<div class="api_output"></div>
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?js_api=1&js_swf_id=player_1" width="500" height="281" frameborder="0"></iframe>
<img class="simple" id="api_play" src="play.png">
<img class="simple" id="api_pause" src="pause.png">
<!-- ... same for player 2 -->
And in the js
VimeoEmbed.vimeo_player_loaded = function(player_id)
{
$('#'+player_id).prev('.api_output').append('VimeoEmbed.vimeo_player_loaded ' + player_id+'<br/>');
var loop = 0;
var volume = 100;
//Simple Buttons
$('#'+player_id).nextAll('img.simple').bind('click', {'player_id': player_id}, function(e){
var iframe = $('#'+e.data.player_id).get(0);
iframe.api( $(e.target).attr('id'), null );
});
//API EVENT LISTENERS
VimeoEmbed.setupAPIEventListeners($('#'+player_id).get(0));
};

Insert javascript into different page on same domain

Hi I'm trying to insert some javascript into a page on my server, from a different page. The 1st page will be loaded into an iframe. I would like to insert some css styles to that page (in the iframe) from the page hosting the iFrame. is there a jQuery script I can use to do this?
Something like.
page1->page2 iframe. page2 script for styles-> page1 within the iframe
<body>
<!--<div id="left_col"></div>-->
<div id="middle_col">
<!--header-->
<div id="header">
<p>iFrame Example</p>
</div>
<div id="entry">
<p>Enter your URL</p>
<textarea id="mytextarea" rows="1" cols="50"></textarea>
<a title="Check Me Out!" id="btn-wrap">
<span class="title">Click to view site</span>
<div id="info">
<p>
<strong>Don't forget</strong>
<strong>the "http://"</strong>
</p>
</div>
</a>
</div>
<br/>
<br/>
<iframe id="myframe" src="http://johnverber.com/simple.html">
</iframe>
</div>
<!--<div id="right_col"></div>-->
<script>
$(document).ready(function() {
positionAd();
});
$(window).resize(function() {
positionAd();
});
var positionAd = function() {
var WINDOW_WIDTH = $(window).width();
var WINDOW_HEIGHT = $(window).height();
var BOX_WIDTH = $('#middle_col').width();
var BOX_HEIGHT = $('#middle_col').height();
$('#middle_col').css({"left": (WINDOW_WIDTH - BOX_WIDTH)/2, "top" : (WINDOW_HEIGHT - BOX_HEIGHT)/2});
}
$('#btn-wrap').click(function() {
var urlVal = $('#mytextarea').val();
if(urlVal.match("?_myTag")){
document.getElementById('myframe').src = urlVal;
}
else{
var addTag = urlVal.concat("?_myTag");
document.getElementById('myframe').src = addTag;
}
});
$('#myframe').contents().find("head").append("<link rel="stylesheet" type="text/css" href="addStyles.css" />");
</script>
</body>
You can use jQuery's .contents() to access the iframe's inner DOM. It's quite trivial from there:
$("#iframe_id").contents().find("head").append("<script>..scripts..</script>");
//or
$("#iframe_id").contents().find("head").append("<style>..styles..</style>");
Hope that helped!
Alright this is what finally ended up working:
$("#iframe_id").contents().find("head").html("<style>..styles..</style>");

Categories