I think ATT over selling their network bandwidth? You know, like those web hosting companies that over sell their space and bandwidth just because they think their users will never use as much? I rarely get signal or 3G signal anymore. All I see all day is E for Emergency calls only!!

TNT Royal Pain show is GOOD!!

So I was reading on dell’s blog about what their marketing or development team has to say about the Adamo, and all I have to say is once again they missed the point and they’re focusing on the wrong crowd.

First, PC users aren’t stupid when it comes to their money. They won’t drop 2 grand just because something looks good, PC users are all about affordable products and balance pricing.

Second, when people compare between two products (ahem Adamo vs MB Air). They compare based on performance, not what the product looks like. At least that’s how I compare between products! If look and performance are both important factors, I would always choose performance over looks every time because performance get the job done.

Dell, go back to the drawing board and ask your engineers and marketing teams “What the hell were they thinking?”

Eye Exam!!

How-to: Create a Simple Dropdown Menu with jQuery and CSS

ATTN: This method does not work with IE7 or below.

So a few days ago, Danny asked me if I could create a simple drop down menu for iA to cut down the clutter. Since iA is powered by WordPress, I know for sure that a jQuery library was included. Demo of the menu can be seen at idolsavenue.com! The code provided below will be based on iA with some explanations!!

The original menu tree
Hold CTRL + U to view the source. For some reason “code” isn’t displaying the html markup but rather rendering it.

• Home
• Anime
• Drama
• Movies
• Phim
• Donate

What it will be
Hold CTRL + U to view the source. For some reason “code” isn’t displaying the html markup but rather rendering it.

• Home
• Anime
• Drama
  • Chinese
  • Japanese
  • Korean
  • Taiwanese
• Movies
  • Chinese
  • Japanese
  • Korean
  • Pinoy
  • Thai
  • Trailers
• Phim
  • Phim Le
  • Phim Le Vietnam
  • Phim Bo
  • Phim Bo Vietnam
• Donate

The javascript (jQuery)!
I’m only gonna show the script for the “Movies” menu tree since they all are similar to each other.

To get the javascript below working in wordpress, you need to first put this little php script wp_enqueue_script(‘jquery’); a line above wp_head();

Also, instead of using “$” like you would normally do, I have to use “jQuery” to start each function. I dunno why yet, but when I do I’ll update the post!!


jQuery(document).ready(function(){
// hide on default
jQuery("#header ul li.movie ul.moviesub").hide();

// when mouseover - show
jQuery("#header ul li.movie").mouseover(function() {
jQuery("#header ul li.movie ul.moviesub").show();
});

// when mouseout - hide
jQuery("#header ul li.movie").mouseout(function() {
jQuery("#header ul li.movie ul.moviesub").hide();
});
});


The CSS
Since iA menu is inside a div#Header. The CSS you’ll see below will start with #header. Like the jQuery part, I will only include the CSS code for the “Movies” menu tree.

The Parent: Using position absolute, I put the “parent ul” at the bottom right corner. “li and a” are display in blocks with float left to keep them horizontally.

The Child: The “child ul” are hidden as well in case someone turn javascript off. Also using position absolute, I put the “child ul” where I want it to show up when a mouse is hover over the “parent li”. In this case, the “child ul” is placed underneath the “parent li”. The “child li and a” are display in blocks but they aren’t float to keep them listed vertically.

/* The Parents */
#header ul {position: absolute; right: 0; bottom: 0; text-align: right; font-size: 14px; z-index: 3;}
#header ul li {float: left;}
#header ul li:hover {background: #000; color: #999;}
#header ul li a {color: #999; display: block; padding: 8px 10px 7px 10px; font-weight: normal;}
#header ul li a:hover {color: #fff;}

/* The Child */
#header ul li ul.moviesub {display: none;}
#header ul li ul.moviesub {position: absolute; top: 32px; right: 61px; width: 130px; height: 126px; float: none; background: #000;}
#header ul li ul.moviesub li {display: block; float: none; text-align: left; font-size: 10px;}
#header ul li ul.moviesub li a {float: none; height: 15px; padding: 3px 5px 2px 10px; border-bottom: 1px dotted #555;}


That’s it!! Have fun and I hope this is useful!