So why would you want to switch. The average internet user probably won’t. Depending on your ISP and your location you could see an improvement in the time it takes for you to reach the DNS servers and for them to respond. We are talking about small amounts of time being saved however you probably make hundreds of DNS calls a day. Also if you are like me and don’t understand why your browser has two text entry bars at the top, you can get the search functionality from the URL bar (although this probably already happens).

All of this is great but what I really want over my ISP DNS is reliability. I want a service that will always be up and I think Google can promise that as well as any other company could.

In the end this is another way for Google to gather information and in reality a pretty good way. Now they can track what straight urls people are going to without going through search. It really fills in a whole data set they have been missing. There are other services that do and promise the same experience. OpenDNS comes to mind. I have used it in the passed without problems.

Check out the service and let me know if you have tried it out.

Word on the street is that the Barnes and Noble e-reader will be available in the store on November 30th. That is just three days short of the famous Black Friday shopping extravaganza. If you try and pre-order a Nook online you will be met with a message telling you it will be shipped on Dec 18th. I find it strange that B&N would be selling the Nook three weeks early in their brick and mortar stores. May they are trying to take advantage of the one thing they have over the competition, a physical store. Allowing people to see / play before they buy is going to help the Nooks chances. More on the Nook Here.

Palms new phone, the Pixi, is hitting shelves Nov. 15th (this Sunday). The Pixi will be Palms second device carrying their flagship Web OS. The device is smaller than the Pre and has its keyboard on the front instead of a slide out. The phone looks and feels like a Centro replacement and a welcome one at that. The Pixi is a candy bar phone with a full keyboard and a 2.63″ touch screen. It is priced at $100 but I feel like that price will come down very shortly. It did not take long for the price of the Pre to drop dramatically and I think the same will happen with the Pixi.

I have seen several articles and videos that say the Pixi’s performance is somewhat lacking. The browser can hang at times while loading pages and the scrolling can be laggy in general around the OS. Some of these problems can be contributed to the slower processor and the overall lower spec of the Pixi compared to the Pre. However I want to point out that Web OS does not take advantage of the graphics processor that is available in both phones. Basically this chip is sitting there doing nothing while the cpu handles all the graphical duties. Palm is working on a solution and when that hits I believe most of the laggy issues will be resolved. In the end the Pre has the same specs at the iPhone 3Gs but does not feel like it from a consumer view.

Enough of that, here are some links to more in-depth review of the Palm Pixi.

Engadget Review

Phone Arena Review

Gizmodo Hands On

Precentral.net Reveiw

Enjoy.

I want to show how a vertical sliding menu can take on some of the features WordPress has implemented but also keep it simple to explain. I did not want to use any images to style the menu and keep everything as clean as possible. What I ended up with was 50% css, 25% jquery and 25% html. I used a few advanced CSS selectors and attributes (like border radius) to refine the effect.

Take a look at the final product here and read on for the explanation. Like always I have put the CSS and jquery in the same file to make it easy for you to inspect and download.

Lets start out with the base HTML. We start with a simple list

<div id="menu">
 <ul class="navmenu">
   <li><div class="menutop"><a href="#">Posts</a><div class="toggle">+</div></div>
     <ul class="submenu">
       <li><a href="#">Add New</a></li>
       <li><a href="#">Tags</a></li>
     </ul>
   </li>
   <li><div class="menutop"><a href="#">Pages</a><div class="toggle">+</div></div>
     <ul class="submenu">
       <li><a href="#">Add New</a></li>
       <li><a href="#">Edit</a></li>
     </ul>
   </li>
   <li><div class="menutop menusingle"><a href="#">Comments</a></div></li>
   <li><div class="menutop"><a href="#">Users</a><div class="toggle">+</div></div>
     <ul class="submenu">
       <li><a href="#">Manage</a></li>
       <li><a href="#">Add New</a></li>
       <li><a href="#">Profile</a></li>
     </ul>
   </li>
 </ul>
 </div>

I start by wrapping the whole thing in a div with a class of ‘menu’. Then everything else is nested unordered lists. Let me go over the rest of the class names.

navmenu

This is the class for the top most unordered list.

menutop

This is given a div within the line items that will be displayed as visual headers for each section. Wrapping your links inside of a div is only necessary for the heading line items.

menusingle

