BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Collapsible Components (sidebar items)
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks
View previous topic :: View next topic  
Author Message
abacquer



Joined: 22 Mar 2004
Posts: 193

PostPosted: Wed Jun 30, 2004 10:54 am    Post subject: Collapsible Components (sidebar items) Reply with quote

My blog went to three columns because I was using a lot of components (calendar, search form, month archive, recent articles, recent comments, recent links by furl, blogroll by bloglines, and other stuff) and I was concerned about the loss of screen real estate for the article content which is, after all, why people come to the blog.

Today I went back to two columns and made all my components "collapsible". So now when the user looks at my sidebar, he or she doesn't have to look at the "about the author" or "blog roll" or whatever, unless he or she is actually interested in it.

I wrote an article on how I did this in my blog, which shows the javascript I used: http://unbecominglevity.blogharbor.com/blog/_archives/2004/6/30/97796.html.

In addition to the material covered in the article, I needed to customize my components. Here's what my Month Archive component looks like now:

Code:
{{if calendar.months}}
<div class="component">
<div class="componentHead"><img vspace=3 align=right ID="CCI_MARCH" SRC="http://unbecominglevity.blogharbor.com/pix/comp_expand.gif" onClick="CComponentToggle('MARCH'); return false">Month Archive</div>
<div ID="CCC_MARCH" class="componentContent" style="display: none">
<div class="componentArchive">
{{loop calendar.months}}
<a {{if selected}}style="font-weight:bold;"{{/if}} href="{{url}}">{{month_name}} {{year}}</a><br>
{{/loop}}
</div> <!-- componetArchive -->
</div> <!-- componentContent -->
</div> <!-- component -->
{{/if}} <!-- calendar.months -->


The image added to the componentHead is what the user clicks on. The ID passed to CComponentToggle is what tells the javascript which component to hide or show. Then all I had to do was add an ID and a style tag to the componentContent div so that the javascript function would be able to find the section it needs to hide or show.

I can even have some components which are expanded by default simply by using the collapser image and changing the componentContent style to "display: block".

You might find this useful and may want to use it on your own blog. Be warned I've only tested it in IE... there may be compatibility issues with other browsers. If you see any issues, but can suggest how to fix them, pleae let me know.
_________________
-- Abacquer, A.K.A. Chuck Seggelin
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Wed Jun 30, 2004 9:26 pm    Post subject: Re: Collapsible Components (sidebar items) Reply with quote

abacquer - awesome post, thanks for sharing. Works fine on my Mac Mozilla here. Great tip!

BTW - check out this thread: http://forums.blogharbor.com/viewtopic.php?t=567#917

I know you asked how to do this once before...
Back to top
View user's profile Send private message Send e-mail Visit poster's website
abacquer



Joined: 22 Mar 2004
Posts: 193

PostPosted: Wed Jun 30, 2004 11:02 pm    Post subject: Re: Collapsible Components (sidebar items) Reply with quote

john wrote:
abacquer - awesome post, thanks for sharing. Works fine on my Mac Mozilla here. Great tip!

BTW - check out this thread: http://forums.blogharbor.com/viewtopic.php?t=567#917

I know you asked how to do this once before...


Thanks John. Yeah I saw the other post about allowing Anonymous users to leave a name and e-mail. It's an impressive workaround, and a little scary. I suspect I would remove the e-mail (spammers harvest that stuff) and instead make an input box for a URL.

I'm not sure I want to do this though, at least not in this way. You used the word "hack" yourself, and I'm iffy about using it.

I completely agree with Bryanska's point of view, and if he goes this route I'd be curious to know how it works out for him.
_________________
-- Abacquer, A.K.A. Chuck Seggelin
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Wed Jun 30, 2004 11:15 pm    Post subject: Re: Collapsible Components (sidebar items) Reply with quote

Hack was used in the good and original sense of the word. Progammers say to each other, nice hack. Wink

This little workaround is really simple - You once asked to allow anonymous users to post a comment by signing their name. All this fix does is add an input box for a commenter's name; when the commenter clicks Submit, some Javascript combines the thing they entered into the Name box with the comment they made and posts it as usual. So if I entered my name John in the name field, and This is my comment in the comment field, through the magic of Javascript the resulting comment becomes John writes: This is my comment.

If you do not want to allow email addresses (which are linked to the name only when Allow HTML in comments is enabled in your blog), you should be able to remove the email input box.

It's no more or less dangerous than allowing Anonymous comments. But that is the point I raised originally for anyone who wishes to allow anonymous comments: there may be more maintenance involved as you may have to remove comments you do not wish to have on your blog. Requiring your readers to register raises the "barrier to entry" for commenting...

