Super Tip! How to Create that floating Facebook toolbar at the bottom of the page!


Help! I’d like to create a toolbar similar to facebook that is locked in the bottom of the screen.

Introduction Facebook is such a great website – usability, features, speed, you name it, facebook has it. One of facebook’s most useful feature is the toolbar that is being displayed to the bottom of the page. This post is made to do just about that. Follow these easy steps to create a Facebook-toolbar clone in no time at all!

_Solution_ Using the following steps, you would be able to duplicate the look of the Facebook toolbar. 1.) First, copy the following css and paste them inside your <header> tag.

html { height: 100%; } body { height: 100%; } #wrapper { position: relative; min-height: 100%; } * html #wrapper { height: 100%; } #content { padding-bottom: 25px; } #toolbar_outer { bottom:0; color:#111111; font-size:11px; height:25px; padding:0; position:fixed; right:0; width:100%; z-index:99; } #toolbar_outer { position: relative; margin-top: -26px; } #toolbar { background:#aaa; border-right:1px solid #b5b5b5; overflow:visible !important; margin-left:15px; margin-right:15px; position:relative; } #toolbar ul { height: 25px; background: #e5e5e5; border-top: 1px solid #eee; border-left: 1px solid #ddd; } #toolbar ul li { float: left; padding: 5px; font: normal 110% "lucida grande", tahoma, verdana, arial; border-right: 1px solid #aaa;}

Important: The only drawback here is you’ll need to know the height of your toolbar (not really a problem, you should know that anyway). I’ve highlighted the properties above that you will probably want to edit.

2.) Finally, Paste this in your <body> tag.

    <div id=”wrapper”>        <div id="content">          <!– Your Content Goes Here –>        </div>     </div>     <div id="toolbar_outer">       <div id="toolbar">       <!– Toolbar –>        <ul>          <li>Applications</li>        </ul>       </div>     </div>
  1. (Optional) You can also download everything above here.

Well, that’s everything there is to it really! Don’t forget to thumb this up and share with others!

Jquery Super Tip! Automatically highlight the links/menu of the current page with 1 line of code


One very important usability feature of a website is to have the menu or links highlight the current page the visitor is currently in. Here’s a trick I do with jquery to do just about that. For educational purposes, i’ve split it to 3 lines of code to make it more understandable.

Simply add the following to your header (don’t forget to include jquery first!).

$(document).ready(function()   {     var loc = window.location.toString().split("/")     loc = loc[loc.length – 1]     $("#navigation li a[href=\""+loc+"\"]").addClass("selected");   });

Of course, jquery isn’t really needed to do this. If you prefer to have it done _without_ jquery, here’s a native way of doing things:

   window.onload = function()    {      var current_page = window.location.toString().split("/")[window.location.toString().split("/").length – 1]      var links = document.getElementsByTagName("a");      for (x in links)      {        var link = (links[x].href != undefined) ? links[x].href.toString().split("/")[links[x].href.toString().split("/").length – 1] : ""        if (link == current_page)          links[x].className = (links[x].className == "") ? "selected" : links[x].className + " selected"      }    }

_Important_: The above code takes use of the .selected class. Simply add the class to your a:hover classes.

#navigation ul li a:hover { color: #ff0; }

Should be written as:

#navigation ul li a:hover, #navigation ul li a.selected { color: #ff0 !important; }

_Don’t Forget!_, this works for menu/links with background images as well.

and that’s all there is to it! Don’t forget to thumb this up and share!

How to: Fix OCUpload/One-Click Upload clicking bug in IE7 & IE8 (jquery)

| 1 Comment »

Problem: Help! I’m using the OCUpload, or One Click Upload Plugin for Jquery. IE7 and IE8 is requiring me to do a double click to display the upload dialog box!

Solution: The one-click upload technique uses a trick that sets the file input’s browse button directly in front of your mouse cursor. This is misbehaving in IE7/IE8 due to how they handle CSS, this can be resolved by directly setting the cursor position through javascript instead. You can fix the problem by editting the script and updating the following lines (highlighted in bold):

Somewhere on line 87:

/** Move the input with the mouse to make sure it get clicked! */ container.mousemove(function(e){    input.css({        top: e.pageY-container.offset().top+’px’,        left: e.pageX-container.offset().left-175+’px’    }); });

Finally, we need to set the margin css property to 0, you can find it somewhere on line 63:

/** File Input */ var input = $(        ‘<input ‘+        ‘name=”‘'” ‘+        ‘type=”file” ‘+        ‘hidefocus=”true” ‘+      ‘/>’ ).css({      background: ‘#ffffff’,      position: ‘relative’,      display: ‘block’,      marginLeft: 0+’px’,      opacity: 0 });

That’s it! Hope this helped!

How to: Delete/Remove protected folders and files from a previous installation of Windows


Problem: I’ve decided to re-install windows because of some issues. My new install is ok but I can’t delete the directory of my old windows anymore!

Solution: The folder you are trying to delete has it’s administrative privileges locked from your previous windows. You could change the ownership of your folder by right clicking on the folder -> Properties -> Security -> Advanced -> Owner -> Edit -> Select Administrator and put a check on “Replace owner on subcontainers and objects”

An Easier Solution: You can also do a command prompt to remove the ownership which is a more straightforward process. To do this, press your window’s Start button, type “cmd”, right click on the “cmd” program that shows up, right click and select run as administrator (running the command prompt with administrator privileges is important).

In the command prompt, enter the following command:

cacls “c:\WINDOWS.OLD” /t /g administrators:F

Note: Don’t forget to change the drive letter and path above to the locked folder.

That’s it! You can now delete this folder.

Super Tip: Pass Arguments in your Python Bindings using Lambda Functions

| No Comments »

Problem: Help! How can I pass parameters in my Bindings?

Solution: By using lambda functions in python(Check your PL’s manual for anything similar), you would be able to create on-the-fly functions that returns your bindings with the extra parameters/arguments you want to pass.

Example 1: Passing an argument to a wx Button Event

btn = wx.Button(self, 10, “Button”, (10, 10)) self.Bind(wx.EVT_BUTTON, lambda event: self.OnClick(event, ‘passthis’)) def OnClick(self, event, somearg):    print somearg

Example 2: Passing an argument to Pyhook’s HookManager.KeyUp Event

hook = pyHook.HookManager() hook.KeyUp = lambda event: OnKeyboardEvent(event, ‘Pass Me.’) hm.HookKeyboard() def OnKeyboardEvent(event, myarg)   print myarg

That’s It!

Super Tip: Rasterize a layer with it’s effect in Photoshop

| No Comments »

Problem: Help! My mask clipping isn’t working because of the my layer’s overlay effect! I need to rasterize my effects first but I don’t know how!


Step 1: Select the layer with the effects you want rasterized. Step 2: Press Control(CMD for Mac)+Shift+N to create a new layer. Step 3: Add the layer from Step 1 to your selection by holding Shift and clicking on the Layer. Step 4: Press Ctrl(CMD for Mac)+E to merge the two layers and voila! your effects are now rasterized.

__Note__: This tip is especially useful for mask clipping to a layer that have some gradient/color overlays.

A MySQL query to find & replace text in your database

| No Comments »

Problem: Help! I need to replace some words with something else in my database.

Solution: Use the replace() function to do a search and replace query.

UPDATE table_name SET table_field=REPLACE(table_field,"old_text","new_text");

Here’s an example:

UPDATE wp_posts SET post_content=REPLACE(post_content,"localhost","");

Easy as pie!

How to: Remove those nasty question marks with a diamond symbols that appears in your website


Problem: Help! I’ve pasted some text from Microsoft Word and saved it to my SQL database! Now whenever I print my text there’s a bunch of diamonds with a question mark symbols appearing!

Solution: You are trying to display characters that are outside your page’s character set, you have to tell your browser that you need to display characters from the iso-8859-1 set so it will know how to render them correctly.

Simply put the following inside your website’s <head></head>

<META http-equiv="Content-type" content="text/html; charset=iso-8859-1">

and in PHP(or any other similar language), simply put this at the top of your page(for other languages, look for an identical function):

<? header("Content-type: text/html; charset=iso-8859-1"); ?>

and voila! Your characters should now be displayed correctly.

Super Tool: (Probably) the best SQLite Editor/IDE for web development and production use

| No Comments »

I really love SQLite. It’s lightweight and got a really small footprint. I use it as my database initially when i’m creating web applications(I then move to mySQL during production), the only issue I have is the lack of IDE for working with it. Of course there’s SQLite Administrator, i’m just not into the idea of installing a software especially with SQLite being small(I prefer not to cramp up as much software possible in my Windows).

This is where sqlite-manager comes along. It’s a 100kb plugin for Firefox(which also means cross compatibility with other OS), it’s a great complement to SQLite’s lightweight and small footprint. If you need to work with the database, you simply fire up sqlite-manager from the Tools menu.

That’s It!

How to Fix: I’m unable or can’t copy, move or delete files in MAC because of insufficient privileges or permissions

| No Comments »

Problem: My Mac OSX is complaining that the files im about to copy or move doesn’t have sufficient privileges or permissions!

Solution: Simply use the CHMOD trick here to recursively set all your files and directories permissions. After these are set, you will now be able to copy, move or delete these files.

You need to have administrative privileges for the following to work.

1. Open Terminal by typing Terminal in your spotlight(click the magnifying glass on the top right or press CMD+Spacebar on your keyboard). You can also open terminal from your Applications folder. 2. Type cd <Type the directory you want to give yourself permissions to here...>  3. Type the following commands(enter your password when it asks): sudo find . -type d -exec chmod 755 {} \; sudo find . -type f -exec chmod 644 {} \;

That’s it! You can now backup, copy, move or delete these files.