Free Template: DocTemplate
Little freebie template for ya’ll today. It was actually Doug Neiner‘s idea, I ran with it, then he helped me out at the end tighten some stuff up.
Note
It’s PHP. So if you download it to check it out, throw it up on your web server to test it out (or somewhere you run PHP locally).
Navigation
The navigation is all AJAX’d up using the jQuery .load() functionality. I just think it’s kinda fun. It supports “deep linking”, so if you were to link to this page with a hash-tag of a page (e.g. /DocTemplate/#parameters.php) , it will see that and load that page up.
If you were to use this template to document some kind of JavaScript thingy, it should be noted that when content is loaded in this way the JavaScript on that page won’t be “active”.
If you don’t like or can’t use the AJAX navigation, simply remove the two JavaScript <script> links in the file common/doctype-and-head.php. It will fall back to simply reloading the page to go to those pages, with current navigation highlighting fully intact.
And…
The index.php file has all the different text style stuff available. Not much, but just the typical hierarchy of header tags, code styling, emphasis/strong tags, links, callout class, etc.
There is a good bit of CSS3 stuff going on from rounded corners to drop shadows to :hover:after with generated content. It should degrade just fine though.
As with anything else on this site, feel free to use it for whatever you’d like, no attribution of any kind required.
Loading ...
Thank you for the tamplate Chris i really enjoy it
May be a nice little design for phpDocumentor.
This would be a great resume layout!
@Matt
Exactly what I thought
Thank you, it’s a nice design, and it works just fine except for one recurring thing when doing full Ajax sites… The Back and Forward buttons do not work (Safari, Chrome, Firefox, IE) although the hash tag changes the actual content does not.
I have used the jquery history plugin for this issue before (http://plugins.jquery.com/project/history) but I still feel I do not have enough control and that is still a little confusing. Does anyone know a better plugin/thechnique for handling this?
You could look at SWFAddress :)
I’ve never had luck with the history plugin. Never heard of the SWFAddress thing but looks cool.
If someone finds a way to get the back button working I’m all ears, I’ll update the demo/download.
Well, I just remembered that there is window.onhashchange in HTML5. It will work in IE8 and FF 3.6. When the user clicks the back arrow, the hash will change and we will fire the function to update the content and set the .active :)
Oooh that’s cool, that would be the progressive way to deal with it.
Well, the “normal” way of supporting the back/forward buttons is to have a JavaScript function that runs every so often (via setInterval) which keeps checking the hash to see if it has changed or not. To me this seems pretty ugly, though.
Looks great!
One more issue besides the back button:
fixing the position of the left menu is – how am I supposed to browse it on mobile browsers? or how about netbooks with smaller resolution?
It’s a template, so you should adjust things as you deem necessary for the application you use it for. For example, unfix the navigation if you don’t like it. Or shorten it. Personally, I wouldn’t be too worried about people with tiny phone screens being inconvenienced by a site intended to document code (not a lot of people writing code on phones), but it’s a valid point for sure.
I think this nav history issue has been mentioned in a nettuts article How to Load In and Animate Content with jQuery.
a commenter named Patrick (http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/#comment-2856) suggested a fix and revised the demo, which now loads the page content when you press Back. You might want to check it out.
http://www.tigerofdoom.com/ajaxContent/howto.html
Gentlemen. what is this that does disturb you – I joined header, footer, navigation and index in one index.php and everything works fine even when I rename it index.htm.
Nice template Chris.
You should have people submit what they do with the template. Maybe a contest for best design. Just a thought.
Very slow page scrolling in FF 3.5 =\
doesn’t that happen on all sites with fixed backgrounds? (It’s the main reason I almost never use them!)
I like the fixed menu concept and the overall design is really fresh.
No back button will frustrate some users, so an elegant solution to that would be good if anyone knows of one.
Also, the inline link text has a decoration:underline, which changes to a border-bottom when hovered, which looks a bit odd. It actually looks unstyled apart from the inherited font-family, so maybe that rule got deleted? An easy fix mind you.
Thanks, you
Is higher
Very cool. I was actually looking for something similar so this will work out great. Maybe someone here will be able to fix the back button hash tags but if not, no biggie. Thanks a lot.
Oh, this would make a great WP theme all on its own without all the AJAX and fixed-scroll stuff.
Very good stuff. Thank you for sharing. This can come in handy.
Thanks Chris,
I have a couple of clients I could use this with.
-Anthony
Nice to see this released… after waiting on me for.. how long? Hope lots of people use it and change it to their needs.
It is official. No developer has an excuse now to release a horrible website for their new plugin/software/whatever. They need this template and a few minutes to set it up.
Hi All,
Educational moment for me here…
The script tag in doctype-and-head.php in this example contains,
"....jquery/1.4/jquery.min.js?ver=1.3.2'"I know the new 1.4 version of jquery is out, but I’m not sure what the “ver=” does. Is it a compatibility thing, minimum version?
I haven’t found the documentation on it… yet.
Thanks!
Just ignore that and/or remove it from the doctype-and-head.php file. I think it’s just a weird mistake on my part, I have no idea where it came from and it doesn’t affect anything as far as I can tell.
It’s just awesome, i’m not going to use it for now, but one day… you’re great !
Hi…
This is really looks rocking…..best wishes
Thank you for sharing this, I needed it terribly.
I’ve used with a codecanyon submission, you can see it here.
http://geek-like-me.com/simpleAdminPlus/
Awesome. That’s the ideal usage I think.
@Balor Rae’
I would love to get my hands on this simpleadminPlus
Any ideas how ?
@Chris
Thanks again for a great idea
Keep up the good work
I’ve uploaded the files to e-junkie, it is $10 and you can purchase it through PayPal.
https://www.e-junkie.com/ecom/gb.php?i=609966&c=single&cl=102862
When I release any updates I’ll send you the updated code.
Looks great. congratulations
I like it. I could see this being useful for delivering a client presentation, especially on a projection screen.
The only suggestion I can offer up in terms of design is perhaps to not use the horizontal gradient in the menu or instead use a different shade on the image’s right side to have the active menu item stand out a little more.
I think it looks pretty good. Two things irk me is that it doesn’t have a Deep linked address and it has that “lag” in Gecko browsers that Javascript-y sites usually do. Other than that, and no offense, I really don’t know what I’d use this for.
My clipboard is acting up. That should link to http://www.asual.com/swfaddress/
First time poster, long time lurker.
Chris, I would just like to say thank you for posting up all these screen casts and information. It always seems that when im working on a project or stuck on something, within that week you come out with a tutorial / cast that describes how to fix my problem.
All in all I would just like to say hellova job your doing here, and Thanks..
Sadly this doesn’t seem to play well with Lightbox. Just having the Lightbox JS files loaded makes this stop working. Any idea why?
Grate stuff Chris love it just love it
Excellent! Thank you for sharing.
This is really sweet, Chris! I’ve got really nothing to document, but when I find something I will for sure use it! This is really cool!
Awesome.. I like the scroll effect. thanks for sharing :)
Thumbs up man ! Great..
Very cool! Thanks (…to Doug also).
Great template – Looks super! Thanks for sharing this :-)
looks great!
Totally stole my idea for an article I’ve been meaning to write (already have the design finished and coded)! ;)
Absolutely love the look of this, though. :)
Looks like I might be using this for a theme options panel in wordpress. If/when I do, I’ll let you know. It looks awesome by the way :)
Quick question – would it be easy to edit this so the content loaded is not a new file, but a different div in the main file?
ie: in an index.php file there are four main divs: overview, terms, section, last.
Would it be easy to hide the divs that weren’t “in view” and have them show only when clicked on in the nav?
Yesterday I put it on my friend’s new domain. The site itself. It’s just rough beginning, but the template is very cool.
It will be in Bulgarian only unfortunately.
great template for small corporate websites. I am sure will use it someday for my clients! Thanks, Chris!
Nice Bro… I Love that, you do the great job…
I am currently working on applying this template on a site (notabene-bg.org/beta/). Unfortunatelly i am kinda stuck with the content coming from TinyMCE’s Word-paste plugin and tables in some articles.
You can have a look here:
http://translate.google.bg/translate?hl=bg&sl=bg&tl=en&u=http%3A%2F%2Fnotabene-bg.org%2Fbeta%2Findex.php
thanks! when I get a free millisecond will check this out.
Hi Chris,
Love the layout! I have a customer that is definitely going to benefit from this simple layout. The simpler the better!!
Cheers.
Very nice! Thanks for sharing this freely.
Like it, could be used for a number of different purposes
Epic fail @ ie6 dude
For IE 6 support, I’d recommend removing the JavaScript, and using this for the CSS.
IE6 itself is epic fail and outdated for today.
I’ve been playing around your template all day yesterday and just decided to share something here. Might be useless for now but I hope some day I will find it some real implementation :)
The only annoying thing is that the <title> is the same for each page. I’d suggest adding a variable for page title to each page, it’d look better :)
I really love this simple but very effective design. I took this idea and did a little project in wordpress. This is the rough version…
Click
Thanks for this beautiful template.
Lovely
But how do you create a link to one of the pages in the menu from another content page in the same website?
a regular href link does work but the menu doesn’t change to the according page
Hi,
You unfortunately are right. I just wrote this.
But the idea having just one menu to link you to all of your pages is amazing. Especially when you are writing site by hand and it contains 1500 pages.
Best regards.
Zarko.
It is fantastic template, but unfortunately there are some bugs. If in the main-content I put a link to another page, nothing happens – I see the page on the bar but the page still remains the same.
If i put URL – it reloads the page in the main content (page in page occurs)
I combined all 4 pages in one .php and nothing wrong happened – it works.
I used this template to -http://asiatbg.com – it is my friend’s new site for asian shepherds
and a use it as a template as a training cms at http://asiatbg.com/1/if his wife wants to edit the site. In other words the template is that I call “very clean, very pure, and very attractive”. Trust me – I am impressed.
Best regards to all.
Zarko
I have tried it in IE8 and the letters do not show very well after loading a new page with ajax and the animation. The letters look like deformed.
Anyone has had this problem???