I have a centered div and 4 other divs - one on each side of the centered div. When I click a button each of the div slide into the frame and push the centered div out.
It works fine in chrome but fails using firefox, leaving me with no error from firebug.
Here is my implementation which doesn't currently work correctly in firefox.
As you can see, in firefox the centered div simply disappears instead of sliding out of the screen. Using chrome, the centered div slides out as intended.
Can someone take a look with firebug and tell me what they think might be causing the problem?
This code was based off of a jsfiddle that works fine using either chrome or firefox.
Here is the code to the jsfiddle:
here is the html
<div id="fullContainer">
<div id="right">
</div>
<div id="left">
</div>
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div id="centerContainer">
<div id="relativeContainer">
<div id="content">
This is where your face should go. Notice that I placed it within a centering div.
This will enable the face to be absolutely positioned, and allow for you to modify
it's position when the side-bars slide in.
<div data-move="left">Open Left</div>
<div data-move="right">Open Right</div>
<div data-move="top">Open Top</div>
<div data-move="bottom">Open Bottom</div>
</div>
</div>
</div>
here is the css
#centerContainer {
position:fixed;
top:50%;
left:50%;
width:0;
height:0;
}
#relativeContainer {
position:relative;
}
#fullContainer {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
}
#content {
position:absolute;
width:300px;
height:400px;
top:-200px;
left:-150px;
background:#BADA55;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#content.right {
left:-250px;
}
#content.left {
left:-50px;
}
#content.bottom {
top:-300px;
}
#content.top {
top:-100px;
}
#content div {
cursor:pointer;
color:blue;
text-decoration:underline;
margin-top:15px;
text-align:center;
}
#left {
position:absolute;
top:0;
left:-125px;
height:100%;
width:100px;
background:blue;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#left.opened {
left:0;
}
#right {
position:absolute;
top:0;
right:-125px;
height:100%;
width:100px;
background:green;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#right.opened {
right:0;
}
#top {
position:absolute;
left:0;
top:-125px;
width:100%;
height:100px;
background:yellow;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#top.opened {
top:0;
}
#bottom {
position:absolute;
left:0;
bottom:-125px;
width:100%;
height:100px;
background:red;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#bottom.opened {
bottom:0;
}
here is the javascript:
function SlideOut(element){
$(".opened").removeClass("opened");
$("#"+element).addClass("opened");
$("#content").removeClass().addClass(element);
}
$("#content div").click(function(){
var move = $(this).attr('data-move');
SlideOut(move);
});
Here is the fiddle
Thank you
katie
I did some testing and found out what's happening. This is reproduced in this fiddle for illustration and demonstration purposes.
In Firefox if you are transitioning the CSS attribute left, it needs to have an initial value to start from. If it doesn't then it won't transition, it'll just assign the value to the attribute.
In Chrome if you don't have the initial value set it apparently just starts from wherever it is and doesn't worry about it.
If you check out the above fiddle in Firefox and click on the first row, it just appears farther over, while the second row transitions over. Only difference is the second row has a left: 0 initially set. On Chrome both work the same.
If you put a left: 0 on your #content div then it will slide like it should in Firefox. (Tested in Firebug and that does fix it).
Related
I have a dropdown menu and want the arrow on the right of it to turn 180deg when I click on it! The problem is I've set the arrow in the html and not in the javascript.. But I thought there was maybe a way to put it in the css when going from #navi to #navigation..
Here's my code
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navigation").slideToggle(500);
});
});
</script>
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<div id="navigation">
<div id="navigationin">
Sorry I can't seem to make it work.. Thank you for any help you can give!
(if you want the actual exemple it's on www.typhotoshop.tumblr.com in the left hovering bar)
All you have to do is , adding css3 transition on your arrow , and adding/removing a custom class to this last to rotate 180° , in which the transition is triggered.
#navi .fa-chevron-down {
transition: all 0.5s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
add in js the toggleclass when click on navi
$("#navi .fa-chevron-down").toggleClass("rtoate180");
bellow working snippet :
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").stop().slideToggle(500);
});
});
#navi .fa-chevron-down {
transition: all 0.5s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navi"> NAVIGATION
<i class="fa fa-chevron-down"></i>
</div>
<div id="navigation">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
<div id="navigationin"></div>
you can use css to do your desire output as well
margin-top: 100px;
transform: rotateY(180deg);
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navigation").slideToggle(500);
});
});
</script>
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<div id="navigation"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<div id="navigation">
<div id="navigationin">
So I'm building a page that has a background image:
body {
background:url(images/bg.png) center center no-repeat fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover
}
The page loads with a div that looks like a alert/message. When this div loads I want a short animation of the background-image getting darker,
Right now I use this:
back {
background:rgba(0,0,0,.95);
display:block;
height:100%;
left:0;
opacity:1;
position:fixed;
top:0;
width:100%
}
This makes it darker, but I want this to happen gradually in a smooth transition/animation.
You can use #keyframes for this. I don't know what your HTML looks like, but here's a little demo:
.back {
background:rgba(0,0,0,.95);
display:block;
height:500px;
left:0;
opacity:1;
position:fixed;
top:0;
width:500px;
}
#keyframes back-change {
from { background: rgba(133,133,133,.95) }
to { background: rgba(0,0,0,.95) }
}
.back {
animation: back-change 4s linear;
}
<div class="back"></div>
I set it to change from light to dark over 4s in a linear pattern. You can change the duration or change the pattern to whatever you want (none, infinite, etc.).
Notice that the name back-change that follows the #keyframes word is what you'll have to call in the the animation property later on. If you change the name in one spot, you'll have to change it in both.
Here's a JSFiddle Example as well for messing around with on your own.
You can also use CSS3 Transitions as well. These have been supported a little longer in web browsers.
.back {
background:rgba(0,0,0,.95);
display:block;
height:500px;
left:0;
opacity:1;
position:fixed;
top:0;
width:500px;
transition-property: background-color;
transition-duration: 0.3s;
}
.back:hover {
background-color: rgba(133,133,133,.95);
}
<div class="back"></div>
Again, here's a JSFiddle Example for you to play with.
You can use simple css transition and jQuery addClass() method only to set element class attribute.
JS
$( window ).load( function() {
$( '.overlay' ).addClass( 'dark' );
});
CSS
.overlay {
background-color: rgba(0,0,0,0);
transition: background-color 1s ease;
}
.dark{
background-color: rgba(0,0,0,.95);
}
FIDDLE
This is a job for a transition, not an animation:
In this example I'll change the opacity to fade out when you hover over it...
.TransitStyle {
background:rgba(0,0,0,.95);
display:block;
height:100%;
left:0;
opacity:1;
position:fixed;
top:0;
width:100%
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.TransitStyle:hover {
opacity: 0.0;
}
Here is the jsfiddle: http://jsfiddle.net/kimimsc/LEjBR/
<section id="portfolioContent" class="blueTheme">
<div class="container mmContainer">
<div class="pullLeft portfolioVignette">
<div class="portfolioVignetteFilter">
<p>Test1</p>
</div>
</div>
</div>
#portfolioContent {}
.portfolioVignette {background-color: gold; width: 500px; height: 300px; border-radius: 20px; margin: 20px;}
.portfolioVignette > .portfolioVignetteFilter {height: 300px; width:0px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
.portfolioVignette:hover > .portfolioVignetteFilter {height: 300px; width: 500px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
So first of all, if you look at the jsfiddle that I provided you will see what I've done.
Bascily I have a div (in yellow) and I am using css3 transition to animate the width change on another div (grey with 0.5 alpha). The grey div appears over the yellow on hover and disappears when the hover action is over. You can also see that there is a text element 'Test1' that is always displayed.
So what I want to do is when there is no hover I would like to have only the yellow element without anything else (so no text aswell) and on hover I would like the text to come with the grey element.
I don't think this is the right way to do it but I couldn't find anything that could help me.
If I haven't been clear enough. tell me if you have any questions.
Thank you for your help guys,
I did something similar, but interpreted your problem a little differently:
.portfolioVignette p {
width:0;
margin-left:0;
overflow: hidden;
transition: width .5s ease-out;
transition: margin-left .5s ease-out;
}
.portfolioVignette:hover p {
width:100%;
margin-left:90%;
}
Something like this should do it:
.portfolioVignette p {
width: 0;
overflow: hidden;
transition: width 0.5s ease-out;
}
.portfolioVignette:hover p {
width: 100%;
}
See it here: http://jsfiddle.net/shomz/LEjBR/6/
I have a div that have img with id and another div inside it
I want to hide the info div (you can see in code) on load of the page and then show it again on hover of the img - I also want the info div to slide right nicely..
Thanks in advance for helping :)
the HTML
<div class="wrapper">
<img id="logo" src="img/logo.png" alt="logo">
<div id="info">
info- blah <br>
blah & blah .<br>
email#gmail.com
</div>
</div>
The CSS
.wrapper{
float: left;
opacity: 0.4;
margin-top: -30px;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#logo {
width: 39px;
}
.wrapper:hover{
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
}
What is the jQuery I need for this?
Here's one way to do it.
I don't know if that's what you wanted, but since you're already using CSS3, you don't need jQuery for that:
.wrapper {
float: left;
opacity: 0.4;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
overflow:visible;
position:relative;
}
.wrapper:hover {
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
opacity:0;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
left:50%;
position:absolute;
top:0;
}
.wrapper:hover #info {
left:100%;
opacity:1;
}
http://jsfiddle.net/Y2B2v/
Place your .wrapper with the same image height. Place an overflow:hidden to hide text which is under.
After you must just change height in .wrapper:hover to show the text.
If you want a nice transition, you can adjust that with
.wrapper:hover{
opacity: 0.6;
height:100px;
transition: height 1;
-webkit-transition: height 1s; /* Safari */
}
like this : http://jsfiddle.net/AW9qh/2/
Ok so I'm trying to build a right hand side page slide effect with two states, on the initial opening of the sliding panel I'd like to display the menu and on selecting the menu item i want to expanded box to open up even bigger and display that info.
Finding it hard to describe exactly what I'm trying to do as i havent seen it before, but pretty much on opening the first div that will be 100% in height 200px in width animated in from the right, when selecting a link within that container i'd like it to expand another div to float to the left of it and expand the box out even more. Does this make sense? any links on where else does this or some javascript to get this to work would be much appreciated... Heres my coding so far:
HTML:
<div id="enquirypost">
<div style="width:200px;">
Extra Expand
<br />
<br />
Menu<br />
Close
</div>
<div id="extra">test</div>
</div>
Login/Register
CSS:
body{margin:0;}
#enquirypost {
height:100%;
overflow:hidden;
z-index:1000;
width:0px;
float:right;
background:#ccc;
font-size:20px;
line-height:65px;
position:absolute;
top:0px;
right:0px;
color:#FFF;
text-align:center;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;}
#enquirypost:target
{
bottom:0px;
overflow:auto;
min-width:200px;
height: 100%;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
#extra {
height:100%;
overflow:hidden;
z-index:1000;
width:0px;
float:right;
background:#000;
font-size:20px;
line-height:65px;
position:absolute;
top:0px;
right:0px;
color:#FFF;
text-align:center;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;}
#extra:target
{
bottom:0px;
overflow:auto;
min-width:400px;
height: 100%;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
And heres the jsfiddle
More the #Extra outside the #enquirypost.
http://jsfiddle.net/davidja/wFutQ/15/
<div id="enquirypost">
<div style="width:200px;">
Extra Expand
<br />
<br />
Menu<br />
Close
</div>
</div>
Login/Register
<div id="extra">test</div>
See what happens when you put the #extra div outside the #enquirypost div. I'm not sure if this is what you're looking for but it definitely looked better when I tried this in your jsFiddle.
Also: when you use position: absolute, the float attribute is useless, I'd delete it to clean up the code a bit. And you might want to include "-o-transition" and just "transition" to make sure your page displays correctly on every browser.
I think that I have solution that you were looking for:
http://jsfiddle.net/wFutQ/17/
Tricky part is that you put div which is "submenu" before div which is "menu". Then you can use css selector .submenu:target + .menu { which can keep menu opened while submenu is targeted.
You can also do more deeper subsubmenu while keeping submenu and menu opened with .subsubmenu:target + .submenu and .subsubmenu:target + .submenu + .menu selectors
my html code (sorry but I added a few classes and some of them are not used now):
<div>
<div id="extra" class="menuPart submenu">
<div class="content">test</div>
</div>
<div id="enquirypost" class="menuPart menu">
<div class="content">
Extra Expand
<br />
<br />
Menu<br />
Close
</div>
</div>
</div>
Login/Register
my css code:
body {
margin:0;
}
.menuPart {
height: 100%;
width: 0px;
font-size:20px;
line-height:65px;
position:absolute;
color: #FFF;
text-align: center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.menu:target {
overflow: auto;
min-width: 200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.submenu:target + .menu {
overflow: auto;
min-width: 200px;
}
.submenu:target {
overflow: auto;
min-width: 200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
padding-right: 200px;
}
#enquirypost {
background: #CCC;
right: 0px;
}
#extra {
background: #000;
right: 0px;
}