?
Solved

Fade In Content Transparent Bkgnd Problem

Posted on 2011-03-25
11
Medium Priority
?
511 Views
Last Modified: 2012-05-11
I'm rebuilding a client's site in html (originally done by someone else in aspx). I found a nice little script that uses a javascript to change the content of a div with a nice fade in - this is exactly what I want to do, except it only works because there is a solid color background color which hides the text "beneath" it, and I need to make this work with a transparent  background - without the colored background, the text for all 3 "alternative" divs shows all at the same time - clicking on a link does NOT cause the text for the alternative divs to fade out.

The original script I'm using is from here:
http://www.javascriptkit.com/script/script2/fadeincontentviewer.shtml

the page I want to reproduce (which DOES work the way I want it to) is here:
http://www.agergroup.com/careers.aspx
(but I can't figure out how it was done here)

my test page is here:
http://2113web.com/agertest/fade_in.html

below is the code from that page:
IF ANYONE COULD HELP, I WOULD REALLY APPRECIATE IT!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#apDiv1 {
   position:absolute;
   left:95px;
   top:139px;
   width:960px;
   height: 408px;
   z-index:1;
}
#apDiv2 {
   position:absolute;
   left:517px;
   top:5px;
   width:441px;
   height: 119px;
   z-index:1;
}
</style>
</head>
<style type="text/css">

.fadecontentwrapper{ /* Total width: 350px+5px+5px=360px Read relative width relations for the other two containers below! */
position: relative;
width: 350px;
height: 250px; /* Set height to be able to contain height of largest content shown*/
border: 5px solid maroon;
overflow: hidden;
}

.fadecontent{ /*style for each fade content DIV within wrapper. Total width: 330px+10px+10px=350px (".fadecontentwrapper" width minus its padding and borders, if any) */
   position: absolute;
   padding: 10px;
   visibility: hidden;
   width: 330px;
   background-color: white;
   
}

.fadecontenttoggler{ /*style for DIV used to contain toggler links. Total width: 350px+5px+5px=360px */
width: 350px;
border: 5px solid maroon;
border-top-width: 0;
overflow: hidden;
}

.fadecontenttoggler a{ /*style for every navigational link within toggler */
text-decoration: none;
border-right: 2px solid maroon;
padding: 0 5px;
float: left;
display: block;
font-weight: bold;
color: black;
}

.fadecontenttoggler a:hover{
background: #C03021;
color: white;
}

.fadecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.fadecontenttoggler a.prev, .fadecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
color: black;
}

.fadecontenttoggler a.prev:hover, .fadecontenttoggler a.next:hover{
color: white;
background: black;
}

.fadecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #C03021;
color: white;
}

</style>

<script type="text/javascript" src="js/jquery-1.2.2.pack.js"></script>

<script type="text/javascript" src="js/contentfader.js">

