So I’ve finally gotten around to “officially” updating the Mini Slide Navigation mashup that I did two and a half years ago. When I created the mash up back then, I was just hacking around and was completely un-prepared for the attention and positive accolades that this idea received. What was really cool was that two people – Rob Glazebrook and Brian McAllister – built on the work I did and made the navigation even better by making the page locator “snap back” to the page you are currently on.
So this time, I’ve taken what Rob and Brian did, and built on top of that. With my new version, I’ve incorporated some PHP into the mix, to enable the navigation be an used as a “virtual include” on your site, so you to centrally manage the navigation and have one change/addition cascade throughout the whole site. Through PHP, I’ve also enabled the navigation to indicate the proper area of the site two directories deep, and realistically, it could handle more if needed.
So go on over to the demo page and check it out. One note: I’m still learning PHP, so if the method that I used is way too novice or considered a pseudo-hack, please be gentle with me.
I’m happy to share the launch of www.bookcontracts.com. My wife’s uncle wrote a book on how to effectively negotiate a book contract. Recently, he updated the book and I helped him build out the website to sell a PDF version of the book. So if you are in the middle of writing a book, and need to figure out how to how to negotiate any contracts with publishers, you should consider picking the book/PDF up.
For the second year in a row, Drew McLellan has brought to us the wonderful 24 Ways to impress your friends with your web development skills. This is a daily web development journal, with its name playing off of the 24 days of Chrstmas, where guest authors draft an easy to consume tip, trick, and pointer that helps take the confusion out of some fairly advanced and cool webdev features. Be sure to check it out every day this month for a new installment.
I updated the Mini Slide Navigation so that there is now an active page indicator, informing the user as to where they are within the navigation/site. This was a known omission in the original version of the navigation and it was also astutely called out in a comment on my original post.
I used the “decendant selectors” method in creating the active tab, where I gave both the page’s
<body> tag and each navigation item their own unique id, so I could style specific elements of the page based on the relationship to the parent element.
As usual, I have only tested this out on Firefox 1.5 and IE 6.0. I only changed the CSS and made no changes to the SlayerOffice JS. For some reason, I am seeing the “tab slider” move slightly on the initial page load. I am not exactly sure why I am seeing this, and will investigate further. I think it may have something to do with the “z-index” element I am using in the CSS, but I am just not sure (and its very late when I am posting this and I am tired). If anyone has any insight into why this may be happening, please feel free to post it in the comments area of this post, or my original post.
This is it! I recently read this blog post by Garrett Dimon addressing the fact that the time is now for Front-End Architects. Options and applications being used on the “front end” (i.e. presentation layer) are quite diverse and as the Web becomes more pervasive, the need for an architect to handle the front end in its entirety is needed. I completely agree!!
My Mini Slide Navigation mash up was discovered and posted up on del.icio.us this weekend. By Sunday 1/8/06, it had made it to the #2 slot on the del.icio.us/popular ranking (see photo).
As of Monday 1/9/06 Thursday, 1/12/06, its been tagged by over 400 750+ people. Not bad for a small “mash up” I whipped up late one evening.
I had to make some last minute edits to the page and directory. It’s been on my site for a while, but I still needed to put the files in a more accurate directory, so I was admittedly a little unprepared for the traffic and attention. Del.icio.us obviously accelerated this! :) I even got a small nod of approval from Dan Cederholm of Simplebits himself.
So I was recently playing around with a couple of navigation treatments that I’ve seen – Simplebits’ MiniTabs and SlayerOffice’s Focus Slide. And I came up with a navigation “mash-up” of the two. I’m calling it the Mini-Slide Navigation (click to see demo page). I’m not sure this is any great innovation here, and I’m not claiming it to be.
Update – I updated the directory for the Mini Slide Navigation so the files reside in a directory of the same name as the navigation (/sandbox/minislide/). I have a redirect in place on the old page.
This has been tested on IE 5 and Firefox 1.5, however I made no material changes to the Slayeroffice JS so the testing done there should be valid for this. Enjoy!
Mini Slide Update: Page Indicator
Smart Mini Slide
Very interesting and useful post from Content with Style demonstrating how to use a modular CSS framework to different page layouts. Very useful for quickly creating and building new pages, sites. May even update the CSS on this site to reflect this model.
I have created some alternate style sheets for my site. The various flavors can be chosen by clicking on any of the four square icons on the top of the right hand column on each page. I have a few more flavors that I would like to add to the mix, however they are a work in progress at present.
I will highlight the other new flavors I am working on in a future post, but my goal is to go one step further with these style sheets and develop a different page structure and interface similar to the way CSS Zen Garden does it.
Found on Web Graphics, a little post about a very interesting color palette creator. Essentially plug in a hex# and it will spit out a color pallette that you can use to design a web site and all of its elements. Very interesting, and very useful.
I have recently added a new feature of sorts to the site. You can now choose wether to have the site interface as a free flowing “Liquid” design, where the text ajusts to the size of your browser window, or a “Fixed Width” design, where the width of the content area is fixed to a specific width. This feature is effective when you are looking at the site with a large resolution monitor like those massive ones Apple and Dell are putting out in that it gives more control over the layout. To change the look, simply click on the icons at the top of the green column to the right.
Problems – I am having some troubles with my Print style sheet in the Resume area when the alternate style sheets are active (Liquid Display, Valentines Day, and St. Patricks Day styles). So, if you want to print my resume using the browser print function, make sure the interface is the “Fixed Width” interface with the yellow header and the gray background.
Update: – This was a short lived experiment. I have moved away from trying to prove I can do several things with my web site and decided to just keep it simple. I may look into using style switcher scripts in the future, but for right now, I’m sticking to one design.
This is an interesting site that provides direction on how to create CSS Buttons purely with cascading style sheets.