Netbean chinese character problem

Probably happen in my pc (Window XP Home)
Create a new .php file, then when I paste the chinese character it show all right

Problem rises when the display (like export into PDF)
This is because the character encoding for the netbeans (NetBeans IDE 6.9.1) is not UTF-8

So simply fix this problem by changing the file type. As for me, I'm using notepad2 to change to file type into UTF-8. Below is the example

http://localhost/search/

Get element style in string

You have an element. You want to get the style applied into it. Where the format is string

eg: <a id="hupla1" style="width: 300px;">HELLO</a>

So you want to get "width: 300px;"

I refer from here http://objjob.phrogz.net/css/object/243 maybe you can find better solution and any alternative.

But my solution is document.getElementById('hupla1').style.cssText

Disable history back if pressing backspace

If you press backspace on the website page (but not on textbox) it will go to its previous page
This is to disable them

Taken from here, then I modified
http://www.sitepoint.com/forums/javascript-15/disable-back-javascript-168890.html

These is javascript coding

//DISABLE "GO BACK TO PREVIOUS HISTORY" IF PRESSING "BACKSPACE"
if (typeof window.event != 'undefined')
    document.onkeydown = function()
    {
        if( event.keyCode == 8){
            theEvent = event.srcElement.tagName.toUpperCase();
            if( theEvent == 'HTML'){
                return false;
            }
            else if( theEvent == 'INPUT'){
                theType = event.srcElement.getAttribute('type').toUpperCase();
                //alert(theType);
                switch(theType){
                    case 'TEXT':
                        return true;
                        break;

                   default:
                        return false;
                }
                return false;
            }
            else{
                switch( theEvent){
                    case 'TEXTAREA':
                        return true;
                        break;

                    default:
                        //alert('Backspace pressed on ' + theEvent + ', return false');
                        return false;
                }

                return false;
            }
        }
    }
else
    document.onkeypress = function(e)
    {
        if( e.keyCode == 8){
            theEvent = e.target.nodeName.toUpperCase();
            if( theEvent == 'HTML'){
                return false;
            }
            else if( theEvent == 'INPUT'){
                theType = e.target.getAttribute('type').toUpperCase();
                //alert(theType);
                switch(theType){
                    case 'TEXT':
                        return true;
                        break;

                   default:
                        return false;
                }
                return false;
            }
            else{
                switch( theEvent){
                    case 'TEXTAREA':
                        return true;
                        break;

                    default:
                        //alert('Backspace pressed on ' + theEvent + ', return false');
                        return false;
                }

                return false;
            }
        }
    }

javascript detect and capture keyboard keycode

These is how to capture what user have type in their keyboard
The captured data is the "keycode" which is an integer

Like 'enter' key, the code is 13

Some data that I have discover and might be usefull to others and myself
These was tested and the same for IE, Firefox, Google Chrome and Safari

a until z	keycode 97 until 122
A until Z	keycode 65 until 90
0 until 9	keycode 48 until 57

---

Lets get to the code

function whatKeyCodeHaveIType( theEvent)
{
    charCode = (theEvent.which) ? theEvent.which : theEvent.keyCode

    theTempoElement = document.getElementById('thisiswhatyouhavetpye');
    theTempoElement.innerHTML = theTempoElement.innerHTML + ', ' + charCode;

    //This is to ignore "ENTER" key. Its usefull to prevent a form from autosubmit if you press enter
    return (charCode != 13);
}

//Later in HTML, use these
<input id="whatyouhavetype" style="width: 500px;" onkeypress="return whatKeyCodeHaveIType(event);"/>
<textarea id="thisiswhatyouhavetpye" cols="70" rows="5"></textarea>

Type something here :

javascript detect finish typing keystroke delay autocomplete

Okay, the title might be confusing but here is what these about

You want to execute certain function, right after the user has finish its typing

These is different from normal 'keypress' or 'keyup' or 'keydown' event detection because these will execute a function every key is press. Right now you want to give certain delay so that the function only execute at the right time

These is important if you developing an autocomplete (AJAX) because you dont want to execute the script too much. Typing "HELLO" means you do the SQL statement 5 times
H
HE
HEL
HELL
HELLO

