I have a various images displayed one below the other at the center of the page.
On keyPress I want to display or zoom a particular image in the list at the center of the page.
Something like, the image is not zoomed, but another copy of the image from that position is displayed using transition.
The code I have tried is this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="Stylesheet" type="text/css" href="channel.change.css" />
<script>
var image = document.getElementById("img1");
image.addEventListener('keydown', doKeyDown, true);
function doKeyDown(e){
//====================
// THE W KEY
//====================
if (e.keyCode == 87) {
image.setAttribute('style', 'width:300px !important;');
}
}
</script>
</head>
<body>
<div>
<img id="img1" src="http://sphotos-c.ak.fbcdn.net/hphotos-ak- snc6/189287_403070459759757_137788631_n.png" alt="" class="zoom_image"/>
</div>
</body>
</html>
my css code is :
.zoom_image
{
display: block;
padding: 10px 10px 10px 10px;
position:relative;
width:100px;
height:80px;
left:0px;
top:0px;
border:1px solid black;
-webkit-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
}
.zoom_image:hover
{
width:500px;
height:480px;
left:-25px;
top:-25px;
z-index:9999;
}
I want my css to apply on the image on keyPress
Try
document.addEventListener('keydown', doKeyDown, true); instead
DEMO
W to zoom-in, X to zoom-out
(this will only work in chrome though, for other browsers you'll have to add browser-specific css)
Related
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.
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.
I am trying to overlap exactly half an image in CSS using another image. Thing is I want the height of the images to be say (x=200px). The width of the image will wary depending on the aspect ratio of the image. Can I still write CSS that will overlap exactly half of the resized image with another image.
Following is a code where I have played around with the position of the overlapping image. Can I let CSS do this for me somehow? Or is there some js that can help? In the following code I want the height to be unchanged, but half of any image used should be overlapped widthwise.
<html>
<head>
<style type="text/css">
#collage-container{
width:300px;
height: 200px;
position: relative;
background:#f22;
}
#collage-one, #collage-two{
height:200px;
position:absolute;
}
#collage-one{
z-index:1;
left:100px;
position:absolute;
}
</style>
</head>
<body>
<div id=collage-container>
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-one />
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-two />
</div>
</body>
</html>
Since the width of images is vary, you could use CSS transform translate() expression with a percentage value to move images to a side with the respect to their width value:
EXAMPLE HERE
#collage-container {
height: 200px;
position: relative;
}
#collage-container img {
height: 100%; /* As tall as the container */
width: auto;
float: left;
}
#collage-container img + img { /* Move the second image 50% of its width */
transform: translateX(-50%); /* to the left */
}
It's worth noting that CSS transforms are supported in IE9+
I think, it is simple:
<html>
<head>
<style type=text/css>
.container {
float:left;
}
.half-img {
display:inline-block;
width:25%;
}
.clear {clear:left;}
</style>
</head>
<body>
<div class="container">
<span class="half-img">
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" width="100">
</span><img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" width="100">
</div>
<div class="clear"></div>
</body>
</html>
I have the following code
<div id="wrapper">
<div id="article">
Here is a text containg something
</div>
</div>
<style>
#wrapper {
height:200px;
width:500px;
background:url(http://3.bp.blogspot.com/-06iGd_Ue9dk/UqPzuA1Kw7I/AAAAAAAACPc/hBtKtRBSDGE/s1600/Pattern-call.png);
-moz-transition: background-color 2s linear;
transition: background-color 2s linear;
}
#article {
background: url("http://4.bp.blogspot.com/-5BAxq07aDQA/UgdY3Mk8spI/AAAAAAAAB84/ElxocGOzgYA/s1600/Opacity.png") repeat scroll 0 0 rgba(0, 0, 0, 0.4);
margin-top:50px;
margin: 0 auto;
width: 100px;
padding:10px;
position: relative;
top:60px;
}
#article a {color:#fff;
text-decoration:none;
}
.hover {
background:rgba(0, 0, 0, 0.4) !important;
}
</style>
<script>
$('#wrapper > div').hover(function(){
$(this).parent().toggleClass('hover');
})
</script>
I am facing 2 problems now -
1. I do no want the fade effect on hover but a transition in which the background-color would change starting from the left and end at right. (As we see in loading effect)
2. Secondly, as the background change is complete I want the browser to redirect the user to the anchor link (the cursor is stil in hover state)
I am facing problem in setting up the two. Your help would be appreciated.
Here is a jsfiddle I have made http://jsfiddle.net/MjkC5/1/ for your reference.
Finally got a link of what sort of thing I want in transition see this page http://bloggingstory-shameer.rhcloud.com/sample-post-for-ghost/ See how the background changes with the loading of page I want same sort of effect. CSS is preferable but I dont mind Jquery too.
The following code does exactly what you want. See if it helps.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.animated_div').animate({ 'width':'300px' }, 2000);
})
</script>
<style type="text/css">
.wrapper {width:300px; height:100px; background:#000; position:relative;}
.animated_div {position:absolute; top:0px; left:0px; width:0px; height:100px; background:#BABABA;}
</style>
</head>
<body>
<div class="wrapper">
<!--you can put anything inside here-->
<div class="animated_div">
</div>
</div>
</body>
</html>
Thanks
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.