Show image when clicking image - javascript

I am making a fake computer screen with images. I have a picture of a Firefox icon and when the mouse hovers over it, it increases in size, and I would like another picture to appear when clicking on the picture of the icon. This is the closest I have been able to get.
<html>
<title> Scope </title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>
<body>
<img src ="alarm clock2.jpg"/>
<p> Pulling the sheets into my body, I begin to sink back into the bed...
uggh... my alarm clock... time to get up..
<img id="computerscreen" src= "computer.jpg"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
<img id="grow" src="icon2.gif"/>
<img class="show hidden" src="screen2.jpg" />
</body>
Here is CSS
#grow{
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:4;
height:47px;
}
#grow:hover{
top:1137px;
left:589px;
width: 70px; !important;
height: 70px; !important;
cursor:pointer;
}
.hidden {
display:none;
position:absolute;
top:300px;
right: 0px;
width:850px;
height:550px;
z-index:6;
}
#computerscreen{
position:absolute;
top:300px;
right: 0px;
z-index:3;
}
and Script
$(document).ready(function(){
$('#grow').click(function() {
$('.hidden').fadeIn('slow', function() {
});
});

Seems you don't need the callback from the fadeIn(), just call fadeIn
$('.hidden').fadeIn('slow');

on '.hidden' in the css remove the display:none; and hide it in the jQuery so here is what the jQuery will look like...
$(document).ready(function () {
$('.hidden').hide();
$('#grow').click(function () {
$('.hidden').fadeIn('slow');
});
});
I have also removed the callback function, because you do not need it.

Related

adding an jpg image in the css in a javascript game

I currently have the beginning's of a flappy bird game and the css generates a small red ball. I want to replace the ball with a jpg image taken from the internet, which I can also style and control/animate from the css, as I would do with the ball.
Image source: "https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg"
I've tried various things to put it in the CSS and in the HTML, but do not fully understand how it all ties together.
If I add the image (as I have done) in the html, can I not style it using the CSS?
For now, I want to:
Render the image on the screen (as I have done)
Style it to the same specs as the red ball (e.g. 20 x 20 etc, with starting positions, positioning etc)
Currently the TOP POSITION in the CSS seems to work (when applied to the image) but not the width and height. I had to hard code the width and the height of the image in to the HTML.
Any explanations as to best practices and a solution please.
Full current code here:
https://repl.it/#iamapersonthing/flappybirds
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>FlappyBird</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="game">
<div id="block"></div>
<div id="hole"></div>
<div id="character">
<img src="https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
*{
padding:0;
margin:0;
}
#game{
width:400px;
height:500px;
border: 1px solid greenyellow;
margin:auto;
overflow:hidden;
}
#block{
width:50px;
height:500px;
background-color:greenyellow;
position: relative;
left:400px;
animation:block 2s infinite linear;
}
#keyframes block{
0%{left:400px}
100%{left:-50px}
}
#hole{
width:50px;
height:150px;
background-color:red;
position: relative;
left:400px;
top:-500px;
animation:block 2s infinite linear;
}
#character{
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;
}
JavaScript
var block = document.getElementById("block");
var hole = document.getElementById("hole");
hole.addEventListener('animationiteration',() => {
var random = -((Math.random()*300)+150);
hole.style.top=random +"px";
});
You have to add you style to the img tag. You'll have to add a display:block as well otherwise, the image will not take the width and height you specified.
#character img{
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;
}
If you want a guide on how to select your components and which one is stronger, you can read that CSS Batman guide : http://batificity.com/
For your problem, you can also use an object-fit. Like so :
var block = document.getElementById("block");
var hole = document.getElementById("hole");
hole.addEventListener('animationiteration',() => {
var random = -((Math.random()*300)+150);
hole.style.top=random +"px";
});
*{
padding:0;
margin:0;
}
#game{
width:400px;
height:500px;
border: 1px solid greenyellow;
margin:auto;
overflow:hidden;
}
#block{
width:50px;
height:500px;
background-color:greenyellow;
position: relative;
left:400px;
animation:block 2s infinite linear;
}
#keyframes block{
0%{left:400px}
100%{left:-50px}
}
#hole{
width:50px;
height:150px;
background-color:red;
position: relative;
left:400px;
top:-500px;
animation:block 2s infinite linear;
}
#character{
display:block;
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;
}
#character img{
width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>FlappyBird</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="game">
<div id="block"></div>
<div id="hole"></div>
<div id="character">
<img src="https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Full object-fit specification here : https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
You have many ways to possibly solve your issue. The best way in my opinion is to not use a IMG object at all and instead use a DIV that changes its background properties. This allows you to use a sprite sheet more easily because you can set the offsets for x and y in a background image. This also allows you to more easily change the image being used by changing the background-image property.
Alternatively, you can continue using IMG objects and just unload that HTML and replace it with a new IMG object with a different src parameter. JQuery makes this a lot easier to manage in my experience, but it can be done fairly easily using straight JS as well. Here's how I'd do this in JQuery (because I simply remember this syntax better):
$('#character').html('<img src="new image address">');
As far as editing the width/height, it comes down to just manually setting the offset afterwards and leaving the width/height alone (assuming you aren't already forcing dimensions onto the image) or for manual placement/positioning, just manually setting the width/height every time you replace the image.

How to get spinner to disappear once url loads

I have created a small program with a spinner. Once the url completely loads in the iframe, then the spinner is supposed to disapear. I can get the page to load but I cannot get the spinner to disappear.
Here is my javascript code(I am not sure if the style.display='none' line is valid:
var overlay = document.getElementById("overlay");
window.addEventListener('load', function(){
overlay.style.display = 'none';
})
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Spinner</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="overlay">
<div class="spinner"></div>
</div>
<iframe width="1120" height="630" src="https://tommcfarlin.com/check-if- a-page-is-in-an-iframe/" frameborder="0" allowfullscreen></iframe>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Here is my CSS code:
body{
width: 100%;
height: 100%;
overflow: hidden;
}
.spinner{
width: 80px;
height: 80px;
border: 2px solid #f3f3f3;
border-top:3px solid #f25a41;
border-radius: 100%;
position: absolute;
top:0;
bottom:0;
left:0;
right: 0;
margin: auto;
animation: spin 1s infinite linear;
}
#keyframes spin {
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
#overlay{
height:100%;
width:100%;
background:rgba(0, 0, 0, .8);
position:fixed;
left:0;
top:0;
}
I think my issue is in the Javascript but please correct me if I am wrong here.
I have also included a screen print showing that the page is loaded in the background but the spinner is still there.
Thanks in Advance.
I think your script didn't load to your html code so try to change your html code to that code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Spinner</title>
<link rel="stylesheet" href="main.css">
<script>
window.onload = function(){
var overlay = document.getElementById("overlay");
overlay.style.display = 'none';
};
<script>
</head>
<body>
<div id="overlay">
<div class="spinner"></div>
</div>
<iframe width="1120" height="630"
src="https://tommcfarlin.com/check-if- a-page-is-in-
an-iframe/" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Your JS is fine. I am not sure what the exact error is I tried the same on my pc and it seems to work fine. I would suggest you put your script just before the end of body tag or after the end of the overlay div because HTML loads and parses by line, if JS does not find your overlay div it throws an exception and the code breaks.

Snooks slideshow

I've seen the slideshow, I got all the code from there but the images never disappear, they are added in front of the old ones and it overcharges my website. Anyone knows how to solve it? Here's the code:
<style>
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<div class="fadein">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
In this fiddle, it works, but in my website, it doesn't. Any help?
MORE INFORMATION
This image is from the console, so you can see the amount of images that are created..
No errors in console.
EDIT
I went to get another slideshow from the same site, but so I could get multiple, and got what I wanted except one thing, the fadeIn is bugged, it starts to fade but then it cancels and changes to the next image.
<style>
.multipleslides { position:relative; height:332px; width:500px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>
<div class="multipleslides">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
<script>
$('.multipleslides').each(function(){
// scope everything for each slideshow
var $this = this;
$('> :gt(0)', $this).hide();
setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 4000);
})
});
</script>
I've made some updates to your code that should fix the slideshow. There were some syntax errors and I also made the selectors a bit easier to read, imo.
$(document).ready(function() {
$('.multipleslides').each(function() {
// scope everything for each slideshow
$(this).children('img').not(":eq(0)").hide();
setInterval(function() {
$(this).children('img').first().fadeOut().next().fadeIn().end().appendTo($(this));
}.bind($(this)), 4000);
});
});
.multipleslides {
position: relative;
height: 332px;
width: 500px;
float: left;
}
.multipleslides>* {
position: absolute;
left: 0;
top: 0;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multipleslides">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

Javascript/HTML/CSS popup

I'm working on a popup using a hidden DIV and loading it with window.onload. As well as this I'm also loading an empty DIV with a overlay CSS style (to fill the background behind the popup with a semi-transparent black). And finally to top it off there is a close button in the top right corner of the popup.
I've scanned through SA and a couple of forums (as this is the first time I do something like this with JS) & have got most of the code from there. Yet when adding it all together, something's stopping it from working, I've been staring at this for a day now and maybe I'm just missing something really obvious?
The site is here: http://0034.eu/townapp/
And here's the code:
The JS:
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup').style.display = 'block';
}
window.onload = show_popup;
</script>
<script language="text/javascript">
window.onload = function() {
$('#overlay-back').fadeIn(500);
}
</script>
<script language="javascript">
$(".close-image").click(function() {
$(this).parent().hide();
});
</script>
The HTML:
<body>
<div id="overlay-back"></div>
<div id="popup"><img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" /></span></div>
The CSS:
#popup{
position:absolute;
display:hidden;
top:200px;
left:50%;
width:400px;
height:566;
margin-left:-250px;
background-color:white;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
.close-image{
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
}
Thanks a lot in advance!
You must include jquery for this to work
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// you can use just jquery for this
$(document).ready(function(){
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
});
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
</script>
</head>
If you want to try another popup, the following link will help you,
http://blog.theonlytutorials.com/a-very-simple-jquery-popup-ready-to-use-code/

