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.
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
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.
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.
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?
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:
with the other JS calls. Was this wrong?
Thanks in advance, as always.
Many thanks, jamy-za, it works! But I don’t entirely understand why I needed to add the
. 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.
It’s my pleasure :)
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" into the header.php, and you used that theme on "http://yourdomain.com" 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.
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:
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:
Perhaps that would fix the order conflict.
Interestingly, if I eliminate this:
The "fancy box" doesn’t work. Yet, if I eliminate the other jquery call, i.e., this:
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. :)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".