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

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 Code:

<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>