Solved

Fade In Content Transparent Bkgnd Problem

Posted on 2011-03-25
11
485 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
  • 6
  • 5
11 Comments
 
LVL 10

Expert Comment

by:khan_webguru
Comment Utility
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
Comment Utility
I want to be able to fade alternate text in and out without requiring a solid background.
0
 

Author Comment

by:21thirteen_design
Comment Utility
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
 

Assisted Solution

by:21thirteen_design
21thirteen_design earned 0 total points
Comment Utility
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
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Assisted Solution

by:21thirteen_design
21thirteen_design earned 0 total points
Comment Utility
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
Comment Utility
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 125 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks @21thirteen_design :)
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Restoring deleted objects in Active Directory has been a standard feature in Active Directory for many years, yet some admins may not know what is available.
Find out what Office 365 Transport Rules are, how they work and their limitations managing Office 365 signatures.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now