24 Aug 2011

Firefox and CSS Attribute Selectors for “style”

CSS, HTML 3 Comments

While creating a script to hook into the template of an existing website, I decided to use the attribute selector feature of CSS. This powerful feature allows you to select specific elements of the page, based on certain attributes (i.e. style, title, id, class, etc.).

The attribute selector worked as expected in Chrome, however I ran into some issues with Firefox. Take the following code for example:

<div class="aB">
   <div class="aB" style="width: 200px;">Hide this text</div>
</div>

According to the CSS specifications, the following should work when selecting the inner div:

.aB[style="width: 200px;"] {
   display:none;
}

This works in Chrome, however it currently does not work in Firefox. Due to time constraints I was unable to look into this any further, but I assume there are some issues with the colon and semicolon.

To fix this, I used a slightly different version of the attribute selector. Instead of checking for the exact value of the attribute (that includes the colon and semicolon), I used the “contains” selector (*= instead of =).

.aB[style*="width"][style*="200px"] {
   display:none;
}

The above code first looks for an element with the class “aB”, then looks at the style attribute twice. It checks to see if the style attribute has the text “width” and “200px” contained in the attribute. By stacking the two selectors together, both values are required. This method works in Firefox, and works exactly the same as the first method.

17 Aug 2011

Using Side Tabs on Chrome and Firefox

General 5 Comments

When it comes to website development I find myself constantly multi-tasking. It does not take long for the top of my browser to fill up with 15+ tabs, showing only the website’s favicon with no description. This makes it difficult to find the tabs I’m looking for.

Some may argue it makes sense to open up multiple instances of the browser, but this will quickly fill up the task bar on your computer as well. Plus, how do you know which instance of your browser has the site you are looking for?

A very high percentage of people now have widescreen monitors. These monitors are often much larger than the size that websites are designed for (99%+ of websites are designed for 1024 pixels wide monitors). If you haven’t already, you will begin to notice how much wasted horizontal space there is when browsing the internet.

That’s why it makes much more sense to send the tabs to the side of the browser stacked vertically than it is to have them on the top. Compare the tabs in the image above with the image below to see an illustration of what I’m talking about (click the image to view a larger version)

Placing the tabs on the side gives you much more room to add more tabs without losing any information on what each tab contains. It takes some getting used to, but it is well worth it in the end.

If I’ve convinced you to make the switch, here is how you do it:

Enabling Side Tabs on Chrome

If you are using the latest version of Chrome, the following “Side Tabs” option might not be available to you. If not, please view my “Re-enable Vertical Tabs on Google Chrome 16” post.

  1. Type in the URL:  about:flags
  2. Find “Side Tabs”, then click “enable”
  3. Right click a tab on the top of the browser, then click “Use Side Tabs”

Enabling Side Tabs on Firefox

Download an install an extension such as Tree Style Tab.

15 Aug 2011

Email Integration with a Project Management System

General No Comments

While many people feel it is important to have your email hook directly into your project management system, I strongly disagree. I feel it is much more effective to have them separate, even if that means adding an extra step when creating new tasks.

I’ve found that by creating tasks manually I take and manipulate information from the email messages into a format I can quickly go through. Emails are composed far differently than a task is, usually with much more filler text and conversation. I’ve also found that most people do not write their emails in chronological order, but instead write ideas as they come to them.

Adding to the confusion is that emails from different dates can relate to one task. As an idea evolves some of the original tasks from the first email may become obsolete. Sorting through the emails to find what information is the latest and most relevant becomes extremely difficult.

Copy and pasting information from emails into a project management system might seem like an extra step, but it isn’t. It is necessary time spent organizing tasks.

05 Aug 2011

Gmail Preview Pane Extend (v0.7.1)

General 33 Comments

Gmail’s latest feature, the Preview Pane, allows you to simultaneously preview emails while reading or replying to others. After several hours of use I’ve found this to be one of the best improvements to Gmail in years.

The only issue I found with Preview Pane was how the “People” widget and advertisements on the right of the page now waste a lot of valuable space (202 pixels on the vertical split, and 225 pixels on horizontal split).

