Adding Custom Messages to Code Snippets Displayed on Your Web Page

Hi guys, just a quick post to show you how to add custom messages to your code snippets that you are displaying on your web page. An example is on the blog below (code shown below look at the top right hand corner) where I wanted to add extra usability to the code snippets by [...]

Read more

Dynamically Load jQuery Library Using Plain JavaScript

This is how you can load the jQuery library using plain JavaScript. As the load takes place asynchronously so i’ve included a callback version too so you know when the script inserted has completed and you can start using jQuery! I previously posted about inserting scripts into secure pages so there are more options for [...]

Read more

jQuery Function to All Clear Form Data

Pretty useful jQuery Function to clear all form data which I found on Karl Swedberg’s website. It simply removes all data from the form including text inputs, select boxes, radio buttons, checkboxes etc… There are two versions and the second version is probably more useful as you can apply it directly to the DOM element as a jQuery function.

function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

jQuery Element Function

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};
//usage
$('#flightsSearchForm').clearForm();

Source

Read more

jQuery Removing Bad Charaters in HTML

I previously wrote about using jQuery to Strip All HTML Tags From a Div. Now if you want to remove all bad character from a HTML string (which may have been provided by a $.getScript() call or such).

This is how you can easily clean up your html and remove bad characters, it could be useful when you get the html from somewhere and you want to .match() for strings but the .match() throws an error because of bad characters. We can do this using regex and still retain our HTML tags like so:

//clean up string/HTML (remove bad chars but keep html tags)
rawData =  rawData.replace(/[<>^a-zA-Z 0-9]+/g,'');

If we wanted to be extra specific we could also remove other common characters which are not needed:

