EasyCFM.COM - View Tutorial

Dynamic Content Map

By: Daz Horn

Basic Dynamic Contact Map

This tutorial hs a file associated with it, you may download it here: Dynamic Content Map.zip)

I have produced this structure using one table within MS Access as I wanted an easy way to add more levels without having to add more tables. You may want to split it into separate tables but this would be an easy job.

So you will need:

1 table with the following structure:

Database Layout

And this code (sitemap.cfm):

<cfquery name="qgetcategories" datasource="#dsn#">
    select DISTINCT cat_id,cat_name
    from cat_list
    where cat_name <> '
</cfquery>

<cfoutput>

<ul id="containerul">
     <cfloop query="getcategories">
     <li>
     <cfquery name="qgetsubcategories" datasource="#dsn#">
          select DISTINCT subcat_id,subcat_name
          from cat_list
          Where subcat_id LIKE '#getcategories.cat_id#%' AND subcat_name <> '
     </cfquery>
     <a href="subcat.cfm?id=#cat_id#">#cat_name#</a>
     <ul>
         <cfloop query="getsubcategories">
         <li>
                   <cfquery name="qgetsubcategories2" datasource="#dsn#">
                             select DISTINCT subsubcat_id,subsubcat_name
                             from cat_list
                             Where subsubcat_id LIKE '#getsubcategories.subcat_id#%' AND subsubcat_name <> '
                   </cfquery>
                   <a href="subsubcat.cfm?id=#subcat_id#">#subcat_name#</a>
                    <cfif qgetsubcategories2.subsubcat_name NEQ "">
                    <ul>
                          <cfloop query="getsubcategories2">
                          <li><a href="subsubsubcat.cfm?id=#subsubcat_id#">#subsubcat_name#</a></li>
                          </cfloop>
                   </ul>
                   </cfif>
          </li>
          </cfloop>
      </ul>
      </li>
      </cfloop>
      </ul>
</cfoutput>

That’s it!

Advanced Dynamic Contact Map

For a dynamic map which you can expand or contract just like windows, you need to also do the following:

Add the following code between the <HEAD></HEAD>:

   #containerul li{
              margin:6 0 3 5px; /* A left margin to indent the list items and give the menu a sense of structure. */
              padding:0; /* Removes browser default padding applied to the list items. */
              list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
   }

   #containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
              float:left;
              width:11px;
              height:1em;
              background-position:0 50%;
              background-repeat:no-repeat;
   }
-->
</style>

Include sitemap.js

And put this straight after the last </UL> to invoke the script:

You will also need these images in the same directory as sitemap.cfm:

plus.png
minus.png
page.png

(Remember, the Javascript and the images mentioned above are available to be download at: Dynamic Content Map.zip)

About This Tutorial

Author: Daz Horn

Skill Level: Beginner

Platforms Tested: CFMX
Total Views: 24,871
Submission Date: March 03, 2006
Last Update Date: June 05, 2009
All Tutorials By This Autor: 1

Discuss This Tutorial