Web Development

Profile link system site.com/username Apache

2011-06-06T11:19:00.000-04:00

This one is fairly simple but took me a while to figure out due to lack of examples/how to on the web for this thing:

Make sure your server has mod_rewrite on! That one is easy to figure find a how to online if you are not sure.
Then, make sure you have a .htaccess file you can modify or create
Link a unique field to a user id in the Database so he can chose his site: EG: On google for example, it would look like www.google.com/neobahamut20
In your .htaccess file, add the following:# PROFILER RewriteEngine On RewriteRule ^([\w_-]+)$ profile.php?u=$1 # END PROFILER
And it should work. Make sure however that you do not allow dots when the user chooses his name with this one as it will not be found instead of redirecting to a profile page.
Don't ask why this need a ^ at the beginning when normally the regex wouldn't require one. (if you know, please comment!)

Jquery Tools

2011-05-31T11:01:00.000-04:00

Since Jquery, Web designing has been much easier, that part, everyone knows. However, for a real user experience, that wasn't fixed, until the team at flowplayer.org released Jquery Tools, a library based on the JQuery framwork offering various tools for the developers. Here are the tools:

Tabs (Feels familiar, just like Windows' tabs)
Tool tips (Best way to show optional info)
Overlay (Includes expose & mask)
Scrollable (Gallery surfing)
Form (Date input with calendar amongst others)

No amount of words can describe what those tools do. It is best to see for yourself. The demo page can be found here.

How to time code execution in PHP

2010-06-28T15:45:00.003-04:00


$time_start = microtime(true);    
$time_end = microtime(true);
$time = $time_end - $time_start;




//code to time here


echo "go asset options & percentages in $time seconds\n";

Trying large youtube video

2010-01-25T22:26:00.002-05:00

voila!

Display arrays vertically instead of horizontally in HTML via PHP

2009-12-07T17:17:00.001-05:00

This one doesn't use JQuery: Instead its just php.

After trying out some very complex possible solutions that just didn't work, I figured out the simplest way to reorder my arrays to make them ready for the html page load.
So for example, if you have an array containing this order from say a SQL query:

1   2   3
4   5   6
7

And you want it to display like this:

1   4   6
2   5   7
3

In your php code (because it executes way faster than it would using jquery) you need this:


function reorderVertically($arr_base)
{

//the new array to store your reorganized data

        $arr_at = array();
//the total items in the orginal array        
        $cnt = count($arr_base);
//the amount of rows
        $amt = $cnt/3;
//the columns containing an extra row
        $rest = $cnt%3;
//the value of the next item to copy. Starts at 0 because the first item is always 0
        $next = 0;
//for the amount of items in the old array 
        for($i = 0; $i < $cnt ; $i++)
        {
//copy the item
            $arr_at[$i] = $arr_base[$next];
            
//calculate next value
            $inc = ($i % 3 < $rest) ? ($amt+1):($amt);
//set next value
            $next = $next + $inc;
            
//get real next - because if you dont, it goes out of range fast ;)
            $next = ($next > ($cnt-1)) ? ($next - ($cnt-1))  : ($next);
        }
return arr_at;
}

Now the end result will give you:
0   3   5
1   4   6
2

instead of:
0 1 2
3   4   5
6

Aion MMORPG - Symbols in chat

2009-10-13T18:32:00.001-04:00

Copy paste the following symbols (the squares) in the chat lines in Aion
Just try to be less annoying than spammers!

 Kinah
 red up arrow
 blue down arrow
 red up arrow 2
 blue down arrow 2
 alert (red exclam point)
 green button 1
 green button 2
 red button 1
 red button 2
 abyss point coin
 checked guy
 equal sign
 dog face
 shield
 gray dog face
 tree
 roman 1
 roman 2
 roman 3
 roman 4
 1
 2
 3
 4
 MT1
 MT2
 Zzzz
 No Mudkips allowed (red barred circle)
 Blue arrow
 Smiley
 Star
 Heart
 Bomb
 Skull
 target 1
 target 2

Everything in 1 line:
                                    

Regex for a youtube video PHP

2009-09-21T16:54:00.004-04:00

This post is about a regex for a youtube address as well as embedding it yourself, all in php.

First off, all youtube videos have the following address:
http://www.youtube.com/watch?v=XxXXxXXxXxX <-- not a tested link

In each of those, you will find a v=11 character code. So what you need if a user gives you such a link for his video, you must extract the 11 char code of the string only. So the code to do that is


$link = $_POST["youtubelink"];

preg_match("/v\=([\-\w]+)/", $link, $matches);
$link = $matches[1];/*matches[0] includes the v= and you dont want that*/

To embed the video in your page, you can use the usual youtube embed code (even if the embedding is disabled, but your users should have it enabled unless you actually attract WMG to your site, in which case you should just ban them because they're retarded)
Here is the code:


$linkcode = $link;//11 char code 

$arr[$i]["src"] ='<object height="344" width="425">       
<param name="movie" value="http://www.youtube.com/v/'.$linkcode.'&hl=en&fs=1&" />
<param name="allowFullScreen" value="false" />
<param name="allowscriptaccess" value="always" />
<embed allowfullscreen="false" allowscriptaccess="always" height="344" src="http://www.youtube.com/v/'.$linkcode.'&hl=en&fs=1&" type="application/x-shockwave-flash" width="425" />        ';

You can always change options too, its just typical object/embed code :)

Jquery: Checkbox and change

2009-09-08T18:57:00.000-04:00

Jquery has a nice function called change ($(element).change(function(){});

Sadly (as usual) that piece of shit browser named Internet Explorer, wont trigger it.
Soon enough (on private sites) i'll have to start adding a browser check at the start of every page using the following pseudo code:

if browser is IE
display "Sorry but your browser is broken, get firefox! (link: www.getfirefox.com)"
else
display page

For now, the quick workaround is to use the click method on the input, like so:


$("input._alerts").click(function(){alert("chk was clicked");});

Ajax Upload

2009-09-01T12:02:00.000-04:00

Impossible! But it looks like it for the end user.

That's right, it is NOT possible to upload files via Ajax. However, it's possible to come pretty close, and with this site, you can get a good looking upload button that looks like web 2.0.
Take a look at Andrew Valum's ajax upload page

For JQuery users: View this demo
(use this JS file: ajaxupload.3.6.js (at the time of this writing) found in the source of the jquery demo page)

Number Only in text fields

2009-09-01T11:38:00.002-04:00

Using javascript you can set fields to accept certain characters only using Regex strings. In the following I put the "_decimalonly" class to my text inputs, and with JQuery, when the page is loaded, all the inputs with the "_decimalonly" have the validations implemented.

Here are a few I use for inputs:

Variables for on keypress validation
var decimal = new RegExp("[-|0-9|\.]+");//decimal
var monetary = new RegExp("[0-9|\.]+");//monetary

var integer = new RegExp("[0-9]+");//positive integer
var neginteger= new RegExp("[-|0-9]+");//negative integer

Variables for on blur (submit also) validation

var decimalb = new RegExp("^-?[0-9]*\.?[0-9]{1,}?$");//decimal

var monetaryb = new RegExp("^[0-9]*\.?[0-9]{1,}?$");//monetary

var integerb = new RegExp("^[0-9]*$");//integer

var negintegerb = new RegExp("^-?[0-9]*$");//negative integer

Examples:

Example of on blur:

$("input._decimalonly").blur(function(){

var number = $(this).val();

var re = new RegExp("^-?[0-9]*\.?[0-9]{1,}?$");//monetary

if(re.test(number))

{

//its a valid number

}

else

{

$(this).val("");

}

});

Example of on keypress:

$("input._decimalonly").keypress(function(e){

if(e.which == 8) //for the backspace :)
{
return true;
}
var number = String.fromCharCode(e.which);

//var re = new RegExp("[-|0-9|\.]+");//decimal
var re = new RegExp("[0-9|\.]+");//monetary
if(re.test(number))
{
return true;
}
else
{
return false;
}
});

Changing Autocomplete BG Eclipse 3.1

2009-08-01T17:35:00.000-04:00

To change the background color for the autocomplete feature in eclipse 3.1, note that it's actually called "Content Assist"

You can change it in General ->Appearance ->Colors and Fonts -- Basic - Content Assist background color