Buggy fade in/out code in JavaScript/CSS - javascript

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();
});
});

Related

zoom an image on button click

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>

Javascript combine with my css to add an effect on imagechange

I want to change my images with javascript and add an fade effect.
This is my css for the fade effect:
var image=document.getElementById("image");
var currentPos = 0;
var images = ["foto1.jpg","foto2.jpg","foto3.jpg"]
function volgendefoto() {
if (++currentPos >= images.length) currentPos = 0;
image.src = images[currentPos];
}
setInterval(volgendefoto, 4100);
#map {
height:1000px;
width:1000px;
background:black;
}
#overlay {
z-index:2;
background:white;
height:1000px;
width:1000px;
opacity:0;
-webkit-transition: opacity 0.1s;
-ms-transition: opacity 0.1s;
-moz-transition: opacity 0.1s;
-o-transition: opacity 0.1s;
transition: opacity 1s;
margin-top:-1000px;
transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
}
#overlay:hover {
opacity:.8;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'>
<img id="image" src="foto1.jpg">
<div id='overlay'></div>
</div>
It is for a school project where we are making a responsive website, so I am going to add this to that site.
Tried your piece of code which gives fade-out effect for the image on hover.
[You can see the output below][1]
[1]: https://jsfiddle.net/cxLjLnu8/1/ "Output here"
Is this what you did and expected?
Which effect you are in need of fade-in
or fade-out?
and
do you need the effect on Hover or on sliding the images?

Highlight area with backgroundcolor fadein/fadeout

Hi I'd like to highlight .small. Do not have access to add jQuery UI e.g. can't use .animate.
HTML
<span class="small">10 left</span>
jQuery
$(".small").css("background-color","orange");
Question: How do I add background-color orange and make it .fadeOut() here? This below doesn't work? Only want to fadeout the background color, nothing else.
$(".small").css("background-color","orange").fadeOut();
you can use CSS animations to do that
see snippet below
span {
background-color:orange;
animation-name:bckanim;
animation-fill-mode:forwards;
animation-duration:3s;
animation-delay:0s;
}
#keyframes bckanim {
0% {background-color:orange;}
100% { background-color:transparent;}
}
<span class="small">10 left</span>
You can use timeouts and css transitions nicely for this.
For more information about transitions:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
$(document).ready(function(){
var $block = $('.block');
/** first timeout to make the document do its stuff before this thing runs **/
window.setTimeout(function() {
$block.addClass('orange-fade');
/** second timeout to turn it back to normal **/
window.setTimeout(function() {
$block.removeClass('orange-fade');
},2000);
},1000);
});
.block {
display:block;
width:200px;
height:200px;
background-color:green;
/** Transitions to give a nice effect **/
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
.orange-fade {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" block transition">
Look at me! Look at you! now look back to me! i'm on a horse!
</div>
You can do something like this with css transitions on a class and then add or remove the class with JS.
HTML:
<span class="small">10 left</span>
CSS:
.small {
background-color: #fff;
transition-property: background-color;
transition-duration: 1s;
transition-delay: 1s;
}
.orange {
background-color: orange;
}
JS:
$(".small").addClass("orange");
DEMO https://jsfiddle.net/ry5qxvos/
try this http://jsfiddle.net/x2jrU/92/ use this jquery to make background color of ur wish with fadein/fadeout option.
jQuery.fn.highlight = function() {
$(this).each(function() {
var el = $(this);
el.before("<div/>")
el.prev()
.width(el.width())
.height(el.height())
.css({
"position": "absolute",
"background-color": "#ffff99",
"opacity": ".9"
})
.fadeOut(500);
});
}
$("#target").highlight();
#target { width: 300px; height: 100px; border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">Highlight Me</div>

squeeze a non-responsive webpage

i have this following jsfiddle link
where am trying to squeeze the webpage to show an AD towards right
http://jsfiddle.net/azgjr8k0/
Works well with responsive sites, but in the above given fiddle link. it doesn't squeeze a div with fixed width & non responsive sites.
any way i can do it then let me know
here is the css
#test {
position:fixed;
width:160px;
background:blue;
right:-160px;
top:0px;
bottom:0px;
-webkit-transition: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
transition: all ease-in-out 1s;
}
#test.show {
right:0;
}
#container{
margin-right:0;
-webkit-transition: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
transition: all ease-in-out 1s;
}
#container.squeezed {
margin-right:160px;
}
javscript/jquery code
window.onscroll = function () {
if (pageYOffset > 100) {
$("#test").addClass("show");
$("#container").addClass("squeezed");
} else if (pageYOffset < 100) {
$("#test").removeClass("show");
$("#container").removeClass("squeezed");
}
}
Here is the solution:
http://jsfiddle.net/austinthedeveloper/azgjr8k0/4/
If you want to set widths on things but have them be responsive, make sure they're set as the max-width.
#box{
width: 100%;
max-width:500px;
}

Add transition while changing img src with javascript

I have an img tag that I want to change the src when hover and it all works but i would like to add some transition so it doesn't look so rough but since it's an img src i cant target it with css.
http://jsfiddle.net/Ne5zw/1/
html
<img id="bg" src="img/img1.jpg">
<div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');">
js
function imgChange(im){
document.getElementById('bg').src=(im);
}
You want a crossfade. Basically you need to position both images on top of each other, and set one's opacity to 0 so that it will be hidden:
<div id="container">
<img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg">
<img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" />
</div>
CSS:
.hidden{
opacity:0;
}
img{
position:absolute;
opacity:1;
transition:opacity 0.5s linear;
}
With a transition set for opacity on the images, all we need to do is trigger it with this script:
$(function(){
debugger;
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});
http://jsfiddle.net/Ne5zw/12/
Here is a pure css solution using css transition. You can use a div as the container and set the background-image on hover.
.image-container {
background: url(http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image) center center no-repeat;
background-size: contain;
width: 150px;
height: 150px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.image-container:hover {
background-image: url("http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image");
}
<div class="image-container"></div>
Just in case someone is curious how to actually create a transition-like effect when you are actually changing the source attribute of an image, this was the solution I came up with.
Javascript:
var bool = false;
setInterval(() => {
bool = !bool;
let imgSrc = bool ? 'hero-bg2.jpg' : 'hero-bg.jpg'; // Toggle image
$('.parallax-slider').addClass('transitioning-src'); // Add class to begin transition
setTimeout(() => {
$('.parallax-slider').attr('src', `https://website.com/images/${imgSrc}`).removeClass('transitioning-src');
}, 400); // Ensure timeout matches transition time, remove transition class
}, 6000);
CSS:
.parallax-slider {
transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
opacity: 1;
}
.transitioning-src {
transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
opacity: 0;
}
This will give the illusion of 'fading to black and back' between images - even if you're using something like parallax.js where you have a data-attribute driven component that renders out into a dynamic image. Hope it helps someone.
Fixed Mister Epic solution's images in this jsfiddle.
HTML
<div id="container">
<img class="hidden image1" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image">
<img class="image2" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image" />
</div>
<div id="hoverMe">hover me</div>
CSS
div#hoverMe {
background-color:yellow;
width:50px;
height:50px;
position:fixed;
top:300px;
}
div#container{
position:relative;
height:200px;
}
.hidden{
opacity:0;
}
img{
position:absolute;
opacity:1;
transition:opacity 0.5s linear;
}
JS
$(function(){
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});

Categories