/***********************************************
* Fade In Content Viewer script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

</script>

<body>
<div id="apDiv1">
<div id="whatsnew" class="fadecontentwrapper">

<div class="fadecontent">
Mars is the fourth planet from the Sun in the Solar System. The planet is named after Mars, the Roman god of war. It is also referred to as the "Red Planet" because of its reddish appearance as seen from Earth. A terrestrial planet with a thin atmosphere, Mars has surface features reminiscent both of the impact craters of the Moon and the volcanoes, valleys, deserts and polar ice caps of Earth.
</div>

<div class="fadecontent">
<img src="http://i6.tinypic.com/87atkhw.jpg" style="float: right;" />Saturn is the sixth planet from the Sun and the second largest planet in the Solar System, after Jupiter. Along with the planets Jupiter, Uranus, and Neptune, it is classified as a gas giant (also known as a Jovian planet, after the planet Jupiter).
</div>

<div class="fadecontent">
Jupiter is the fifth planet from the Sun and the largest planet within the solar system. It is two and a half times as massive as all of the other planets in our solar system combined. Jupiter, along with Saturn, Uranus and Neptune, is classified as a gas giant. Together, these four planets are sometimes referred to as the Jovian planets, where Jovian is the adjectival form of Jupiter.
</div>

</div>

<div id="apDiv2">
<div id="whatnewstoggler" class="fadecontenttoggler">
<a href="#" class="prev">Prev</a>
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>
</div>
</div>


<script type="text/javascript">
//SYNTAX: fadecontentviewer.init("maincontainer_id", "content_classname", "togglercontainer_id", selectedindex, fadespeed_miliseconds)
fadecontentviewer.init("whatsnew", "fadecontent", "whatnewstoggler", 0, 400)
</script>


</body>
</html>

THANK YOU IN ADVANCE!
0
Comment
Question by:21thirteen_design
[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
  • 6
  • 5
11 Comments
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35219183
Hello Bro!

I couldn't get your question what you want as final result. But If your question is that you want to view background color/image of parent div from the above div then just use the following

 
style="opacity:0.4;filter:alpha(opacity=40)"

Open in new window


Set the opacity value as per your need on the up front div so after that you will be able to see the parent content to....

Regards,

Asif Ahmed Khan
0
 

Author Comment

by:21thirteen_design
ID: 35219699
I want to be able to fade alternate text in and out without requiring a solid background.
0
 

Author Comment

by:21thirteen_design
ID: 35219717
Asif,

 It would be best if the background is transparent. This is what we need to actually make the page and text work in an ideal way.

Perry and Bob
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Assisted Solution

by:21thirteen_design
21thirteen_design earned 0 total points
ID: 35219801
Actually, Bob said "it would be best", but it's necessary:

 I need a solution where the class .fadecontent has NO background color (or background:transparent;).

The rule  background-color: white; allows the background color to cover the text of the other .fadecontent classed divs - thus the the text does not have to fade out, it just gets covered

I have this in a design where the background image of the page has to show through, so there can be no bg color for the divs that hold the text

If you can figure this out, you're a genius !!!!! ;-)
0
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35221804
Hello Bro,

If you want to have fade in and fade out effect with white background means you just want text to be fade in and fade out just do the one thing that is mentioned below after this it will work as TEXT FADE.

fadecontentviewer.init("whatsnew", "fadecontent", "whatnewstoggler", 0, 2000);

as I set delay for 2 sec so it will now give effect as text fade. So you can increase and decrease as per your desire.

Regards,

Asif Ahmed Khan
0
 

Assisted Solution

by:21thirteen_design
21thirteen_design earned 0 total points
ID: 35222036
Hi Asif,

I really appreciate your taking the time to try and help me with this ! It's my fault for not being able to explain what I'm trying to do so it can be understood.

The problem is that when the page loads, it defaults to showing the text content of the first div, or "Page 1" ("Mars is the fourth planet . . . ").  When you click on the link "Page 2", that text does not fade OUT before the content of "Page 2" fades in ("Saturn is the sixth planet . . .") - it doesn't fade out at all - it is just covered over by "Page 2", because the div class .fadecontent has a solid color white background.

Here is an example of what I mean - the rule "background-color: white;" has been removed from the class .fadecontent, and you will see the content from each of the three .fadecontent class divs pile up on top of each other when you click on "Page 2" and "Page 3" :

http://2113web.com/agertest/fade_in2.html

The example with the white background color still in the .fadecontent class rules is still at :

http://2113web.com/agertest/fade_in.html

I need the text to fade OUT (or disappear) when you click on a link, so that the text of the next "Page" can fade in and I can have no background color at all.

Thank you!!
0
 

Author Comment

by:21thirteen_design
ID: 35222042
Dear Asif

A solution where the class .fadecontent has NO background color (or background:transparent;).

NO background color. Transparent

It must be TRANSPARENT.

At the same time, the divs containing alternate text must not be visible until it is time to fade in or out.

This is why there MUST be NO background for each of the alternate text items.

There is a fundamental image background beneath all divs. This will be the ONLY background. Alternate fade in and out text ( 4 or 5 different groups of text ) must have ONLY one visible. Fade out number 1 then fade in number 2 and so on.

Alternates must not be visible until they begin their fade in.

Do you understand the problem?

I am appreciative of your help but I need help for that actual issue?

Thanks
Bob & Perry
0
 
LVL 10

Accepted Solution

by:
khan_webguru earned 500 total points
ID: 35222391
Hello Bro!

Good news I just solved your problem hope thats what you want.

1. Step 1

Just Download attached "contentfader.js"

2. Step 2

Replaced with the old one
thats it.

Now I am also busy in some client release of stuff. So hope my response will be late.

Hope your problem is solved now

CHEERS!

Regards,

Asif Ahmed Khan
contentfader.js
0
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35226827
Hello Bro!

Posted TWICE :) I think this has been solved :) If you want to give me the points then I will be thankful.

Contact me in future for any kind of Client side script help.

Regards,

Asif Ahmed KHan
0
 

Author Closing Comment

by:21thirteen_design
ID: 35292444
I said if any one can figure this out, they're a genius, so . . . Asif Ahmed Khan is a genius !!!
Thank you!
0
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35292673
Thanks @21thirteen_design :)
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Instead of error trapping or hard-coding for non-updateable fields when using QODBC, let VBA automatically disable them when forms open. This way, users can view but not change the data. Part 1 explained how to use schema tables to do this. Part 2 h…
On September 18, Experts Exchange launched the first installment of the Help Bell, a new feature for Premium Members, Team Accounts, and Qualified Experts. The Help Bell will serve as an additional tool to help teams increase question visibility.
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …

719 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