This is a special class applied to the heading line items that will not have a nested list.

toggle

This class is applied to a div tag which is inside the menutop div. This allows you to link the header title to a page while the toggle div is clicked to expand the list.

submenu

This is applied to the ‘ul’ tag of the nested lists.

What really makes the list look nice is the CSS.

 /*Toggle Area*/
 #menu .toggle {float:right;width:9px; padding:5px; cursor:pointer; border-top:1px solid white; border-left:1px solid #E0E0E0; color:#999;}
 #menu ul.navmenu li:first-child .toggle{border-width:0 0 0 1px;}

 /*Menu Setup*/
 #menu ul{padding:0; margin:0; width:150px;}
 #menu ul ul{border:1px solid #CCC;}
 #menu ul.navmenu li {margin:0; list-style:none;}
 /*Links*/
 #menu ul.navmenu a, #menu ul.navmenu a:visited {text-decoration:none; padding:5px; display:block; color:#008FDD;}
 #menu ul.navmenu ul.submenu a:hover{background:#FFF4D2; color:#333;}
 /*Heading Outer div*/
 #menu ul.navmenu .menutop{border:1px solid #CCC; border-width:0 1px; overflow:hidden; width:150px; background:#F9F9F9; }
 /*Header Links*/
 #menu ul.navmenu .menutop a{width:120px;float:left;margin:0 0 1px 0; border-top:1px solid white;}
 /*Header Link Hover*/
 #menu ul.navmenu .menutop a:hover{color:#333;}
 /*Removes white border for the first header*/
 #menu ul.navmenu li:first-child .menutop a {border-width:0px;}

 /*Single Menu Width Fix*/
 #menu ul.navmenu .menusingle a{width:140px;}

 /*Border Radius and Special Border Width*/
 #menu ul.navmenu li:first-child .menutop{border-width:1px 1px 0 1px; -moz-border-radius:5px 5px 0 0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
 #menu ul.navmenu li:last-child .menutop{border-width:0px 1px 1px 1px; -moz-border-radius:0 0 5px 5px; -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
 #menu ul.navmenu li:last-child ul.submenu{-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
 #menu ul.navmenu li:last-child .menutop-open{-moz-border-radius:0;-webkit-border-radius:0px; border-width:0 1px;}

Lets break it down. There is a lot here so I am only going to hit on each area.

Toggle Area

This sets up the styling for the area with the “+” and “-”. Because this is floated to the right of the heading div it needs a width and it will be used as a click-able area so I added the pointer when you roll over it. The line that uses li:first-child only selects the first line item within the ul.navmneu selection. That this way I can remove the white top border for the very first header

Menu Setup

This is the basic stuff to reset the margin, padding and to set the list style to none. I also add a border around the nested lists so that they create some separation when opened.

Links

Nothing to special here. I make sure to apply all the padding that I want for each line to the link tag. That way when I apply a hover style I can change the background color and the whole line will change.

Heading Outer Div

In order to get the appropriate border around the menu I decided to let each heading area have a border and then the nested list get their own border. This area not only applies the border to just the sides of the heading div but also sets it’s width and overflow. The overflow is important because the items within the div will be floated so the height will not be calculated correctly without the overflow setting.

Heading Links

This area sets up the links within the heading section. The width is set because the item is floated. Remember to add in your padding and border widths when figuring your widths.

Single Menu

I wanted to show the flexibility of coding for different situations. I made sure to take into account if a menu heading will not have any sub links. This sets the width correctly thinking that the toggle area will be removed.

Border Widths and Radius

This area has a lot of extra code for the rounded borders that look nice in Firefox and Webkit. However it also creates the top and bottom border that completes the border around the whole menu. I am using :first-child and :last-child to select the top and bottom header items. As a special note none of the border radius styles will work in IE, which is no big deal. However the :last-child also is not followed by IE but I have a fix for that in the java code.

I tried to create something that was usable out of the box but still very simple. If you are having trouble understanding the CSS I recommend getting Firebug for Firefox and using that to see what CSS is effecting what area.

For the javascript I am using the Jquery library and it looks like this.

