About design and nearby

Mobile-friendly jQuery Lightbox Solution

Posted: May 1st, 2012 | Author: | Filed under: Development, Mobile Design and Development, Tips and Tricks | Tags: , , , , | 1 Comment »

Everyone knows jQuery LightBox plugin – it’s simple and elegant, used for handling images through the power of jQuery’s selector. It’s perfect for image galleries, portfolios (for example, try my portfolio page >> view full size images).

The plugin works perfect, just one day while testing a client’s website for mobile devices, I found a bug – every full size image appeared at the very bottom of my page and was hidden for the very first sight, I had to scroll down the page to see it.

After setting up alerts and trying the result )) the solution for Lightbox v2.05 (by Lokesh Dhakar) was found – see line 245 or nearby:

if ((navigator.userAgent.match(/HTC_/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ||
  1.         navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/blackberry/i) ||
  2.         navigator.userAgent.match(/Windows Phone OS 7/i) || navigator.userAgent.match(/webOS/i))) {
  3.  
  4.             var arrayPageScroll = document.viewport.getScrollOffsets();
  5.             var lightboxTop = arrayPageScroll[1] + (100);
  6.             var lightboxLeft = (jQuery(window).width() / 2 – document.viewport.getWidth() / 2);
  7.             this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
  8.  
  9.             this.changeImage(imageNum);
  10.         }
  11.         else {
  12.             // calculate top and left offset for the lightbox
  13.             var arrayPageScroll = document.viewport.getScrollOffsets();
  14.             var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
  15.             var lightboxLeft = arrayPageScroll[0];
  16.             this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
  17.  
  18.             this.changeImage(imageNum);
  19.         }
  20.     },

Note: I used navigator.userAgent.match(/HTC_/i) because navigator.userAgent.match(/Android/i) had no result for my HTC.

You can load Lightbox v2.05 with my changes.

Related post: Your Mobile Website: be Up-to-Date!

How to Disable Button until Input Fields Have Values (powered by jQuery)

Posted: March 21st, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , , | No Comments »

One [working] day I was in need of a disabled submit button until my input fields have value. It’s a typical solution if you propose any service only after signing an agreement by your users (as it was at my case).

I had a form with input fields and a submit button on my page, I would like to have the feature that the ‘submit’ button is disabled until there are values on input fields. This button should be clickable if and only if there are values input in all fields.

I decided to implement this with jQuery (so I included the jquery library at the head section firstly).
Read the rest of this entry »

Cufón.js and Hover Effect

Posted: March 8th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , , , | 2 Comments »

One of the problems for Cufon developers is the strange behaviour of elements powered by Cufon.js which have defined :hover state in the CSS stylesheet. I stumbled upon this and tried so many different things to make it work the correct way… My

  1. .cufon a:hover {color:#e7aa05;}

had no results, so after reading the official docs I set hover option for the certain element at the very beginning of my file – sure, after loading my custom Cufon script. The key phrase for the solution is ‘hover calls must go first’, because the hover option cannot be added to an element that has been replaced before:

  1. <script type="text/javascript"> // should be called in the first place
  2.     Cufon.replace('a.cufon', {
  3.         color: '#222',
  4.         hover: {
  5.             color: '#e7aa05'
  6.         }
  7.     });
  8. </script>
  9. <script type="text/javascript"> // should be called after
  10.     Cufon.replace(".cufon", {
  11.         textShadow: '1px 1px 1px white'
  12.     });    
  13. </script>

Live example: check the example >>

Related post: Using Non-standard Fonts with Cufón.js
Related post: Using Cufón.js with jCarousel

How to Make Sweet Buttons with CSS only

Posted: February 29th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

Buttons are a very important element of any website, through buttons visitors trigger an action and interact with content.

As for my mind, CSS buttons are much more efficient than image-based buttons. They are rather easier to handle. It’s pretty simple to create dynamic buttons with cross browser compatibility, let me show the way I do it.

Since I need my button to be flexible, I make its width expand with the size of the button’s text and I use an <a> tag for that:

  1. <a class="button" href="#">CSS Button</a>

Read the rest of this entry »

Your Mobile Website: be Up-to-Date!

Posted: February 22nd, 2012 | Author: | Filed under: Creative Process, Mobile Design and Development | Tags: , , , , | No Comments »

Using mobile devices to access the web has become so integrated into our everyday life, that there is no possibility to ignore such segment of the market anymore. Unluckily, the mobile arena is needed some specific knowledge and introduces a complexity that can be difficult for developers to accommodate. Mobile development is more than cross-browser, it should be cross-platform.

Sweet Web Design goes Mobile

One day surfing the web I found the attractive (as for my mind) solution – Mobile Website Content Management Platform by Jaenovation, Inc. As a designer I work with such content management system (CMS) as WordPress, Joomla, with osCommerce and phpBB Forum, so I was interested to try a new web application for mobile development. Without hesitation I started to produce my own mobile web site.

The offered tool is easy to use, indeed – it took me less than an hour to complete the work. Have to say, that Jaemobi allows to create any look you want with Jaemobi’s advanced widgets and plug-ins. A user can build custom designed mobile websites, mobile online stores, mobile campaigns and landing pages effortlessly. Jaemobi also offers many cutting edge mobile solutions like mobile ecommerce which provides fully integrated paypal mobile payment gateway – for managing inventory, selling tickets, collecting donations, etc. Besides with all new plans, clients can also create their own landing pages for different campaigns and publish them with their unique QR Code.

It’s cloud-based, with fresh and sweet look and feel.. I loved it at first sight )

Related post: Mobile-friendly jQuery Lightbox Solution

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

Let's discuss your project now