Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Organic Tabs

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #28333
    Nipperkin
    Member

    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.

    #72246
    Nipperkin
    Member

    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.

    #72309
    Nipperkin
    Member

    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.

    #72330
    Nipperkin
    Member

    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:
    • [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.

    #72335
    Nipperkin
    Member

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

    Code:

    . 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.

    #72370
    Nipperkin
    Member

    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.

    #72371
    Nipperkin
    Member

    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:




    #72417
    Nipperkin
    Member

    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 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.