Bill Beckelman

Use jQuery to Show a Link’s Address After its Text When Printing In IE6 and IE7

Bill Beckelman — Mon, 16 Feb 2009 22:10:58 -0600

I found a cool trick in a post by Remy Sharp that appends the address of a hyperlink to the end of the link’s text when the page is printed. Unfortunately the trick only works in browsers that support the CSS2 pseudo selector :after. Firefox, Safari, Chrome*, Opera and now IE8 all support the selector. IE6 and IE7 don’t though and that is a huge percentage of users.

I came up with a way to achieve the same thing with IE6 and IE7 using jQuery and the proprietary IE events onbeforeprint and onafterprint though.

Live Demo | Download (HTML, CSS, JavaScript)

I have only tested this successfully in IE6, IE7, IE8 RC, FF3.1 and Chrome 1.0
~~I tried to test in Chrome 1.0 and it did not work. The only thing I can find is Chrome does~~ ~~not yet fully support the “content” selector~~.

Screenshots:

Before Printing:

After Printing:

(Only links that I have marked with the class print_link will have the address appended when printed)

jQuery:

First add a reference to the jQuery file. I recommend using Google’s CDN. After that the following is all that is needed:

<script type="text/javascript">
    $(function() {
        //Check to see if browser supports onbeforeprint (IE6, IE7 and IE8)
        if (window.onbeforeprint !== undefined) {
            //Since the browser is IE, add event to append link text before print
            window.onbeforeprint = ShowLinks;
            
            //Remove the link text since the document has gone to the printer
            window.onafterprint = HideLinks;
        }
        else {
            //The browser is not IE so attach a print style to append the link's text when printed
            $('head').append('<style type="text/css" media="print">.print_link:after { content: " (" attr(href) ")"; }</style>');
        }
    });

    function ShowLinks() {
        $(".print_link").each(function() {
            //Store the link's original text in the jQuery data store               
            $(this).data("linkText", $(this).text());

            //Append the link to the current text
            $(this).append(" (" + $(this).attr("href") + ")");                
        });
    }

    function HideLinks() {
        $(".print_link").each(function() {
            //Restore the links text to the original value by pulling it out of the jQuery data store
            $(this).text($(this).data("linkText"));
        });
    }         
</script>

Cool jQuery Functions Used:

append(content) - Append content to the inside of every matched element.
data(name) - Returns value at named data store for the element, as set by data(name, value).
data(name, value) - Stores the value in the named spot.
text() - Gets the combined text contents of all matched elements.
text(val) - Sets the text contents of all matched elements.

Of course you probably want to add a more in depth print style sheet beyond just this tweak. I would recommend looking at Remy’s post as a starting place.

Be sure to checkout the live demo and download. Please let me know how you would improve this or if you find any bugs. Also, please let me know if it works on Safari and Opera.

[dzone]

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery

Bill Beckelman — Thu, 22 Jan 2009 08:15:35 -0600

So I knew it would happen at some point. Some handy flash developer would figure out how to get around the security limitation in Flash 10 that requires the System.setClipboard() method (ActionScript) to only be called by an action that originates from a user interaction. Last week I ran across an article on Ajaxian that linked to ZeroClipboard developed by Joseph Huckaby that worked as promised.

From the ZeroClipboard web site:

This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mouse down effects.

With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google. I am also shortcutting the ready event which is a tip I found from a great post Improve your jQuery - 25 excellent tips.

Live Demo | Download (HTML, CSS, JS)

Screenshots of End Product:

jQuery Used to Attach a ZeroClipboard Instance to Each Copy Icon:

<script type="text/javascript">
    $(function() {

        $("#customerTable tbody td:last-child").each(function() {
            //Create a new clipboard client
            var clip = new ZeroClipboard.Client();

            //Cache the last td and the parent row    
            var lastTd = $(this);
            var parentRow = lastTd.parent("tr");

            //Glue the clipboard client to the last td in each row
            clip.glue(lastTd[0]);

            //Grab the text from the parent row of the icon
            var txt = $.trim($("td:first-child", parentRow).text()) + "\r\n" + $.trim($("td:nth-child(2)", parentRow).text()) + "\r\n" +
            $.trim($("td:nth-child(3)", parentRow).text()) + "\r\n" + $.trim($("td:nth-child(4)", parentRow).text());
            clip.setText(txt);

            //Add a complete event to let the user know the text was copied
            clip.addEventListener('complete', function(client, text) {
                alert("Copied text to clipboard:\n" + text);
            });
        });
    });                               
</script>

Please let me know in the comments what you think and what you might do different. Be sure to checkout the demo and download.

[dzone]

More jQuery Alert Dialogs Demo

Bill Beckelman — Wed, 14 Jan 2009 06:48:52 -0600