This user script (for Chrome, or Greasemonkey for Firefox) removes that sidebar, allowing the preview pane to extend to the full width of the screen. Enjoy the extra space!

Download at UserScripts.org

1/23/2014 Version 0.7.1
-Fixed: Compatibility with latest version of Gmail

5/22/2013 Version 0.7.0
-Fixed: Now works for Chrome 27
-Fixed: Images automatically resize to fit preview pane on Chrome

1/16/2013
Gmail appears to have a bug with the Preview Pane lab, unrelated to this plugin. If you have Preview Pane turned on and Snippets turned off, the message list will appear distorted. I have submitted a bug report to Gmail about this. A temporary workaround is to enable Snippets (under the General tab of Gmail settings)

2/23/2012 Version 0.6.1
-Added: Set max-width on images, to avoid a long horizontal scrollbar when composing a reply or reading an email. Change the max-width on line 39 to suit your needs (600px wide by default)

12/15/2011 Version 0.5.0
-Fixed: Remove horizontal scrollbars for the preview panes on Firefox 8

11/4/2011 Version 0.4.2
-Fixed: Remove sidebar on “undo send”

8/14/2011 Version 0.4.1
-Fixed: Removed extra style

8/9/2011 Version 0.4
-Fixed: Chrome autocomplete now working

8/8/2011 Version 0.3
-Added: Now supports horizontal and vertical split views

8/7/2011 Version 0.2
-Fixed: Optimized code, now using GM_addStyle

8/5/2011 Version 0.1b
-Fixed: Attribute selector for Firefox

8/5/2011 Version 0.1
-Initial Release

05 Aug 2011

SCRIPT438: Object doesn’t support property or method ‘getElementsByTagName’

jQuery, Website 6 Comments

It was recently brought to my attention that one of my websites was not functioning correctly in Internet Explorer 9. Parts of the page and javascript would load, however the AJAX portions of the site failed to load.

Using the F12 Developer tools package with IE9 I was able to find the error:

SCRIPT438: Object doesn't support property or method 'getElementsByTagName'
jquery.js, line 16 character 59007

The solution is simple, update your jQuery to the latest version (at the time of this writing, 1.6.2). The version I had installed on the website (1.5) is not compatible with IE9.

23 Jun 2011

Generate Random 10 Digit Number in PHP

PHP, Quick Tips 37 Comments

The application I’m developing requires a random 10 digit number as a bar code on season pass. A simple way to create a unique number is to use the following code:

$random = substr(number_format(time() * rand(),0,'',''),0,10);

Here’s whats happening with the code:

The outer portion “substr” is used to chop down the random number we create to 10 characters. You will notice the number 10 at the end of the snippet, which can be changed to any number you want.

The “number_format” function helps get rid of the scientific notation that will arise from generating the random number. In the middle, “time()” and “rand()” are multiplied. Time() is the number of seconds from January 1 1970, and rand() is a uniquely generated number through PHP.

Always remember that generating unique numbers is not fool proof.  If your application requires each number to be unique, perform a collision check in the database before saving.

20 Jun 2011

Legend HTML Tag Word Wrapping Problem

CSS, HTML No Comments

There is an issue with the way Firefox 3 and 4 handles a long string of text in the HTML form tag “Legend”. With a long string of text in the legend, the element will completely ignore any width property associated with it. The only way to break a line in the legend element is to introduce a break tag.

Whether or not you agree with it, this is how the Firefox team decided to handle this element. To fix this, simply adjust the white-space CSS property for the legend. This will cause the legend to behave as expected.

legend {
   white-space:normal;
}
http://rcpd.msu.edu/scholarship

14 Jun 2011

jQuery Validation Word Count Custom Method

jQuery 8 Comments

The jQuery Validation plugin is one of the best ways to validate your forms client side. It has built in functions to check the maximum amount of characters allowed in each form field, which works great in many situations.

However for a project I am currently working on the client requires text areas to have a word limit instead of a character limit. There are some solutions out there to do this separately from the jQuery Validation plugin, however I decided to write and release a custom method that can be implemented directly into any form.