But if you do a proper keystroke delay (detect user finish typing) you will only execute the SQL statement once
HELLO

---

Cut to the story, hopefully understand what I was trying to explain at the top

Here is the function

var typingTimer;
var doneTypingInterval = 700;

//Detect keystroke and only execute after the user has finish typing
function delayExecute()
{
    clearTimeout(typingTimer);
        typingTimer = setTimeout(
        function(){somethingExecuted('typesomethinghere')},
        doneTypingInterval
    );

    return true;
}

function somethingExecuted( theInputName)
{
    alert( "You have type '" + document.getElementById(theInputName).value + "'");
}

//Later in the HTML code, put these
<input onkeypress="return delayExecute();" id="typesomethinghere">

Type something here : (These input id is 'typesomethinghere')
The script will only execute after you finish typing. By assuming when you have stop typing for 0.7 seconds, means you have finish typing

Type something here :
These is what happen if you dont use the script

Prevent mail from spam or junk by encryption from crawler

If you write a blog and put your email on it. There is a chance for you to get Spam/Junk mail
This can be cause of many reason but I'm focus on crawler method

How this spam works?
Basically this is the procedure
1. They find your email
2. They write email to you

Spam usually include 1000 email or more and of course it is done by using a bot (a system) and not just people manually type in

To find your email
They using web-crawler, spam-crawler or anything-crawler. These crawler will browse slowly through the internet (from blog to blog, website to website until forever). If your blog put an hyperlink of your friend blog (blogroll they called) these crawler will go into it

Thus in, programming these crawler detect 2 things

1st detection
Detect "http://" text. If they found and word, URL or string match. They will retrieve the link and put in on the "Next going to be crawl list"

2nd detection
Since they want to spam to your mail, they simply find any string or word with "@" symbol. Thus your email will be captured in these process

Write email to you (spam)
These is a process of producing mass email and of course they use the list they got from the first step and use a bot (system) to mass mail it

---

Prevention

There is 2 type of prevention
1. Email filter (thats why you have spam/junk mail categories)
2. Prevent your email from being on the spammer list

1st prevention - Filter your mailbox
This is already common and build in feature for almost all email system like gmail and others. So no need discussing much

2nd prevention - Prevent from listed
This is what I want to discussed about
Usually people will make their email not in easy format or encryption.

Using different email format like (let say your email is ajskdhqjeakjbdia@gmail.com)

Email: ajskdhqjeakjbdia (@gmail)

Email: ajskdhqjeakjbdia at gmail dot com

Or they use encryption like these

ajskdhqjeakjbdia@gmail.com
(It looks normal but it is actually encrpted)

So these encryption can be easily google. But I'm suggesting you the simplest one which taken from these website http://www.web-designz.com/tools/email_encoder.shtml
Note: The simplest method might also means it is easily detectable by the crawler

If you are a programmer and wandering how did the website do the answer is they are using convertToUnicode(...) function

If you view the page source. It wont show and "@" or your email at all because it is encrypted and of course the crawler is a system, they read the page source and not reading like you did (using web browser)

-End-

GIMP save for web image optimize reduce size

If you are using Windows and want to upload huge picture size into the internet (or blog) optimize it first using Adobe Photoshop 'save image as web' feature. It can reduce image size and make your image to load faster!