if ($.browser.msie){
   $('#menu ul.navmenu li:last-child .menutop').css('border-width','0 1px 1px;')
 }

 $('.toggle:not(.toggle-open)') .addClass('toggle-closed') .parents('li') .children('ul') .hide();    

 $('.toggle') .click(function(){
   if ($(this) .hasClass('toggle-open')) {
     $(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty('') .append('+') .parents('li') .children('ul') .slideUp(250);
     $(this) .parent('.menutop') .removeClass('menutop-open') .addClass('menutop-closed');
   }else{
     $(this) .parent('.menutop') .removeClass('menutop-closed') .addClass('menutop-open');
     $(this) .removeClass('toggle-closed') .addClass('toggle-open') .empty('') .append('–') .parents('li') .children('ul') .slideDown(250);
 }
 })

This all within the normal doc.ready function that starts up the Jquery code. I first start out with a simple fix for IE not following the :last-child selector. I thought if IE does not support it I bet Jquery still does and this works. I check to see if the browser is IE and then apply the style as an inline element.

Before proceeding I need to explain a little about how the menu is going to work. Basically the java code will check for any toggle divs with the class of “toggle-open” and then close all the menus where the open class is not found. This is also how the java code will know if a menu is open or closed and how you can style items depending on if they are open or not.

$('.toggle:not(.toggle-open)') .addClass('toggle-closed') .parents('li') .children('ul') .hide();

This line looks for all the items with the class “toggle” and then looks to see if that item has “toggle-open” if not it finds the previous line item and then the next ul tag and hides it. We could have just hand coded in to hide all the sub menus before hand however this will allow those people without java enable to still view the contents of the menu. Also this allows you to specify if a menu is going to be open or not before the java gets to it.

The next java line is a click function that makes the sub menus slide open and closed. It starts with an if statement that looks to see if the toggle element has the class “toggle-open”, if not then it knows the menu is closed.

$(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty('') .append('+') .parents('li') .children('ul') .slideUp(250);

The next line is used if the “toggle-open” class if found and the menu should be closed. “This” refers to the clicked item. So it removes the open class and adds the “toggle-closed” class. It then empties the text held within the toggle div and adds a plus sign. Then the parent line item is found and the next ul tag after that. Finally it slides up the sub menu.

The next line that adds the open or closed class to the menutop div is just for styling and I do not use it here. This would allow you to style the whole heading area for each section depending of if they are open or closed.

After the else statement the code is just the opposite. The only special thing is instead of adding a plus sign I add an “ndash”. This looks better than the minus sign but you can change this to add whatever you want or not add anything if you are using background images.

That is it. It seems like a lot of code for something so small but having a menu that is easy to use and easy on the eyes can go a long way. Please leave any questions or comments down below and thanks for reading.

Check out the final product in the demo.

In the next installment I will talk about how to set cookies in order to remember what menus are open between page views and also and easy way to create active styling for the current page.

Sorry I missed the charts last week. This week I have posted both weeks for you. I have been working on a new vertical menu post that will be coming out very shortly. Because I missed last week I should have something good to recommend this week. Well I have not been doing much in the way of musical exploration but I will say that Owl City has some staying power.

There for I am going to set you up with their album this week. It is Owl City, Ocean Eyes. Take a listen on iTunes or however you get your music.

Now the charts.

Top 10 Songs – Oct. 26th

1. Down – Jay Sean Featuring Lil Wayne
2. Whatcha Say – Jason DeRulo
3. Party in the U.S.A. – Miley Cyrus
4. Run This Town – Jay-Z and Rihanna
5. 3 – Britney Spears
6. Paparazzi – Lady Gaga
7. Fireflies – Owl City
8. I Gotta Feeling – The Black Eyed Peas
9. Meet Me Halfway – The Black Eyed Peas
10. You Belong With Me – Taylor Swift

Top 10 Songs – Nov. 2nd

1. Fireflies – Owl City
2. Whatcha Say – Jason DeRulo
3. Down – Jay Sean Featuring Lil Wayne
4. Party in the U.S.A. – Miley Cyrus
5. Run This Town – Jay-Z and Rihanna
6. Paparazzi – Lady Gaga
7. Meet Me Halfway – The Black Eyed Peas
8. 3 – Britney Spears
9. I Gotta Feeling – The Black Eyed Peas
10. Sweet Dreams – Beyonce

Top 10 Albums – Oct. 26th

1. Crazy Love – Michael Buble
2. The Twilight Saga: New Moon
3. The Blueprint 3 – Jay-Z
4. Love Is The Answer – Barbra Streisand
5. The Time of Our Lives – Miley Cyrus
6. The E.N.D. – The Black Eyed Peas
7. Fearless – Taylor Swift
8. Embryonic – The Flaming Lips
9. D.N.A – Mario
10. Memoirs of an Imperfect Angle – Mariah Carey

Top 10 Albums – Nov. 2nd

1. The Twilight Saga: New Moon
2. Southern Voice – Tim McGraw
3. Crazy Love – Michael Buble
4. The Blueprint 3 – Jay-Z
5. The Time of Our Lives – Miley Cyrus
6. The E.N.D. – The Black Eyed Peas
7. Fearless – Taylor Swift
8. Ocean Eyes – Owl City
9. Love Is The Answer – Barbra Streisand
10. Colour Me Free – Joss Stone

Charts are provided by Billboard.com check them out for more information.

Looks like Britney Spears tops the charts again with her song “3″. The only enjoyment I get out of this song is trying to figure out what she is trying to say. The lyrics in my head are probably funnier than the real thing. It is good to see Owl City hit the charts with their song Fireflies. I have heard that song for a while now and really enjoy their album. They have a spacey relaxing sound which really appeals to me.

However that is not what I am listening to this week. That would be The Veronicas specifically the album Hook Me Up. You might know the song “Untouched” which has hit number 17 on some charts.

They have a good beat and dance thing going for them. They and sisters and as such they sing about relationships and girlie topics (some people like that). I don’t necessarily enjoy that sort of thing but the rhythms and beats get me every time. Every song on their album has a different feel and vibe which makes the whole thing easy listening.

Noted tracks – “Untouched”, “Hook Me Up”, “This Love”, “Popular” and “Goodbye to you”

Top 10 Songs

1. 3 – Britney Spears
2. Down – Jay Sean Featuring Lil Wayne
3. Party in the U.S.A. – Miley Cyrus
4. Whatcha Say – Jason DeRulo
5. Run This Town – Jay-Z and Rihanna
6. I Gotta Feeling – The Black Eyed Peas
7. Paparazzi – Lady Gaga
8. You Belong With Me – Taylor Swift
9. Fireflies – Owl City
10. Use Somebody – Kings Of Leon

Top 10 Albums

1. Crazy Love – Michael Buble
2. Sonic Boom – Kiss
3. American Ride – Toby Keith
4. Love Is The Answer – Barbra Streisand
5. The Blueprint 3 – Jay-Z
6. Doin’ My Thing – Luke Bryan
7. Memoirs of an Imperfect Angle – Mariah Carey
8. The Time of Our Lives – Miley Cyrus
9. This Is Us – Backstreet Boys
10. Dear Agony – Breaking Benjamin

Charts are provided by Billboard.com check them out for more information.

When I heard all the rumors about the new Apple products launching this week the first thing I thought of was if I missed the keynote. If you are not familiar Apple normally holds large keynotes to introduce new or refresh products. None of that this time and when the Apple store went down earlier this week we knew what was coming.

Lets start with the new iMacs. They come in 21.5″ and 27″ flavors now wide screen and LED backlit. Prices are pretty comparable with previous versions. The 21.5″ model starts at $1199 and comes with 3.06 GHz Core 2 Duo, 4GB ram, 500GB hard drive and NVIDIA 9400M. The 27″ model starts at $1699 with similar CPU and ram but larger hard drive and ATI HD 4670 graphics.

The white MacBook got a refresher with a new plastic unibody shell. There is nothing super special here, still $999. 13inch LED screen, 2.26GHz Core 2 Duo, 2GB DDR3, 250GB hard drive, NVIDIA 9400M and an estimated 7 hour batter life. The screen is still glossy and the track pad is still large and glass covered. Only 2 USB ports and no firewire.

The MacMini is next and just like the other products it got a refresher. This is probably the product that needed it the most. Now the MacMini start at $599 and that gets you a 2.26GHz Core 2 Duo, 2GB ram, 160GB hard drive and NVIDIA 9400M graphics. The $799 model pushes more CPU, ram and hard drive. The really surprise is the new MacMini server, for $999 you get a mini case with no media slot drive instead it has two 500GB hard drives. It comes with Snow Leopard Server and unlimited clients.

The last and probably most interesting production was the new Magic Mouse. A wireless mouse with no visible buttons but a multi-touch body. The mouse has a very thin profile and allows you to scroll with the swipe of a finger. The scrolling works similar to the iPhone in that it uses momentum. You can use two fingers to swipe back and forth in your browser history or through your photos in iPhoto. The battery is said to last four months and for the $69 price tag you get a mouse to change all mices (mouses?).

Yesterday Barnes and Noble announced their new eBook the Nook. The Nook is a portable ebook reader with an eink display for reading and a color touch screen for navigation. The color screen is powered by a version of Android the Google phone OS. I have to say that the few videos I have seen make the color screen look a little sluggish. The Apple cover flow style of scrolling through your books looked a little choppy. However lets not worry about those sort of things and talk about how this product compares to the other major ebook reader.

Obviously the other choice for someone looking into getting an ebook reader would be the Kindle 2 and it so happens that B&N have created a page showing the differences. First of course the Kindle does not have a color touch screen and you use the eink screen for all the navigation. I imagine that the color screen is why the Nook is half an inch thick while the Kindle is .36 of an inch and the battery life for the Nook is four days shorter than the Kindle. These things aside the Nook does come with some really great new features.

The Nook has wireless access through AT&T’s cell network but it also comes with wifi connectivity as well. You really only use the network when browsing for a book or when downloading one from the cloud. The books are not that large in file size and take very little time to download. I really only see this being a major benefit for those people who do not get AT&T cell service in their homes or offices (I hear it happens to a lot of people). The Nook has a built in Micro SD slot for memory expansion and replaceable back covers.

The other differentiating feature to me is more about the B&N store than the Nook itself. Some books purchased on the B&N store can be lent to your friends for up to 14 days. So if you like a book and your friend has a Nook you can send the book to them so they can read it. You will not be able to access the book while your friend has it and when they are done they will return the book back to you. There is something really great about the idea of handing a paper book to someone for them to read. I felt like that was something the Kindle was missing.

So it comes down to whether you should purchase the Nook or the Kindle. I feel that both devices have their ups and downs. The Kindle is a second generation device and there fore should have some of the bugs worked out. The Nook is a new take of the ebook reader with dual screens and initiative new content store. B&N say they have more books but I would bet that each will have all the bestsellers, newspapers and magazines you want. Without having seen the Nook it is really hard to say which you should buy. I think B&N are in a really great position because they can put the Nook in their stores for people to look at and play with. That is something that Amazon can’t do. Devices like these really sell them selves when you look at them. Eink displays are not main stream, people want to see how it looks and performs before buying. The Nook really does have the advantage.

• The Nook is listed as pre-order at $259
• Comes with a USB charger and replaceable battery
• AT&T wireless and built in wifi (802.11 b/g)
• 2GB of storage with expandable SD slot
• Supports EPUB, PDF, MP3, JPEG, GIF, PNG, BMP formats

In my world I have been listening to The Sounds.

Their current album is called Crossing the Rubicon and a quick search on iTunes shows that they have two others out as well, Dying to Say This to You and Living in America. You might know The Sounds from their hit single No One Sleeps When I’m Awake. I really enjoy the whole album, an easy listen from start to finish.

Top 10 Songs

1. Down – Jay Sean Featuring Lil Wayne
2. Party in the U.S.A. – Miley Cyrus
3. Run This Town – Jay-Z and Rihanna
4. Whatcha Say – Jason DeRulo
5. I Gotta Feeling – The Black Eyed Peas
6. Paparazzi – Lady Gaga
7. You Belong With Me – Taylor Swift
8. Obsessed – Mariah Carey
9. Use Somebody – Kings Of Leon
10. Empire State Of Mind – Jay-Z and Alicia Keys

Top 10 Albums

1. Love Is The Answer – Barbra Streisand
2. Brand New Eyes – Paramore
3. Memoirs of an Imperfect Angle – Mariah Carey
4. Dear Agony – Breaking Benjamin
5. Black Gives Way to Blue – Alice In Chains
6. The Blueprint 3 – Jay-Z
7. Celebration – Madonna
8. Revolution – Miranda Lambert
9. Kiss and Tell – Selena Gomez and The Scene
10. Backspacer – Pearl Jam

Charts are provided by Billboard.com check them out for more information.