A couple of weeks ago I wrote about Cory S.N. LaViska’s new jQuery Alert Dialogs Plugin. Since then I have used it quite a bit and have been really happy with its ease of use and simplicity. At the end of the my first post about the plugin I said I would try and show you a way to setup an alert from the server side so that it shows up once the web page loads.

So when might you do this? You might want an alert on page load to let the user know that a task such as a delete was successful or probably more importantly and less intrusive would be to only let the user know something went wrong.

The method I came up with to popup the dialog on page load involves a single hidden field. All you have to do is pass the type of alert, message and title you want through the hidden field and the jQuery/JavaScript will take this data on page load and create the desired alert. Remember, you will need my version of the plugin (in the download) to be able to choose the different type of dialogs (info, success, warning, error). Also, the css and images for the dialogs originally came from Janko’s great post CSS Message Boxes for different message types.

Live Demo | Download (HTML, CSS, JS)

Screenshot of End Product:

jQuery:

    <script type="text/javascript">

        $(document).ready(function() {
            //See if an alert has been setup from the server side
            CheckAlert();
            
            //Add a click event to each delete icon
            $("#tableTasks tbody td:last-child").each(function() {
                $(this).click(function() {
                    var txt = $("td:first-child", $(this).parent("tr")).html()
                    jAlert("confirm", "Are you sure you want to delete the task '" + txt + "'", "Confirm", function(r) {
                        if (r == true) {

                            //You would most likely want to set the HiddenFieldAlert value on the server once the task has been deleted
                            //I am doing it here so that this demo can remain plain html, css, js                                                        
                            $("#HiddenFieldAlert").val("success;The task '" + txt + "' would of been deleted.;Success");
                            CheckAlert();
                        }
                    });
                }).css("cursor", "pointer");
            });

        });
        
        function CheckAlert() {
            var alertData = $("#HiddenFieldAlert");

            if (alertData.val()) {
                var alertDataArray = alertData.val().split(";")
                jAlert(alertDataArray[0], alertDataArray[1], alertDataArray[2], null);
                alertData.val('');
            }
        }
    </script>

Please be sure to checkout the live demo and download. Let me know in the comments what you think.

[dzone]

Set the Content of a NicEdit WYSIWYG Instance With JavaScript

Bill Beckelman — Wed, 07 Jan 2009 15:17:50 -0600

In a couple of previous posts I have used the pretty cool NicEdit WYSIWYG editor. Today I wanted to show you how you can use its JavaScript API to set the content of the editor’s body to the data of the item you want to edit. Please remember to be careful when accepting html content from users!

Demo | Download (HTML, CSS, JS)

Screenshots of End Product

-Clicking the edit icon pops up a SimpleModal dialog.

-The dialog contains a NicEdit Instance that has its content set to the item that you clicked to edit.

Explanation

Your best bet is to download the code and go through it yourself, but basically what happens when the edit icon is clicked is a new instance of the editor is instantiated:

    //Setup the NicEditor
    taskArea = new nicEditor(
    { buttonList: ['bold', 'italic', 'underline', 'left', 'center', 'right', 'justify', 'ol', 'ul', 'indent', 'outdent', 'link', 'unlink'] })
    .panelInstance("taskEditingArea");

The API then provides a way to get at this instance by finding it with nicEditors.findEditor() and then setting its content with .setContent():

    nicEditors.findEditor("taskEditingArea").setContent(editorText);

For more information be sure to see the API Documentation for NicEdit as well as the download for my demo.

[dzone]

There is More Content than Just the Front Page on DotNetKicks

Bill Beckelman — Tue, 06 Jan 2009 07:53:39 -0600

Are you tired of going to DotNetKicks and finding the same stories on the front page for days in a row? Trust me, there is some great content out there that never makes the front page. You just have to look a little deeper. When you do, you can help put some of that great new content in front of the masses. Even if you don’t submit stories yourself, you can still help out by giving the initial votes that push a story to the front page.

Why don’t these great articles make the front page? I can only speculate with two reasons. First, there are only so many users currently looking through the upcoming stories as well as submitting new content. Second, a lot of new content is added in the off hours and sort of slips by without ever reaching the critical mass or tipping point necessary to hit the front page. It just never makes it in front of the right users who kick from the upcoming queue.

So how do you find this content? The way to see it all is to stay on top of the upcoming stories queue. I know there is quite a bit of spam (it’s getting better as pointed out by John in the first comment), useless stuff and things you might not be interested in so I will show you some other ways.

Build a list of Friends

A great way to monitor the new content without having to spend your time in the upcoming queue is to build a list of friends. If you have spent anytime at all on DotNetKicks, I bet you have noticed that certain users tend to submit and vote up the stories you are interested in. Luckily DotNetKicks lets you add other users as friends to your profile. You can then view all of the stories that your friends are submitting or kicking.

