Create a Fancy F.A.Q. Page with jQuery

Posted on March 19, 2009, under JavaScript, jQuery 

Do you have a F.A.Q. page and you wish to add some cool effects on it? This tutorial helps you to do that. I will show you how to add the effects using the power of JQuery.

Before going through the setup process, check the demo of the fancy F.A.Q. page.

To add the Scroll and the Color Fading effects I’ve used 2 JQuery plugins: Scroll.To & highlightFade. The former is used to add a scroll effect to the target element (ie: a question containing the answer) and the later is used to add a color fade effect to the text that should be read.

How to add the effects in my F.A.Q. page?

First, you need to include the necessary JS files: the JQuery Main File and the 2 plugins: Scroll.To and highlightFade:

<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="javascript/jquery.highlightFade.js"></script>
<script type="text/javascript" src="javascript/init.js"></script>

For the demo, I’ve used 7 questions. When the user clicks on one, the window will scroll to the answer and highlight it.

(content of init.js)

<script type="text/javascript">
<!--
$(document).ready(function() {
// Question 1
$('#question_1').click(function(){
$.scrollTo('#answer_1', {duration: 500, onAfter:function(){
$('#answer_1_text').highlightFade({color:'rgb(255, 189, 112)', speed: 500});
} });
});

// ................................
// 2, 3...7
// ................................

// Question 7
$('#question_7').click(function(){
$.scrollTo('#answer_7', {duration: 500, onAfter:function(){
$('#answer_7_text').highlightFade({color:'rgb(255, 189, 112)', speed: 500});
} });
});

// Go To TOP
$('.go_to_top').click(function(){
$.scrollTo('#top_zone', {duration: 500});
});

});
-->>
</script>

How it works?

After the DOM is ready and the link for the question is clicked the Scroll.To plugin is triggered and scrolls the window to the target element (ie: answer_1). After the scroll event is completed, the second plugin highlights the text that needs to be read (e: answer_1_text).

- – Question – -

<a id="question_1" onClick="return false;" href="#">How does it work?</a>

- – Target Element – -

<h3 id="answer_1">How does it work?</h3>

- – Text to Highlight – -

<div id="answer_1_text">It works using JQuery.</div>

- – JavaScript – -

// Question 1
$('#question_1').click(function(){
$.scrollTo('#answer_1', {duration: 500, onAfter:function(){
$('#answer_1_text').highlightFade({color:'rgb(255, 189, 112)', speed: 500});
} });
});

Before every answer there is an up arrow. If clicked it will scroll the window to the top.

How it’s done?

First, we need to set the ‘go_to_top’ class to the link:

<a class="go_to_top" href="#" onClick="return false;"><img src="http://www.your-site.com/images/arrow_up.png" border="0"></a>

When clicked, all the links that have this class will trigger the Scroll.To plugin:

// Go To TOP
$('.go_to_top').click(function(){
$.scrollTo('#top_zone', {duration: 500});
});

The ‘top_zone’ element should be added just after the tag:

<a id="top_zone"></a>

What’s the role of onclick=”return false;”? This is used to prevent the URL of the link from being open. If you remove it, when the links are clicked the window will scroll first to the top (instantly) and then the Scroll.To plugin will be triggered. This is not so nice especially for the ‘Go to Top’ links.

Check the source code of the demo page to understand the whole process.

Happy coding ;)

Comment via Facebook

comments

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.