I've rotated a div, which looks fine and functions properly in Chrome & Firefox. However in IE (v9.0.8112.16421), the style & click event only appear to be applied to the area of the div which intersects with the position of the div before it was rotated.
Notice in my sample code, when you mouse over, the cursor is only displayed near the top of the div. Also notice nothing happens when you click the bottom of the div, but the event is fired when you click near the top.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style>
#myExpander
{
position:absolute;
padding: 5px;
top: 100px;
cursor: pointer;
border: 1px solid black;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#myExpander").click(function () {
alert("Clicked");
});
});
</script>
</head>
<body>
<div id="myExpander">
click me
</div>
</body>
</html>
Can anybody shed some light on what I'm missing?
Edit (solution): Here's the final solution as per Posicoln answer below. Please notice the -X-transform-origin styles have changed as this solution displayed differently in Chrome & FF.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style>
#myExpanderOuter
{
position:absolute;
padding: 5px;
top: 100px;
height: 80px;
width: 31px;
margin: 0 0 0 0;
padding: 0 0 0 0;
cursor: pointer;
border: 1px solid black;
}
#myExpanderInner
{
height: 30px;
width: 79px;
text-align: center;
}
.rotated270degrees
{
-webkit-transform-origin: 40 40;
-moz-transform-origin: 40 40;
-ms-transform-origin: 0 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#myExpanderOuter").click(function () {
alert("Clicked");
});
});
</script>
</head>
<body>
<div id="myExpanderOuter">
<div id="myExpanderInner" class="rotated270degrees">
Click me
</div>
</div>
</body>
</html>
One solution could be to put the rotated div inside a normal div with the rotated dimensions and rotate that.
so
<div id="myExpander">
click me
</div>
would turn to
<div id="myExpanderContainer">
<div id="myExpander">
click me
</div>
</div>
and you could add to your CSS
#myExpanderContainer
{
width: ...px; //~12px depends on browser settings, a value which could be inherited
height: ...px; //depends on length of link,
cursor: pointer;
}
with your script as
$(document).ready(function () {
$("#myExpanderContainer").click(function () {
alert("Clicked");
});
});
However this would need javascript to set dimensions for different length texts, if the links are changing, or if they are static it would be fine.
This probably isn't the most elegant solution, but it would work
Related
I need code for this functionality.
By default, it should be like right headed arrow and when i click it should be down headed arrow.
Thanks,
Ram
You can do it by using javascript. If you don't know how to use javascript, refer to the code below.
<html>
<head>
<title>Title</title>
<script type="text/javascript>
function myFunction(){
document.getElementById('img').src = "down.jpg";
}
</script>
<body>
<img src="right.jpg" id="img" onclick="myFunction();"/>
</body>
</html>
Enjoy :D
As you can see, we fetch the element in js using its id and change its src attribute and set it to your another image. You can change the event which is onclick as per your needs. You can use ondblclick to trigger the function on double click. ^-^
This may help you #pbrc1995 :)
function myFunction(x) {
x.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
<p>Click on the Menu Icon to transform it to "X":</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
Since you are not asking for a JavaScript solution, here's one without it.
div.arrow {
width:33px; height:30px;
background:url('https://i.stack.imgur.com/yMatp.png');
}
div.arrow:active{
width:51px; height:26px;
background:url('https://i.stack.imgur.com/M3Bew.png');
}
<div class="arrow"></div>
SOLVED Chrome bug, Stop CSS3 transition from firing on page load
This might be a duplicate.
I'm getting something weird with the following code:
JsFiddle: https://jsfiddle.net/xz3hcbqv/
You can see it working fine here and if I export it to my own HTML file like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.stripes {
cursor: pointer;
width: 35px;
}
.stripe {
width: 35px;
height: 5px;
margin: 6px 0;
transition: background-color 10s;
background-color: black;
}
label {
background-color: black;
}
input {
display: none;
background-color: black;
}
input:checked + .navbar-toggle .stripe {
background-color: red;
}
input:checked + .navbar-toggle .stripe.first {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
input:checked + .navbar-toggle .stripe.second {
opacity: 0;
}
input:checked + .navbar-toggle .stripe.third {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
</style>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<nav class="navbar">
<input type="checkbox" id="navbar-toggle-cbox">
<label for="navbar-toggle-cbox" class="navbar-toggle collapsed">
<div class="stripes">
<div class="stripe first"></div>
<div class="stripe second"></div>
<div class="stripe third"></div>
</div>
</label>
</nav>
</body>
</html>
Still working fine, notice that it's the exact same code.
But then, when I copy the inner of <style> </style> and put it into a style2.css file. On the browser load, it fades the black color as well.
What causes this?
How can I solve this?
I pulled the code out of the style section and placed it into a local style2.css file and put the rest of the code into an index.html file and was able to reproduce the effect you're describing, but only in Chrome (and in Chrome it doesn't produce the effect in jsfiddle). The rule that is likely causing the fade is the transition on the .stripe rule, though. It sounds like the issue you are describing is caused by a bug in Chrome. See this question for more information: Stop CSS3 transition from firing on page load
Different solution: since it's a bug in Chrome afaik, you can set the transition 1s to the input:checked.
When the browser get's loaded, the input isn't checked yet. This way you won't have to use JS or something else fancy.
EDIT:
Adding -webkit-transition also seems to work.
I'm trying to implement this example of 3d geometric transform with css:
3D Geometric Transform
But my animation is not working like that example and this is what I have:
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<style>
#im1 { transform: translateZ(25px); }
#im2 { transform: translateZ(-25px); transform: translateY(-50px); }
#obj1 {
animation: theRotate 2s linear infinite;
perspective: 1000px;
transform-style: preserve-3d;}
#keyframes theRotate
{
from {transform: rotateY(0deg) }
to {transform: rotateY(360deg) }
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-1 col-md-1" id="obj1">
<img src="wicon2.png" id="im1" style="width:50px">
<img src="wicon.png" id="im2" style="width:50px">
</div>
</div>
</div>
</body>
</html>
According to this, with perspective:1000 the animation should work fine, but it doesn't.
If there is another simple way to do this, maybe with JS, will be fine too.
I appreciate your time, thanks.
I took a look at the initial link/example you posted and copied the relevant CSS code from there and adapted it to your existing code. The following edit of your posted code should work in the intended way (shown in the linked example).
please note: If you run the snippet below, it will rotate empty images, because the image link is still the same from your post (wicon1.png)
<html>
<head>
<meta charset ="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<style>
.scene3d
{
perspective: 1000px;
width: 600px;
height: 340px;
margin-left: auto;
margin-right: auto;
}
.object3d
{
position: absolute;
width: inherit;
height: inherit;
/*top: 20px;*/
transform-style: preserve-3d;
}
.face3d
{
position: absolute;
left: 165px;
top: 15px;
}
#im1 { transform: translateZ(150px); }
#im2 { transform: translateZ(-150px); }
.scene3d.begin { perspective: 100000px; }
.scene3d.end { perspective: 1000px; }
#obj1 { animation: theRotate 4s linear infinite; }
#keyframes theRotate
{
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
</style>
<div class="container">
<div class="row scene3d">
<div class="col-sm-1 col-md-1 object3d" id="obj1">
<img src="wicon1.png" id="im1" class="face3d" style="width:50px">
<img src="wicon2.png" id="im2" class="face3d" style="width:50px">
</div>
</div>
</div>
</body>
</html>
following is the html code i have written
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box
{
width: 200px;
height: 250px;
border-radius: 15px;
background-color: pink;
border-color: red;
border-style: solid;
display: block;
-webkit-animation: myrotate 3s infinite; /* animation enabled */
}
#box:after /* not working if animation is disabled*/
{
content:"";
display:block;
position:absolute;
bottom:-15px;
left:20px;
width:0;
border-width:15px 25px 0;
border-style:solid;
border-color:#13961c transparent;
}
#-webkit-keyframes myrotate
{
from
{
-webkit-transform:rotate(0deg); /* Safari and Chrome */
}
to
{
-webkit-transform:rotate(360deg); /* Safari and Chrome */
}
}
</style>
</head>
<body>
<center>
<div id="box">
xyz <br/>
yzx <br>
</div>
</center>
</body>
</html>
the problem is the speech bubble pointer appears only when animation myrotate is enabled. If it is commented the pointer disappear. I am new to css3 and html5. please explain.
Add this to the CSS:
#box {
position: relative;
}
The elements which have a position absolute will only be positioned with respect to the closest parent which also has a position other than the default (static) or if none of the parents have a non-static position, then the position is determined wrt the viewport.
I suspect when an element is animated, the browser doesn't treat is as a statically positioned object anymore.
Is that possible to make a video inside tag mirrored horizontally or vertically?
You can do it using a CSS3 3D transformation.
#videoElement
{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
This will rotate it 180 degrees around its Y axis (so you're now looking at it from behind) which gives the same appearance as being mirrored.
Example at http://jsfiddle.net/DuT9U/1/
You can use CSS3 scaleX or scaleY set to -1 to respectively flip the video horizontally or vertically.
Using JavaScript, if video is the video element, to mirror (flip horizontally) you can use
video.style.cssText = "-moz-transform: scale(-1, 1); \
-webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); \
transform: scale(-1, 1); filter: FlipH;";
To flip vertically you can use
video.style.cssText = "-moz-transform: scale(1, -1); \
-webkit-transform: scale(1, -1); -o-transform: scale(1, -1); \
transform: scale(1, -1); filter: FlipV;";
By any chance if somebody wants a working example, here is the code (with mirrored/rotated). Refer the video element #videoElement under style tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
/*Mirror code starts*/
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
/*Mirror code ends*/
}
</style>
</head>
<body>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
</script>
</body>
</html>
to prevent rotating controls
video {
transform: scale(-1,1);
}
video::-webkit-media-controls-panel {
transform: scale(-1,1);
}