Solved

css transitions

Posted on 2013-12-13
11
254 Views
Last Modified: 2014-01-22
Hi

I am trying to create a CSS transition whereby div areas fade in/out when a menu is clicked

I used display:none originally but noticed transtions dont work with this. I have tried visibiity:hidden but the divs now dont sit in correct place.
Any ideas how to fix this?

My page is here:

https://dl.dropboxusercontent.com/u/35928349/OW/UVEX/HTML/index.html

its the area "What we do"


Thanks
0
Comment
Question by:coolispaul
  • 4
  • 3
  • 2
11 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39716900
I'm not sure which div areas you would like to fade in and out, so can't give you actual code.

but, you can use opacity or background-color for fading type transitions.

core example:

.mydiv{
   opacity:1;
   background-color:red;
   transition: all 1s;
}

.mydiv:hover{
   opacity:.5;
   background-color:blue;
}

Open in new window

0
 

Author Comment

by:coolispaul
ID: 39716936
well its 2 divs that sit one after the other

so:

<div class="slide"></div>
<div class="slide"></div>

using display none pushes the second one up to the top as i intend. ( i dont want to show both at same time)

I guess i will have to use position absolute on these divs if i cant use display:none?

Thanks
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39716954
yes. that sounds correct. Give that a try, and if it's not working, let us know.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 500 total points
ID: 39717024
Create a container with position:relative an put both of the divs inside of the container.  style the divs with position absolute and then the will position at the same location and the transition should work fine. for the one you want hidden set opacity to 0.

However the hover is going to be an issue.  Display cannot be animated. so only the top div will respond to hover.

To get the second one to respond you can use a sibling reference

div:hover~div { etc..

can be used so the hove event on the top layer also triggers the transistion on the bottom layer.

Cd&
0
 

Author Comment

by:coolispaul
ID: 39717064
how do you deal with heights when positioning absolute like this though?

The parent container wont get an automatic height from the child elements?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39717175
I'm not sure what exactly you are trying to do. I don't see any <div class="slide"></div> on your page.

Which items exactly do you want to fade in and out based on what conditions? Please be specific.
0
 

Author Comment

by:coolispaul
ID: 39717192
on here:
https://dl.dropboxusercontent.com/u/35928349/OW/UVEX/HTML/index.html

Under "What we do"

there are 2 buttons that show/hide 2 div's

It works but i have had to give the parent element a fixed height because the child elements are now positioned absolutely.
This could be a problem as its a content managed site so more content could go in theer and this fixed height may become incorrect
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39717273
When you generate the page you know what content you have so set the height of the parent dynamically based on content.  Either during generation server side (best) or with script on the client (some client may not have javascript enabled).

Cd&
0
 

Author Comment

by:coolispaul
ID: 39717319
Yep guess will have to do that.

Thanks
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question