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;
}
Related
Anyone know how to resize an image up and down on click.
Example: nrk.no
The website you give as an example uses CSS Transitions to make some of their images grow and shrink. You can learn more about CSS Transitions at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Below is a simple example using JQuery. When you click on the Google logo it will grow and when you click on it again it will shrink.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.box img {
transition: width .4s,margin .4s,max-width .4s;
transition-property: width, margin, max-width;
transition-duration: 0.4s, 0.4s, 0.4s;
transition-timing-function: ease, ease, ease;
transition-delay: 0s, 0s, 0s;
}
.box img.clicked{
width: 500px;
}
</style>
<script>
$(function(){
$('.box img').on('click', function() {
$(this).toggleClass('clicked');
});
});
</script>
</head>
<body>
<div class="box">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
</body>
</html>
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.
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.
Hi: I'm doing a site in wordpress and I need two pieces of code that keep giving me hard time. I know is easy but I can't make it work.
I need to make that when mouse over (or enter) on any of three image, the image change (slide) into another image with descriptive text. How can I include the images onto this sample code and as per image on link bellow?
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
Mouse over change content http://www.nrgtechnologies.com.au/moreimages/plain-2.jpg
Also very similar effect with a horizontal menu with sliding transition between 3 or 4 menu elements on mouseover as per image on link bellow.
mouse over sliding menu and content: http://www.nrgtechnologies.com.au/moreimages/plain-1.jpg
Thanks for the help
Please look at below script:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style type="text/css">
.slide {
background-image: url(plain-2.jpg);
width: 295px;
height: 220px;
-webkit-transition: background-position .5s ease-in-out;
}
.slide-1 {
background-position: -30px -215px;
-webkit-transition: background-position .5s ease-in-out;
}
.slide-2 {
background-position: -354px -215px;
-webkit-transition: background-position .5s ease-in-out;
}
.slide-3 {
background-position: -675px -215px;
-webkit-transition: background-position .5s ease-in-out;
}
.moz-over {
background-color: #ccc;
}
</style>
</head>
<body>
<div id="images" class="slide slide-1">
</div>
<span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-1</span>
<span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-2</span>
<span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-3</span>
<script type="text/javascript">
var mozOver = function(target) {
target.className = "moz-over";
var images = document.getElementById("images");
images.className = "slide " + target.innerHTML;
};
var mozOut = function(target) {
target.className = "";
};
</script>
</body>
</html>
I am not sure whether is you want. I the logic is like above.
Add an id attribute to your div and remove the javascript handlers:
<div id="description"></div>
Then add your handlers to your images instead:
<img onmouseover="mOver(this)" onmouseout="mOut(this)" ... />
Then in your functions use something like this:
function mOver(obj)
{
var description = document.getElementsById("description");
description.innerHTML="Thank You";
}
function mOut(obj)
{
var description = document.getElementsById("description");
description.innerHTML="Mouse Over Me";
}
i have this Webpage on which with mouse over, the element rotates and goes back to original position on mouseout.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
Now Is it possible to trigger this transition using JavaScript and not the defualt hover function. I tried by creating two different class names but it just dosent work even if i do it by adding delay and changing the class. Is there anyway to do such a transition with Javascript??
I believe all you need to do is fire a change the style of the element you want to modify when particular events happen. Also, I changed the DOCTYPE to use HTML5. Give this a try:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div.sample1
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.sample1:hover
{
width:300px;
}
</style>
<script type="text/javascript">
function doStuff(obj,boolStateChange)
{
console.log('test');
if (boolStateChange==true)
{
obj.style.cssText = "width:300px;height:100px;background:green;transition:width 2s;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;";
}
else
{
obj.style.cssText = "width:100px;height:100px;background:green;transition:width 2s;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;";
}
}
</script>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div class="sample1"></div>
<p>Hover over the div element above, to see the transition effect.</p>
<br/><br/><br/>
<div id="javaHover" style="background-color:green;width:100px;height:100px;" onMouseOver="doStuff(this,true);" onMouseOut="doStuff(this,false);"></div>
<p>Hover over the div element above, to see the Javascript transition effect.</p>
</body>
</html>
You can do this:
document.getElementsByTagName("div")[0].style.width = '300px';
See fiddle.
what do you think about this:
http://jsfiddle.net/scrRe/ ?
Here you go:
http://jsfiddle.net/scrRe/3/
Do not use :hover selector then. Use JavaScript events.
for example:
CSS:
#box
{
background-color: steelblue;
height: 100px;
width: 100px;
transition: height 1s, width 1s;
-moz-transition: height 1s, width 1s;
-webkit-transition: height 1s, width 1s;
-o-transition: height 1s, width 1s;
}
JavaScript:
var element = document . getElementById ( "box" ) ;
element . addEventListener
(
"click",
function ()
{
this . style . width = "200px" ;
}
) ;
element . addEventListener
(
"dblclick",
function ()
{
this . style . height = "200px" ;
}
) ;
http://jsfiddle.net/6gSZD/
You may be able to use CSSAnimation, which is a JavaScript library that allows you to trigger animations with JavaScript while utilizing CSS to do the actual animation.
Here's an example from the documentation (try it):
var element = document.getElementById('some-el'),
transition = new Transition(element),
transform = new Transform(element);
transition.set({
property: 'transform',
'timing-function': 'ease-in',
duration: '2s'
});
transform.rotate(720).scale(2);