1. Each story lists who it was submitted by. By clicking “read more…” you can also view who kicked the story to prominence in order.

2. If you have seen a particular user’s name a few times and liked the stories submitted or kicked, just click on the user’s name and then select “Add ‘username’ as a Friend".”

3. When viewing your own profile you can then click on “Kicked By Friends” or “Submitted By Friends” to view what your friends have been up to.

-Click your username to view your profile

4. Unfortunately, you can’t grab an RSS feed of the “Kicked By Friends” or “Submitted By Friends” data, but you can grab a feed of any individual user including yourself which isn’t a bad why to archive what you have been interested in.

View and Subscribe to the Categories You’re Really Interested In

I believe each of us has certain content that we are most interested in and want to stay on top of (for me it’s jQuery and ASP.NET). On the right side of the DotNetKicks home page near the bottom, you can select the category of content you want to keep your eye on. When you select one of the categories you are shown the latest stuff in that category, not just the stuff in that category that has made the front page. You can go here and view the latest content or you can subscribe to the feeds for the categories that interest you. Then when there is great new content in your categories, make sure to give it a vote so that it might rise and benefit others.

I urge you to spend some time promoting new content for the benefit of all. Along the way I am sure you will learn quite a bit and probably make some new friends (please consider adding me as a friend) .

Have you found another way to find great new content on DotNetKicks or disagree with me. Let me know in the comments.

[dzone]

Format Selected Table Rows For Pasting into Excel

Bill Beckelman — Fri, 02 Jan 2009 20:49:20 -0600

Back in November I wrote a post Add Copy to Clipboard Command To contextMenu.js Plugin Demo that copied the data from the selected table rows to the user’s clipboard. This method worked great unless you had a version of Flash Player higher than 9 installed due to a Security Change in Flash Player 10. I decided to mess around with this again today and come up with another method that might work that does not require any server side interaction.

I’m not really sure if this is an optimal solution (have to worry about popups being blocked), but I did get to mess around with some pretty interesting JavaScript and in the end it does work if your looking for another way.

The method I came up with does the following:

Builds a string of the selected rows using a JavaScript string builder function I found here.
The string is inserted in a hidden text area on the parent page (Note: I initially used a text input which worked fine in IE7 and FF3 but puked in Chrome 1.0).
The child popup is opened.
The child popup calls back to the parent and grabs the data from the hidden text area using: window.opener.document.getElementById('Hidden Text Area').value
The data on the child is then selected to make it ready for the user to press ctrl-c or right click/copy using some cross browser JavaScript.

Demo (Tested in IE7, FF3 and Chrome)| Download (HTML/CSS/JS)

Screenshots of End Product:

Format For Excel is clicked.
Popup loads with table data formatted cleanly, highlighted and ready for copying for pasting into Excel, Word, Outlook, etc.

Be sure to checkout the demo and download. Let me know what you think? Would you use this? If not, what would you do different?

[dzone]

jQuery Alert Dialogs

Bill Beckelman — Tue, 30 Dec 2008 19:15:51 -0600

Cory S.N. LaViska (creator of one of my favorite jQuery Plugins – contextMenu.js) released version 1.0 of jQuery Alert Dialogs a few days ago. It looked interesting and worth some investigation. To test things out I decided to try and recreate the dialogs from one of my earlier posts ASP.NET Popup Message Box User Control which was originally based off a post by Janko.

Cory’s new plugin “aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions.” I believe he achieved this in a good looking manner that is straightforward and simple to implement. The title and message of the dialog can be set before they are called. The dialog is also draggable when the jquery ui draggable plugin is included. Finally, the dialogs are dismissed in most browsers when the enter or esc key is pressed.

I really wanted to have the four types of alerts from my earlier post though (warning, error, success and info) since I use them all the time. It was pretty easy to tweak Cory’s CSS and the plugin to pass in the type of alert I wanted. You will find my modified version of the plugin in the download.

Live Demo | Download (HTML, CSS and jQuery)

Screenshot of End Product:

To call Cory’s version of the alert dialog the following is used jAlert('This is a custom alert box', 'Alert Dialog'); where the first parameter is the message and the second is the title. In my version jAlert('error', 'This is the error dialog box with some extra text.', 'Error Dialog'); I just pass in the type of alert I want (error, warning, success or info) as the first parameter and then the message and title.

In an upcoming post I will show you an easy way to set these dialogs up to fire after a postback and probably how to use them with Cory’s contextMenu.js plugin.

For more details on the jQuery Alert Dialog plugin, be sure to see Cory’s website. Also be sure to checkout the demo and download.

[dzone]

Use Email-To-Fax to Send Faxes from Your Web Site or Application

