Tag Archives: html

Automatically expand textarea to fit content using jQuery without autogrow or autosize plugins

I’m sure there is a more efficient way to do this, but it suited my needs.

<script>
$(function() {
    $('textarea').keyup(function(){
        $(this).each(function(index, element) {
            $(element).height(element.scrollHeight);
        });
    }).keyup(); //trigger event to initialize pre-filled textareas
});
</script>

Enjoy 🙂

IMPROVED: Open all external links in a new window using jQuery

In the original post I covered how to use jQuery to automatically make external links open in a new window. The method however was slightly flawed in my opinion since…

  1. It did not check form action attributes
  2. It assumed ANY link starting with “http[s]://” was external

Here is my new and improved method for making all external site links open in a new window. It now includes form tags, one less selector for secure and non-secure link urls, AND excludes any of those which link to an internal page where the full url may have been specified.

$('a[href*="://"], form[action*="://"]').not($('a[href*="://'+location.host+'"]')).attr('target','_blank');

A quick breakdown…

  1. a[href*=”://“] and form[action*=”://“] matches the elements where a full url has been specified
  2. .not($(‘a[href*=”://’+location.host+'”]’)) excludes all matched items that include the current host (eg: http://www.robertmullaney.com/)
  3. finally we update the target attribute of the the remaining links open in a new window

Why this is important:

Once you have a user on your site, the worst thing you can do is send them away. Also, you will easily annoy them if all links open in new windows and cause them to leave anyhow. This way, only the links that pull them away from site site are opened in new windows. When they are done on the external sites, they close the browser and there your site remains.

Javascript Image Preloader with Image Swapping Function

In this post you will find a simple image swapping function that will work for all images that need a hover effect.

The ‘img’ argument is required of course. I can either be a reference the the image object itself (eg: swapImg(this)) or a string (eg: swapImg(‘ImageID’)) if calling the function from somewhere other than within the <img> tag. If no arguments are passed, it aborts execution. If a string is passed, we first make sure that getElementById is supported. Then we check to make sure the ID passed is valid, of not we return.

After ‘img’ has been checked and confirmed, we move on to the 2 optional arguments. The ‘find’ argument (case-sensitive) indicates the string we are looking for at the end of the image src attribute. If the string is found, we know that the image is currently in the ‘over’ state and we replace ‘find’ with ‘repl’ to return the image back to it’s normal state. On the other hand, if ‘find’ is not located, we rebuild the src attribute and insert ‘repl’ at the end of the image url (before the file extension) to activate the hover state. Continue reading Javascript Image Preloader with Image Swapping Function

Disable/Hide Internet Explorer’s Compatibility View Button

If you are an active web developer, you have likely been plagued by Internet Explorer’s Compatibility View button. I have seen so much poor advice about disabling this feature in IE7+. Post after post after post people suggest forcing a specific version for emulation. Haven’t we all learned that allowing IE to dictate how we code a page is a BAD idea?

If you properly code your pages to use standards and a proper document type definition or <!DOCTYPE>, why does IE persist in not doing what it’s told and letting visitors make potentially baddecisions. A user can accidentally click the Compatibility View button or have compatibility mode always enabled by default (OMG!). If you want to make sure IE or the user doesn’t dictate how you code, or how the layout is butchered by compatibility view, add the following to your <head> section…

Continue reading Disable/Hide Internet Explorer’s Compatibility View Button

PHP/MySQL Nested <select> using <optgroup> with LEFT JOIN on same table in a single query.

I looked around on the web for a while trying to find an example of what I was trying to do. Some were close, but none performed the JOIN portion of the query and on the same table from the SELECT portion (self referencing). So, here is the code I used to created a sub-category only dropdown using the parent categories as the optgroup labels.

Continue reading PHP/MySQL Nested <select> using <optgroup> with LEFT JOIN on same table in a single query.