Fraser Woods School

mrdale · 2011-02-24 17:12:02

progre55 · 2011-02-24 23:09:18

Great job. Really think both the design and functionality are spot on for this client. Definitely interested in taking a closer peak on how you did the calendar section. I have a client where this type of format would be very effective. I know you sude bloke’s plug in (or at least I assume) but I need to look closer on how you got the various views to mesh so well.

progre55

renobird · 2011-02-25 03:12:46

Excellent work as usual sir.

:)

michaelkpate · 2011-02-25 13:40:53

That is absolutely the best looking school site I have ever seen. I am perpetually embarrassed by my local schools who all seem infatuated with table-laden designs that they put together in Netscape Composer in 1997.

hakjoon · 2011-02-25 15:42:33

Woo Hoo!!

mrdale · 2011-02-25 15:52:10

Actually, big thanks to mrJoon for sending this one my way.

@reno: still think your school site is the benchmark.

Last edited by mrdale (2011-02-25 15:59:58)

joebaich · 2011-02-25 19:34:45

Very good indeed. I particularly admire the accordion (MooTools?) based main navigation, it’s very smooth and so well crafted.

The Cufon behaves impeccably in my browsers except for Chrome where it hiccups from the underlying font to the ‘Neutra Text’ font replacement.

Last edited by joebaich (2011-02-25 19:38:08)

mrdale · 2011-03-02 01:42:46

joebaich > here’s the nav source with comments to help figure it all out.

When installed properly this nav will:

Allow you to specify which articles you want included in the subnav (optional)
Allow you to substitute an alternative url to the permlink for each article
Open that url in a new window if it happens to be a pdf.
Highlight the section you’re in
Highlight the article you’re in
Open the appropriate section’s accordion

Disclaimer: This may or may not work for your site.

Requirements:

mootools with accodion
optional: custom field to flag inclusion (“primary_navigation” set to “include this article”)
optional: custom field to provide alternate link (“alternate_link” optionally set to any url)

Important: You can remove all the comments that are preceeded by a <!— // but you definitiely need to leave the comments that are used to build variables.

Without Further Ado…

<!-- ..........{   Section Navs   }................................ -->
<txp:variable name="counter" value="0" />
<a id="menu_default" href="/">Home</a>
<!-- // big home nav button ........................................... -->


<div id="nav01">
<txp:section_list class="sections" wraptag="ul" break="" sections="about,admissions,programs,calendars,community,giving,summer-program,partnership,contact-us,directions">
<!-- // output the sections I want (leave sections out for all) ....... -->


  <txp:variable name='<txp:section/>' value='<txp:variable name="counter"/>' />
<!-- // Assign a number to each section for the accordion ............ -->


   <li id="menu_<txp:variable name="section" />" class="handle<txp:if_section name='<txp:section />'> selected</txp:if_section>">

<!-- // make an li with a self selected mechanism ............ -->


    <txp:article_custom section='<txp:section />' primary_navigation="add this article" sort="Title asc"><txp:variable name="child" value=" shown" /></txp:article_custom>
    <!-- child=(<txp:variable name="child" />) -->
    <txp:if_variable name="child" value=" shown"><txp:else/><txp:variable name='<txp:section/>' value='999' /></txp:if_variable>
<!-- // Does section have child articles I want included in the nav? .. -->
<!-- // The custom field "primary navigation" triggers inclusion .......... -->

    <!-- <txp:section/> section =<txp:variable name='<txp:section/>'/> -->

    <a href="#" class="trigger<txp:variable name="child" />"></a><a href="/<txp:section />"><txp:section title="1" link="0" /></a>
<!-- // make two links ...................................... -->
<!-- // 1) for an accodion trigger .......................... -->
<!-- // 2) for an section  landing page link ................ -->


    <ul class="categories drawer<txp:variable name="child" />Target"> <txp:variable name="stickyTest" value='<txp:section />'/>
<!-- // Make a child ul for articles .......................... -->

      <txp:article_custom section='<txp:section />' primary_navigation="add this article" sort="custom_1 asc,Title asc" limit="999" status="live">
<!-- // Build an article list with articles I want included .............. -->


      <li id="menu_<txp:article_url_title />" class="<txp:rvm_if_this_article>selected</txp:rvm_if_this_article>">

<!-- // make an li with a self selected mechanism ............ -->

        <txp:if_custom_field name="alternate_link">
<!-- // Use a CF to allow the link to optionally go elesewhere .. -->

        <txp:smd_if field="alternate_link" operator="contains" value=".pdf">
          <a href="<txp:custom_field name="alternate_link" />" target="_blank" ><txp:title /></a>
<!-- // If alternate link is a PDF open it in a new window/tab .. -->

        <txp:else/>
          <a href="<txp:custom_field name="alternate_link" />"><txp:title /></a>
<!-- // otherwise just open in the same page ...................... -->

        </txp:smd_if>
        <txp:else/>
          <txp:permlink><txp:title /></txp:permlink>
<!-- // otherwise just use the permlink...... ...................... -->

        </txp:if_custom_field>
      </li>
    </txp:article_custom></ul>
<!-- // finish the child ul for articles ............................ -->


    <txp:if_variable name="child" value=" shown"><txp:aks_var name="counter" calc="+1" /></txp:if_variable>
    <!-- counter= (<txp:variable name="counter"/>)-->
<!-- // if the top level UL had child links +1 to the counter ....... -->

  </li><txp:variable name="child" value="" />
<!-- // close the top level nav item and reset child detector to null ..... -->

</txp:section_list>
<!-- // Nav Build is complete ....... -->
</div>

<script type="text/javascript">window.addEvent('domready', function() {
   var myAccordion = new Accordion($$('#nav01 .handle .shown'), $$('#nav01 ul.shownTarget'), { /* // identify triggers & targets */
      alwaysHide: true,
      show:<txp:variable name='<txp:section/>'/>,
      /* // open the section we're in */
      onActive: function(toggler) { toggler.setStyle('background-image', 'url(/siteImages/nav01DownBG.jpg)'); },  
      onBackground: function(toggler) { toggler.setStyle('background-image', 'url(/siteImages/nav01RightBG.jpg)');  
      /* // toggle the image for the open closed arrow */
      }
   });
}); 
</script>

joebaich · 2011-03-02 04:56:33

Whoa! Thank you so much, mrdale! Jumping about like a dog with two tails! It’s past bedtime here, so I am putting this away carefully to play with in the morning. It is so good of you you not only pass this beautiful thing on but also to go to the trouble to comment it so comprehensively. I’m sure there will soon be a bunch of other malformed dogs jumping about too.

Last edited by joebaich (2011-03-02 04:57:06)

Textpattern CMS

Textpattern CMS support forum

#1 2011-02-24 17:12:02

Fraser Woods School

#2 2011-02-24 23:09:18

Re: Fraser Woods School

#3 2011-02-25 03:12:46

Re: Fraser Woods School

#4 2011-02-25 13:40:53

Re: Fraser Woods School

#5 2011-02-25 15:42:33

Re: Fraser Woods School

#6 2011-02-25 15:52:10

Re: Fraser Woods School

#7 2011-02-25 19:34:45

Re: Fraser Woods School

#8 2011-03-02 01:42:46

Re: Fraser Woods School

#9 2011-03-02 04:56:33

Re: Fraser Woods School

Board footer