Kombine News

CRM manager - New Site Launched

Luca Lepori — Wed, 27 Aug 2008 17:20:26 +0000

We launched the new CRM manager site today. Both the client and ourselves are very pleased with the results. It’s a bespoke design by Kreg and is based on WordPress which has been great to work with from both a design/deployment perspective, and, going forward, a self-serve content management perspective for the client. We’re grateful to have had this opportunity to deliver a shiny new site for the folks at CRM manager.

Contact us if you’d like to learn more about this project and/or if you’re interested in a new custom site with great features that is also easy to maintain.

MooTools Poof Effect

Kreg Wallace — Fri, 18 Jul 2008 10:12:48 +0000

Here’s a quick update on the jQuery Poof Effect I described recently: Keith Baker has ported the effect to the MooTools JavaScript library and posted the code on his bestpract.us wiki. Great stuff. Check out the demo.

jQuery UI Cursor Selection

Kreg Wallace — Sat, 28 Jun 2008 01:27:12 +0000

In a recent post on providing jQuery UI Draggable Icons, I noted that switching the cursor setting to “pointer” on draggable page elements was a good idea because it indicated that the draggable element was actionable. While this was an improvement over the text-selection cursor the browser provided by default, I completely overlooked the existence of the move cursor. The move cursor is clearly the better choice in this case and I have updated my example code to use it.

I searched around and it turns out there are around thirty different cursors available to the browser that can easily be set with CSS. The Mozilla Developer Center offers a handy cursor test page, allowing us to view each of the standard cursors in action (by mousing over the values in the “CSS name” column). So, how can we use these cursor options to improve the usability of jQuery UI effects?

Resizables

Eight of those cursors are handles for manipulating the edges and corners of resizable elements. jQuery UI includes a resizable method, so let’s test it out. This is the HTML element we’ll be resizing:

I'm resizable

And this is the jQuery UI JavaScript code need to make it resizable:
$('.resizable').resizable();

