# Thursday, 11 October 2012

Have you heard about the Succinctly Series? Syncfusion has produced a number of free e-Books on various subjects ranging from source control to jQuery to HTTP.  I highly recommend you pick up these free books. You’ll have to register but it’s worth it. This is an unsolicited review. Smile

So far I’ve read the Knockout.js Succintly, ASP.NET MVC 4 Mobile Websites Succinctly, PDF Succinctly and JavaScript Succinctly. They are great beginner books and very quick reads especially if you are beyond the basic level. They average around 60 pages per book with 150 pages being the biggest I’ve seen.

They seem to be rolling out a new book every few months. So far they have:

Knockout.js Succinctly

C++ Succinctly

ASP.NET MVC 4 Mobile Websites Succinctly

LightSwitch Succinctly

Javascript Succinctly

HTTP Succinctly

PDF Succinctly

Git Succinctly

jQuery Succinctly

Happy Coding! Smile

Books | Git | JavaScript | jQuery | Knockout | review
Posted 10.11.2012  #    Comments [0]  | 
# Monday, 02 August 2010

Over the past week our team has been crunching out an asp.net webforms app to help manage our flood response situation that has been a very unfortunate side effect of the fire here in Coconino County.  We have been going pretty fast, releasing one to two updates a day in order to get functionality out quickly to those who need it.

Today, we had a breather and I decided to go back and spruce up our work.  One item on my plate was to help the users more easily enter dates.  The main entry form has over 10 date fields.  A little excessive but it’s what they need.  I could just use the AJAX calendar extender but that would mean quite a bit of clicking and properties to set manually.

I had a hunch that the jQuery way may have an easier solution.  Using Selectors, the solution ended up being one line of code.

<script type="text/javascript">
    $(function() {
        $("input[name*='dte']").datepicker();
    });
</script>

How awesome is that. All of our date inputs have a prefix of 'dte' allowing a simple selector over all inputs with 'dte' in the name attribute.  Normally, one would give all date inputs a class that can be use instead but they all already had this in common.

With the same idea in mind, I decided to change all of our buttons to use the jQuery button widget to get a nice and quick improvement on the look and feel.

<script type="text/javascript">
    $(function() {
        $(":submit, :button").button();
    });
</script>

In our case, we defined buttons two different ways in our code.  Again, with selectors we can handle this with one line of code.

Downloading and using jQuery UI couldn’t be simpler.  I customized the download (you don’t have to) to only use the date picker and button widgets and added the customized jQuery to a script tag.  jQuery UI depends on jQuery but instead of using the version downloaded I used the google CDN to help speed things up a bit.  Last, I added the theme for the controls to the app and referenced the stylesheet.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.2.custom.min.js"></script>
<link href="~/stylesheets/jqueryUIcss/ui-lightness/jquery-ui-1.8.2.custom.css" rel="Stylesheet" type="text/css" /> 

The ability to do this so easily and quickly with jQuery is a big WIN.  I wonder if this is easily replicated with MS AJAX?  My hunch is it’s probably doable but can’t possibly be easier and I imagine it’s not nearly as easy.  I could be wrong though…

Happy Coding!

Posted 08.02.2010  #    Comments [0]  | 
# Friday, 07 May 2010

A few posts back I wrote about adding character counting to the .Net AJAX HTML Editor.  Recently, I received a question asking how to hide and show the character count element for the .Net AJAX HTML Editor when the editor goes in and out of focus.  The short and sweet answer is to wire up a function on the focus and blur events of the editor control and call the hide / show methods in jQuery on your count element.

$(GetEditor()).focus(function() {
  $(Editor1InfoArea).show();
}).blur(function() {
  $(Editor1InfoArea).hide();
});

Just add the above code in the $(document).ready function and away you go.  The GetEditor function and Editor1InfoArea variable are referenced in code in the original post.

However, jQuery has a lot to offer and I wanted to show some of these offerings.  I took advantage of method chaining to save myself having to call $(GetEditor()) twice as shown below.

$(GetEditor()).focus(function() { $(Editor1InfoArea).show();  });
$(GetEditor()).blur(function() { $(Editor1InfoArea).hide(); });

If your new to jQuery chaining may throw you a bit but it works great for saving keystrokes and once you get used to the syntax can be easy to follow. 

Beyond the show and hide methods you could call on many other methods to add some panache (Come on, give this one to me,  I am French after all).

