Determining the Element Clicked on in jQuery

In jQuery, you can easily find out when an element itself is clicked on, but binding with the click event, like so...

$('#MyElement').click(function(event) {
console.log("I just clicked the element with the id of Myelement!");
});

But in more complicated scenarios, several elements will trigger a shared function, and you need to know which element was clicked from that shared function.

That would be like this...

$('#MyElement').click(function(event) { return doSomething(event);}
$('#MyOtherElement').click(function(event) { return doSomething(event);}

In this case, you could find out which element was clicked by using the event object...

function doSomething(event) {
console.log("Just clicked the element with an id of..." + event.target.id);
}

The event.target object will tell you almost everything you need to know about what was clicked.

Capturing a Key-Press/Key-Down Event for the Enter Key in jQuery

You may want to capture an enter key action whenever the user hits the enter key. This can be used to submit a form without having to use the mouse, or it can provide some other feature.

To do this, we bind the keydown() event to the document, and check the event to make sure it is 13 (the enter key). A different integer represents a different key (27 is the escape key, etc.).

We do the binding like this...

$(document).keydown(function(event) {
if (event.which === 13) {
// do something now that the enter key is hit
}
});

You can also use the keypress() event. But there is a problem with keypress -- this event does not fire for the escape key, or the up-down arrows. It only fires for keys whose purpose is to create a character.

Using jQuery to Change or Set Background-Color

You can change the background-color of any element easily in jQuery. All you need is any of these...

$(this).css('background-color', 'red'); // red
$(this).css('background-color', '#000'); // black
$(this).css('background-color', '#00FF00'); // green

If you are not dealing with a jQuery event-handler (where "this" is available), you can use a selector to get and adjust any element's background-color, like so...

$("#MyElementId").css('background-color', 'red'); // red
$("#MyElementId").css('background-color', '#000'); // black
$("#MyElementId").css('background-color', '#00FF00'); // green

Not only can you change any background color now, but you can use the same process to adjust any part of an element's style.

How do I create an Iframe and insert it into my webpage with only JavaScript?

There are times when you will want to create and insert an Iframe page onto the current page the user is on.

This gives you a number of advantages, like allowing you to load a whole new webpage or website in the iframe (though some sites disallow others to use them through iframes, such as Google).

In JavaScript, the code to create the iframe is this simple..

var iframe = document.createElement('iframe');
iframe.src= "http://www.earthfluent.com";

You'll notice that, it won't be a very useful iframe unless you define some basics, like width and height...

iframe.width = "200";
iframe.height = "200";

Then you append it to your document with JavaScript...

document.getElementById("PlaceIframeHere").appendChild(frame);

Or with jQuery...

$("#PlaceIframeHere").append(frame);

Removing Windows ^M Characters From Linux Vim Editor

If you open a document in vim, and you see it littered with ^M characters, that means that someone saved this document in MicroSoft Windows.

But the problem (^M characters, not MicroSoft) is easily fixed!

Simply typing this with the CARROT and M keys will not be enough...

:%s/^M//g

The ^M can be produced by hitting the control key and V, and then, hitting the control key and M.

Once that command is executed with the correct control-key sequence, you will have document freshly cleaned of ^M characters.

Why is Varchar(255) in MySQL when 2^8 is 256?

If you look in many database implementations, you will see that VARCHAR limits are not at 256 (2^8), but they are at 255.

This 255/256 value is the number of characters storeable in the field. If the index starts at the 1st character, you would think that it should end at the 256th character, because 2^8 = 256.

According to the MySQL documentation, the size of a varchar field is actually "1 + (0 to 255 bytes)", or "2 + (256 to X bytes", if over 255.

Source: https://dev.mysql.com/doc/refman/8.0/en/storage-requirements.html

That delimiting mark, between 255 and 256 bytes, is defined not by logical limitations of data storage, but by the MySQL implementation itself. By using the 255 limit, you are using one less byte than if you had 256.

This is so that MySQL can count the length of a field (from 0 to 255, not from 1 to 256) in a single byte.

Be aware, though: If any of the characters are UTF-8, that means they will be multi-byte encoded, and this will definitely go over the 255 byte limit in MySQL and use the extra byte, even if it doesn't warn you of that.

What are MySQL's Text Max-Length Limitations?

If we look at the MySQL docs, we can see that there are certain limitations to the length of Text-type fields in the MySQL DB...

TINYBLOB, TINYTEXT: Can Store 255 Bytes (2^8 - 1 bytes)
BLOB, TEXT: Can Store 64 KB (2^16 - 2 bytes)
MEDIUMBLOB, MEDIUMTEXT: 16 MB (2^24 - 3 bytes)
LONGBLOB, LONGTEXT: 4GB (2^32 - 4 bytes)

Source: https://dev.mysql.com/doc/refman/8.0/en/storage-requirements.html

You may also want to consider CHAR() and VARCHAR() types when taking into consideration fields that can store text and their limitations.

Speed Up and Secure SSH to Linux by Disabling GSSAPI-Authentication

Every time you try to connect with SSH after you enter your username, GSSAPI Authentication will attempt to authenticate you using the Kerberos protocol.

The problem with this is that nobody sets up GSSAPI Authentication services: this is both a waste of time and a security risk, as you are attempting to authenticate a service that you're not hosting, and is therefore prone to "Man in the Middle" attacks.

Unfortunately, GSSAPI Authentication with SSH in Linux is the default option. You can easily turn it off by doing the following. Open the SSH config file...

[user@localhost /]$ vi etc/ssh/ssh_config

And then find this line...

Host *
GSSAPIAuthentication yes

You may not have GSSAPIAuthentication set there yet, but you will want to find the line beginning with Host *. And then you can adjust it like so...

Host *
GSSAPIAuthentication no

Now your SSH will load instantly and securely.

Detect a CheckBox's Checked Status in JavaScript or jQuery

Checkboxes are an important part of forms, and knowing whether they are checked, in JavaScirpt and jQuery, can be very useful.

Standard checking in JavaScript is very simple...

console.log("Checked status?" + document.getElementById('MyCheckBox').checked);

Checking in jQuery is similarly not very difficult...

console.log("Checked status?" + $('#MyCheckBox').is(":checked"));

If you have a newer version of jQuery (v. 1.6+), the following will also work...

console.log("Checked status?" + $('#MyCheckBox').prop('checked'));

Make sure not to mix these up, or you will get bad results. jQuery selectors return an array of matched elements. If you try to look at $('#MyCheckBox').checked, you will always see false, whereas $('#MyCheckBox')[0].checked would be more likely to work.

Removing Symbols from a UTF-8 String and Retaining the Characters in PHP

You will often have strings that contain symbols, where you only want to extract just the text component of this string.

Using a regular expression (regex) in PHP, you can do this quite easily...

$string = "12345-hello, 汉语!!!";
$string = preg_replace('/[^(\p{L}\p{N}\s)]/u', '', $string);
print($string); // output is: 12345hello 汉语

Each part of the preg_replace here can be explained without much effort.

/regex/u - The two slashes indicate what is matched against. The U indicates UTF-8.

[class] - Within this, the two brackets indicate the one single class of values considered valid.

^(values) - We are looking for things that do not match values.

\p{L} - This value is all UTF-8 characters.

\p{N} - This value is all numbers.

\s - This value is all white spacing.

So, anything that doesn't match a letter, a number, or a space (i.e., /[^(\p{L}\p{N}\s)]/), is replaced with '', or the empty string.