We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 3749
    • 24,544 Posts
    This is an auto-generated topic for EZfaq 3.2.2-beta1 by bobray.

    Brief Description:

    Creates an FAQ page with questions and expandable answers.
      Did I help you? Buy me a beer
      Get my Book: MODX:The Official Guide
      MODX info for everyone: http://bobsguides.com/modx.html
      My MODX Extras
      Bob's Guides is now hosted at A2 MODX Hosting
      • 10208 ☆ A M B ☆
      • 1,780 Posts
      Hi Bob,

      Hope this isn’t the wrong place to post questions, additionally I hope you have time to consult.

      I’m trying to use the EZFAQ snippet which provides a simple way for Dad to write up his FAQ content.

      Couple of things don’t seem to work (at least in the way I’ve set it up, apparently wrong).

      First, the content areas that shouldn’t show (after the closing Q:END-FAQ) actually show up.

      Second, for some reason when I use the interior template which is just the header area with a partly functional wayfinder menu (still working on that), the unopened FAQ text displays above the header with show/hide, and the yellow show/hide block with buttons displays below the header with all the q and a’s opened. See attached image.

      My header chunk code is (still heavily commented, using the new 1040px grid boilerplate):

      <!doctype html>
      <!--[if lt IE 7 ]> <html class="no-js ie6" lang="[[++cultureKey]]"> <![endif]-->
      <!--[if IE 7 ]>    <html class="no-js ie7" lang="[[++cultureKey]]"> <![endif]-->
      <!--[if IE 8 ]>    <html class="no-js ie8" lang="[[++cultureKey]]"> <![endif]-->
      <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="[[++cultureKey]]"> <!--<![endif]-->
      <head>
      <!-- Initialized DOCTYPE without Facebook FBML implementation. If needed, please add following code to <html> element before closing tag: xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" -->
      	<base href="[[++site_url]]" />
      	<meta charset="[[++modx_charset:lcase]]" />
      	<title>[[++site_name]] - [[*pagetitle]]</title>
      	<!-- change RSS ID or remove next line -->
      	<link rel="alternate" type="application/rss+xml" title="[[++site_name]] RSS Feed" href="[[~1]]">
      	<meta name="description" content="[[*introtext:empty=`[[*content:strip_tags:strip]]`:limit=`200`]]">
      	<meta name="author" content="[[If? &subject=`[[*publishedby]]` &operator=`>` &operand=`0` &then=`[[*publishedby:userinfo=`fullname`]]` &else=`[[*createdby:userinfo=`fullname`]]`]]" />
      	<meta name="keywords" content="" />
      	<!-- Specify URL to favicon and Apple touch icon if not located in root directory ELSE delete this tags -->
      	<link rel="shortcut icon" href="[[++site_url]]favicon.ico">
      	<link rel="apple-touch-icon" href="[[++site_url]]apple-touch-icon.png">
      
      	<!-- If you use Webfonts, you use this script to detect font-smoothing. Please look at documentation how to use it: http://www.michael-van-laar.de/blog/artikel/webfont-load-enhancer/ -->
      	<script type="text/cjs" data-cjssrc="[[++site_url]]assets/templates/main/js/libs/webfontloadenhancer.min.js"></script>
      	<!-- Please load Webfontenhancer BEFORE the Webfont initialization / Webfont-CSS -->
      	
      	<!-- sets viewport to device-with for mobile devices | Android DPI fix for @media-queries  -->
      	<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0">
      	<!-- load default CSS file. Implied media="all" -->
      	<link rel="stylesheet" href="[[++site_url]]assets/templates/main/css/style.css">
      </style
      	<!-- Load CSS files with media-queries -->
      	<link rel="stylesheet" href="[[++site_url]]assets/templates/main/css/smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
      	<link rel="stylesheet" href="[[++site_url]]assets/templates/main/css/ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">
      	<link rel="stylesheet" href="[[++site_url]]assets/templates/main/css/ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">
      	<link rel="stylesheet" href="[[++site_url]]assets/templates/main/css/iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">
      
      	<script src="[[++site_url]]assets/templates/main/js/libs/modernizr.min.js"></script>
      </head>
      <body>
      <header class="container row">
      	 <!--Header Background Part Starts -->
      	<div class="col12 last">
      			<div id="header-bg">
      			<!--Header Content Part Starts -->
      				<div id="header">
      						<a href="index.html"><img src="assets/templates/main/images/Logo.png" alt="The Compass Adjuster" width="381" height="125" border="0" class="logo" title="The Compass Adjuster" /><img src="assets/templates/main/images/daewoo_nt.jpg" width="194" height="113" vspace="5" /><img src="assets/templates/main/images/block_banner.png" width="138" height="119" alt="Compass Adjuster Portland Oregon" /><img src="assets/templates/main/images/bye.jpg" width="203" height="113" vspace="5" /></a>
      				</div>
      			<!--Header Content Part Ends -->
      			</div>
      	<!--Header Background Part Ends -->
      	<!--Navigation Background Part Starts -->
      		<div id="navigation-bg">
      			<div id="navigation">
      						[[!Wayfinder? &startId=`0` ]]
      			</div>
      		</div>
      	</div>
      <!--Navigation Background Part Ends -->
      	<!-- use this wrapper for your header of website with logotype, navigation etc. -->
      </header>
      ​


      The template is:

      [[$site_header]]
      	<div id="adjust-bg">
      [[*content]]
      </div>
      [$site_footer]]


      I’ve moved the content tag around in the template, doesn’t seem to make any difference where it’s inserted. The above shows where it is now which places the opened FAQ’s on the background with the unopened text above the header.

      I changed the template to the base template just for kicks, and inserted the entire home page original html in, and then called the EZFAQ snippet below everything. This worked as expected.

      Love to know if you know what I’m doing wrong here.

      Thank you for any assistance.

      Kori





        Frogabog- MODX Websites in Portland Oregon
        "Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
        Having server issues? These guys have MODX Hosting perfected - SkyToaster
        • 3749
        • 24,544 Posts
        Normally, the entire <head></head> section and the <body></body> tags all go in the template along with the with just the content of the header in the header chunk.
        I suspect that the MODX functions that inject the JS and CSS are looking for the <head> and <body> tags in the template and not finding them. Also, your <body> tag appears to be unclosed.

        I would validate the page here: http://validator.w3.org/. You may also have an unclosed <div> tag or something similar.

        On the end tag, it needs to be

        Q:FAQ-END

        It’s a mistake in the docs. I can’t believe no one has noticed it before. tongue
          Did I help you? Buy me a beer
          Get my Book: MODX:The Official Guide
          MODX info for everyone: http://bobsguides.com/modx.html
          My MODX Extras
          Bob's Guides is now hosted at A2 MODX Hosting
          • 10208 ☆ A M B ☆
          • 1,780 Posts
          Thank you for your time Bob.

          (FWIW, it’s STILL raining regularly on us webfoots, you’re probably best off wherever you are for a while yet... you might want to stock up on Vit. D while you can.)


          OK... sent the page through the validator. Most of the errors came from the 1040px boilerplate head and the EZFAQ code. I need to locate the extra body tag and find out why I styled an image outside of the CSS but it doesn’t seem to show much else is funky that I’d know how to fix. I’ve attached the results for interested parties.

          I have the header and footer in chunks, although I hadn’t inserted my html into the footer till after I posted yesterday (it did have the default from the boilerplate download which had a closing </div> tag at the top as a "just in case something didn’t get closed" which hasn’t shown in the validator so it does seem possible one of the divs didn’t get closed). Since the template calls the header and footer chunks, wouldn’t that mean that the entire <head></head> and <body></body> is in the template? I placed the [*content] within the bg image expecting the FAQ to show on top of the image, which it did nicely apart from the separation issue.

          I don’t understand this part. Stuff got switched out in the resulting code. Originally this line in the header read as follows:

          <meta name="description" content="[[*introtext:empty=`[[*content:strip_tags:strip]]`:limit=`200`]]">


          (for reference if needed, surrounding code)
          <base href="[[++site_url]]" />
          	<meta charset="[[++modx_charset:lcase]]" />
          	<title>[[++site_name]] - [[*pagetitle]]</title>
          	<!-- change RSS ID or remove next line -->
          	<link rel="alternate" type="application/rss+xml" title="[[++site_name]] RSS Feed" href="[[~1]]">
          	<meta name="description" content="[[*introtext:empty=`[[*content:strip_tags:strip]]`:limit=`200`]]">
          	<meta name="author" content="[[If? &subject=`[[*publishedby]]` &operator=`>` &operand=`0` &then=`[[*publishedby:userinfo=`fullname`]]` &else=`[[*createdby:userinfo=`fullname`]]`]]" />
          	<meta name="keywords" content="" />
          	<!-- Specify URL to favicon and Apple touch icon if not located in root directory ELSE delete this tags -->
          	<link rel="shortcut icon" href="[[++site_url]]favicon.ico">
          	<link rel="apple-touch-icon" href="[[++site_url]]apple-touch-icon.png">


          Yet the resulting output from MODx is this:
          <base href="http://localhost/adjuster/" />
          	<meta charset="utf-8" />
          	<title>The Compass Adjuster - FAQ</title>
          	<!-- change RSS ID or remove next line -->
          
          	<link rel="alternate" type="application/rss+xml" title="The Compass Adjuster RSS Feed" href="index.php?id=1">
          	<meta name="description" content="<div class="faqExpand"><p>Click on a question to expand the answer</p><a href="javascript:faq.sweepToggle('expand')"> Show All </a>    <a href="javascript:faq.sweepToggle('contract')"> Hide All </a></div><div class="faqContainer">
          <p id="faq0-title" class="handcursor"><span class="faqQuestion">does this work?
          
          </span></p><div id="faq0" class="switchgroup1">probably not
          
          </div></div>
          <script type="text/javascript">;
          var faq=new switchcontent("switchgroup1", "div");
          faq.setStatus('[-] ','[+] ');
          faq.setColor("red", "black");
          faq.setPersist(true);
          faq.collapsePrevious(true);
          faq.defaultExpanded("");
          faq.init();
          </script>
          ">
          	<meta name="author" content="" />
          	<meta name="keywords" content="" />
          
          	<!-- Specify URL to favicon and Apple touch icon if not located in root directory ELSE delete this tags -->
          	<link rel="shortcut icon" href="http://localhost/adjuster/favicon.ico">
          	<link rel="apple-touch-icon" href="http://localhost/adjuster/apple-touch-icon.png">


          To this untrained eye, it’s this line that isn’t rendering properly. Correct? The strip tag portion stripped the closing "> right out and it looks like EZFAQ found a place to begin nesting in the head itself...
          <meta name="description" content="<div class="faqExpand">


          Being still unfamiliar with MODx, I wouldn’t begin to know how to fix it. My studies haven’t ventured into strip tags just yet.

          Am I on the right track here?

          Thank you again,

          Kori


          Moderators may notice I’ve managed to log in with my original/preferred registration and I apologize for the double accounts but when I first subbed, this account would not log in so I created another so I could post. I hope for forgiveness, and I will use this one exclusively now that I have successfully logged in with it. Flog me if you must but I am, have been, and always will be frogabog (without a 2). Frogabog shudders at being forced to be anything but, especially a number...





            Frogabog- MODX Websites in Portland Oregon
            "Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
            Having server issues? These guys have MODX Hosting perfected - SkyToaster
            • 3749
            • 24,544 Posts
            This line is doing just what you’re telling it to: if the summary (introtext) field is empty, use the first part of the content field (which contains your FAQ). So the first part of the FAQ is being output twice -- once in the head and again where you have the [[*content]] tag (possibly confusing the JS that renders the items).

            <meta name="description" content="[[*introtext:empty=`[[*content:strip_tags:strip]]`:limit=`200`]]">


            Put some straight text in the Summary (introtext) field of the document containing the EZfaq tag.
              Did I help you? Buy me a beer
              Get my Book: MODX:The Official Guide
              MODX info for everyone: http://bobsguides.com/modx.html
              My MODX Extras
              Bob's Guides is now hosted at A2 MODX Hosting
              • 10208 ☆ A M B ☆
              • 1,780 Posts
              Again... Clarity! I see it now.


              That did it. Thank you!



              Kori

                Frogabog- MODX Websites in Portland Oregon
                "Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
                Having server issues? These guys have MODX Hosting perfected - SkyToaster
                • 3749
                • 24,544 Posts
                I’m glad you got it sorted. Thanks for reporting back. smiley
                  Did I help you? Buy me a beer
                  Get my Book: MODX:The Official Guide
                  MODX info for everyone: http://bobsguides.com/modx.html
                  My MODX Extras
                  Bob's Guides is now hosted at A2 MODX Hosting