roll your own faq module how to store questions - XSLT

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Elad Lachmi 112 posts 144 karma points

Apr 02, 2011 @ 00:06

0

roll-your-own faq module - how to store questions

Hi,

I am currently creating an faq page for my Umbraco site. I am basing it on: http://www.bitrepository.com/fancy-faq.html

I am currently thinking of creating a content folder and create document types for the questions.

What I don't know how to do is then create an xslt macro that will put them in numbered divs.

Or maybe there is a better way of storing the questions?

Copy Link
Eran Meir 401 posts 543 karma points

Apr 02, 2011 @ 00:20

0

you can attach the id of the node to the questions and the answers

Copy Link
Elad Lachmi 112 posts 144 karma points

Apr 02, 2011 @ 06:21

0

Thanks for the reply!

I was thinking that, but how would I go about getting the number as part of the ID of the divs?

I'm asking this since I know very little about xslt.

Lets say I add a number property to the document type and call it position.

Copy Link
Daniel Bardi 927 posts 2562 karma points

Apr 02, 2011 @ 08:35
0
You can get position of an xslt for-each with the position() method. This will give you a number value starting fron 1
```
<xsl:for-each select="...">
<xsl:value-of select="position()"/>
</xsl:for-each> 
 
```
Copy Link
Kim Andersen 1447 posts 2196 karma points MVP

Apr 02, 2011 @ 09:49
2
Hi Elad

Let's say that you are running through the child nodes of the main FAQ page and want to render a h3 and a div for each of the nodes, with an increasing numeric value in the id of those elements. Then you should be able to somthing like this:
```
<xsl:for-each select="$currentPage/*[@isDoc]">
  <h3 id="answer_{position()}"><xsl:value-of select="@nodeName" /></h3>
  <div id="answer_{position()}_text"><xsl:value-of select="answerText" /></div>
</xsl:if>
```
The answerText is the alias of the property where the answer is written in the back office. Hope this makes sense :)

/Kim A
Copy Link
Daniel Bardi 927 posts 2562 karma points

Apr 02, 2011 @ 10:00

0

What he said.. :)

Copy Link
Kim Andersen 1447 posts 2196 karma points MVP

Apr 02, 2011 @ 10:02

0

I take that as a High five Daniel ;)

/Kim Andersen

Copy Link
Elad Lachmi 112 posts 144 karma points

Apr 02, 2011 @ 11:24

0

Thank you!

That'll work.

High five! :)

Copy Link
Kim Andersen 1447 posts 2196 karma points MVP

Apr 02, 2011 @ 11:33

0

Great to hear Elad!

Obviously you can use the same technique for rendering the a-tags in your FAQ.

/Kim A

Copy Link
Elad Lachmi 112 posts 144 karma points

Apr 02, 2011 @ 16:42

0

Well I got the first part working. Thanks!

Now about the jquery code. I added a class to all the answer divs so I can bind a .click event to all of them.

Now how do I go about handleing the .click event?

I was thinking of writing another function and passing it a position() as a parameter.

Any better ideas?

Copy Link
Daniel Bardi 927 posts 2562 karma points

Apr 02, 2011 @ 21:25

0

@Kim: High Five given!

Copy Link
Daniel Bardi 927 posts 2562 karma points

Apr 02, 2011 @ 21:27
0
Add a class to the divs and bind to the click event of the class... here's a one I rolled: http://city.findwoodlandpark.com/faq/
```
$('.faqitem').click(function(){ ... code to show answer ...});
```
Copy Link

Daniel Bardi 927 posts 2562 karma points

Apr 02, 2011 @ 21:37

amendum to previous... here's my faq.js script

$(document).ready(function(){
  //just some regular style sheets. change them as you see fit
  var styling =".question{font-size:14px; font-weight:bold; cursor:pointer;}" +
               ".answer{display:block;}" +
               ".opened{color:#006699;}" +
               ".closed{color:#009966;}" +
               ".answerlabel{cursor:pointer;float:right;clear:both;}" +
               ".answerimage{cursor:pointer;vertical-align:middle;}" +
               ".faqitem{cursor:pointer;}";

  //attach style to the page
  var style = document.createElement("style");
  style.type = "text/css";
  try {
      style.appendChild( document.createTextNode(styling) );
  } catch (e) {
      if ( style.styleSheet ) {
          style.styleSheet.cssText = styling;
      }
  }
  document.body.appendChild( style );

  //style all questions as closed
  $(".question").addClass("closed");
  $(".answer").hide();
  $(".answerlabel .answerimage").attr("src", "/css/images/plus.gif");

  //faqitem click
  $(".faqitem").click(function() {
    $(this).children(".answer").slideUp("fast");
    $(this).children(".question").removeClass("opened").addClass("closed");
    $(this).children(".answerlabel .answerimage").attr("src", "/css/images/plus.gif");

    if ($(this).children(".answer").is(":hidden")) {
      $(this).children(".answerlabel .answerimage").attr("src", "/css/images/minus.gif");
      $(this).children(".answer").slideDown("fast");
      $(this).children(".question").removeClass("closed").addClass("opened");
    }          
  });
});

Copy Link

Elad Lachmi 112 posts 144 karma points

Apr 02, 2011 @ 21:45

0

Wow... Thanks Daniel!

I got my own done already, but this is great. Thank you for the effort.

Copy Link
Daniel Bardi 927 posts 2562 karma points

Apr 02, 2011 @ 21:46

0

No effort at all.. your welcome!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

roll-your-own faq module - how to store questions