You could replace show/hide with some of these combinations:

Nothing like making your app a little more appealing with some animation.  But wait! There’s more.

You can also change the style with the css method:

$(Editor1InfoArea).css("display", "block");
$(Editor1InfoArea).css("display", "none");
Or
$(Editor1InfoArea).css("visibility", "");
$(Editor1InfoArea).css("visibility", "hidden");

Of course, you are using classes to make easier management of your styling right?  You can use the addClass/removeClass methods:

$(Editor1InfoArea).addClass("showCounter");
$(Editor1InfoArea).removeClass("showCounter");

* What about the toggle method? Ah, I’m glad you asked. In this case since we are tracking the focus and blur events you may end up with the toggle working the opposite as you expect.  This is because toggle does the opposite of what the targeted element’s visible value is when called.  You can fix this by calling the show or hide on your element after the focus/bind methods are setup.  Toggle is really designed for the click event but can be used in this situation.

So there you have it.  More ways than you probably care to know and I wouldn’t be surprised if there were more. 

A parting thought.  Earlier this week I read a great post on the performance of show/hide vs. toggle, css and addClass/removeClass.  Check it out if you want to read more on it but the basic answer is calling the css method is the best.  However, there is one more way that’s even faster but you’ll just have to read the article to find out what it is.

Happy Coding! :-)

Posted 05.07.2010  #    Comments [0]  | 
# Friday, 11 December 2009

In an earlier post I added character counting functionality to the ASP.Net AJAX HTML Editor with jQuery.  Soon after posting the entry I noticed that cutting and pasting text into the editor via the context menu did not change the character count immediately.  I enhanced the jQuery code in my last post to do this.

var Editor1 = '#Editor1';
var Editor1CountLimit = 50
var Editor1InfoArea = '#Info';

$(document).ready(function() {
    TrackCharacterCount(Editor1, Editor1CountLimit, Editor1InfoArea);
});

function TrackCharacterCount(ctl, limit, info) {
    var editor = GetEditor();
    $(editor).load(function() {

    var body = $(this).contents().find('body');
    var txt = $(body).text();
    $(info).html(txt.length); //set initial value 

    $(body).bind('cut paste', function(e) {
            setTimeout(function() {
                var txt = $(body).text();
                UpdateTextCounter(txt,limit,info);
            }, 150)
        });
        
        $(this).contents().keyup(function() {
            var txt = $(this).contents().find('body').text();
            UpdateTextCounter(txt,limit,info);
        });
    });
}

function UpdateTextCounter(txt,limit,counter) {
    if (txt.length > limit)
        $(counter).html(txt.length).css("color", "red");
    else
        $(counter).html(txt.length).css("color", "");
} 

I added the bind code on line 17 to handle the cut and paste functionality.  I went through a couple iterations of the cut & paste functionality to count the characters correctly.  I was running into an issue where the textbox value was not being updated immediately with what was pasted.  Then I stumbled upon a nice stackoverflow answer that used a timeout to wait for the textbox to be updated.  This little jewel allowed me to simplify the code to what it is now.

I refactored the code to decrease duplication of code by creating the UpdateTextCounter function. 

I also noticed a subtle difference between IE7 and IE8 that stopped the counter from working and have corrected that in this version with a browser check.

function GetEditor() {
    if ($.browser.msie == 'true' && $.browser.version == '7.0')
        return editor = $(Editor1).contents().find('iframe').eq(1);
    else
        return editor = $(Editor1).contents().find('iframe').eq(2);
}

I verified the code runs on IE7, IE8, FF 3.5.5 & Chrome 3.0.

Enjoy!

AjaxHtmlEditorV2.zip (1.28 MB)

Read the first post.

Read the next post where I fix a bug when using a customized toolbox with the editor and find a better way to locate the IFrame that our text editor is in.

Posted 12.11.2009  #    Comments [0]  | 
# Saturday, 14 November 2009

I’m using SyntaxHighlighter and it’s awesome!  It’s completely JavaScript based and can be put into dare I say any blog engine.  If your engine can take JavaScript that is.  I use dasBlog and found two posts on it that guided me nicely.  Give it a shot.  Spruce up your code snippets in your blog.  Everyone will thank you for it.

Scott Hanselman’s blog got me started and Justin Thirkell finished it off.

Anybody writing code on their blog should take a look at SyntaxHighlighter. 

Posted 11.14.2009  #    Comments [0]  |