PDA

View Full Version : Fading Background



amvmendoza
10-15-2004, 09:29 PM
I was wondering if anyone new or if there is a script somwhere in this site that i could not locate that would allow me to achieve this cool effect

http://squarespace.com/do/display/external/FAQ?currentSection=publishing#Q4 (http://)

When you click on one of the questions, it jumps you to the answer but the thing i cannot figure out is how they applied that fading effect on that particular section of the answers.

cr3ative
10-16-2004, 05:18 AM
The URL is not valid and cannot be loaded.

Do you have another example?

cr3ative

amvmendoza
10-19-2004, 03:51 PM
That was the only example I have found. If you can go to Squarespace.com and click on their FAQ section you can view the effect i want to achieve.
This would be greatly appreciated.

amvmendoza
10-21-2004, 02:14 PM
http://squarespace.com/faq/

Click on the question and see how it jumps to the answer and the answer is highlighted. The highlight fades as you scroll up.

Thanks.

Norway-Club
10-21-2004, 08:03 PM
Tath's real Cool!

Hopefully (if you find it) to share here that!

Crossing fingers.

cr3ative
10-26-2004, 06:51 AM
I've been Ok'ed by the admin to post this here, so enjoy!

What I've modified in the script:

- added delay
- added fade from colour
- added fading speed
- cleaned script, removed useless tags


It's posted below and also attached in handy .txt format.

Example implementation in HTML:



<html>
<head>
</head>

<body bgcolor="White">

<font face="Verdana">

<h2>Fading Links</h2>

<script type="text/javascript">

// Fading Links Script, Copyright 2003-4 SquarePlace.com
// Revisions / Variables in code by cr3ative @ dynamicdrive.com/forums
// http://squareplace.com

// Variables, inserted by cr3ative
//
// Delay before fading out (milliseconds)
var delay = 2000
//
// Colour (HEX) to fade from (example : #F7FFCC for yellow)
var colourfade = "#F7FFCC"
//
// Speed of fading (gap between each colour change, in ms. Fading isn't noticable above 1000.)
var fadespeed = 1


var digits = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
function dec2hex(num) {
if(num < digits.length) {
return(digits[num])
}
var prefix = '' + Math.floor(num / digits.length);
var suffix = num - prefix * digits.length;
if (prefix > digits.length) {
return( dec2hex(prefix) + digits[suffix] );
}
return( digits[prefix] + digits[suffix] );
}
function hex2dec(num) {
var ret = 0;
var placeVal = 1;
var numString = new String(num);
for (var i = (numString.length - 1); i >= 0; --i) {
var c = numString.charAt(i).toUpperCase();
var v = 0;
switch( c ) {
case 'A': { v = 10; break; }
case 'B': { v = 11; break; }
case 'C': { v = 12; break; }
case 'D': { v = 13; break; }
case 'E': { v = 14; break; }
case 'F': { v = 15; break; }
default: { v = parseInt( c ); }
}
ret += v * placeVal;
placeVal *= 16;
}
return( ret );
}
function selectFAQItem( itemName ) {
document.getElementById(itemName).style.backgroundColor = colourfade;
setTimeout( function () { lightenCurrentItem(itemName); }, delay);
}
function lightenColor(currentColor) {
if (currentColor.charAt(0) == '#') { currentColor = currentColor.substring( 1 ); }
var r = hex2dec( currentColor.substring(0, 2) );
var g = hex2dec( currentColor.substring(2, 4) );
var b = hex2dec( currentColor.substring(4, 6) );
return( "#" + dec2hex( Math.min( r + 1, 255 ) ) + dec2hex( Math.min( g + 1, 255 ) ) + dec2hex( Math.min( b + 2, 255 ) ) );
}
function removeHashChar(x) {
if (x.charAt(0) == '#') { return( x.substring( 1 ) ); }
return( x );
}
function lightenCurrentItem(itemName) {
var c = document.getElementById(itemName).style.backgroundColor;
c = lightenColor( c );
document.getElementById(itemName).style.backgroundColor = c;
if (c == "#FFFFFF") {
document.getElementById(itemName).style.backgroundColor = "transparent";
} else {
setTimeout( function () { lightenCurrentItem(itemName); }, fadespeed);
}
}
</script>


<div style="margin-bottom: 4px;">
<div class="faqQuestionObject"><a href="#Q1" onclick="selectFAQItem('Q1');">Content Area 1</a></div></div>


<div style="margin-bottom: 4px;">
<div class="faqQuestionObject"><a href="#Q2" onclick="selectFAQItem('Q2');">Content Area 2</a></div></div>


<div style="margin-bottom: 4px;">
<div class="faqQuestionObject"><a href="#Q3" onclick="selectFAQItem('Q3');">Content Area 3</a></div></div>


<div style="margin-bottom: 4px;">
<div class="faqQuestionObject"><a href="#Q4" onclick="selectFAQItem('Q4');">Content Area 4</a></div></div>


<div style="margin-bottom: 4px;">
<div class="faqQuestionObject"><a href="#Q5" onclick="selectFAQItem('Q5');">Content Area 5</a></div></div>


<div style="margin-bottom: 4px;">
<div class="faqQuestionObject"><a href="#Q6" onclick="selectFAQItem('Q6');">Content Area 6</a></div></div>


<div style="margin-bottom: 4px;">
<div class="faqQuestionObject"><a href="#Q7" onclick="selectFAQItem('Q7');">Content Area 7</a></div></div>


<div style="margin-bottom: 4px;">
<div class="faqQuestionObject"><a href="#Q8" onclick="selectFAQItem('Q8');">Content Area 8</a></div></div>
</font><font face="Arial" size=2>

</div>
<br><br><br>

</div>

</div>


<div class="faqItem" id="Q1" name="Q1">
<div class="faqQuestion">Content Area 1</div>
<div class="faqAnswer">
Content goes here.
</div>
</div>
<br>
<div class="faqItem" id="Q2" name="Q2">
<div class="faqQuestion">Content Area 2</div>
<div class="faqAnswer">
Content goes here.
</div>
</div>
<br>
<div class="faqItem" id="Q3" name="Q3">
<div class="faqQuestion">Content Area 3</div>
<div class="faqAnswer">
Content goes here.
</div>
</div>
<br>
<div class="faqItem" id="Q4" name="Q4">
<div class="faqQuestion">Content Area 4</div>
<div class="faqAnswer">
Content goes here.
</div>
</div>
<br>
<div class="faqItem" id="Q5" name="Q5">
<div class="faqQuestion">Content Area 5</div>
<div class="faqAnswer">
Content goes here.
</div>
</div>
<br>
<div class="faqItem" id="Q6" name="Q6">
<div class="faqQuestion">Content Area 6</div>
<div class="faqAnswer">
Content goes here.
</div>
</div>
<br>
<div class="faqItem" id="Q7" name="Q7">
<div class="faqQuestion">Content Area 7</div>
<div class="faqAnswer">
Content goes here.
</div>
</div>
<br>
<div class="faqItem" id="Q8" name="Q8">
<div class="faqQuestion">Content Area 8</div>
<div class="faqAnswer">
Content goes here.
</div>
</body></html>


Enjoy.

cr3ative

amvmendoza
10-26-2004, 01:17 PM
Thanks alot for looking into this for me and sharing. I will download this script and test it out this weekend and let you know how it goes :p