Solved

css transitions

Posted on 2013-12-13
11
257 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

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…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

679 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