And a little CSS to style our HTML:
.resizable { background-color: #ff8998; border: 2px solid #d2412c; height: 100px; text-align: center; width: 100px; }

or See the working examples

Not bad at all! Notice how the correct cursor styles are displayed by the resizable handles even though we haven’t assigned any cursor styles in our CSS. jQuery UI takes care of selecting the cursors for us by default. It’s a great example of foresight by the jQuery UI team. But what about those draggables?

Draggables?

Unfortunately, jQuery UI does not automatically set the cursor to “move” when the user hovers over a draggable element. This seems like an oversight to me, but perhaps a default move cursor for draggables will make it’s way into a future release. In any case, it’s simple enough to set this property for ourselves. Just add cursor: move to the CSS definitions of all of your draggable elements.

What about AJAX?

AJAX routines are another aspect of jQuery that could be improved with some default cursor styling. Did you notice the animated progress cursor example on the Mozilla page? This is a great cursor for indicating that a process is operating in the background which will be completed shortly.

Where to attach it?

When we try to use this cursor on an AJAX form submission, one question quickly becomes apparent: Where should we attach it? Cursors change in accordance with the page element that is being hovered. But we want the progress cursor to remain on display regardless of which element the user hovers over, until the AJAX operation returns it’s data from the server. The solution is to assign the “progress” cursor to the tag when the form is submitted and then reset the tag’s cursor to “auto” when the return data arrives from the server. We can accomplish this with the following commands:
document.body.style.cursor = 'progress';

and:
document.body.style.cursor = 'auto';

Here’s how they might be used in an AJAX request script:
$('#my_form').submit(function() { document.body.style.cursor = 'progress'; $.post('my_script.php', { my_key: my_input_field_value }, function(data) { code_to_update_page; document.body.style.cursor = 'auto'; }); return false; });

Pseudo example

On my example page, the “ajax post” box provides a visual example of this effect. However, it is not a true working example, as no AJAX routine is actually being performed. Clicking the box simply sets the cursor to “progress” for three seconds and then resets it to “auto”.

or See the working examples

Useful links:

[UPDATE]: I changed the AJAX example above to reset the cursor to “auto”, instead of resetting it to “default” as I had originally written. Using default will force the arrow cursor to display, while using auto allows the browser to display whichever cursor is appropriate to the page element that is being hovered, and is thus the preferred solution.

jQuery Poof Effect

Kreg Wallace — Tue, 24 Jun 2008 17:55:24 +0000

Following up on my last post, jQuery UI Draggable Icons, which offered a way of presenting visual cues to help users identify draggable page elements, this article examines a technique for providing visual feedback when a page element is removed.

The poof effect

Mac OS X users will be familiar with the poof animation that occurs when application icons are removed from the dock. The animation looks nice, is unobtrusive, and provides a clear indication of the function being performed. Why not bring this effect to the web?

or see the example

Hiding and removing elements with jQuery

The jQuery library provides several methods for hiding the display of page elements or removing them entirely from the document tree. The remove() and hide() methods cause elements to disappear instantaneously. The sudden disappearance can leave your site visitors wondering exactly what happened when they clicked that delete button. The fadeOut() method, however, provides a more graceful exit. We’ll use that in our example. Let’s get started with the code:



	delete me

Above is the HTML for the element we’ll be removing from the page. Now let’s remove it with jQuery:
$(document).ready(function() { $('.deleteme').click(function() { $(this).fadeOut('fast'); }); });

Here we use the standard jQuery technique of attaching event handlers to page elements when the document structure has finished loading. In the above code, each element that has a class name of “deleteme” is assigned an onclick event that when performed, causes the clicked element to quickly fade and become hidden. It works nicely and provides a base level of visual feedback for the user. But we can do better.

Elements of a poof

We’ll be creating our poof using sprite animation. Sprite animation is a technique in which all of the frames used in an animation sequence are collected side-by-side in a single image file. Only a small portion, or frame, of the complete image is displayed at a given time and the animation is composed by sequentially adjusting the visible portion of the image, much like a filmstrip. You can see the image we’ll be using for our animation to the right. It is divided into five frames.

Why use sprite animation?

Using an animated GIF might be easier and wouldn’t require as much coding, but sprite animation offers two distinct advantages: First, with sprite animation we have the option of using PNG images with alpha transparency (GIF offers only binary transparency and MNG support by the major browsers just never took off). Second, we can control the frame rate of sprite animations programatically, so a single image file can be animated at any speed by simply typing in the desired frame rate—no need to create a whole new version of the image file.

Displaying and animating the sprite

First, we’ll place an empty

tag on the page to hold the poof sprite:

Then we can style it with CSS:
.poof { background: transparent url(../images/poof.png) no-repeat 0 0; cursor: pointer; display: none; height: 32px; position: absolute; width: 32px; }

Here, the poof sprite (poof.png) is set as the background image and its top and left positions are both set to 0. The display is set to none, so the element is currently invisible. The height and width are both set to 32 pixels, which is the size of each frame in our animation. We have set the position type to absolute, but have not specified the top and left values. These we will handle in JavaScript with jQuery:
$(document).ready(function() { $('.deleteme').click(function(e) { var xOffset = 24; var yOffset = 24; $(this).fadeOut(’fast’); $(’.poof’).css({ left: e.pageX - xOffset + ‘px’, top: e.pageY - yOffset + ‘px’ }).show(); animatePoof(); }); });

Now, when the “.deleteme” element is clicked, the “.poof” animation is positioned next to our cursor (see the jQuery docs for more on how to use pageX and pageY to determine the cursor position). Its position relative to the cursor is determined by the xOffset and yOffset variables we defined. Next, we use .show() to turn the display of the poof animation on and run the animation by calling a separate function, animatePoof():
function animatePoof() { var bgTop = 0; var frames = 5; var frameSize = 32; var frameRate = 80; for(i = 1; i < frames; i ++) { $('.poof').animate({ backgroundPosition: '0 ' + (bgTop - frameSize) + 'px' }, frameRate); bgTop -= frameSize; } setTimeout("$('.poof').hide()", frames * frameRate); }

The animatePoof() function is composed of a loop that resets the background-position of the .poof

by the height of one frame per iteration, creating a simple animation effect. The bgPosition variable represents the initial top position of the background-image. This value is decreased by 32 pixels on each iteration of the loop. The frameRate variable determines the speed of the animation. Here, each frame is displayed for 80 milliseconds. Once the animation has completed, we need to hide the poof

so that its presence (though invisible) will not block attempts to click other elements we want to delete. This is accomplished with the setTimeout call.

License

The poof image used in this example was created by The Kombine Group and is modeled after the Apple OS X dock poof. It is provided here for free and is licensed under both the GPL and MIT licenses—the same licensing used by the jQuery library itself.

Download

Clicking the “Get the poof” button below will download a ZIP file containing the poof as a PNG file, a copy of the working example code, the MIT and GPL licenses and a layered PSD source file. In the PSD, each frame is 128 × 128 pixels, so you can use it for creating much larger poofs if you desire.

or see the example

jQuery UI Draggable Icons

Kreg Wallace — Mon, 23 Jun 2008 06:27:03 +0000

I’ve recently been working with jQuery UI draggable and droppable components and while the functionality is great and easy to implement, drag-and-drop does present a potential usability problem: drag-and-drop components are not yet in widespread use on the web and the average web surfer will not be expecting to discover them on your web site. Because of this, drag-and-drop components could get overlooked completely. How do we solve the problem?

or see the example

Users need a hint

We could provide text instructions on the page, explaining which objects are draggable and what to do with them, but we all know that people don’t read on the web; they scan. So, let’s give visitors a visual cue to help them quickly identify draggable components.

The icons

I’ve created a draggable icon to help address the problem. Actually, there are two icons: one for use on light backgrounds and another for dark backgrounds. The icons are 16 × 16 pixel PNG images with alpha transparency. Here’s the quick preview:

You can see the draggable icons in action on the example page.

Making use of the icons

In the example, I put the icons to use as background images in the headers of my draggable boxes. Here is the HTML:



	Dark background

In the CSS, .draggable h3 gets the background image and is assigned a 24 pixel left padding. Its line height is also set to 24 pixels and the icon is positioned 4 pixels from the top of it’s containing h3 tag in order to keep everything vertically aligned. Here is that bit of CSS:
.dark h3.title { background: #36c url(../images/icon_draggable_dark.png) no-repeat 2px 4px; color: #fff; font-size: 12px; font-weight: bold; line-height: 24px; margin: 0; padding-left: 24px; }

Note: line-height and padding-left should be set to at least 16 pixels each in order to display the full icon.

~~Also note that the draggable boxes have been assigned cursor: pointer in their CSS styles in order to display the pointing hand cursor when a user hovers over them.~~ [Update: The cursor style has now been changed to "move". This is the better option and one I had previously overlooked.] This helps to indicate that the draggable box is an actionable object. Without this style, the default cursor in our example would have been the text selector, which is less suited to the functionality we are trying to emphasize.

License

The jQuery UI draggable icons are free and licensed under both the GPL and MIT licenses—the same licensing used for the jQuery JavaScript library itself. Basically, you can put the icons to any use you wish, whether personal or commercial, and you won’t have to jump through any special hoops in order to do so.

Download

Clicking the “Get the icons” button below will download a ZIP file containing the two icons as PNG files, a copy of the working example code, the MIT and GPL licenses and a layered PSD source file, which is useful if you wish to customize the icon images in some way.

or see the example

Useful links:

WebAppers Icon Giveaway

Kreg Wallace — Tue, 11 Sep 2007 23:04:54 +0000

Kombine and WebAppers.com are teaming up to give away a free set of the Kombine Pro toolbar icons. That’s 264 icons for your software or web application—a $59.95 value. To win, just mosey on over to the WebAppers article and post a comment stating how you intend to use the icons. A lucky winner will be picked on September 24. Good Luck!

Toolbar Icons Update

Kreg Wallace — Thu, 02 Aug 2007 21:40:52 +0000

The Kombine toolbar icon sets have received a new update today. We’ve added 10 new icons in both 32×32 pixel and 16×16 pixel sizes (for a total of 20 new images). New additions to the set include icons for podcasts, music, movies, news and RSS feeds. And there’s an update to the iPhone icon (now that we’ve finally had a look at the thing).

Use these icons to add a professional design touch to your web or desktop application. Check out the free icon set, which includes the new news icon, or jump right into the full Pro set of 266 icons for $59.95.

Toolbar Icons

Kreg Wallace — Thu, 01 Feb 2007 19:09:43 +0000

Today Kombine released a new set of OS X-style toolbar icons for Mac application developers. The set includes 244 toolbar icons consisting of 32 x 32 pixel and 16 x 16 pixel images. There are also a few specialized buttons in different sizes for multimedia controls and the like. These icons will fit smoothly into the look of Apple’s OS X operating system. You can use them in your shipping software product or to rapidly prototype something new. The complete set costs $59.95 and may be purchased via PayPal.

If you’re not ready to make a purchase right away, have a look at our set of 45 free toolbar icons or check out the Quick Reference Card for the full set.

Kombine Style Switcher

Kreg Wallace — Sun, 31 Dec 2006 05:11:51 +0000

We recently considered redesigning our website here at Kombine. It’s a hazard of the web design profession—the urge to constantly tinker with whatever is currently online. The problem is that we still like the current (classic) design and have gotten a lot of positive feedback on it. We didn’t want to abandon it, but we’re also interested in trying something new.

A solution to our dilemma arrived in the form of CSS themes. After a bit of fiddling with JavaScript and alternate stylesheets, visitors to our site can now select a theme of their choice and completely refashion the look of the site with a single click. Give it a try—you can choose a theme by selecting it in the drop-down menu in the upper-right corner of this page.

We’ve set up two main themes (”classic” and “cool breeze”) with large print alternatives for each. Plus there’s a high contrast version (larger print with light text on a dark background) as well as a completely unstyled version in case you’re into that sort of thing.

Offering alternate site themes that radically reshape page layout and design (such as switching from “classic” to “cool breeze”) makes sense on a site offering web design services, but would probably not benefit many other businesses. The ability to offer large print versions of a site however, has a universal application and should be more pervasive on the web.

Setting up a website for theming requires a strict separation between structure and style. We eliminated inline styles and image tags as much as possible and of course, laying out the pages with CSS rather than tables is imperative. The graphic look of our themes is created with CSS and background images and the style switching is handled with a slightly modified version of the script described in this article on A List Apart.

Vienna with Prague

Kreg Wallace — Sat, 25 Nov 2006 03:49:55 +0000

Some time ago, I submitted a custom CSS page style for Vienna, an open source newsreader for the Mac. Today, I went to the downloads page to update my copy of Vienna and discovered that the style I submitted, “Prague” is now bundled with the software. Sweet.

If you haven’t tried Vienna yet, give it a shot—it’s an excellent, full-featured and free alternative to paid newsreaders. And you can give Prague a whirl by selecting it from the View / Style menu.