If you wish to continue this discussion, let's do so on the http://forums.blogharbor.com/viewtopic.php?t=567#917 thread or a new one.

FYI, Bryanska says he digs it.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
abacquer



Joined: 22 Mar 2004
Posts: 193

PostPosted: Wed Jun 30, 2004 11:22 pm    Post subject: Reply with quote

One gotcha, though, is that you can't make "favorites" collapsible (at least I haven't figured out how to do it.) I had to create a custom component which contained all my favorite links and use that instead... which means it doesn't get updated if I add something to my favorites.

Small price to pay I suppose, but something to be aware of.
_________________
-- Abacquer, A.K.A. Chuck Seggelin
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Wed Dec 01, 2004 12:22 am    Post subject: Re: Collapsible Components (sidebar items) Reply with quote

Since some folks have asked privately for additional instructions on implementing this tip by Chuck, here's some more help:

First, go to Chuck's post here:

http://unbecominglevity.blogharbor.com/blog/_archives/2004/6/30/97796.html

Look where he writes Click this expander to see the necessary javascript: . Click the arrow, then copy and paste that code into a text file you create, call it c_component_toggle.js.

Change <url of my image directory> to the URL of where you will place your ex[and and collapse icons. If you just upload them to the top of your File Manager directory, then the URL will be for example http://demo.blogharbor.com/. Change lines 2 and 3 to the name of your expand icon and your collapse icon.

Then upload the file to the top level of the File Manager in the blog control panel.

Next go to your blog control panel and access Settings & Security > Publishing Defaults > General. On that page you will see Additional <HEAD> Content. Add this:
Code:

<script type="text/javascript" src="/c_component_toggle.js"></script>


and Save.

Now just follow the rest of Chuck's instructions for customizing the components where you would like to see the expand/collapse icons...
Back to top
View user's profile Send private message Send e-mail Visit poster's website
PurpleCar



Joined: 08 Apr 2004
Posts: 3
Location: Philadelphia, PA 'burbs

PostPosted: Fri Dec 17, 2004 3:54 pm    Post subject: Cool stuff, but. Reply with quote

Mad Darn it. I can't get it to work... ccp6867@yahoo.com
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Sat Dec 18, 2004 12:39 pm    Post subject: Re: Cool stuff, but. Reply with quote

Seems like there are 4 steps you need to follow:

1) Create the c_component_toggle.js Javascript file locally and upload it to your site into the FIle Manager

2) Link that into your pages via the Additional HEAD content option in the control panel

3) Upload 2 images to your File Manager, the expand and the collapse icons.

4) Create customized components using the code above, which link to the images you uploaded in Step 3.

I think in your case, you need to check Step 3, and make sure you have uploaded images you want to use to expand and collapse. Once you have those, then make sure you are linking to them in your custom components using the code in abacquer's initial post in this thread. Remember, the SRC of the images is the path to the images from Step 3, not the javascript from Step 1.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
tigersi



Joined: 20 Apr 2005
Posts: 174

PostPosted: Wed Jun 22, 2005 10:08 pm    Post subject: confused Reply with quote

Hi John,

I'm trying to add the collapsable code into a custom component but am confused on what code I'm adding. Here's what I've done so far...

1) Created the icons and uploaded them to the File Manager subdirectory called /layout (and used filenames you had in your template).

2) created the *.js file and uploaded it to the same File Manager subdirectory. (One thing, though, I created the file in Notepad and saved it as a text file but in Explorer it's showing as a Dreamweaver file. Does that make a difference? I can't seem to save it as a straight text file).

3) Added the script to the File Setting's HEAD content using copy/paste from your older post above (and changed the subdirectory location to /layout.

And that's where I get confused on the next step on what code I'm inserting into a custom component.

Any help is appreciated!
_________________
Thanks!
Kathy (aka, Roaring Tiger)
http://bigcatchronicles.blogharbor.com
Back to top
View user's profile Send private message Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Wed Jun 22, 2005 10:37 pm    Post subject: Re: confused Reply with quote

I'll have to send you back up to the top of this thread where Chuck gives some code for customized components. You'll need to customize your own components based on his example at the top there.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
abacquer



Joined: 22 Mar 2004
Posts: 193

PostPosted: Wed Jun 22, 2005 11:56 pm    Post subject: Reply with quote

tigersi--everything you should need with respect to component modifications is in the first post of this thread. But if you've got specific questions feel free to contact me at unbecoming@plastereddragon.com.
_________________
-- Abacquer, A.K.A. Chuck Seggelin
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum