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>

<img src="./styles/prosilver/imageset/icon\_post\_target.gif" width="11" height="9" alt="Post" title="Post" />by 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

<img src="./styles/prosilver/imageset/icon\_post\_target.gif" width="11" height="9" alt="Post" title="Post" />by 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

<img src="./styles/prosilver/imageset/icon\_post\_target.gif" width="11" height="9" alt="Post" title="Post" />by 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

<img src="./styles/prosilver/imageset/icon\_post\_target.gif" width="11" height="9" alt="Post" title="Post" />by 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

<img src="./styles/prosilver/imageset/icon\_post\_target.gif" width="11" height="9" alt="Post" title="Post" />by 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

<img src="./styles/prosilver/imageset/icon\_post\_target.gif" width="11" height="9" alt="Post" title="Post" />by 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

<form id=”viewtopic” method=”post” action=”./viewtopic.php?f=1&t=3657”>

</form>

Post a reply

Return to LCMS Discussion

<form method=”post” id=”jumpbox” action=”./viewforum.php” onsubmit=”if(document.jumpbox.f.value == -1){return false;}”>

<select name="f" id="f" onchange="if(this.options[this.selectedIndex].value != -1){ document.forms['jumpbox'].submit() }"> </select> <input type="submit" value="Go" class="button2" />

</form>

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> <script type=”text/javascript”> var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”); document.write(unescape(“%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));

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.