Am having issues with Mozilla Firefox, i have two divs both positioned absolute in a parent div, when my javascript display the element, it is displayed on top each other in Google Chrome and Microsoft Edge but it is displayed side by side in Mozilla Firefox, I don't know why this is happening but it is giving me a very hard time.
Html:
#listStudentDialog {
width: 600px;
height: 400px;
background-color: white;
border-radius: 3px;
margin-top: 120px;
margin-left: 50px;
}
#dialogLoader {
display: flex;
height: inherit;
flex-wrap: wrap;
justify-content: center;
transform: scale(1);
transition: all 0.35s linear;
}
.loaderInfo {
width: 180px;
height: 180px;
z-index: 70;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #f9f3f3;
display: flex;
justify-content: center;
transition: all 0.35s linear;
transform: scale(1);
}
#listStudentLoader {
margin: auto;
width: 200px;
height: 200px;
transform: scale(1);
-webkit-transition: transform 0.35s linear;
-moz-transition: transform 0.35s linear;
transition: transform 0.35s linear;
animation-duration: 10s;
animation-name: none;
}
<div id="listStudentDialog" style="opacity: 1;">
<div id="dialogLoader">
<div class="loaderInfo icon-success">
<span class="path1"></span>
<span class="path2"></span>
</div>
<div class="loader" id="listStudentLoader"></div>
</div>
</div>
Related
I was wondering if anyone knew how to make an object in this case my ball div appears like it is coming at the screen. Something that is sort of a 3D effect if that makes sense. My code is attached to the bottom.
var ballMotion = gsap.timeline();
ballMotion
.to(".circle", {duration: 3, transform: 'scale(14)'})
body {
width: 300px;
margin: 20px auto;
}
.circle {
display: block;
background: black;
border-radius: 100%;
height: 300px;
width: 300px;
margin: 0;
background: radial-gradient(circle at 100px 100px, #FE0, #FAFAD2);
}
<figure class="circle"></figure>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
I see you are using gsap.js, I am unsure exactly how this is working but in pure css you can use transform-style: preserve-3d; and the use perspective() and translateZ() and the #keyframes. I am sure with knowledge of Green Sock you can getting this working. see code below:
CSS
.wrapper--outer {
display: flex;
justify-content: center;
position: relative;
margin: 0;
width: 100%;
height: 100%;
padding: 1px;
}
.snowman {
display: flex;
justify-content: center;
position: absolute;
top: 18vh;
height: 200px;
width: 200px;
}
.snowball {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: blue;
position: absolute;
top: 10%;
left: 50%;
perspective: 550px;
transform-style: preserve-3d;
animation-name: snowball;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes snowball {
0% {
transform: perspective(550px) translateZ(200px);
}
100% {
transform: perspective(1000px) translateZ(999px);
}
}
<body>
<div class="wrapper--outer">
<div class="snowman">
<div class="snowball"></div>
</div>
</div>
</body>
JSBin
https://jsbin.com/ropomoquxu/edit?html,css,output
I have a layout with sidebar and main content inside a parent element called wrapper and a button to toggle sidebar which is absolute positioned, relative to sidebar. But the main-content is not staying in full width when the sidebar closed. I was able to find out that giving the sidebar as fixed would solve the problem, But I don't want it to be fixed, Is there a way to achieve this without giving position fixed for sidebar. I have used translate for toggling the sidebar.
Jsfiddle - https://jsfiddle.net/wu1zfg35/
Here is the css. working code can be found in js fiddle link
body {
margin: 0;
}
.wrapper{
display: flex;
height: 100vh;
}
.sidebar {
position: relative;
/* position: fixed; */
width: 350px;
height: 100%;
background-color: red;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-webkit-transform: translate3d(-100%, 0px, 0px);
transform: translate3d(-100%, 0px, 0px);
}
.main-content {
width: 100%;
background-color: yellow;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
}
.hide-customize-tab {
position: absolute;
display: flex;
top: 50%;
right: -25px;
align-items: center;
justify-content: center;
height: 25px;
width: 25px;
background-color: black;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
cursor: pointer;
}
.hide-customize-tab .close-button {
display: none;
height: 10px;
width: 7px;
}
.hide-customize-tab .open-button {
height: 10px;
width: 7px;
}
.wrapper.sidebar-opened .sidebar {
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.wrapper.sidebar-opened .sidebar .hide-customize-tab {
right: -15px;
}
.wrapper.sidebar-opened .sidebar .hide-customize-tab .open-button {
display: none;
}
.wrapper.sidebar-opened .sidebar .hide-customize-tab .close-button {
display: block;
}
.wrapper.sidebar-opened .main-content {
/* margin-left: 350px; */
width: calc(100% - 350px);
}
Remove the width: 350px; from .sidebar and add it to .wrapper.sidebar-opened .sidebar
So the code wil be
.sidebar {
width: 0;
}
.wrapper.sidebar-opened .sidebar {
width: 350px;
}
In the code below when I hover on the gray button [the parent]
it perform some style on the child div bar
and that is what I need, I don't want child to be hovered itself
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>
I guess you want the end user hover on the horizontal area (div.foo) to have the vertical area (div.baz div.bar) change but don't want the area change if the div.baz itself being hover?
Would this fix your issue?
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .baz:not(:hover) .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>
This is probably not the answer you're looking for (like many, I prefer to solve CSS problems with pure CSS solutions as often as possible), but you did tag your question with javascript, so I think it's a legitimate approach to solve the issue you're facing with 3 lines of javascript:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
This works because the events mouseover and mouseout events are explicitly added to foo, rather than to its grandchild bar (and bar never visibly overlaps foo).
Working Example:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.foo.hovered .bar {
transform: scaleX(1);
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>
Hi there I was wondering if it was possible so that when you click on a circle that it expands to fill the section/div that it is in?
I want that so when you click the circle it fills the screen and then some text appears in its place.
Before I posted this I took one more look on the web and found this jsfiddle
<div class="container">
<div class="ObjectContainer">
<div id="red" class="Object"></div>
<a href="#" >A link </a>
</div>
<div class="ObjectContainer">
<div id="brown" class="Object"></div>
<a href="#" >A link </a>
</div>
<div class="ObjectContainer">
<div id="dGrey" class="Object"></div>
<a href="#" >A link </a>
</div>
<div class="ObjectContainer">
<div id="Grey" class="Object"></div>
<a href="#" >A link </a>
</div>
</div>
body {
text-align:center;
font-family:helvetica;
font-size: 16px;
background: #f0f0f0;
padding-top: 50px;
}
a {
color: #f0f0f0;
text-decoration: none;
}
.container {
display: inline-block;
margin: 0 auto;
width: 400px;
}
/* ANIMATIONS */
.Object, .ObjectContainer a {
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.ObjectContainer {
width: 200px;
height: 200px;
float: left;
display: block;
position: relative;
overflow:hidden;
}
.ObjectContainer .Object {
display: block;
width: 100%;
height: 100%;
}
.ObjectContainer a {
position: absolute;
bottom: -200px;
left: 0;
opacity: 0;
width: 100%;
line-height: 0px;
text-align: center;
vertical-align: middle;
}
.ObjectContainer:hover .Object {
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
/* -webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-ms-transform: rotate(100deg);
-o-transform: rotate(100deg);
transform: rotate(100deg); */
}
.ObjectContainer:hover a {
opacity: 1;
bottom: 0;
line-height: 200px;
}
#red.Object {
background: #e7222f;
}
#brown.Object {
background: #796959;
}
#dGrey.Object {
background: #363635;
}
#Grey.Object {
background: #6f6f6e;
}
It is what I am looking for but the opposite way round.
Edit
I have more and less got it now by messing about with what yous have given me. Here is the link to the jsfiddle
All I have done was sawp about the code. I didn't even think of this at the start. I still need to work on the text layout (needs more spaced out) and might try to do it with a click base event.
#red.Object {
background: #e7222f;
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
}
#red.Object:hover {
background: #e7222f;
margin: 2.5%;
height: 95%;
width: 95%;
border-radius:0;
}
$(function(){
$('#circle').click(function(){
var pw = $('#wrapper').width();
var ph = $('#wrapper').height();
$(this).animate({
width: pw,
height: ph,
borderRadius: 0
},500)
});
});
#wrapper{
width: 300px;
height: 300px;
background: lightgrey;
}
#circle{
position: absolute;
width: 45px;
height: 45px;
background: green;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="circle"></div>
</div>
I changed the top two circles and is this the desired starting results you were looking for?
body {
text-align:center;
font-family:helvetica;
font-size: 16px;
background: #f0f0f0;
padding-top: 50px;
}
a {
color: #f0f0f0;
text-decoration: none;
}
.container {
display: inline-block;
margin: 0 auto;
width: 400px;
}
/* ANIMATIONS */
.Object, .ObjectContainer a {
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.ObjectContainer {
width: 200px;
height: 200px;
float: left;
display: block;
position: relative;
overflow:hidden;
}
.ObjectContainer .Object {
display: block;
width: 100%;
height: 100%;
}
.ObjectContainer a {
position: absolute;
bottom: -200px;
left: 0;
opacity: 0;
width: 100%;
line-height: 0px;
text-align: center;
vertical-align: middle;
}
.ObjectContainer:hover .Object {
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
/* -webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-ms-transform: rotate(100deg);
-o-transform: rotate(100deg);
transform: rotate(100deg); */
}
.ObjectContainer:hover a {
opacity: 1;
bottom: 0;
line-height: 200px;
}
#red.Object {
background: #e7222f;
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
}
#brown.Object {
background: #796959;
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
}
#dGrey.Object {
background: #363635;
}
#Grey.Object {
background: #6f6f6e;
}
Some quick hacks into your fiddle (shew!)
snippet below
function clicker(e){
//console.log(e.target.tagName);
var width=window.getComputedStyle(e.target,null)||e.target.currentStyle;
if(e.target.tagName=='DIV'){
if(width.borderBottomLeftRadius!='0px'){
e.target.style='width:100%;height:100%;border-radius:0px;';
e.target.children[0].style='opacity: 1;bottom: 100px;line-height: -20px;';
}
else{
e.target.style='width:95%;height:95%;border-radius:100px';
e.target.children[0].style='opacity: 1;bottom: 0px;line-height: 0px;';
}
} //endif
}
function add(x){
document.getElementsByClassName('ObjectContainer')[x].addEventListener('click',clicker,true)
}
for(i=0;i<document.getElementsByClassName('ObjectContainer').length;++i){
add(i);
}
/* setup the very basis for the document */
body {
text-align:center;
font-family:helvetica;
font-size: 16px;
background: #f0f0f0;
padding-top: 50px;
}
a {
color: #f0f0f0;
text-decoration: none;
}
.container {
display: inline-block;
margin: 0 auto;
width: 400px;
}
/* ANIMATIONS */
.Object, .ObjectContainer a, .test {
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.ObjectContainer {
width: 200px;
height: 200px;
float: left;
display: block;
position: relative;
overflow:hidden;
}
.ObjectContainer a {
position: absolute;
bottom: -200px;
left: 0;
width: 100%;
line-height: 0px;
text-align: center;
vertical-align: middle;
}
.ObjectContainer .Object {
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
/* -webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-ms-transform: rotate(100deg);
-o-transform: rotate(100deg);
transform: rotate(100deg); */
}
#red.Object {
background: #e7222f;
}
#brown.Object {
background: #796959;
}
#dGrey.Object {
background: #363635;
}
#Grey.Object {
background: #6f6f6e;
}
<div class="container">
<div class="ObjectContainer">
<div id="red" class="Object"> <a href="#" >A link </a></div>
</div>
<div class="ObjectContainer">
<div id="brown" class="Object"> <a href="#" >A link </a></div>
</div>
<div class="ObjectContainer">
<div id="dGrey" class="Object"> <a href="#" >A link </a></div>
</div>
<div class="ObjectContainer">
<div id="Grey" class="Object"> <a href="#" >A link </a></div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This code working good in mozilla and opera .But not working in IE. Please help.The JavaScript is ok. But in IE 10 only back panel is coming ..
Thank you..
http://codepen.io/syedrafeeq/pen/eCkFt
CSS 3D FLIP BOX
Flipping content to a div (Transitions and 3D Transforms)
<div class="wrapper">
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
<div class="col_third end">
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #ecf0f1;
margin: 20px;
font-family: Arial, Tahoma;
font-size: 20px;
color: #666666;
text-align: center;
}
p { color: #ffffff; }
/*-=-=-=-=-=-=-=-=-=-*/
/* Column Grids */
/*-=-=-=-=-=-=-=-=-= */
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
position: relative;
display:inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/*-=-=-=-=-=-=-=-=-=-=- */
/* Flip Panel */
/*-=-=-=-=-=-=-=-=-=-=- */
.wrapper{ width: 980px; margin: 0 auto; background-color: #bdd3de; hoverflow: hidden;}
.panel {
margin: 0 auto;
height: 130px;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.panel .front,
.panel .back {
text-align: center;
}
.panel .front {
height: inherit;
position: absolute;
top: 0;
z-index: 900;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel .back {
height: inherit;
position: absolute;
top: 0;
z-index: 1000;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel.flip .front {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel.flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
.box1{
background-color: #14bcc8;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.box2{
background-color: #ff7e70;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
$(document).ready(function(){
// set up hover panels
// although this can be done without JavaScript, we've attached these events
// because it causes the hover to be triggered when the element is tapped on a touch device
$('.hover').hover(function(){
$(this).addClass('flip');
},function(){
$(this).removeClass('flip');
});
});
CSS3 3D Transforms Doesn't support to IE version Upto 8 and 9. And IE version 10 and 11 Partial support.
Partial support menas not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.
Reference Link.