Story
Im using ubuntu and they dont give adobe photoshop crack for free :(
But I need adobe photoshop 'Save image as web' feature.
Ubuntu only provide me 'GIMP' but I found the same feature as a plug-in

Straight to the source. I copy from here http://www.techzilo.com/install-save-for-web-gimp-plugin-ubuntu/

What is 'Save image for web' ?
Save image for web is a technology to compress the image size so it can load faster in the internet

Weakness
Reduce the image quality. But this wont affect much (unless you have super vision)

Advantages
Image load faster

Conclusion
The advantages overcome the weakness make this a good thing to share!

Others
I was kinda lazy to write the thing back cause the source it self is already 100% fool proof

Make a horizontal list

This is more like HTML & CSS tutorial to make ordered list to go vertical

This is order list (normal)

• Hello
• This is
• Testing

This is order list (horizontal)
I actually copy the code from this guy http://leandrovieira.com/projects/jquery/lightbox/

<style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>

<div id="gallery">
 <ul>
  <li>Hello</li>
  <li>This is</li>
  <li>Testing</li>
 </ul>
</div>

The result

• Hello
• This is
• Testing

Write blog post using TinyMCE

Google blog text editor has improved!.They have "Edit HTML" or "Compose" tab (like below)

HTML UTF encoding entities

I was doing some project require math symbol. The key was not exist in keyboard
The website that I use as reference is

http://www.fileformat.info/info/unicode/char/b1/index.htm

The link is a plus minus symbol (±). You can search fur further symbol at the top left

Or also here
http://www.danshort.com/HTMLentities/index.php?w=hertz

jQuery navigation menu

Im not sure does anybody know about this. Think it will be easier to find in google
Below is the link for website that show example on jQuery navigation menu

36 Eye-Catching Jquery Navigation Menus
http://www.1stwebdesigner.com/resources/36-eye-catching-jquery-navigation-menus/

By the way, the website it self http://www.1stwebdesigner.com is totally awesome for me

Smarty array

Case: Want to make a loop but need to check "the value is an array" or "the value has a value". I'm using smarty code template (.tpl file). Keep having this problem so I job this down to myself

Reference
http://www.smarty.net/forums/viewtopic.php?t=9891

Rewrite it back
use count() -> http://uk.php.net/manual/function.count.php
or isset() -> http://uk.php.net/manual/en/function.isset.php
or empty() -> http://uk.php.net/manual/en/function.empty.php

Maybe later want to write how to create a loop from the array data... but quite lazy rite now

PHP ' become &#039;

in PHP What happen when I output the string into text file is
The character ' become &#039;

Copy this &amp;#039; to create this &#039;

&#039; is a html character special code that represent ' symbol
Means it will display correctly as ' if you see it in web browser

Simply solving the problem by html_entity_decode( "&#039;", ENT_QUOTES)

Note that html_entity_decode( "&#039;") will not work
I found this solution in some page (didnt remember the site URL, sorry >.<)

So what is this html_entity_decode(...) function?
It is use to convert special html character into the normal character
Detail was in http://php.net/manual/en/function.html-entity-decode.php

The inverse of it was htmlentities(...)
Detail was in http://www.php.net/manual/en/function.htmlentities.php

Web Graph

I surfing the net and come across with this http://www.rgraph.net

It provide you with a graph creation for website development. Pretty nice compared with JPGraph

Its a free for non business (only 1 time payment for business)

HTML CSS Change Paragraph Spacing

I do some google to change my website design to change paragraph spacing and come across to this page. Its show the link that related to it

The site is http://answers.google.com/answers/threadview/id/783141.html

While the reference website is

• http://lab.artlung.com/change-space-between-paragraphs/
• http://www.w3schools.com/css/css_margin.asp
• http://www.westciv.com/style_master/academy/css_tutorial/properties/margin.html

All the link given is suggesting you to using css margin.
As for me, by using this already enough

<p style="line-height: 200px;">Hello World</p>

Rounded border

After several research.
Here is the thing that is needed to create rounded rectangle.
This works on FF and GC. Not on IE and dont know on others

-moz-border-radius: 20px 20px 20px 20px; background: none repeat scroll 0 0 #D8DEEF;
border-bottom-left-radius: 20px 20px;
border-bottom-right-radius: 20px 20px;
border-top-left-radius: 20px 20px;
border-top-right-radius: 20px 20px;

Highlight table row when on mouse

What does this do?
Its highlight the table row when your cursor on the row
This is using CSS not using javascript.

Put this thing in your css

<style type="text/css">

.tablestes tr:hover { background-color: lime; }

.tablestes td:hover { background-color: red; }

</style>

And inside the html. name the table class into "tablestes"

<table class="tablestes">

<tr><td>Row 1</td></tr>

<tr><td>Row 2</td></tr>

<tr><td>Row 3</td></tr>

</table>