zoom an image on button click - javascript

I have a code for an image that if you tap on it zooms out and if you tap on any where out side the box of the image it zooms back. is there I can control the zooming with a button such that one button zooms incrementally and the other zooms in decrementally. this is my attempt
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.zoomin img { height: 200px; width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease; }
.zoomin img:hover { width: 300px; height: 300px; }
</style>
</head>
<body>
<div class="zoomin">
<img src="download.jpg" title="All you need to know about CSS Transitions " />
</div>
</body>
</html>
<button>plus</button>
<button>minus</button>
what better way could this be achieved

Simply change dimensions of image using .style.[width/height], css will do the rest:
function resize(direction) {
var delta = 100 * direction;
var element = document.getElementById('img');
var positionInfo = element.getBoundingClientRect();
element.style.width = positionInfo.width+delta+'px';
element.style.height = positionInfo.height+delta+'px';
}
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.zoomin img { height: 200px; width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease; }
.zoomin img:hover { width: 300px; height: 300px; }
</style>
</head>
<body>
<div class="zoomin">
<img src="download.jpg" id="img" title="All you need to know about CSS Transitions " />
</div>
</body>
</html>
<button onClick="resize(1)">plus</button>
<button onClick="resize(-1)">minus</button>

This works, I've given each button a class, one plus and one minus, and have addClass and removeClass. An even easier way would be to have one button and use toggleClass to add and remove the class you already have for zoomin.
$('button.zoomPlus').click(function(){
$('.zoomin img').addClass('zoomer');
});
$('button.zoomMinus').click(function(){
$('.zoomin img').removeClass('zoomer');
});
.zoomin img { height: 200px; width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease; }
.zoomin img:hover,
img.zoomer{ width: 300px; height: 300px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
</head>
<body>
<div class="zoomin">
<img src="http://placehold.it/300x300" title="All you need to know about CSS Transitions " />
</div>
</body>
</html>
<button class="zoomPlus">plus</button>
<button class="zoomMinus">minus</button>

Related

custom.js:6 Uncaught TypeError: Cannot read property 'width' of null

when i am trying to move image to the center that time the browser can showing the error can not read property width of null . I am trying to divide the width of the screen by 2 i can t understan why that error is showing .
var mobile = document.getElementById("mobile");
var monitor = document.getElementById("monitor");
var tab = document.getElementById("tab");
var header = document.getElementById("header");
var position = (screen.width - monitor.width)/2;
monitor.style.left = position+"px;";
function initScroll(){
if(window.pageYOffset >500){
mobile.style.left = "300px";
tab.style.right = "250px";
header.style.height = "60px";
header.style.fontSize = "25px";
}else{
header.style.height = "60px";
header.style.fontSize = "25px";
mobile.style.left = "0px";
tab.style.right = "0px";
}
}
window.addEventListener("scroll",initScroll);
*{padding: 0;margin: 0;font-family:arial;}
#header{height:100px;background-color: #354458;font-size: 40px;color:#fff; text-align:center;line-height:2.5;
position:fixed; width:100%;z-index:20;
-moz-transition: 2s height, 2s font-size;
-o-transition: 2s height, 2s font-size;
-webkit-transition: 2s height, 2s font-size;
transition: 2s height, 2s font-size;
}
#banner{background: #3a9ad9;height:400px;position:fixed;width:100%;
top:100px;font-size:50px; text-align: center; color
:#fff;z-index:10;
}
#banner > * {
margin-top:30px;
}
#content{
top:500px;
position:relative;
height:1000px;
padding-top:200px;
background-color: #fff;
z-index:15;
}
#mobile{
position: absolute;
left: 0;
z-index: 15;
top: 470px;
-moz-transition: 2s left;
-o-transition: 2s left;
-webkit-transition: 2s left;
transition: 2s left;
}
#monitar{position: relative;}
#tab{
position: absolute;
right: 0;
z-index: 15;
top: 385px;
-moz-transition: 2s right;
-o-transition: 2s right;
-webkit-transition: 2s right;
transition: 2s right;
}
<html>
<head>
<title>Java script Scroller</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script src="./js/custom.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="banner">
<h1>My Animation</h1>
<h2>First collapsable header</h2>
<h3>Apurva Kinkar</h3>
</div>
<div id="content">
<img id="mobile" src="./img/1.jpg" />
<img id="monitar" src="./img/2.png" />
<img id="tab" src="./img/3.jpg" />
</div>
</div>
</body>
</html>
You have a typo error with your <img> declaration, It has to be monitor not monitar
<img id="monitar" src="./img/2.png" />
Change this as,
<img id="monitor" src="./img/2.png" />
Hope this helps!
Firstly, your image id is wrongly spelled.
Change this :-
<img id="monitar" src="./img/2.png" />
to
<img id="monitor" src="./img/2.png" />
After changing this, you will still get the same error. This is because, when your js code runs, the img element is still not added to the DOM.
For that, make the javascript code run on document.ready function ( when the img with id "monitor" is present in the DOM ).
Here is the working example which uses jQuery's document.ready() function.
You can also use this example if your dont want to use jQuery.

