According to this link Repost or flag my own question for migration?
I'have to repost my question for a useful answer.
On hover, the doors are supposed to be open, according to the CSS. It works in Firefox, Opera, Chrome and IE but there is no effect on hover in Safari 5.1.7. Where's the problem here? The part of the CSS for this hover is the following:
$(document).ready(function() {
$("#cupboard").on("touchstart", function(e) {
$(this).addClass("hover");
e.preventDefault();
});
$("body").on("touchend", function(e) {
$("#cupboard").removeClass("hover");
});
});
html,
body {
margin: 0;
padding: 0;
background: #C2B3A0;
}
/*user-select: none;*/
/*background: url(bg.jpg);*/
#cupboard {
height: 613px;
width: 617px;
position: relative;
left: 35%;
margin-left: -112px;
top: 24px;
bottom: 31px;
perspective: 500;
background: url(bg.png);
background-position: center center;
background-size: 95%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#cupboard img {
position: inherit;
height: 200px;
width: 200px;
float: left;
margin-left: 62px;
margin-top: 82px;
}
#cupboard .door#left {
zoom: .6;
position: absolute;
width: 512px;
height: 100%;
background-image: url(dl.jpg);
transition: transform 1s ease;
transform: rotateY(0);
}
#cupboard .door#right {
zoom: .6;
position: absolute;
width: 517px;
height: 100%;
background-image: url(dr.jpg);
transition: transform 1s ease;
transform: rotateY(0);
}
#cupboard .door#left {
transform-origin: top left;
left: 0;
}
#cupboard .door#right {
transform-origin: top right;
right: 0;
}
#cupboard:hover #left,
#cupboard.hover #left {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
#cupboard:hover #right,
#cupboard.hover #right {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
<html>
<head>
<script src="http://s.codepen.io/assets/libs/prefixfree.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="cupboard">
<a href="http://www.facebook.com">
<img src="f.jpeg" alt="facebook" />
</a>
<a href="http://www.twitter.com">
<img src="t.jpeg" alt="twiter" />
</a>
<a href="http://www.linkedin.com">
<img src="l.png" alt="linkedin" />
</a>
<a href="http://www.wordpress.com">
<img src="w.jpg" alt="wordpress" />
</a>
<div class="door" id="left"></div>
<div class="door" id="right"></div>
</div>
</body>
</html>
Here is the sreenshot of output page:-
Before hover :-
After hover :-
Screenshot of Safari
According to caniuse, safari needs the -webkit- prefix to work. Also you don't have any units after your perspective length.
Edit from your comment for completeness:
Also need to use -webkit-transition: all 1ms ease;
Css transition codes for each of browsers is different and you should set them for all browsers.
Please visit to css tricks site or w3school site for standard sintax of it for safari browser.
Related
I am trying to animate the slide in/out of my flyout however it doesn't transition but appear and disappear in the same place.
in chrome devtools the animation works if I tick/untick right: 0;
How can I slide in/out the flyout correctly?
<template>
<portal to="modalPortal">
<div
v-if="isMoreOffersFlyoutActive"
:id="id"
class="flyOut"
#click.self="sendCloseModal(true)">
<div
:class="['flyOut__container', {'flyOut__container--active': isMoreOffersFlyoutActive}]">
<div class="flyOut__buttonContainer">
<button
id="storeInfoClose"
class="flyOut__button"
#click="sendCloseModal(false)">
<icon
:scale="closeButtonIconScale"
name="close"
color="white" />
</button>
</div>
<div class="flyOut__content">
<slot />
</div>
</div>
</div>
</portal>
</template>
.flyOut {
position: fixed;
top: 0;
left: 0;
z-index: z("overlay");
display: flex;
justify-content: flex-end;
width: 100%;
height: 100%;
overflow: auto;
background-color: $black-alpha;
&__container {
position: relative;
z-index: z("modal");
right: -50%;
width: 50%;
height: 100%;
background-color: $white;
box-shadow: -2px 0 15px 5px rgba(0,0,0,0.2);
transition: right ease 0.5s;
&--active {
right: 0;
transition: right ease 0.5s;
background: #ff00ff;
}
}
There isn't really an issue with Vue here. The problem stems from trying to animate a position between two different units (or in your case units and no units). Changing right: 0; to right: 10%; would probably work.
All that said, PLEASE don't animate CSS position. It's not performant and causes the browser to reflow & repaint stuff. The better solution is to use css translate(). Here's an example...
.wrapper {
/* need a positioned container for SO's editor */
position: fixed;
top:0; right:0; bottom:0; left:0;
overflow:hidden;
}
.action{
margin: 30px;
font-size: 18px;
font-weight: bold;
cursor:pointer;
font-family: sans-serif;
}
.moved{
position: absolute;
/* put the element where you want it */
top:0;
right:0;
bottom:0;
width: 150px;
background: #333;
padding: 20px;
color: #fff;
/* use transform to move to a new position (100% of element width) */
transform: translatex(100%);
transition: transform 0.5s cubic-bezier(.47,1.64,.41,.8);
}
.action:hover+.moved {
transform: translatex(0);
}
<div class="wrapper">
<div class="action">Hover Me</div>
<div class="moved">Transformed element</div>
</div>
I am trying to go for a needle effect and I cannot seem to get the needle to rotate from its bottom. I want the bottom of the image to stay fixed in its position and just the top of the needle to move along the half circle. This is was I have so far. Any suggestions on how to get this effect to work?
$(document).ready(function() {
setTimeout(function() {
$(".needle").css("transform", "rotate(0deg)");
}, 1000)
})
figure {
position: relative;
display: inline-block;
}
.graph {
width: 300px;
}
.needle {
position: absolute;
width: 160px;
left: 15px;
bottom: -28px;
transform: rotate(-171deg);
-webkit-transform: rotate(-171deg);
transition: all 7s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure>
<img src="http://1.bp.blogspot.com/-XqCc5ql8Xqc/T6DuArRFB0I/AAAAAAAAADA/IK6fKAjzkOc/s1600/Finished+semi-circle+3.png" class="graph" />
<img src="http://www.kiteinnovation.com/wp-content/themes/naked-wordpress-master/images/arrow.png" class="needle" />
</figure>
Use css transform-origin property
$(document).ready(function() {
setTimeout(function() {
$(".needle").css("transform", "rotate(0deg)");
}, 1000)
})
figure {
position: relative;
display: inline-block;
}
.graph {
width: 300px;
}
.needle {
position: absolute;
width: 160px;
right: 15px;
bottom: -28px;
transform: rotate(-171deg);
transform-origin: left;
-webkit-transform: rotate(-171deg);
transition: all 7s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure>
<img src="http://1.bp.blogspot.com/-XqCc5ql8Xqc/T6DuArRFB0I/AAAAAAAAADA/IK6fKAjzkOc/s1600/Finished+semi-circle+3.png" class="graph" />
<img src="http://www.kiteinnovation.com/wp-content/themes/naked-wordpress-master/images/arrow.png" class="needle" />
</figure>
I can't fix an issue am having with centering a block of content in IE9.
I tried various stuff from the web, didn't work. If possible, I'd appreciate if this could be hosted somewhere where I can see it working.
I have defined doctype:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
I tried adding this in head section also, before the commented "[if IE]" or even replaced "EmulateIE7" with "edge", didnt work:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Firefox/Chrome:
IE 9:
CSS:
.zone {
width: 0;
height: 0;
border: solid transparent;
}
.container {
border: 4px solid #666;
position: relative;
float: left;
margin: 2px;
}
.zone-label {
background-color: #666;
color: white;
font-size: 25px;
font-weight: bold;
padding: 0 5px;
position: absolute;
margin: 0 -50% 0 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.layout {
/*position: relative;*/
}
.clear {
clear: both;
}
.zone-green-949 {
border-width: 120px 475px;
border-color: black green;
}
.container-green-949 {
width: 949px;
}
.zone-blue-308 {
border-width: 76px 154px;
border-color: black blue;
}
.container-blue-308 {
width: 308px;
}
.zone-purple-629 {
border-width: 159px 315px;
border-color: black purple;
}
.container-purple-629 {
width: 629px;
}
Html:
<div class="layout">
<div class="container container-green-949">
<div class="zone zone-green-949">
<span class="zone-label">Zone 12</span>
</div>
</div>
<div class="clear">
<div>
<div class="container container-purple-629">
<div class="zone zone-purple-629">
<span class="zone-label">Slider</span>
</div>
</div>
<div class="container container-blue-308">
<div class="zone zone-blue-308">
<span class="zone-label">Zone 1</span>
</div>
</div>
<div style="clear: right;">
<div class="container container-blue-308">
<div class="zone zone-blue-308">
<span class="zone-label">Facebook Fan</span>
</div>
</div>
</div>
</div>
Edit: Answer is to add this (see Hashem Qolami's comment below): -ms-transform:translate(-50%, -50%);
Answer is to add this (see Hashem Qolami's comment): -ms-transform:translate(-50%, -50%);
Though I'm unable to reproduce the effect, my guess would be that you need to set a transform origin:
.zone-label {
background-color: #666;
color: white;
font-size: 25px;
font-weight: bold;
padding: 0 5px;
position: absolute;
margin: 0 -50% 0 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Set the origin for different browsers */
-ms-transform-origin: 50% 50%; /* IE 9 */
-webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
transform-origin: 50% 50%;
}
This makes sure that all browsers use the middle as transform orientation point.
Let me know if this works out for you.
I have a wrapper div that has some css property set. on click of a button i have to show an overly with some message.
<div class="dvLanding">
<div class="popupArea">
<span class="VoteOnce">You can only vote once.</span> <a style="vertical-align: top">
<img alt="close" src="../../Images/error1-exit-button.png" /></a></div></div>
</div>
my css classes.
.dvVoteWrapper
{
background-color: #949494;
opacity: 0.5;
filter: Alpha(opacity=50);
display:none;
width: 1024px;
height: 768px;
position: absolute;
}
.popupArea
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.dvLanding
{
background-image: url(/Images/screen1-bg-logos.jpg);
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
.VoteOnce
{
font-family: Calibri regular;
font-size: 24pt;
background-image: url(/Images/error1-vote-once-bg.png);
background-repeat: no-repeat;
width:288px;
height:74px;
color: #000000;
}
i am removing the display:none attribute with jquery. When applying this classes it is not covering the full page and looking distorted. kindly suggest how to do this. for better understanding i have attached the screen shots
Here's another one
HTML:
<div class="dvLanding">
<div class="dvVolunter"></div>
<div class="dvVote">
<br />
<br />
</div>
<div class="dvVoteWrapper"></div>
</div>
<div class="popupArea">
<span class="VoteOnce">You can only vote once.
<a class="closeButton">
<img alt="close" src="../../Images/error1-exit-button.png" />
</a>
</span>
</div>
CSS:
.dvLanding {
background-image: url(http://lorempixel.com/800/600);
position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
}
.popupArea {
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -180px;
}
.closeButton {
vertical-align: top;
font-size: 10pt;
}
.VoteOnce {
font-family: Calibri regular;
font-size: 24pt;
}
JSFiddle for testing.
If you want the wrapper to cover the whole screen you can use:
position:fixed; left:0; top:0; z-index:100; width:100%; height:100%;
Your z-index property will need to be higher than any of the elements below it that you are trying to cover
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
I want it to be as simple as this, but I know it isn't:
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
img:hover {
#thisElement {
opacity: 0.3;
filter: alpha(opacity=30);
}
opacity:1;
filter:alpha(opacity=100);
}
So when you hover over img, it changes the opacity of #thisElement to 30% and changes the opacity of the image to 100%. Is there a way to actually do this using only css?
So this is the HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" href="taskbar.css"/>
<link rel="stylesheet" type="text/css" href="briefcase.css" />
<title>Briefcase</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="mask"></div>
<div class="float">
<div id="album1">Album Title</div>
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
</body>
</html>
And this is the CSS:
body {
font: normal small/3em helvetica, sans-serif;
text-align: left;
letter-spacing: 2px;
font-size: 16px;
margin: 0;
padding: 0;
}
div.gradientTop {
position: absolute;
margin-top: 5px;
z-index: 2;
width: 206px;
height: 30px;
float: left;
background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0))
}
div.gradientBottom {
position: absolute;
margin-bottom: 5px;
z-index: 2;
width: 206px;
height: 120px;
float: left;
bottom: -210px;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}
div.float {
border-right: 1px solid orange;
position: absolute;
z-index: 2;
margin-left: 5px;
margin-top: 5px;
float: left;
width: 200px;
}
div.mask {
position: relative;
z-index: 1;
margin-top: 5px;
float: left;
width: 206px;
height: 805px;
background-color: white;
}
img.left {
z-index: inherit;
margin-bottom: 3px;
float: left;
width: 200px;
min-height: 200px;
/* for modern browsers */
height: auto !important;
/* for modern browsers */
height: 200px;
/* for IE5.x and IE6 */
opacity: 0.4;
filter: alpha(opacity=40)
}
img.left:hover + #album1 {
opacity: .4;
}
img.left:hover {
opacity: 1.0;
}
#album1 {
z-index: 2;
width: 200px;
color: white;
text-align: center;
position: absolute;
background: orange;
top: 70px;
}
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
In the case of a descendent:
#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
opacity: 0.3;
}
Which will apply to elements such as:
<div id="parent_element">
<div id="child_element">Content</div>
</div>
For adjacent siblings:
#first_sibling:hover + #second_sibling {
opacity: 0.3;
}
Which works for mark-up such as:
<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>
In both cases the latter element in the selector is the one chosen.
Given your pseudo-code example, you probably want something like:
img:hover + img {
opacity: 0.3;
color: red;
}
JS Fiddle demo.
I know you're probably looking for a pure-css way of doing what you want, but I'd suggest you use HTML+CSS+JS as the wonderful MVC structure that they are.
HTML is your Model, containing your data
CSS is your View, defining how the page should look
JS is your Controller, controlling how the model and view interact.
It's the controlling aspect that should be taken advantage of here. You want to control a view of an item on a user interaction. That's exactly what JS is meant for.
With very minimal JavaScript, you could toggle a class on and off of #thisElement when the img is hovered over. It certainly beats playing CSS selector games, although I'd understand if you're only willing to accept a pure-css answer.