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);
Related
I want to create a webpage that works for js and none-js visitors. For js-visitors the start image shall fade in, so it has to be hidden before. At the moment it is hidden too late, namely when the js has loaded. I cannot hide it by default , because in this case none-js visitors will not see it. Any ideas?
HTML
<div class="startImage">...</div>
JS
$('.startImage').hide().delay(200).fadeIn(200);
You should just use css to fade the div in then.
.startImage {
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Working JSFiddle -
http://jsfiddle.net/bpzpb00q/
CSS
.startImage {
display:none;
}
HEAD
<noscript>
<style>.startImage {display:block}
</style>
</noscript>
JS
$(document).ready(function() {
$('.startImage').fadeIn(200)
});
in this case <noscript> tag would be useful, add 2 same elements and and one warp with <noscript> tag and another element with css properly display:none
<noscript>
<div class="startImage">...</div>
</noscript>
<div class="startImage forJS" style="display:none">...</div>
And target <selector> $(".startImage.forJS")
<script>
$(function(){
$('.startImage.forJS').delay(200).fadeIn(200);
})
</script>
Use the <noscript> tag for the non JavaScript users and duplicate its content for the JavaScript users.
To the duplicated content add a class modifier like .hidden to set it to display: none by default. Apply your fadeIn function to it.
If you don't like the duplication you could have the JavaScript take the content from the <noscript> tag create a DOM element from it and inject it into the page.
$(function() {
$('#box').delay(200).fadeIn();
});
.box {
width: 300px;
margin: 0 auto;
border: 1px solid #c66;
background-color: #f99;
color: #fff;
font-size: 24px;
padding: 24px;
font-family: Helvetica, Arial;
text-align: center;
}
.hidden {
display: none;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<noscript>
<div class="box">Content</div>
</noscript>
<div id="box" class="box hidden">Content</div>
I would consider using the <noscript> tag, like so:
$(window).load(function() {
$("#startImage img").css("opacity", "1");
});
#startImage img {
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
<noscript>
<style type="text/css">
#startImage img {
opacity: 1;
}
</style>
</noscript>
<style type="text/css">
#startImage img {
opacity: 0;
}
</style>
<div id="startImage">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="Hero2" />
</div>
Even though it doesn't seem to work when you run the code snippet, the following demo should work in the 5 major browsers.
if you are using the fadeIn(200) to the "startImage" class
then there is no need to hide the selector as well as not need to give delay
so
that above method is right try it
I have a gif that appears as my site is loading however the gif dissapers and the page appears after everything has loaded except the background images called via css.
How could I have the gif fade away only after the background images have loaded.
I am using this code for the loader:
html:
<html class="loading">
<!-- All the things -->
</html>
css:
html {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body {
/* For the loading indicator to be vertically centered ensure */
/* the html and body elements take up the full viewport */
min-height: 100%;
}
html.loading {
/* Replace #333 with the background-color of your choice */
/* Replace loading.gif with the loading image of your choice */
background: #333 url('loading.gif') no-repeat 50% 50%;
/* Ensures that the transition only runs in one direction */
-webkit-transition: background-color 0;
transition: background-color 0;
}
body {
-webkit-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
html.loading body {
/* Make the contents of the body opaque during loading */
opacity: 0;
/* Ensures that the transition only runs in one direction */
-webkit-transition: opacity 0;
transition: opacity 0;
}
javascript
// IE10+
document.getElementsByTagName( "html" )[0].classList.remove( "loading" );
// All browsers
document.getElementsByTagName( "html" )[0].className.replace( /loading/, "" );
// Or with jQuery
$( "html" ).removeClass( "loading" );
Thank you
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.splash').fadeTo(555,0, function() {
$(this).remove();
});
});
</script>
</head>
<body>
<div class="splash" style="position: absolute; width: 100%; height: 100%; background-image:url(mygif); background-repeat: repeat;"> </div>
<!-- All the things -->
</body>
</html>
tested ! => http://jsfiddle.net/3m3S8/
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 a code (simplified). I want "height linear 2s" transition. Is there way to do that using display:block and display:none property? I don't want to specify height of content.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
const classes = new Array("shown", "hidden");
const classesCount = 2;
var curClass = 0;
function switchClass() {
document.getElementById("divel").className=classes[curClass = (curClass + 1) % classesCount];
}
</script>
<style type="text/css">
.hidden {
display:none;
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
}
.shown {
display:block;
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
}
</style>
</head>
<body>
<button onclick="switchClass()">Press me</button>
<div id="divel" class="shown">
Hello World<br>
Hello World<br>
Hello World<br>
</div>
</body>
</html>
basic example: http://jsfiddle.net/DNeEv/
You need to specify an exact height, however. Not sure how to do it with height:auto
An example with auto height: http://jsfiddle.net/nB5Du/
There are the cases that the transition will fail:
display: none
height: auto
..So I need to change the css to make the transition works. Here is the demo: http://jsbin.com/axijaz/4
However, height:auto + max-height + min-height can reproduce similar effect:
http://jsbin.com/axijaz/8/edit
Note:
if min-max have big different, you may need to break down the transition (see point 2)
min-height only or max-height only will trigger only one side of transition (see version 6 and 7)
Or if you are willing to use a wrapper and js code, someone already give a solution here
Hope it can help.