Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

css transitions

Posted on 2013-12-13
11
Medium Priority
?
268 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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 2000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
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.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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 …

604 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