[Tip] How to pass an array as an argument to a function.

| No Comments »

Problem: Help! Iis it possible to pass the values of an array as an argument in my function?

Anwer: Conveniently, Yes! You can indeed use set an array as the argument of a function.

var mapArgs = [0,20,50,10];
draw.apply(this, mapArgs);

function draw(x1,x2,y1,y2)
{ // do something…
alert(x1 + ‘ ‘ + x2 + ‘ ‘ + +y1 + ‘ ‘+ y2);
}

Of course you can use it in a more creative way

var run = { ready : [“Is this awesome?”], getset : [“or…”], go: [“What?!”] }
var func = {
ready: function(str)
{
alert(str);
},
getset: function(str)
{
alert(str.toUpperCase());
},
go: function(str)
{
alert(str + ‘!!!’);
}
}

for (x in run)
func[x].apply(this, run[x]);


[Super Tip!] How to loop or iterate over an object’s key/value pair.

| No Comments »

Problem: Help! Is it possible to loop or iterate through each object’s key/value pair like an array? Answer: A very useful trick for iterating over objects is the use of (for x in object), with this you can completely use objects as array!

myObject = {
“this” : “value1”,
“is” : “value2”,
“awesome” : “value3”
}

for (x in myObject)
alert(‘key : ‘ + x + ‘ / value : ‘ + myObject[x]);


[Solution] How to use this in setInterval and setTimeout problems inside objects

| No Comments »

Problem: One of the problems we find when using setInterval and setTimeout functions in javascript is how the special variable this is switched to the window object on the instance the function executes inside the interval.

Answer: Store the current object in a variable (for this example, the variable is called self) and use that variable for your interval’s function instead of this.

function foo()
{
this.init = function () {
var self = this;
this.interval = setInterval(function(){ self.update(); }, 1000); // this can be setTimeout
};

this.update = function () {
this.counter++;
console.log(this.counter);
};
}

Json Example


mySQL Super-tip! How to comma-delimit or comma-separate your query results!

| No Comments »

_Problem_: Help! I’d like to make it so my query results to be a comma delimited format!

_Answer_: No problemo! Simply use mySQL’s group_concat function and you’ll get your results in comma delimited values!

SELECT GROUP_CONCAT(id) FROM users WHERE authenticated=1 ORDER BY NULL LIMIT 1 Note: (Optional) ORDER BY NULL is used to prevent unnecessary sorting with filesort

This query would result to: 1,3,4,6,11

That’s It! This is pretty useful when you are going to use the SELECT… IN statement for your subqueries.


mySQL: Simplify your multiple WHERE queries with WHERE in

| No Comments »

_Problem #1_: How do I simplify my mySql where queries? _Problem #2_: How can I search through an array in my where statement?

Answer: An awesome trick when it comes to querying multiple where clauses is to use the WHERE <…> IN command.

$id = ‘1,4,3,6,8,2’; “SELECT * FROM <…> WHERE id IN ($id)”

Oh and did I mention you can prepend the NOT statement to show results which is NOT included in the list?

$id = ‘5,7’; “SELECT * FROM <…> WHERE id NOT IN ($id)”

Oh-Some!


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

| 2 Comments »

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

| 25 Comments »

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=”‘+options.name+'” ‘+        ‘type=”file” ‘+        ‘hidefocus=”true” ‘+      ‘/>’ ).css({      background: ‘#ffffff’,      position: ‘relative’,      display: ‘block’,      marginLeft: 0+’px’,      opacity: 0 });

That’s it! Hope this helped!


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!


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

| 3 Comments »

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.