Simple Jquery animate position on click function

I am trying to Animate a div's top position by -130px, so it will move off screen. Its not working and i cant workout why! Am obviously a jQuery/Javascript novice.
Basically i have a button/hyperlink with the id #NavShrink, on clicking this i want the div #Header to slide up off screen by 130px, leaving its bottom 20px on screen.
Nothing happens!
Here's my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding:0px;
margin:0px;
font-family: Helvetica, sans-serif;
font-size:11px;
color:#7b7a7a;
}
#Header {
height:150px;
background-color:#f4f4e9;
}
#MainNav {
padding:20px 20px 0px 20px;
width:1140px;
margin-left:auto;
margin-right:auto;
text-align:right;
position:relative;
height:130px;
}
a#NavShrink {
display:block;
width:15px;
height:15px;
background-image:url(../images/ShrinkNav.png);
position:absolute;
bottom:5px;
right:0px;
}
</style>
</head>
<body>
<div id="Wrap">
<div id="Header">
<div id="MainNav">
<script language="javascript" type="text/javascript">
$('#NavShrink').click(function() {
$('#Header').animate({ top: "-=130px"})
})
</script>
</div>
</div>
</div>
</body>
In addition to the issue raised by j08961, another problem, I imagine, is that you're animating the top property; which effectively has no meaning in a div (or other element) with position: static (the default position property).
To animate, simply assign position: relative to the relevant div.
Brief, though hopefully illustrative, JS Fiddle demo.
Either wrap your code in a document ready call:
$(document).ready(function() {
// Handler for .ready() called.
});
or put your code at the end of your document, before the closing </body> tag. You're executing your code before the element you want it to act on exists.
Also, change your animate call to $('#Header').animate({ top: "-=130"}) (no px), and give the #Header a position (e.g. position:relative).
Here's a jsFiddle example.
Hey is this what you are looking for: http://jsfiddle.net/EGc96/
you can also use .toggle for slide effect or sliup and down.
hope it fits the cause :)
code
$('#NavShrink').click(function() {
$('#Header').animate({
// top: "-=130",
height: "-=130"
});
});​

Categories