HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


[RESOLVED] - 9.0 - Toggleable Tray - How?

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#90236 (In Topic #18250)
Avatar

Community saint

I've investigated trays that use the toggleable_tray_xxx class but I can't decipher where and how it should be called for a tray that doesn't have it included by default.

All help and advice welcomed.

 O_o


Last edit: by Fletch

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#90243
Avatar

Actually, I remember how you yourself showed someone who to use {+START,BOX...}...{+END} to achieve a toggleable tray. That was a good idea, it's the easiest way.

That said, here's how it works


Code

<section id="tray_whatever" class="box">

The main wrapping element for the box.

"whatever" will be the codename for the box. It is used by the Javascript to reference it, and by the cookie that remembers the box open/close state. It must be unique on the page the box is placed on.

Code

   <h3 class="toggleable_tray_title">

The heading style for a toggleable box applied to a heading.

Code

      <a class="toggleable_tray_button" href="#" onclick="return toggleable_tray(this.parentNode.parentNode,false,'whatever');"><img alt="{!CONTRACT}: Some box title" title="{!CONTRACT}" src="{$IMG*,contract}" /></a>

The expand/contract image, which is wrapped in a link. That link makes a Javascript call to initiate the toggle.
The box title is included inside the alt attribute for the img element, because for accessibility link-images have to be uniquely and clearly identified.

Code

      <a class="toggleable_tray_button" href="#" onclick="return toggleable_tray(this.parentNode.parentNode,false,'whatever');">Some box title</a>

The main position for the box title, which is also wrapped in a Javascript link (as you can click the title instead of the image if you like – just a nicety).

Code

   </h3>

   <div class="toggleable_tray">
      ...
   </div>
</section>

Box content goes in place of the "…".
The final </section> closes the HTML for the box.

Code

<script type="text/javascript">// <![CDATA[
   add_event_listener_abstract(window,'load',function () {
      {+START,IF,{$JS_ON}}
         handle_tray_cookie_setting('whatever');
      {+END}
   } );
//]]></script>

This is the Javascript code that loads up the remembered box open/close state.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#90244
Avatar

All-together…

Code

<section id="tray_whatever" class="box">
   <h3 class="toggleable_tray_title">
      <a class="toggleable_tray_button" href="#" onclick="return toggleable_tray(this.parentNode.parentNode,false,'whatever');"><img alt="{!CONTRACT}: Some box title" title="{!CONTRACT}" src="{$IMG*,contract}" /></a>

      <a class="toggleable_tray_button" href="#" onclick="return toggleable_tray(this.parentNode.parentNode,false,'whatever');">Some box title</a>
   </h3>

   <div class="toggleable_tray">
      ...
   </div>
</section>

<script type="text/javascript">// <![CDATA[
   add_event_listener_abstract(window,'load',function () {
      {+START,IF,{$JS_ON}}
         handle_tray_cookie_setting('whatever');
      {+END}
   } );
//]]></script>


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#90245
Avatar

Community saint

I can vaguely follow the 'reasoning', but I'm completely lost when it comes to the implementation, e.g. the following is the first line of my BLOCK_MAIN_SEARCH.tpl

Code

{+START,IF,{$NOT,{$GET,in_panel}}}<div class="centered_inline_block"><div class="inline_block">{+END}{+START,BOX,{!_SEARCH},,{$?,{$GET,in_panel},panel,light},tray_closed,,,<a accesskey="4" href="{FULL_LINK*}" title="{!SEARCH_TITLE}">{!MORE_OPTIONS}</a>}
… and since it references 'tray_closed', why then does it not display the box 'closed' with the contract/expand arrow showing up clearly? Does the 'block' need further amplification when it is used?

I'm sure a Zebedee-light-bulb moment will occur at some stage, but for now I need to concentrate on other things …

 :o

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#90316
Avatar

Ok, well this is from the v8 (or earlier) template. I stripped that down to the bare essentials and updated it a little for v10, and this Tempcode works to create a box (i.e. Tempcode, unlike my example above which accessed the box HTML/Javascript/CSS directly without going through Tempcode):

Code

{+START,BOX,Box title,,default,tray_closed}
Box contents
{+END}

Note that I use a 'default' box type (as 'classic' and 'light' box types no longer exist).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#90349
Avatar

Community saint

That appeals to my simple nature. It works, but there is an unexpected, and weird anomaly …



Browser: Chrome (but that shouldn't make a difference). Different combinations tried, and the only thing that appears as a 'constant' is that IF a 'tray_closed' call is used in a group of boxes, then it appears that the panel (in this instance) will accept only ONE call for the tray to be closed. All the others need to be entered exactly the opposite to how it needs to be displayed (I hope that made sense)!

Any idea why?

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#90401
Avatar

I think this is just the memory. A cookie will be used based on the box title, to store the way the box was left. If you delete the cookie then refresh you should see it reset. Using your browser's privacy mode is a great way to test with a clean cookie state.

If you don't want memory, nuke this bit of STANDARDBOX_default:

Code


{+START,IF_IN_ARRAY,OPTIONS,tray_open,tray_closed}{+START,IF,{$JS_ON}}
   <script type="text/javascript">// <![CDATA[
      handle_tray_cookie_setting('{TITLE|}');
   //]]></script>
{+END}{+END}


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#90402
Avatar

Fan in action

Hi all,
Would there be any pros or cons just using;

[hide]Contents[/hide]

to achieve;

Expand:



???
Asking out of curiousity not as a sarcastic answer...:thumbs:

Be gentle, I'm new to this :)
Back to the top
 
Posted
Rating:
#90410
Avatar

Community saint

Chris Graham said

If you don't want memory, nuke this bit of STANDARDBOX_default:
Thanks. Done.

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: