About design and nearby

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 »

Responsive DHTMLX Grid Table

Posted: January 22nd, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | 2 Comments »

If you ever worked with DHTMLX library and it’s implementation in responsive design.. then you know what I’m talking about :)

By default (if there is not enough width for data grid) a scroll at the bottom of your table appears after page resizing and all your efforts for perfect responsibility are broken.

I solved this issue with a couple of lines of jQuery:

  1. $(window).resize(function () {
  2. if ($(window).width() < 900) {
  3. $(".gridbox").css("width", "100%");
  4. }
  5. });

The idea is to set the width of ‘div’ with id=”gridbox” (where our DHTMLX table is loaded) width:100% after resizing of window (at the code above the window should be resized up to 900px to make it works).

Standalone example: view the Responsive DHTMLX Grid Table in action >>

Related post:
You could be interested to read about jqGrid: How to Make it Responsive (with Twitter Bootstrap).

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

Let's discuss your project now