///clean up HTML ready to be used with match() statement
rawData =  rawData.replace(/[^\/\\\"_+-<>=a-zA-Z 0-9]+/g,'');

cleanHTML() Function

I wrote this little function to help with the process of cleaning up the HMTL ready for using regex on it.

/* clean up HTML for use with .match() statement or regex */
var JQUERY4U = {};
JQUERY4U.UTIL =
{
	cleanUpHTML: function(html) {
		html = html.replace("'",'"');
		html = html.replace(/[^\/\\\"_+-\?!<>\[\]{}()=\*\.|a-zA-Z 0-9]+/g,'');
		return html;
	}
}
//usage:
var cleanedHTML = JQUERY4U.UTIL.cleanUpHTML(htmlString);

More Copy and Paste Regex Examples

Read more

Attempt at Animating Colour Transitions using jQuery

I have mentioned the .setInterval() function before. I used this function while creating a script which would (in theory) animates colour transition using jQuery. For example, go from white to light red to red to dark red such as a opacity transition would.

Initial Attempt at Animating Colour Transition

Here is my attempt. Note that the initial results were not very good so I didn’t waste anymore time coding it but posted here mainly for my reference.

$('#input-page-url').css('border-color','rgb(255, 255, 255)');

var r = 0, g = 0, b = 0;
var interval = 25;
var borderWidth = 0;

var animateLoop  = setInterval(function() {

/* exit loop if out of colour range */
if ((r+interval) > 255) { r = 255; clearInterval(animateLoop); }
else { i++; r += interval; borderWidth += 0.2; }

$('#input-page-url').css(
      {
         'border-color': 'rgb('+r+','+g+','+b+')',
         'border-width': borderWidth
      });

console.log('rgb('+r+','+g+','+b+')');

}, 100);

It’s a kind of .setinterval() loop example that uses the jQuery function .clearInterval() (clear setinterval) to reset the colour when it reaches 255 RGB. It then uses .CSS() to change the RGB colour of the element border.

This is also a cool plugin which does something similar: Highlight Fade which created a highlight background color fade for events.

Common error: ReferenceError: rgb is not defined

This occurs because you need to enclose the rgb in quotes (remember rgb is valid css! no need to convert to hex).

$('#input-page-url').css('border-color','rgb(redShade, 0, 0)');

Read more

10 Free Desktop Apps for Managing Code Snippets

Lets face it, copying and pasting pieces of code into text files etc is disorganized and a waste of time. Here we’ve collected 10 FREE amazing desktop apps for managing your code snippets. These applications will make your development life much easier, so start checking out the list, and see which one would fit your style best. Have fun!

Lets you easily organize, use and share code snippets using a clean Mac-like interface. You can store snippets of code and retrieve them with a few keystrokes.

Source

Is a clean and simple application that makes your code snippets—as well as clippings and files—available at your fingertips. You just do a single click or press a single keystroke and you have your snippet.

Source

Saves you countless hours by allowing you to create shortcuts for your snippets as well as phrases you frequently type. Create new snippets from the clipboard or via the easy-to-use snippet editor.

Source

Not to be confused with the other Snippet Manager below, is a free simple-yet-feature-rich application for managing snippets. In addition to storing snippets locally, you can optionally store your snippets online to access them from anywhere.

Source

Is a free utility for managing your code snippets in a variety of languages: VB, C++, C#, Java, SQL, ASP, PHP, HTML, even COBOL, Assembler and Fortran. You can also use Snippet Manager to manage plain ASCII text data.

Source

Is a free, simple, fast program which stores your code snippets so you can use them anywhere. With CodeDogg, you can synchronize snippets with all of your computers and devices, so you always have the latest versions of your snippets handy.

Source

Is a free code snippet manager with support for a local database as well as a shared database. With the server side application you can share a code snippet library between multiple users.

Source

Is a free basic text and code organizational tool. By using it you can save, organize and retrieve your snippets in one convenient location.

Source

Is a free online code snippet collector tool with a clean and simple interface. The snippets are stored online and since it is web-based, you can access them from any computer, platform and browser without the need to install software.

Source

Is a free cross-platform application that helps you manage your code snippets. It is written in Java.

Source

Read more

9 Snippets to Make WordPress User-Friendly for your Clients (part 2)

As we’ve promised, here’s more of those awesome WordPress snippets to make your website more user friendly for your clients. C’mon PHP can be fun too! Enjoy!

See part 1: 10 Snippets and Hacks to Make WordPress User-Friendly for your Clients (part 1)

This code will get rid of the ‘Incoming Links’ widget for authors and editors and then clean up some of the other boxes for everyone.

Source

This code will remove the Author MetaBox and Screen Options and then add those option into the publish metabox.

Source

The new Admin Bar gives you quick access to all of the main areas of your site, like creating a new post or page, moderating comments or modifying widgets. The snippets below will allow you to add or remove any links.

Source

This snippet will allow you to shows a custom message to any logged in user. Particularly useful if you need to inform a client/user that they have done something wrong.

Source

For those clients, using this snippet, you can hide the WordPress Upgrade Message.

Source

The default URL for logging into your WordPress powered site is: http://yoursite.com/wp-login.php. To make things easier, or at least more memorable, for a client you will need a cleaner URL like: http://yoursite.com/login

Source

This little snippet will help you building a site for your client, it can be useful to be able to customize the dashboard footer text.

Source

There’s nothing wrong with the WordPress logo, but few clients will care what CMS they’re using. Why not use their logo or branding? In this tutorial you will learn how to make it all happen.

Source

The next step in customizing WPs backend is to replace the Dashboards logo. You will need to create a transparent (.gif or .png) image of 30x31px. Then, save that image in your theme’s image folder (/wp-content/themes/theme-name/images) and name it whatever you like.

Source

Read more

jQuery Undetermined String Literal Error

Have you ever come upon this annoying error message: “undetermined string literal”.

Ok, i’ve got 3 occasions were you might run into this error and how to fix it for each specific case.

1. Multiple Line Strings
2. Wrong String Format (Bad Characters)
3. Angle Brackets

Multiple Line Strings

If your trying to assign a string that covers multiple lines to a variable you might see the “Undetermined String Literal” error. To solve this you must use the JavaScript escape character backslash (“\”) after each line to tell the interpreter where the line ends and to join the string together.

Another way is to simply split your string up into bits and add them together.

Wrong String Format (Bad Characters)

If your trying to assign HTML to a variable you might see the “Undetermined String Literal” error. It might be that you loaded the HTML from somewhere else via ajax and are now trying to use/inspect it. Use the following code to clean up the bad characters in the string before trying to assign it.

Angle Brackets

If your trying to use angle brackets (“>” & “<") within a string you might see the "Undetermined String Literal" error when trying to submit the string data via ajax.

var contentQuery = ‘<securequery consumer="abc" engine="abc" template="abc">first 10 location like "abc"</securequery>’;
//note: abc replaces the actual query

It turns out it was the securequery angle brackets creating the error and I had to hack it (as such) by adding in the angle brackets (“<" & ">“) just before encoding and sending the request via AJAX (see below).

$.ajax({
  type: 'POST',
  url: '/ajax/abc',
  data: 'content=' + encodeURIComponent('<'+contentQuery+'>'),
  dataType: 'html',
  success: function(data){
	console.log(data);
	//display results
	$('#results').html(data);
  }
});

This might even be a bug in jQuery, not sure though. When you test in firebug it works though! So maybe not…

var fine = '<securequery consumer="abc" engine="abc" template="abc">first 10 location like "abc"</securequery>';
console.log(fine);

Read more

jQuery Check if Toggle is Open/Closed

Simple jQuery code snippets to check if toggle is open or closed. Basically, the current state can be determined by using this test:

$(this).is(":hidden").

Another way, as shown in the following example, is by using the data attribute to append a state of ‘open’ or ‘closed’ to the toggle button like so:

if (this.data('state') === 'closed') {
    $('.' + toggleBtnClass).innerText(moreText);
    _this.data('state', 'open'); /*add data to store state*/
} else {
    $('.' + toggleBtnClass).innerText(lessText);
    _this.data('state', 'closed'); /*add data to store state*/
}

To see this in action, check out the jQuery.autoToggles plugin.

Read more

js Howto Declare a String Over Multiple Lines

Someone asked me the other day how to declare a string over multiple lines in jQuery. It’s actually plain JavaScript and can be done by simply adding the escape character backslash “\” after each line.

As you can see we simply add the backslash to the end of each line to tell the interpreter it’s part of the same long string.

var textFromChris = "me:  we lunchin?\
 Sent at 11:34 AM on Friday\
 me:  sure\
 Sent at 11:58 AM on Friday\
 chris:  T=12.30\
 Sent at 12:07 PM on Friday";
var timeRegex = /T=([0-9.]+)/gm;
timeRegex.compile(timeRegex);
console.dir(timeRegex.exec(textFromChris));

Common error message: SyntaxError: unterminated string literal
Compatibility: Testing revealed that it works in all major browsers, including IE 6.

Obviously there are other ways we could achieve the same result. We could simply split the string up like this then it doesn’t matter that they are declared on separate lines.

var textFromChris = "me:  we lunchin?" +
 "Sent at 11:34 AM on Friday" +
 "me:  sure" +
 "Sent at 11:58 AM on Friday" +
 "chris:  T=12.30" +
 "Sent at 12:07 PM on Friday";
var timeRegex = /T=([0-9.]+)/gm;
timeRegex.compile(timeRegex);
console.dir(timeRegex.exec(textFromChris));

Read more

10 Snippets and Hacks to Make WordPress User-Friendly for your Clients (part 1)

Just on a side post to our usual jQuery posts I have been using WordPress quite a lot, especially developing it for clients and here are some tips. Out-of-the-box, WordPress is a fairly simple CMS for anyone to learn. But for your non-tech savvy clients it could be a nightmare and a potential disaster to the site you have just built. There are of course many plugins that will achieve the same as these snippets, but with code you get the added control and security, and, in most cases, will not need to be updated.

This snippet is particularly useful if you have given a client plugin activation/deactivation privileges (allowing them to add new plugins themselves), but the site you have built requires some core plugins to function and should never be deactivated.
The code below will remove the ‘Deactivate’ links from whichever plugins you deem fundamental as well as removing the ‘Edit’ links from all plugins.

Source

The code below will remove the ‘Appearance’ menu option from the Dashboard. Just like the Plugin Disabling code above, you really don’t want your clients tinkering or experimenting with any theme changes.

Source

With this snippet you can hide whichever Top-Level Menu (Posts, Media, Links, Tools…) you need to. All depends on your client’s requirements.

Source

This code will help if your client doesn’t need the drastic action taken by the above snippets, and only needs some key sub-menu items disabled/hidden.

Source

This snippet will help if in any case you want to restrict client access to certain Top-Level menu items, but you still want to maintain the full menu for the main administrator.

Source

Probably the main reason you chose WordPress is for your client’s need to begin with. Publishing posts and pages are more than likely key to their business. To help avoid any confusion from within the posts/pages editor screens it could be helpful to remove unused meta-boxes (custom fields, recent comments, post tags…).

Source

Adding this code allows you to remove whichever column from the ‘Pages’ page you feel are not necessary to your client.

Source

Similar to the snippet above, this code will remove columns from the posts page.

Source

This snippet will remove whichever widget you define from the Dashboard. The majority of the default Dashboard widgets may not be necessary to your non-tech client and could potentially is a disastrous distraction.

Source

This snippet will create a simple ‘Hello World’ widget, and can be easily edited to your own specifications.

Source

Stay tuned for part 2 later on in the week!

Read more

JavaScript Showing Wrong Year For Date

Quick post to let you JavaScript newbies out there that when declaring a date it might be showing the wrong year for the date. You may be thinking “javascript date returning later year, I was seeing 2012 instead of 2011, wtf?”. Consider the following examples:

var todaysDate = new Date();
console.log(todaysDate);
//output: Date {Fri Aug 12 2011 18:45:53 GMT+1000}

var expiryDate = new Date('15/07/2011');
console.log(expiryDate);
//output: Date {Wed Mar 07 2012 00:00:00 GMT+1000}

var expiryDate = new Date('07/15/2011');
console.log(expiryDate);
//output: Date {Fri Jul 15 2011 00:00:00 GMT+1000}

Can you work out whats going on? Well, JavaScript’s getMonth() function starts with 0 for January, 1 for February and so on… (you have to add one!) but this is the wrong year, day everything!

So the date we want to see is Friday 15 July 2011.

If we try parsing the date as single arguments this also doesn’t produce the correct results.

var expiryDate = new Date(2011, 15, 07);
console.log(expiryDate);
//output: Date {Sat Apr 07 2012 00:00:00 GMT+1000}

But, if we parse as a text date we get the correct results!

var expiryDate = new Date('July 15, 2011');
console.log(expiryDate);
//output: Date {Fri Jul 15 2011 00:00:00 GMT+1000}

Date’s can be a pain the A$$ so if your doing a lot of work with dates I would suggest to use a JavaScript DATE library to make managing dates in JavaScript a wizz!

This is an awesome date resource too (very comprehensive!).

Read more