CSS transition hover (h1 inside a div seems not to work properly)

I'm having a slight problem with css transition. On my website, I have a div, and in that div is a h1.
Here's the css code.
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
transition: font-size 1s linear;
opacity: 1;
transition: opacity 1s linear;
}
I want to animate the opacity (from 0.5 to 1) and font-size (from 10px to 50px).
However, when I hover my mouse over that div, the opacity is nicely transitioned, but the text just changes the size instantly. So the hover seems to work and change the font-size, why is transition omitted?
If I make it #inner1 h1:hover, the transition works properly but only when I hover over the text. And I want the font-size transition when I hover over that div.
I tried to work around the problem and write a JS script for enlarging the text.
Here's what I came up with. I'll paste all the HTML content as well since there's not much of it.
However, this is not really smooth, I've gone as far as to incrementing only 0.09px every millisecond, but it still looks bumpy and also sends hundreds of unnecessary commands to the browser, right?
How can I solve that problem? Either with CSS or JS?
Thanks in advance ;).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="mainStyle.css">
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
<script>
var JSinner1 = document.getElementById("inner1");
var JSastroh1 = document.getElementById("astro-h1")
JSastroh1.style.fontSize = "16px";
var textBigger = function() {
var newSize = parseFloat(JSastroh1.style.fontSize) + 0.009 + "px";
window.setInterval(textBigger, 1)
if (parseFloat(newSize) < 60) {
JSastroh1.style.fontSize = newSize;
console.log(newSize);
}
}
JSinner1.addEventListener("mouseover", textBigger)
</script>
</body>
</html>
You're overwriting one transition with another. Try with
transition: font-size 1s linear,opacity 1s linear;
It's very simple, the problem is your :hoverselector, as you are adding two transitions properties, the last one is overwriting the previous one. In order to make this work, just add this to that rule:
transition: opacity 1s linear, font-size 1s linear;
Or you can use
transition: all 1s linear;
instead of using
transition: font-size 1s linear;
transition: opacity 1s linear;
use all
transition: all 1s linear;
or merge the two into one transition: font-size 1s linear,opacity 1s linear;
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
transition: all 1s linear;
}
<div id="inner1">
<h1> Some text </h1>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
transition: opacity 1s linear, font-size 1s linear;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
</body>
</html>

re-positioning a div on page load using pure javascript

hi i would like to create some animations using javascript when i thought of something which didn't work (i am a beginner in js)
so in simple i have a box at the top of my page and i want to change its css properties on pageload like width , margin -top margin -bottom and etc
here is my code -
<html>
<head>
<style>
#div{
backgroud: #ecb4df;
width: 200px;
height: 50px;
}
</style>
<script>
function codeAddress() {
/* the code here */
}
window.onload = codeAddress;
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
moreover is this way correct and workable or is there any other way of tackling my problem , if yes please tell that too
I can strongly recommend you to look at CSS animations, they perform much better and are easier to maintain.
In JavaScript all you need to do is add or remove a class.
<style>
.my-div {
-webkit-transition-property: top, left;
-moz-transition-property: top, left;
-o-transition-property: top, left;
transition-property: top, left;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
position: absolute;
top: 200px;
left: 200px;
}
.initial {
top: 0px;
left: 0px;
}
</style>
<div id="mydiv" class="my-div initial">Ipsum Lorem</div>
<script>
setTimeout(function () {
document.getElementById("mydiv").className = "my-div"; // remove "initial" to trigger animation
});
</script>
http://jsfiddle.net/srTnE/1/

Buggy fade in/out code in JavaScript/CSS