The Code

The following “addMethod” needs to be placed after jQuery and jQuery Validation is loaded, but before the actual validation call:

$.validator.addMethod("wordCount",
   function(value, element, params) {
      var typedWords = jQuery.trim(value).split(' ').length;

      if(typedWords <= params[0]) {
         return true;
      }
   },
   jQuery.format("Only {0} words allowed.")
);

The method first creates the “typedWords” variable, which simply counts the amount of spaces on the text area. Then using “typedWords” the method checks against the predefined max length (params[0]).

The next code snippet is a sample of how you can call the custom method with your form. For example, I have a textarea named “comments” that I want to apply this method to:

$("#contactform").validate({
   rules: {
      comments: {
         required: true,
         wordCount: ['10']
      }
   },
});

When we call the wordCount method, we can also define the max amount of words allowed. Simply change ['10'] to any number you wish.

08 Apr 2011

Chinese Characters Showing as Blocks on Windows 7

General 16 Comments

I recently ran into the issue with my development machine where all Chinese characters displayed as blocks. I tried restarting the computer to fix the issue, however it only fixed several Chinese characters. The solution to fixing this issue is to delete your system’s font cache file.

Deleting your Font Cache File

  1. Delete the file C:\Windows\System32\FNTCACHE.DAT
  2. Restart your computer

Windows will rebuild the file once you restart the computer then everything should be back to normal! This also appears to work for other languages as well, please post your results if it works for you. I have no idea what caused this font cache file to be corrupted in the first place, but will post more if it happens again.

25 Mar 2011

Grand Haven Social Media Workshop: Friday 2E

Advertising, General No Comments

Chad Huntley will be presenting at the next Friday 2E session in Grand Haven, MI. Using his experience in the advertising field, he will discuss basic psychological principles that can be used in your social media, website, and physical advertising.

Understanding how your customers process information is a very important step to increasing leads. This session will cover a variety of psychology concepts used by leading advertisers and marketers that will help you formulate new strategies. Real-world examples will help explain concepts such as: reciprocation, commitment, authority, and others. You will also find how other companies have used these concepts to turn you into a customer, most of the time without you even knowing it!

For more details on the event, please visit the post on WZZM’s website, or at Mlive.com.

From MLive:

GRAND HAVEN – February’s 2E Network – A Social Media Workshop, will focus on measuring the success of websites by their rankings on search engine results and increasing the ranking through Search Engine Optimization.

Chad Huntley, owner of Element Design of Grand Haven, will be the featured guest speaker for the Friday, February 4th 2E Network held from 7:30-9:00 a.m. Huntley, a graduate of Michigan State University’s Advertising program, where he recently taught a web design class, has experience on website projects that included Steelcase, Herman Miller, and DOW Chemical. Huntley expressed that, “the internet has quickly become the most powerful advertising medium for any business,” going on to explain that it is the central hub for advertising, communication, and gathering information from customers.

“The success of your website can be directly measured by how high it ranks in search engine results,” continued Huntley.

The Chamber of Commerce Grand Haven, Spring Lake, Ferrysburg is excited to have Huntley present on the importance of Search Engine Optimization at 2E Network. In this workshop, attendees will work with a website that is poorly optimized for search engines. Expanding from this website, attendees will learn more about the evolution of search engines, what no longer works, and how to build a search engine strategy.

If interested in attending The Chamber’s 2E Network – A Social Media Workshop, register by calling 616-842-4910 or email Courtney at colson@grandhavenchamber.org. Held at JSJ Corporation’s Lower Level Training Room, the cost to attend is $15 for Chamber Members, $20 for community members. A continental breakfast is provided and attendees are encouraged to bring a laptop or smart phone if desired.

2E Network – A Social Media Workshop is a program of The Chamber of Commerce Grand Haven, Spring Lake, Ferrysburg. The Chamber understands the importance of social media for local businesses and the community, bringing in qualified guest presenters to educate attendees on various topics. Held the first Friday of the month from 7:30am-9:00am, those interested in more information, attending, or presenting should call 616-842-4910 or email colson@grandhavenchamber.org.