About design and nearby

jQuery Namespaced Events for Safer Event Handling

Posted: March 31st, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , , , | No Comments »

Probably it’s a well-known feature of jQuery events.. and uncommon at the same time.

It’s easy to add and remove an event handler in jQuery. You could remove a handler because you don’t need to produce any actions on that event anymore or to reduce memory usage, or both. The problem happens in case you’ve attached several handlers to the same event – you are not able to remove just one of them.. without namespacing.

The event.namespace property returns the custom namespace when the event was triggered.

So

  1. $(window).bind('resize', function (){
  2. console.log("doSomething");
  3. });

matches everything and
Read the rest of this entry »

jqGrid: How to Make it Responsive (with Twitter Bootstrap)

Posted: March 30th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | 5 Comments »

I started developing application with jQgrid (an Ajax-enabled JavaScript control for representing and manipulating tabular data) and Twitter Bootstrap grid system. This jQGrid plugin uses a px width for defining width of the grid and column width. And my design should support responsibility – as usual. And that’s the tricky part ;)

jq Grid

Solution #1

The HTML: I wrapped my grid with div element with class ‘jqGrid’:

  1. <div id="grid" class="jqGrid">
  2.     <table id="list"><tr><td></td></tr></table>
  3.     <div id="pager"></div>
  4. </div>

Read the rest of this entry »

How to Support Different Screens for Android: Working with XAML and 9-patch

Posted: March 19th, 2015 | Author: | Filed under: Development, Mobile Design and Development, Tips and Tricks | Tags: , , , , , , | No Comments »

According to Android Developer, all user interface elements in an Android app are built using View and ViewGroup objects. A View is an object that draws something on the screen that the user can interact with. A ViewGroup is an object that holds other View (and ViewGroup) objects in order to define the layout of the interface.
Android provides a collection of both View and ViewGroup subclasses that offer common input controls (such as buttons and text fields) and various layout models (such as a linear or relative layout).

Long story short, once I am to produce a custom progress bar for Android application. Unfortunately, my client was not happy with a well-known ProgressBar. It should be realized as line with circles – to show the steps and the progress a user does and cover all Android devices:

Progress Bar for Android application

My decision was to use a NinePatchDrawable graphic (9-patch) – a stretchable bitmap image, which will be automatically resized to fit the contents of the View. It’s a standard *.png image with an extra 1-pixel-wide border saved with the extension .9.png into the res/drawable/ directory of Android project. With 1-pixel black lines drawn on the edge you can define how to scale and fill your image: top & left – scalable area, bottom & right – fill area:
Read the rest of this entry »

How to Choose a Great Color Combination for Your Website

Posted: March 4th, 2015 | Author: | Filed under: Creative Process, Design and Decorations, Tips and Tricks | Tags: , , , , , | No Comments »

Deciding colors for website is not an easy task. Color is one of the really visual, key parts to any design. And the challenge is to combine color while giving the website a unified and polished look.

There are a lot of methods for choosing a color combination. To build a color palette from scratch I get accustomed to use Adobe Color CC (Adobe Kuler) (you can find more about here: How to Work with Adobe Color CC (Adobe Kuler)), my professional experience and artistic bent :)

Сolor palette

Read the rest of this entry »

How to Add Active Navigation Class Based on URL to Menu Item

Posted: February 18th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

When you work on a navigation menu for a website, it would be fine to make it the way the visitors on the website know on which page of the site they are on. This can be accomplished by adding an ‘active’ class to the menu item of the current page.

Active navigation class for menu item

Javascript can access the current URL in parts.

To add an ‘active’ class to the navigation tab of any current page (when page’s url is = link’s href attribute), say, for the code below:

Read the rest of this entry »

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now