Sidebar again

Archived from the LCMS Discussion forum.

njw — Mon Oct 01, 2007 11:57 am

Any thoughts on how to make the sidebar items appear as blinds: only the titles are seen unless you click on one, when the whole content is displayed. I’ve had a look at some frameworks to do this, but I’m not confident how to integrate them into LCMS

Many thanks

Neil

shannah — Mon Oct 01, 2007 1:04 pm

Hi Neil,

Step 1: In your MainTemplate.html file in the part tha displays the sidebars, we change it to something like:

Code: Select all
`
function toggle(e){
   var contents = e.nextSibling;
   var class = contents.getAttribute(‘class’);
   
   if ( class.indexOf(‘hidden’) != -1 ){
       class = class.replace(/hidden/, ‘visible’);
   } else if ( class.indexOf(‘visible’) !=  -1 ){
       class = class.replace(/visible/, ‘hidden’);
   } else {
       class = class + ‘ hidden’;
   }
}

{assign var=sidebars value=$page->getRelatedRecordObjects(‘sidebars’)}
{foreach from=$sidebars item=sidebar}

   {$sidebar->val(‘content’)}

{$sidebar->val(‘link_label’)}`

njw — Mon Oct 01, 2007 7:59 pm

Many thanks Steve. As you know, simple is best with me!

njw — Tue Oct 02, 2007 3:41 am

Tried that and got a Smarty error - unknown variable var

Also, I have now realised that I need to be able to make this specific to certain pages.

If I upgraded to v0.7.1 would I get the animated show/hide function or were you referring to the next unpublished version?

Thanks for any help.

Neil

shannah — Tue Oct 02, 2007 8:54 am

Sorry, you have to surround javascript in {literal}{/literal} tags in smarty because javascript contains the ‘{‘ character which is special to smarty. The {literal} tag tells smarty to ignore whatever is inside.

njw — Fri Oct 05, 2007 2:10 am

Thanks again Steve. Can I easily apply this only to specific pages? For instance, I probably only need this on the home page, which has “news” material, and not on other pages where I am using the sidebar more as menu for related links.

Many thanks

Neil

shannah — Fri Oct 05, 2007 11:58 am

This is just a tag that you wrap around the text that is offending.

e.g.

..
{literal}

…

{/literal}
….

So you wouldn’t apply it so a whole page, just a section of a template.

-Steve</div>

--
Steve Hannah
@shannah78 (on twitter)
sjhannah.com blog

</div>

shannah
 
Posts: 4457
Joined: Wed Dec 31, 1969 5:00 pm
Top

</div> </div>

Postby njw » Tue Oct 09, 2007 3:11 am

Sorry - misundersatnding. Can I apply the blinds code to just the front page, any any of the others? If I am editing the main template, then the changes will affect all pages?

Thanks

Neil
njw
 
Posts: 280
Joined: Wed Dec 31, 1969 5:00 pm
Top

Postby shannah » Tue Oct 09, 2007 9:06 am

There are many ways to go about this, but they all involve using an {if} tag around portions.
e.g.
Code: Select all
<h3 {if $page->val('path') == 'index.php'}onclick="toggle(this);"{/if}>{$sidebar->val('title')}</h3>


A far more extensible strategy would be to add a column to the sidebars table to track whether each sidebar should be a "blind", and check that value in the if statement instead.

Best regards


Steve
--
Steve Hannah
@shannah78 (on twitter)
sjhannah.com blog
shannah
 
Posts: 4457
Joined: Wed Dec 31, 1969 5:00 pm
Top

Postby njw » Wed Oct 10, 2007 1:32 am

Many thanks Steve. I really do need to improve my knowledge of PHP and Smarty!!!
njw
 
Posts: 280
Joined: Wed Dec 31, 1969 5:00 pm
Top

Postby njw » Wed Oct 10, 2007 4:20 am

Sorry Steve. Just can't get it to work. I've implemented everything apart from the if statements and made an edit to remove a superfluous ";". The page displays ok, but the headers are not clickable and the blinds don't work.

The code I am using in main\_template now looks like this:

=====================================================



=======================================================

and I have added this to my css file:


#sidebar h3{ .visible { display: block;} .hidden {display: none;}
}

Any thoughts on what I've got wrong?

Thanks

Neil
njw
 
Posts: 280
Joined: Wed Dec 31, 1969 5:00 pm
Top

Postby njw » Wed Oct 10, 2007 4:25 am

Sorry - forgot the code got executed: Code below
{literal}

{/literal}
njw
 
Posts: 280
Joined: Wed Dec 31, 1969 5:00 pm
Top

Postby shannah » Wed Oct 10, 2007 11:22 pm

It probably isn't working because the code isn't tested. There is likely a little javascript error somewhere. Check the javascript console for clues as to what is going wrong.
--
Steve Hannah
@shannah78 (on twitter)
sjhannah.com blog
shannah
 
Posts: 4457
Joined: Wed Dec 31, 1969 5:00 pm
Top
Post a reply

Return to LCMS Discussion

Who is online

Users browsing this forum: No registered users and 7 guests

</div>

Powered by phpBB® Forum Software © phpBB Group

</div>

</td> </tr> </table> </td> </tr> </table>

var pageTracker = _gat._getTracker(“UA-513831-1”); pageTracker._trackPageview();

Powered by Dataface
© 2005-2007 Steve Hannah All rights reserved

njw — Wed Oct 10, 2007 4:20 am

Sorry Steve. Just can’t get it to work. I’ve implemented everything apart from the if statements and made an edit to remove a superfluous “;”. The page displays ok, but the headers are not clickable and the blinds don’t work.

The code I am using in main_template now looks like this:

=====================================================

{literal}{/literal}

{assign var=sidebars value=$page->getRelatedRecordObjects(‘sidebars’)}
{foreach from=$sidebars item=sidebar}

{$sidebar->val(‘content’)}

val(‘link_url’)}” title=”{$sidebar->val(‘link_description’)}”>{$sidebar->val(‘link_label’)}

{/foreach}

=======================================================

and I have added this to my css file:

#sidebar h3{ .visible { display: block;} .hidden {display: none;}
}

Any thoughts on what I’ve got wrong?

Thanks

Neil

njw — Wed Oct 10, 2007 4:25 am

Sorry - forgot the code got executed: Code below
{literal}

{literal}
{/literal}

{assign var=sidebars value=$page->getRelatedRecordObjects(‘sidebars’)}
{foreach from=$sidebars item=sidebar}

{$sidebar->val(‘content’)}

val(‘link_url’)}” title=”{$sidebar->val(‘link_description’)}”>{$sidebar->val(‘link_label’)}

{/foreach}

{/literal}

shannah — Wed Oct 10, 2007 11:22 pm

It probably isn’t working because the code isn’t tested. There is likely a little javascript error somewhere. Check the javascript console for clues as to what is going wrong.