Grow your CSS skills. Land your dream job.

Organic Tabs

  • # March 10, 2010 at 1:32 pm

    I’ve been trying to find a neat solution to the shapelessness and coming clutter of the archives page on my blog and yesterday thought it might be nice to use the Organic Tabs that Chris created on this site to do so. My purpose for starting this thread is to see if anyone feels that this would not work/be a good idea, for whatever reason.

    I’m thinking of replacing the links that Chris currently gives in the demo with the php commands that would call for the archives listed by month/category/tab, each one given its own "organic tab." One problem I’m imagining, perhaps wrongly, would be the growing number of the items. Would this in fact be problematic? Are there any other problems you can foresee? If not, I’m going to give this a try.

    Oh and, if you do feel this is a problem, do you have a suggestion for something similar that would work?

    Here’s a link to the archive page in question.

    Thanks in advance.

    # March 11, 2010 at 9:34 pm

    Hmm… No opinions, huh? Well, I’ll give it a try and report back to let you know if/how it works.

    BTW, I’ve been looking around for examples of well/elegantly designed archives pages but have yet to find anything really nice. If you know of any, let me know.

    # March 12, 2010 at 3:54 am

    I don’t think there should be any problems. David does something similar on his sidebar http://davidwalsh.name/

    # March 13, 2010 at 12:10 am

    Ok, a little follow up…

    I created a new page (it’s saved it as a draft, so I can’t link to it here), and applied a new page template to it. I input the Organic Tabs HTML in the page template, added the CSS to my style.php page, uploaded the JS file to my blog, and put the js tags in the header.php file. I then swapped out the links Chris provided, including the WP tags for archives by month, by category, and by tag in their place and…

    …it don’t work! Only the links to the first group — archives by month — appear, since they’re on the current page. The mouseover effect works for the other tabs (i.e. they change color when you mouse over them), but when you click on them nothing happens. The box doesn’t expand to show any of the category or tab links (which are there, cause if you eliminate the line

    Code:
    #jquerytuts, #core, #classics { display: none; }

    from the CSS they all show up.

    So, my newbie analysis is: it’s the JS that’s not working, since the animation effect isn’t happening, whereas the rest is.

    Any idea what I’m doing wrong here and how to get it working properly?

    TIA, as always, for any help.

    # March 13, 2010 at 1:09 pm
    Quote:
    So, my newbie analysis is: it’s the JS that’s not working, since the animation effect isn’t happening, whereas the rest is.

    I agree with you. Double check that jquery is loading properly and make sure the organic tabs selectors are targeting the right id’s/classes.

    # March 13, 2010 at 2:22 pm

    I’ve checked and double checked and wasn’t able to figure it out. Here’s the HTML such as it currently is. Do you see anything wrong with it?

    Code:
      < ?php wp_list_categories('optioncount=1&title_li=&show_count=1') ?>
      < ?php list_tags('optioncount=1&title_li=&show_count=1'); ?>
    • [I've left this list as Chris had it for the moment]

    As for check to see whether the jQuery is loading properly, how do I do that? I included the following in the header.php file:

    Code:

    with the other JS calls. Was this wrong?

    Thanks in advance, as always.

    # March 13, 2010 at 2:45 pm

    Try this:

    Code:

    To check if js files are loading properly, I like to open source, and click on the links to the files. If they open, they are linked correctly.

    I think your problem here is that js/example.js was an incorrect path.

    # March 13, 2010 at 3:03 pm

    Many thanks, jamy-za, it works! But I don’t entirely understand why I needed to add the

    Code:
    < ?php bloginfo('template_url'); ?>

    . Could you explain?

    Now I’m going to go back and finish this thing off. I’ll let you know when it’s up and visitable.

    Thanks again for all your help. I truly appreciate it.

    # March 13, 2010 at 5:12 pm

    It’s my pleasure :)

    Code:

    The problem with that url is that your .js file is located under yourdomain.com/wp-jamygoldenblog/wp-content/themes/yourtheme/js/example.js and not yourdomain.com/js/example.js

    <?php bloginfo(‘template_url’); ?> is a dynamically generated shortcut to the theme-folder.
    If you hard coded "http://css-tricks.com/js/example.js&quot; into the header.php, and you used that theme on "http://yourdomain.com&quot; then it would still be looking at the css-tricks.com/js/example.js url. However if you use the <?php bloginfo(‘template_url’); ?> then it will determine the url to the theme folder no matter what site it is being hosted on.

    # March 14, 2010 at 1:40 am

    Ok, that makes sense. Thanks for the explanation.

    I got the page up and running and styled pretty much how I want it. You can see it here.

    Thanks again for all you help.

    # March 14, 2010 at 3:08 am

    I’ve got two more js questions for you, jamy_za. Hope I’m not trying your patience.

    Looking over the posts I’ve got coming up, I clicked on one of the thumbnail images. Rather than opening up in a js "fancy box" as it should have, I got a new white page with the image in the upper left hand corner. I tried various other thumbnails and got the same thing — the fancy box had disappeared. I check the header, fearing I might have erased or messed up the fancy box script, but it is still there. I remove the organic tabs script, which I had put just below the fancy box script, and the fancy box works again. Hmm… I put the organic tabs *above* the fancy box script, and now both work. So: the relative position of js scripts effects functioning? Is there some general rule, or does one just fly by the seat of one’s pants, changing the order until things work properly?

    Finally, I am thinking of combining all my js files into a single js file, as I had read that this would help streamline my blog. If I decide to do so (any good reasons not to?), must I be careful as to the order in which the scripts appear in the new file?

    For the record, here’s the js section of my header file as it currently stands:

    Code:




    # March 14, 2010 at 5:40 am

    I am relatively new to the whole jquery/javascript world so I am not 100% sure why the order sometimes changes things. There is obviously some conflict going on.
    I generally load things I feel are the "biggest", or cover the most divs, first., so I would load fancybox before the organic tabs anyway. If you did put it all in 1 .js file I think you would have order conflicts too. But if you are only using jQuery code, normally you should not run into any of these problems.

    Also, you are loading jQuery twice in your header. Try removing this:

    Code:

    Perhaps that would fix the order conflict.

    # March 15, 2010 at 3:45 pm

    Interestingly, if I eliminate this:

    Code:

    The "fancy box" doesn’t work. Yet, if I eliminate the other jquery call, i.e., this:

    Code:

    Then the "organic tabs" don’t work!

    The result: I’ll leave them both in. I’m also going to look into combining all of my js into one file.

    Interestingly, on another blog, I just read a post that suggests putting your js at the bottom of page’s HTML, for faster loading. Some one responded that that can cause problems with IE, which needs it in the head…

    The great thing about the Internet is the incredible access to information both confirming and denying the veracity of anything. In the end, you have to try it all out for yourself, since no matter what anyone tells you, the opposite may be true for you. :)

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".