Bill Beckelman — Wed, 10 Dec 2008 08:10:55 -0600

I'm guessing you might be familiar with Fax-to-Email services. How many of you have used the Email-to-Fax feature that often comes with these services though? Did you notice the difference? This feature often comes along with the whole package, but I have a feeling you might of ignored it as often times these services come with a fancy GUI application that handles everything for you. In this post I am going to talk about using this feature as an easy way to generate some faxes direct from your web site.

As a former road warrior in a legacy industry, I used Email-to-Fax to send numerous faxes while on the road whether from a hotel room, airport terminal or just about anywhere in between. If you are not familiar with email to fax, it is a simple way to send a fax by attaching a document such as a Word or PDF file (or just about any other type) to an email that is then sent to your service provider to process. You generally receive an email confirmation when the fax transmission is complete or there is a fault.

I see the following benefits of using email to fax:

Original document is retained in your sent items which makes finding, re-sending and forwarding much easier (the fax history isn't in yet another application for your to track down and figure out how to use)
No wasted paper, at least on the senders end
Email confirmation of transmission (I recommend setting up a rule if your using Outlook to file transmitted faxes. Let failed faxes hit your inbox)
Does not require a fax machine or scanner if you already have an electronic copy of the document you want to send
You can generally fax to just about anywhere in the world fairly cheap

So all of this is great for local use by you or your employees, but what if you need an easy way to send some faxes from your web site or that of a client? Well as long as you can create an email in your server side language of choice, you can do the same thing. The email just needs a FROM address that has been registered with your service provider.

I have personally done this with several ASP.NET web sites and have sent thousands of faxes using this technique. Last week I posted a demo with a SimpleModal popup that populated the fax number and attention field with existing data and then let the user markup the message text with a NicEdit WYSIWYG editor.

This information could then be used on the server side to generate an email to send to your service provider for faxing.

The To address (fax number) generally needs to be parsed into something like 15095556221@yourprovidersemail.com
Depending upon the service provider, the text from the email subject or email body can be used to generate a cover page on their end.
Personally, I have always generated my own cover page on the fly and then added this as the first page in the PDF document that is attached to the email.
You then need to leave either the subject or body of the email blank depending upon the service provider to keep them from generating a cover page for you.
I often generate the entire document to be faxed on the fly if it contains dynamic content. I recommend ExpertPDF for this if your using dot net. If you don't want to create a PDF, most of the services I have used accept html attachments which is easy to to do from your server, however you never know how things will be rendered.

Considerations

If you send the fax from your server, where do the emailed fax confirmations go? If your application's users are authenticated which I am guessing they most likely are for this scenario, you can set each of them up with the service and use their email as the FROM address. In this case, they will receive their own confirmations. This has the added benefit that they can also send faxes direct from their email since they have been authorized, which is handy especially for remote workers. Another option is to have a single admin monitor for failed messages. If you were really creative you could use a pop3 component like MailBee to retrieve the messages and display them on your web site.

Is this a solution for everyone? Not at all. Maybe you have your own in house servers and might be able to rig up the Microsoft Fax Service or equivalent in other environments. If your web site is hosted though and your main business isn't sending faxes, I think email-to-fax is a simple option to get up and running that is easy and relatively inexpensive.

Service Providers

Over the past three years I have used several providers, however I have used RingCentral for the last two years for my personal use and have been very satisfied. I have found their fax service very reliable. They also offer other features I use such as a personal incoming fax number that goes to email as well as an 800 number and virtual PBX.

One more tip: While on the road, email-to-fax is a great way to print the documents attached to an email message on your BlackBerry, Windows Mobile Device or iPhone. Just forward the email to the nearest fax machine.

[dzone] [noads]

Modal Delete Confirmation V3 Using SimpleModal jQuery Plugin Demo

Bill Beckelman — Sun, 07 Dec 2008 13:23:00 -0600

Since my posts about using the jQuery SimpleModal plugin as a confirmation dialog have been some of my most popular, I thought I would go ahead and update things now that Eric Martin has released version 1.2.1 of the plugin.

As I wrote about on Friday, the biggest changes to the plugin seem to be the automatic centering of the dialog, ability to always use an iframe if desired and the default names were changed from modalxxx to simplemodal-xxx. For a full list of changes, please see Eric's change log section. With this version of my demo, I wanted to make the download pure html (not tied to ASP.NET) so that it might benefit more people. I also built upon Friday's demo of a SimpleModal popup containing the NicEdit WYSIWYG editor.

Demo | Download (HTML/CSS/JS)

Screenshot of End Product:

I'm not really going to go into any code this time around as it really hasn't changed much from V2 of my demo. If your interested please see it there or in the download.

One thing that I did want to point out that I haven't talked about in the past is the ability to override the height and width of the confirmation dialog that is set by the base CSS. The SimpleModal plugin provides the containerCSS option which can be used to set the styling for the container div.

containerCss: ({ width: "600px", height: "140px" })

Be sure to checkout the demo and let me know in the comments what could be improved.

Share this post:[dzone]

jQuery SimpleModal Plugin Version 1.2 with NicEdit WYSIWYG Editor

Bill Beckelman — Fri, 05 Dec 2008 11:21:05 -0600

Update 06DEC08 0920MST: Updated demo and download with version 1.2.1 of the SimpleModal plugin.

Update 05DEC08 2100MST: Eric Martin just released version 1.2.1 with some bug fixes. I will update this demo tomorrow sometime with the changes.

With the release of Eric Martin's version 1.2 of the SimpleModal jQuery Plugin, I wanted to take a look at the new code and changes. At the same time I decided to try out the NicEdit WYSIWYG editor that I found via 20 Excellent Free Rich-Text Editors from Webdesigner Depot.

For the demo I created a simple table with customer data. I then used the jQuery contextMenu plugin to call the SimpleModal popup pre-populated with the respective customer's data. In my next post, I am going to show you how to actually send the fax.

Demo | Download (HTML/JS/CSS)

Screenshot of End Product:

Probably the biggest change to the SimpleModal plugin is automatic centering of the dialog which can be overridden. Along with bug fixes, Eric also changed the internal CSS classes used by the plugin and added additional options. Be sure to see his project page for more details.

Of the multiple editors in the Webdesigner Depot article, I was really interested in NicEdit. From the NicEdit web site:

"NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser. NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing."

The editor is MIT licensed, and though not directly a jQuery plugin, I found it was easy to integrate and so far it seems everything is playing nice between jQuery and NicEdit. NicEdit provides its own DOM ready function, however I disregarded it and just used its hooks from within my jQuery code. I found that the editor didn't like being initialized on a hidden textarea, so I ended up not adding the editor until the onShow event of the SimpleModal plugin. I also, removed it during SimpleModal's onClose event. So far, I am very excited about NicEdit. I like its simplicity, cleanliness and light payload (the js for the version I am using is 32kb before minification which I think is pretty good for a rich text editor). Even the icons are a single CSS sprite.

jQuery (See download for full code, I tried to comment so you can quickly skim and figure out what is going on)

<script type="text/javascript">
    var faxMessageArea;

    $(document).ready(function() {        

        //Bind a right click menu to each table row
        //see download

        //Bind a left click menu to the last cell in each row.
        //See download
   });

 
   function contextMenuWork(action, el, pos) {
        switch (action) {
            case "fax":
                {
                   //See download
                    break;
                }                
        }
    }

    function sendFax(title) {
        $("#faxDialog").modal({
            persist: true,
            containerCss: ({ width: "700px", height: "300px" }),
            onClose: modalOnClose,
            onShow: function modalShow(dialog) {
                
                //Setup the NicEditor
                faxMessageArea = new nicEditor(
                    { buttonList: ['bold', 'italic', 'underline', 'left', 'center', 'right', 'justify', 'ol', 'ul', 'indent', 'outdent'] })
                    .panelInstance('faxMessage');   
                
                dialog.overlay.fadeIn('slow', function() {
                    dialog.container.fadeIn('fast', function() {
                        dialog.data.hide().slideDown('slow');
                    });
                });
                
                //Set the title of the dialog                                
                dialog.data.find(".modalheader span").html(title);

                //Perform validation here (TODO)
                
                dialog.data.find("ButtonSendFax").click(function() {
                    // close the dialog
                    $.modal.close();

                    //Fire a postback or AJAX call with the entered data (TODO)
                    
                });
            }
        })
    }    

    function modalOnClose(dialog) {
        dialog.data.fadeOut('slow', function() {
            dialog.container.slideUp('slow', function() {
                dialog.overlay.fadeOut('slow', function() {
                    $.modal.close(); // must call this to have SimpleModal                   
                    // re-insert the data correctly and
                    // clean up the dialog elements
                });
            });
        });

        //Remove the NicEditor
        faxMessageArea.removeInstance('faxMessage');
        faxMessageArea = null;
    }                                    
</script>

Be sure to checkout the demo and let me know what you think in the comments.

Share this post: [dzone]

Add Copy to Clipboard Command To contextMenu.js Plugin Demo

Bill Beckelman — Sun, 30 Nov 2008 09:16:56 -0600

Update: 30NOV08 @ 1815 PST - Due to a Security Change in Flash Player 10, the copy to clipboard functionality I am using below will not work if you have Flash 10 installed. I am trying to find a workaround, but it looks like it may require creating a button in flash that the user can click to set the clipboard data. Any Flash developers able to help me out?

I have been using the jQuery Context Menu Plugin by Cory S.N. LaViska for a while now and have written about it several times in the past. Today, I am going to show you how to add a "Copy to Clipboard" command to the context menu that works in IE as well as FireFox and Chrome if flash is installed. I would guess that is works in Safari, but you will have to let me know in the comments.

You might provide this feature to the users of your application so that they could quickly capture formatted data to be pasted into an email, word document or live chat with a customer for example.

Adding this functionality for IE alone is pretty straight forward (except for the caveat in the issues section) as IE5 and later provides the clipboardData object. For my own uses (I do non public facing development) this would probably be fine in my known bubble. However, in the real world you might want this to work in a more cross browser fashion. The option that I know about is to use the jQuery Copy Plugin which uses the clipboardData object if available, otherwise it embeds a tiny flash file that will handle the copy for you. I like the simplicity of the plugin, but I decided to modify it for learning purposes and thought I would share. Be sure to checkout my modified version below or in the download.

Demo | Download (ASP.NET 3.5)

Screenshot of End Product:

When you paste the contents of the clipboard, this is what you end up with:

Contact Name: Maria Anders
Title: Sales Representative
PH: 030-0074321

The plugin is really straight forward to use. There is only one function that is provided which is $.copy() where you pass a string that gets copied to the clipboard. Below is the jQuery I used when Copy is clicked on the context menu:

var txt = "Contact Name: " + $(el).find("#contactName").text() + "\nTitle: " 
    + $(el).find("#contactTitle").text() + "\nPH: " + $(el).find("#phone").text();
$.copy(txt);

Note: "el" in this case is a wrapped set of the elements of the table row that was clicked.

Issues:

With IE, the ability for a web page to use the clipboard may come with a warning message or might be blocked altogether depending upon the user's security settings. Unfortunately if it is blocked, the stock jQuery copy plugin will not get you around this unless you tweak it to always go the flash route which I tried and does work.

IE Warning Message:

Security Settings in IE:

Along with the tweak to only use the flash method, I changed the plugin so that the jQuery $.noConflict() function can be used by placing it within (function($) {......... })(jQuery);. I also changed the embed code to look in a single location for the swf file. The stock plugin expects to find the swf file in the same directory as the page that calls it. Since I will likely be using the copy command in a lot of context menus spread throughout my application I thought this would be a good change as well.

So, below is my modified version of the jQuery copy plugin:

/*
* jQuery Copy to Clipboard Plugin
* Bill Beckelman http://beckelman.net
* 
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Date: 2008-11-29
* Version 1.0
*
* Depends upon copy.swf file
*/

(function($) {
    $.copy = function(t) {
        if (typeof t == 'undefined') {
            t = '';
        }

        var i = '<embed src="/_assets/swf/copy.swf" FlashVars="clipboard=' +
            encodeURIComponent(t) + '" width="0" height="0" type="application/x-shockwave-flash"></embed>';

        if ($('#flashcopier').length == 0) {
            $('body').append('<div id="flashcopier">' + i + '</div>')
        }
        else {
            $('#flashcopier').html(i)
        }
    }
})(jQuery);

Note: You will need to change the path to the swf file that goes with the plugin to wherever you end up putting it. For testing with localhost I think you may
need to to include the name of your web site in the path as well.

Be sure to checkout the demo and let me know in the comments what you think and what could be improved.

[dzone]

Item Count in Table Footer and Changes to the tableSorter-pager Plugin Demo

Bill Beckelman — Tue, 25 Nov 2008 06:38:07 -0600

One thing I have been adding to my tables lately is a count of the number of rows in the footer (generated on the client side) to give the user a quick idea of what she is working with. The live demo or screenshot below will show you what am talking about:

This is really easy to do on the client side with jQuery thanks to the jQuery Object Accessor length which returns the number of elements currently matched in the wrapped set. Below is the jQuery to do this. The first selection finds the last cell in the footer. The text of the cell is then set to the number of elements returned by selecting the rows from the body of the table and then in this case "Records" is appended.

$("#tableOne tfoot td:last").text($("#tableOne tbody tr").length + ' Records');

Another way I have been doing this is with a slight modification to the tableSorter-pager plugin to display the count along with the current and total page info.

Live Demo | Download (ASP.NET 3.5)

Screenshot of End Product:

This only requires changing one line in the plugin, though some more modification to add this an option instead of a hard override might me a better idea. I changed the line commented out below to the line following. Notice that the plugin already provides a way to get the total number of rows through c.rowsCopy.length.

            function updatePageDisplay(c) {
                //var s = $(c.cssPageDisplay, c.container).val((c.page + 1) + c.seperator + c.totalPages);    
                var s = $(c.cssPageDisplay, c.container).text("Page " + (c.page + 1) + 
                     c.seperator + c.totalPages + "   (" + c.rowsCopy.length + " Records)");
            }

I also changed the pagedisplay in the footer markup from an input box to a label so that placing the cursor in the input doesn't confuse the user. If you don't do this, you might have use val() instead of text() in the jQuery above.

Well, I hope I have shown you an improvement that maybe you hadn't thought about before. Be sure to checkout the demo and let me know in the comments what you would do different.

[dzone] [noads]

ASP.NET Repeater Combined with jQuery FAQ Plugin Demo

Bill Beckelman — Sun, 23 Nov 2008 11:08:30 -0600

Earlier this week, Chris Blankenship released version one of a new jQuery FAQ plugin. I was pretty excited looking at his demo as I have a need for something like this in a project and his plugin should work nicely. I built a quick demo of my own to try it out and thought I would share with you what I did.

Live Demo | Download (ASP.NET 3.5)

Screenshots of End Product:

The plugin is really straight forward. You just have to add your FAQ items in a header element such as an h2 and content sections in spans. This could be done in a pure HTML page or the FAQ items and content could be pulled from a database or XML file like I did in the download. Once the markup is built, the plugin does the rest. It will hide the content sections, add click events to the headers to open and close the content sections, toggle the plus/minus symbols and build the index shown on the right if you want. The plugin also adds ids to each header element to be used as bookmarks so that when you click on an item in the index you are taken to the position of the FAQ item/content on the page. A click event on each index item also shows the content when clicked.

In the demo/download I databound an ASP.NET Repeater to data from an XML file to dynamically build the markup:

    <div id="faq"> 
        <asp:Repeater ID="RepeaterFAQ" runat="server">
            <ItemTemplate>
                <h2><%# Eval("faqQuestion") %></h2>
                <span><%# Eval("faqAnswer") %></span>
            </ItemTemplate>
        </asp:Repeater>
    </div>

Note that the div with id "faq" surrounding the repeater is used by the plugin to locate the markup you want to use to create the FAQ.

    <script type="text/javascript">
        $().ready(function() {
            $("#faq").makeFAQ({
                indexTitle: "Index",
                displayIndex: true,
                faqHeader: "h2"
            }); 
        });
    </script>

I ran into one issue that gave me a little grief. Since the plugin uses the text from the FAQ item to build the bookmark, any special characters (such as my question mark at the end of each item) will cause problems. Chris pointed this out in his post about the plugin, but by the time I started messing with the code I forgot so it took me a little while to figure out why things were not working. I managed to get things working, but Chris helped me out with an improvement to the regular expression in the plugin that was already striping out white space to also strip the question marks:

var entryNameSafe = entryName.replace(/(\s|\?)/g, "")

I want to point out that Chris did a nice job setting the plugin up to be unobtrusive. The screenshot below is what things look like with JavaScript turned off:

All in all, I am really excited about this plugin. Chris mentioned in his post that he may work on a control for BlogEngine.NET to easily create the FAQ items. If your interested in BlogEngine.NET like I am, you may want to subscribe to his feed and encourage him to do so. I'm sure he would appreciate a few more kicks and dzone votes to get some more exposure for his plugin as well.

Be sure to checkout the live demo.

[dzone]

jQuery tableSorter and quickSearch Plugins Together Demo

Bill Beckelman — Thu, 20 Nov 2008 07:47:45 -0600

Last week Dave Ward wrote a great post Use jQuery and quickSearch to interactively search any data. In his post he explained how to use the plugin and also a work around that is needed to make the plugin play nice with ASP.NET. I recommend taking a look at his post if your new to the quickSearch plugin. Reading through the comments, Jinno wanted to use the quickSearch plugin along with the tableSorter plugin which I thought was a great idea. Dave provided a hint in his comments that to get the two working together you would probably need to "re-tableSorter the table in quickSearch’s onAfter event" which got me started.

Live Demo | Download (ASPX and HTML)

Screen Shots of End Product:

Once you have the jQuery file and plugins linked to in your document, this is all of the jQuery that is needed. I tried to explain in the comments what is going on:

<script type="text/javascript">
$(document).ready(function() {

    //Setup the sorting for the table with the first column initially sorted ascending
    //and the rows striped using the zebra widget
        $("#tableOne").tablesorter({ sortList: [[0, 0]], widgets: ['zebra'] });

    //Setup the quickSearch plugin with on onAfter event that first checks to see how
    //many rows are visible in the body of the table. If there are rows still visible
    //call tableSorter functions to update the sorting and then hide the tables footer. 
    //Else show the tables footer  
        $("#tableOne tbody tr").quicksearch({
            labelText: 'Search: ',
            attached: '#tableOne',
            position: 'before',
            delay: 100,
            loaderText: 'Loading...',
            onAfter: function() {
                if ($("#tableOne tbody tr:visible").length != 0) {
                    $("#tableOne").trigger("update");
                    $("#tableOne").trigger("appendCache");
                    $("#tableOne tfoot tr").hide();
                }
                else {
                    $("#tableOne tfoot tr").show();
                }
            }
        });

});   
</script>

So this is great and all, but I can't seem to get this to work with the tableSorter pager plugin. The way the pager plugin works, only data from the first page is filtered. Maybe someone else can run with it and figure it out. I would recommend taking a look at how the tableSorter filter plugin does it and see if the filter part of quickSearch couldn't be ported to the other? Another option might be to re-write the pager plugin to hide and show rows and not necessary remove/add them back to the DOM? Please let me know if you take this further than I have.

[dzone]

Select All CheckBoxes in a Table Column With and Without jQuery Plugin Demo

Bill Beckelman — Tue, 18 Nov 2008 08:11:31 -0600

I first wrote about selecting all of the checkboxes in an ASP.NET ListView almost three months ago now. You may of noticed in my last post some cleaner code to achieve this that doesn't require adding arbitrary classes or id's for hooks. Since I didn't point it out, I thought I would share it as well as my first jQuery plugin that does the same thing with a few more extras.

Demo | Download (Includes ASPX and HTML Example)

Screenshot of End Product:

So to start, the code that I am using now to select of all of the CheckBoxes in the first column of a table:

<script type="text/javascript">
    $(document).ready(function() {
        $("#tableOne thead tr th:first input:checkbox").click(function() {
            var checkedStatus = this.checked;
            $("#tableOne tbody tr td:first-child input:checkbox").each(function() {
                this.checked = checkedStatus;
            });
        });

    });
</script>

Once the document is ready, selectors are used to find the first CheckBox in the head of the table and then a click event is added to it. When the CheckBox is clicked its checked status is added to the variable checkedStatus. Next selectors find the CheckBox in the first cell of each column in the body of the table. Then each is used to iterate through this wrapped set and the checked status of each CheckBox is set to the value stored in checkedStatus.

The nice part about the code above is that the only client id you have to worry about is for the table itself. If you use MasterPages or Panels or anything that messes with the client id in ASP.NET you won't have to track them down or add extra classes to your markup to be able to get your code working.

Since I use this on almost all of my tables I thought I would try turning it into my first jQuery plugin. One of the things that came to mind when building the plugin was what if I didn't want the column of CheckBoxes as the first column? How could I support this? Turns out it was pretty easy to setup my defaults for the plugin to look for the CheckBoxes in the first column, but provide options that allow for the CheckBoxes to be in whatever table column the user designates. I also ended up adding default tooltips to the CheckBox in the head that can be overridden as well. So without any further verbiage:

/*
* selectAllRows.js - http://beckelman.net
*
* Copyright (c) 2008 Bill Beckelman
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* 2008-11-18
* Version .01
*/

(function($) {

    $.fn.selectAllRows = function(callerSettings) {
        var settings;
        var headerCheckbox;
        var columnCheckboxes;

        settings = $.extend({
            column: 'first',
            selectTip: 'Click to Select All',
            unselectTip: 'Click to Un-Select All'            
        }, callerSettings || {});

        if (isNaN(settings.column)) {
            headerCheckbox = $("thead tr th:" + settings.column + "-child input:checkbox", this);
            columnCheckboxes = $("tbody tr td:" + settings.column + "-child input:checkbox", this);
        }
        else {
            headerCheckbox = $("thead tr th:nth-child(" + settings.column + ") input:checkbox", this);
            columnCheckboxes = $("tbody tr td:nth-child(" + settings.column + ") input:checkbox", this);
        }

        headerCheckbox.attr("title", settings.selectTip);

        headerCheckbox.click(function() {
            var checkedStatus = this.checked;

            columnCheckboxes.each(function() {
                this.checked = checkedStatus;
            });

            if (checkedStatus == true) {
                $(this).attr("title", settings.unselectTip);
            }
            else {
                $(this).attr("title", settings.selectTip);
            }
        });

        return $(this);
    };
})(jQuery);

To call the plugin, you just have to select your table and then add ".selectAllRows();" See the demo, for examples (with code) that show using different columns and overridden tooltips.

There is other stuff that could be done to improve this plugin. I have been working on adding a callback that will allow for things like disabling or enabling items on the contextMenu plugin I use or whatever you want to do once the CheckBoxes have all been checked or un-checked. Its working, but not that well yet. I will update you when it does. If your interested in building your own plugins I recommend checking out the documents on the jQuery web site or the chapter on building plugins in the book jQuery in Action.

Let me know in the comments what you think and what could be improved.

[dzone]