I try to make a little slider, but it works only in Google Chrome.
In FireFox (version 47) it doesn't work.
The CSS file is that:
#home-container {
width: 500px;
height: 300px;
background-image: url("img1.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
and the HTML (with a little script):
<!DOCTYPE html>
<html>
<head>
<title>CSS Slider</title>
<link rel="stylesheet" href="style.css"/>
<script>
var index = 0;
function changeImage() {
var imgArr = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
document.getElementById("home-container").style.backgroundImage = "url('" + imgArr[index] + "')";
index++;
if (index >= imgArr.length) {
index = 0;
}
}
setInterval(changeImage, 2000);
</script>
</head>
<body>
<div id="home-container">
</div>
</body>
</html>
PS: I need a solution for that code, not an alternative to use jQuery.
Firefox won't support it according to this bug nor is it an animatable property (https://www.w3.org/TR/css3-transitions/#animatable-properties).
See this awswer for details.
Can u try to add transition-delay (4th parameter) equal 0, into all properties?
Maybe you can play with the opacity attribute. Check this: http://www.quirksmode.org/js/opacity.html is a way to set opacity in all elemnts.
Related
I'm having big trouble making a website. For some reason in whatever I do I can never get javascript to work. Is there something I'm missing for 'enabling' this?
For example I copied a very simple thing exactly.
https://codepen.io/thetallweeks/pen/boinE
In a test file this is:
<html>
<head>
<script>
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
</script>
<style>
.box {
background-color: #218D9B;
height: 100px;
width: 100px;
}
.transform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.transform-active {
background-color: #45CEE0;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="box transform">
</div>
<input type="button" id="button" value="Click Me"></input>
</body>
</html>
Yet the button does nothing in my test file.
What did I do wrong?
In addition to making sure JQuery has been loaded you should also load your JQuery code(script tag) before the closing body tag or wrap it in a document ready function call. If JQuery has been loaded then what is happening is that the JQuery is being executed before the html element your are attaching the event to has actually been loaded. So basically the JQuery event can't see your button element yet.
$(document).ready(function(){
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
});
The $() is a jQuery shorthand for finding elements in DOM. Did you include the jQuery Library?
Try this
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
</script>
<style>
.box {
background-color: #218D9B;
height: 100px;
width: 100px;
}
.transform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.transform-active {
background-color: #45CEE0;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="box transform">
</div>
<input type="button" id="button" value="Click Me"></input>
</body>
</html>
This happens as you did not include Jquery and tried using it.
Note additional script tag on the top of your script tag
I need to add some nice transition fade effect to the change of the following simple sideshow:
var images = [
"http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
"http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
"https://i.kinja-img.com/gawker-media/image/upload/s--8a-AXhau--/c_scale,fl_progressive,q_80,w_800/zec3un8rzcmblrdlyswb.jpg",
"http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
"http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
"http://magic-spells-and-potions.com/images/flower-language-vertical.png",
];
var i = 0;
var div;
$(function() {
div = $('.header_summer');
console.log("loaded");
setTimeout(changeBack, 1000);
});
function changeBack() {
i = ++i % images.length;
if (i > images.length) {
i = 0;
}
console.log('url("' + images[i] + '");');
// div.css('background-image', "url('" + images[i] + "')");
// preload image check
//
$('<img/>').attr('src', images[i]).load(function()
{
$(this).remove();
$('.header_summer').css('background', 'url("' + images[i] +'") no-repeat 0px 0px');
});
//
setTimeout(changeBack, 5000);
}
.header_summer {
background: url('../tpl/mblmhv1/images/summer_cover1.jpg') no-repeat 0px 0px;
background-size: cover;
min-height:920px; /* 800px; */
/* TRANSISITION - not qorking here
transition(background-image 0.5s ease-in-out);
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
*/
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class='header_summer'></div>
I have tried appending .fadeIn() to the jquery line that changes the image, and transition effects in the CSS - what am I missing?
Try this:
.header_summer {
background: url('../tpl/mblmhv1/images/summer_cover1.jpg') no-repeat 0px 0px;
background-size: cover;
min-height:920px; /* 800px; */
transition: background-image 0.2s ease-in-out;
}
It should work with just the transition property defined on your CSS class as any changes to the element should trigger the transition (i.e. when you update the background, you should see the transition):
.header_summer {
background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0px 0px;
background-size: cover;
min-height: 920px;
/* Transitions and their cross-browser friends */
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
The syntax generally uses the form <property> <duration> <timing-function> <delay>, so your current transition would be looking for the opacity property to change, which it doesn't seem to be.
You should consider using background instead :
transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
Example
.header_summer {
background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0px 0px;
background-size: cover;
min-height: 920px;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flowers and stuff...</title>
</head>
<body>
<!-- Your element to switch through -->
<div class='header_summer'></div>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
// Define your images
var images = [
"http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
"http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
"https://i.kinja-img.com/gawker-media/image/upload/s--8a-AXhau--/c_scale,fl_progressive,q_80,w_800/zec3un8rzcmblrdlyswb.jpg",
"http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
"http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
"http://magic-spells-and-potions.com/images/flower-language-vertical.png",
];
// Define your variables
var i = 0;
var div;
$(function() {
// Set up your div
div = $('.header_summer');
console.log("loaded");
setTimeout(changeBack, 1000);
});
function changeBack() {
i = ++i % images.length;
if (i > images.length) {
i = 0;
}
console.log('url("' + images[i] + '");');
div.css('background-image', "url('" + images[i] + "')");
setTimeout(changeBack, 5000);
}
</script>
</body>
</html>
I have been trying to get a fading background image script to work, but I am pretty noob at JS. The problem is that the fade effect works nicely in chrome, but the picture just shifts without a fade in Firefox and IE.
Here is my code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body style="margin:0; padding:0;">
<style>
.bg_img_slider{
min-height:530px;
background-image:url("a.jpg");
background-repeat:no-repeat;
background-position:center;
background-size:cover;}
</style>
<script>
var newBg = [
'b.jpg',
'c.jpg',
'd.jpg'
];
var i = 0;
var rotateBg = setInterval(function(){
i++;
if(i > 2)
i=0;
$('.bg_img_slider').css({backgroundImage : 'url(' + newBg[i] + ')'}).fadeIn('slow', 1);
}, 3000);
</script>
<div class="bg_img_slider"></div>
</body>
</html>
Instead of using the jquery method fadeIn() you can use CSS3 transitions.
JSFIDDLE DEMO
.bg_img_slider {
min-height:530px;
background-image:url("http://texy.dk/a.jpg");
background-repeat:no-repeat;
background-position:center;
background-size:cover;
-webkit-transition: background-image .6s ease-in;
transition: background-image .6s ease-in;
}
Please see example in chrome. I try to implement row height animation with image that shouldn't exceed parent block.
Why does image width change only after changing any property example?
Try to click the first button, image height will updated, but width no. Then click the second button, opacity will changed, and image width will be setted properly.
<!DOCTYPE html>
<html>
<head>
<title>Image resizing</title>
<style>
.header-row {
width:900px;
height:90px;
margin:0 auto;
background:#0f3a51;
-webkit-transition: all .9s ease;
-moz-transition: all .9s ease;
-ms-transition: all .9s ease;
-o-transition: all .9s ease;
transition: all .9s ease;
}
.header-row img {
display: inline;
max-height: 100%;
background:#ff9900;
}
.header-row-reduced {
height:50px;
}
</style>
</head>
<body>
<div id="hr" class="header-row">
<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Volkswagen_Logo.png/600px-Volkswagen_Logo.png" alt="">
</div>
<button id="btn" onclick="check();">Update row height</button>
<button id="btn" onclick="changeProp();">Toggle opacity</button>
<script>
var el = document.getElementById('hr'),
img = document.getElementById('img');
function check(){
var classes = el.className.split(' '),
hasClass = classes.indexOf('header-row-reduced');
if(~hasClass) {
classes.splice(hasClass,1);
} else {
classes.push('header-row-reduced');
}
el.className = classes.join(' ');
}
function changeProp() {
img.style.opacity = '0.5';
}
</script>
</body>
</html>
Thats a good question. I don't know why this is not working like expected.
But you could fix it by applying the rule with the height to the element as well:
.header-row-reduced, .header-row-reduced img {
height:50px;
}
This works, but I'm sure it is not exactly what you want to have!
Setting max-height in pixels should fix the issue as well.
I am revealing an element using a CSS transition that is triggered by a JavaScript scroll event however this transition is affecting the background color of an adjacent element in Safari (5.1.7) and Chrome (27.0.1453.93) on a Mac (10.6.8) which makes no sense at all. I think I have stumbled upon a bug.
I duplicated the issue in Safari only using the following, stripped-down code and created a jsfiddle (http://jsfiddle.net/5AEMF/) but the issue does not occur within that framework:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Opacity transition affecting color of adjacent element</title>
<style>
* {
margin: 0;
padding: 0;
}
#bar {
height: 100px;
background-color: #FF0000;
}
#content {
opacity: 0;
height: 9999px;
background-color: #0000FF;
-webkit-transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#content.scrolled {
opacity: 1;
}
</style>
<script type="text/javascript">
var scrolled = false;
var init = function() {
onScroll(null);
window.addEventListener('scroll', onScroll);
};
var onScroll = function(e) {
if (window.scrollY > 0 && !scrolled) {
scrolled = true;
document.getElementById('content').className = 'scrolled';
} else if (window.scrollY === 0 && scrolled) {
scrolled = false;
document.getElementById('content').removeAttribute('class');
}
};
window.addEventListener('load', init);
</script>
</head>
<body>
<div id="bar"></div>
<div id="content"></div>
</body>
</html>
I wonder if there's a workaround for this issue. Any help would be greatly appreciated.
Use colors in RGB form eg: color:rgba(255, 106, 0, 0.24) the last parameter in this property 0.24 is an opacity. make it 0 and it will be transparent.