Posts
60
Comments
36
Trackbacks
18
Monday, January 25, 2010
Disable Backspace on Form Select Elements Javascript

This is another javascript example of the earlier post where I complete the same exact functionality with a little more readability.  The difference is that I would put this in production code first because it is more compact and better style.  So why rewrite this?  To really show the flexibility one might have when coding for the web page.  This code is normalization code that I believe would benefit every form as going back when hitting the backspace key on a form dropdown would (9 out of 10 times) me undesirable behavior.

<html>
    <head>
        <script type="text/javascript" 
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
        </script>
        <script type="text/javascript">
        //<!--
            // This is a simple rewrite of my first IE normalization.
            // for the sake of simplicity and ease, we will shorten them
            // down a bit in size to better use the value of our bandwidth
            // elsewhere maintaining some readability
            $(function(){
            
            // Firefox
            $("select").keypress(function(e){return (e.which != 8)});
            
            // IE
            $(document).keydown(function(){
                return (typeof window.event != 'undefined' && 
                            event.keyCode == 8 && 
                            event.srcElement.type == 'select-one');
            };
            
            });
        //-->
        </script>
    </head>
    <body>
        <form id="my-form">
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </form>
    </body>
</html>
    

Please check out the earlier post regarding fixing form select elements if you would like to know more about what exactly is happening here.

HTML Code Fileindex.html

posted @ Monday, January 25, 2010 7:45 PM | Feedback (0)
Javascript Object Notation (JSON) Shallow Dive

I was discussing a few things with a good friend several days ago and some of the things I have learned and conceptualized recently are very interesting with tons of capabilities being unlocked.  Here I discuss how to use JSON to make a simple object that looks cleaner than the normal fashion of Javascript objects and resembles Java for ease of translation.  As with all of my other posts that I write on javascript, you will notice that there are similarities in that I always use JQuery for the simple reasoning of not wanting to put code in my view/html.  Additionally, this is an HTML document, though it will work in traditional and strict forms of the newer HTML standards as well.  This is just a demo and description.

<html>
    <head>
        <script type="text/javascript" 
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
        </script>
        <script type="text/javascript">
        //<!--
            // This is a simple javascript object where you have anAttribute, 
            // then it's setter and getter
            var simpleObject = {
                "anAttribute":"Hello World",
                "getAnAttribute":function(){return this.anAttribute},
                "setAnAttribute":function(newAttributeValue)
                    {
                        this.anAttribute = newAttributeValue
                    }
            };
            
            // Code block of jQuery to interact with our object.
            // this is equal to $(document).ready(function(){});
            $(function(){
                // Add the original attribute to the demo div
                $("#demo").html(simpleObject.getAnAttribute());
                
                // Change anAttribute, using the setter
                simpleObject.setAnAttribute("Hi There");
                
                // Now let's alert anAttribute to prove that it has changed
                alert(simpleObject.getAnAttribute());
            });
            
        //-->
        </script>
    </head>
    <body>
        This is a simple demo to show how sweet Javascript Object Notation (JSON) really is.
        <div id="demo"></demo>
    </body>
</html>

Personally, I think getters and setters are old school but necessary when the need arises to encapsulate business logic.  In this particular example, there is no “business logic” which means little reason to use accessors though we will for translation and demonstration.

Notice the call to getAnAttribute() first to set the value of html in our “demo” div.  The latter is a simple alert.  The point is, at this point in time, the same attribute equals different values.

This has been tested on Chrome, IE 8 and Firefox.

Download this HTMLSource Code File

So why is this useful?  I guess the first place that I see this used most often is in jQuery plugins, this is also the place that I started using it when I first began writing jQuery plugins many moons ago.  Secondly, I really like to write public APIs for web applications and was trying to concept a way to really simplify one of my APIs down to nothing for consumers. 

So to recap, the benefits.

  1. Useful when writing jQuery plugins
  2. Easier and more powerful APIs
  3. Cleaner than the “Old School” way of creating javascript objects
  4. Very portable with current libraries

Currently I am at a loss for the drawbacks, leave them in comments if you have any.

posted @ Monday, January 25, 2010 4:23 PM | Feedback (1)
Thursday, January 14, 2010
IE Fix Backspace Key

The default behavior of a backspace key is (by default) annoying on forms in both IE and minimally in Firefox and some others. 

When you are in a text box or text area the back space key functions appropriately in all browsers that I have seen to this point.  When you have a select pulled down or in focus, then one of the more annoying features of the backspace key shows up.  When in this scenario, your user goes back to the previous page, and this I consider an annoying feature, particularly because data entry usually use the keyboard to make their selections.  If you have a long form that is mostly filled out, then you will become hated by your community (especially if they are data entry specialists). 

Here is one blog that goes much more in depth than I do, but does more than I need it to.  My point is to just cover the backspace key on a dropdown list, namely for Firefox, IE and some others.  How to disable a bunch of stuff.

If you want to disable backspace key on some form elements (namely dropdown select menus), using jQuery, this is how.

<script type="text/javascript">
    var BACKSPACE_KEY = 8;
 
    $(function(){
 
        // Firefox backspace (select dropdown)
        $("select").keypress(function(e){
            if (e.which == BACKSPACE_KEY) return false;
        });
                
        // IE backspace
        $(document).keydown(function(){
            // Make sure it is ie
if (typeof window.event != 'undefined'){

skipBackspaceKey = false;
 
                // Lets first to check that it is a backspace key that was pushed
                if (event.keyCode == BACKSPACE_KEY)
                {
                  // Now let's check to see if it is on a select dropdown
                  if (event.srcElement.type == "select-one")
                  {
                    skipBackspaceKey = true;
                  }
                }
                return (!skipBackspaceKey);
            } // end if
});
 
    });
</script>

And this works like a charm.  It has been tested in IE and Firefox.  Feel free to download the entire source project below.  Remember if you are on IE, you will have to accept the scripting warning that comes up when you load the project locally.

posted @ Thursday, January 14, 2010 5:22 PM | Feedback (2)
Monday, November 02, 2009
Parellels Cohesion and Images with WLW

This is just a test of a simple image, to test the cohesive mode Parrellels with Windows 7 and WLW 2008.  Does it look just as nice?

Picture 2

Well so it’s not as simple as just only using a windows computer, however, if you don’t mind just browsing to an image and knowing how to find it, then this definitely beats all the manual stuff involved on a Mac only platform.  Still need to try boingo or whatever, let me know if you have any suggestions.

Basically, you can’t just drag and drop from Mac OS Desktop to the Cohesion WLW running.  This was the only disappointment.

posted @ Monday, November 02, 2009 2:05 PM | Feedback (0)
Ok, No Ecto, Hail Windows Livewriter

After doing some research on the possible tools and image issues among (what seems to be) all Mac Blog writing software, I have decided to go to WLW.  This is going to allow me to automatically put well formed images on my blog.  It doesn’t really matter who you are, if you can’t support FTP Image uploads with decent formatting out of the box, then maybe you should reconsider selling your product. 

That is one of the annoyances I have noticed with Mac.  Developers get a rich feature set of free tools, however, you have to pay for most essential tools that make the tedious tasks more difficult.

Technorati Tags: ,,,
posted @ Monday, November 02, 2009 1:55 PM | Feedback (0)
Macintosh Blog Software

This is my first post with the MacBook Pro. It has been a while since I have had a Windows Livewriter blog since the switch to Mac and Leopard OS. From here on out, I need to find better ways to maintain it, since I was so used to that. Today, I am going to start working with Ecto, I have 17 days of trial so I hope to publish at least 2 or three. Some with pictures and others with files, to do the normal tutorial/informational type blogs that you have been accustomed to seeing here at my site.

Stay tuned for more.

posted @ Monday, November 02, 2009 11:14 AM | Feedback (0)
Friday, October 23, 2009
Pretty Cool Stuff
Check out this page. Derek really knows how to put together a front end, wow. http://noqube.com
posted @ Friday, October 23, 2009 11:39 PM | Feedback (0)
Thursday, September 10, 2009
Some Coworkers Remember EVERYTHING
So I had a co-worker contact me and wonder if I had marked down a website that I hadn't seen for almost 3 years (I think).  It was the location of a speed typing test.  What was so interesting about this speed typing test?  Well as soon as they had re-found it, I began wondering how many words a minute could I type now.  Here it is, and if you would like to try your own at the typing test, click it.

42 words

Speedtest

posted @ Thursday, September 10, 2009 9:40 AM | Feedback (0)
Sunday, August 23, 2009
Configurations and Status

Man, this has been an absolutely BUSY summer.  I got a new laptop though, went with a Macbook Pro… it’s sweet.  I also have Windows 7 set up using Parellel’s.  It was truly a pain; however I am finally getting back up to speed, hence the posting of this blog.  Some of the blogs you can expect to see in the future include Ruby on Rails development, Ruby, Asp.net MVC (<3), Mac stuff, Windows 7 Stuff, Java stuff (I would like to write a novel there).

I start classes in the fall, master’s level Ruby on Rails and Dynamic Web Content.  I hope to bring a true learning experience out of these classes as they are some of the first official classes I am taking in my passion area.  (MVC Patterns and Web Development).  I certainly hope I don’t get the beat down!!!

posted @ Sunday, August 23, 2009 10:24 PM | Feedback (0)
Tuesday, June 30, 2009
Street Racing

In my spare time, I really enjoy playing Street Racing on Facebook.  I actually like to put all of my “Extra Points” into max gas so I can level up faster.  What do you do?  Is there an “Easiest Way” to level up?  Click here to join my crew!

posted @ Tuesday, June 30, 2009 10:10 AM | Feedback (0)
News
My Developer Notebook! This also happens to be my opinion place. Thanks for coming by.