I'm not the most proficient in coding and have been stuck at trying to get this function working right for days and hope that someone could help me...
The idea is for the red div to show by default and the blue/yellow divs to be called upon by pressing the 'fade 1' and 'fade 2' buttons. When either of the buttons are pressed the red div is hidden and wont be called for.
The current code bugs up when the buttons are pressed continuously, they either wont show, the fade effect wont work or the red div appears.
Thanks!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.myBtn
{
width:80px;
}
#myImg0
{
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
position:absolute;
background-color:red;
width: 100px;
height: 100px;
}
#myImg1
{
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
position:absolute;
background-color:blue;
width: 100px;
height: 100px;
}
#myImg2
{
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
position:absolute;
background-color:yellow;
width: 100px;
height: 100px;
}
#myImg1.fade-out
{
opacity:0;
}
#myImg1.fade-in
{
opacity:1;
}
#myImg2.fade-out
{
opacity:0;
}
#myImg2.fade-in
{
opacity:1;
}
.hide {display: none;}
</style>
<script type="text/javascript">
function fade1(btnElement) {
if (btnElement.value === "Fade Out") {
document.getElementById("myImg0").className = "fade-out";
document.getElementById("myImg2").className = "fade-out";
btnElement.value = "Fade In";
}
else {
document.getElementById("myImg1").className = "fade-in";
btnElement.value = "Fade Out";
}
}
function fade2(btnElement) {
if (btnElement.value === "Fade Out") {
document.getElementById("myImg0").className = "fade-out";
document.getElementById("myImg1").className = "fade-out";
btnElement.value = "Fade In";
}
else {
document.getElementById("myImg2").className = "fade-in";
btnElement.value = "Fade Out";
}
}
</script>
</head>
<body>
<input class="myBtn" type="button" value="Fade 1" onclick="fade1(myImg1);" />
<input class="myBtn" type="button" value="Fade 2" onclick="fade2(myImg2);" />
<div id="myImg0" ></div>
<div id="myImg1" class="hide" ></div>
<div id="myImg2" class="hide" ></div>
</body>
</html>
You could use jquery like this- jsFiddle
$(document).ready(function () {
$(".fade1").click(function () {
$("#myImg1").fadeToggle();
$("#myImg2").fadeOut();
});
});
$(document).ready(function () {
$(".fade2").click(function () {
$("#myImg2").fadeToggle();
$("#myImg1").fadeOut();
});
});

How to darken an image on mouseover?

My problem..
I have a number of images (inside hyperlinks), and I want each to darken on mouseover (i.e. apply a black mask with high opacity or something), and then go back to normal on mouseout . But I can't figure out the best way to do it.
I've tried..
Jquery color animate and some javascript references.
Setting the opacity of the image with javascript.
I don't want..
Image start at 80% opacity then go to 100% on mouseover (that's easy).
To swap between 2 images (one light & one dark), forgot the mention this sorry..
To reiterate..
I want in image (inslide a hyperlink) to darken on mouseover and then lose its darkness on mouseout.
Thoughts?
UPDATE :
This is my progress from suggestions. Looks fine in IE8, but not in FF3
<html>
<body>
<a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>
Thoughts?
-- Lee
ANSWER
I'm going with this (seems to work in IE8 & FF)
<html>
<head>
<style type="text/css">
.outerLink
{
background-color:black;
display:block;
opacity:1;
filter:alpha(opacity=100);
width:200px;
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<a href="http://www.google.com" class="outerLink">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>
Or, similar to erikkallen's idea, make the background of the A tag black, and make the image semitransparent on mouseover. That way you won't have to create additional divs.
CSS Only Fiddle (will only work in modern browsers)
JavaScript based Fiddle (will [probably] work in all common browsers)
Source for the CSS-based solution:
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
And the image:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>
Make the image 100% bright so it is clear.
And then on Img hover reduce it to whatever brightness you want.
img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
-webkit-filter: brightness(70%);
filter: brightness(70%);
}
<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">
That will do it,
Hope that helps
I realise this is a little late but you could add the following to your code. This won't work for transparent pngs though, you'd need a cropping mask for that. Which I'm now going to see about.
outerLink {
overflow: hidden;
position: relative;
}
outerLink:hover:after {
background: #000;
content: "";
display: block;
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
}
How about this...
<style type="text/css">
div.frame { background-color: #000; }
img.pic:hover {
opacity: .6;
filter:alpha(opacity=60);
}
</style>
<div class="frame">
<img class="pic" src="path/to/image" />
</div>
Put a black, semitransparent, div on top of it.
Create black png with lets say 50% transparency. Overlay this on mouseover.

Categories