Slideshow shadow

Top jQuery Plugins 2014

December 8, 2014 in General jQuery by Michael Howell

LightCase

LightCase It is an adaptive, conscious and extendable lightbox plugin conceived by using jQuery. It works beautifully with all the familiar web browsers such as Internet Explorer, Firefox, Chrome, Opera, Webkit, etc. It also supports image, video, HTML5 content, iframe, swf, ajax call, etc. Documentation Demo

Structured Filter

It is a common Web UI used for building structured search or filter questions. You can create structured search queries such as “Contact numbers starting with alphabet A and Birthdays after 1/1/1980 and States in (NY, FL, and CA)”. A full JQuery UI widget supports different configurations and themes. Demo Documentation

HiSRC

It is a simple jQuery plugin for flexible images in conscious web design. Created after a twist on the old LOWSRC IMG feature, which would deliver a lower file size image first while an image with larger file size appear in its place later. However, if the plugin finds faster network or high resolution, then a higher resolution image takes the place. Documentation

Justified.js

justifiedJustified.js creates a justified image framework of supplied images to fill the entire space. It constructs an elegant image gallery with different sizes of images. All the images of a row have the same height. Demo

Before and After

Before and After plugin allows you to view an “after” rendition of any image as a cover to the original image. There is a handle in the plugin that allows the user to choose how much of each image he/she wants to view. Apart from containing the main image, the “before” and “after” slides may also contain other HTML components like caption. More info

Scalable Lightbox

Scalable Lightbox used in building artistic, conscious picture lightboxes. It has an index module that provides a synopsis with thumbnails likewise a lightbox module that shows high-resolution images in a responsive demeanor. Scalable Lightbox

Hashtegny

HashtegnyHashtegny accumulates “hashtags” from popular social media platforms like Twitter, Google Plus, Instagram, etc. User posts showed in a unique, engaging and vivid layout with endless features. Hashtegny

Gridstack.js

Gridstack is a plugin for widget outline. It is a drag and drop multi-column grid that allows user to create conscious bootstrap v3 favorable designs. Gridstack.js

jQuery.dragmove

A lightweight jQuery plugin enables dragging functionality on DOM elements without needing the jQuery UI library. The extension is also compatible with touch devices, trackpads, and other standard computer devices. jQuery.dragmove

jQuery Easy Ticker

jQuery Easy Ticker is a news ticker like extension that infinitely scrolls down the list. Easy ticker is also highly customizable as well as adjustable with endless features and works fine with all the leading web browsers. jQuery Easy Ticker

Classy Countdown

Classy Countdown plugin allows user easily create clear round countdowns. The extension is fully customizable and contains 12 elegant themes. These themes are modifiable and use HTML5 canvas to render the circles. Classy Countdown

Classy PayPal

Classy PayPal plugin allows user to add elegant PayPal buttons to their website for instant and secure payments. Classy PayPal

LazyFade.js

LazyFade is a jQuery extension that dissolves a row of elements with some lazy effects. Discoloration of each next element delayed marginally giving a valued touch to the entire development. LazyFade.js

Using the CSS box-shadow Property

June 21, 2014 in Tutorials by Michael Howell

The css box shadow property can be implemented for various display scenarios in your web design projects. Let’s take a situation where you are required to display some text in a div element and show it as an information box with the shadow effect. This will be done purely in css with the HTML being used for showing the information inside a div element. In the next few sections, we will go from having a chunk of text that is not quite attractive to an amazing information box having the same text but with better display. We will start off with the following chunk of HTML code.

<div class="shadow">
<p>Wes Anderson umami biodiesel YOLO, Terry Richardson helvetica tousled street art master cleanse selfies Godard cornhole 8-bit pork belly scenester. Blog blue bottle Neutra, polaroid pug cliche dreamcatcher. Ethnic wolf church-key, Wes Anderson tattooed meh tumblr direct trade pug.</p>
</div>

Box-Shadow

This property has been around since css2. However, it can now be applied to images, borders and even text. You can specify the size, color, blur and offset values. You can even define the shadow styling options further with a comma separated list of shadow values. These have a 2 to 4 length value expression specified in the order below.

  • horizontal and vertical offsets
  • blur distance
  • spread distance
  • optional color value
  • optional inset keyword value

The keyword value comes in very handy when you want to create an inner shadow instead of the default outer shadow. The general syntax for the CSS3 box shadow is as follows.

box-shadow: Xpx Ypx Bpx Lpx #color;

Xpx refers to the horizontal offset, Ypx the vertical offset, Bpx the blur effect, Lpx the length of the spread and #color the color.

Adding a bit of css code with the format specified above transforms our chunk of text into an amazing information box!

info-box

CSS code


.shadow {
width:400px;
height:120px;
border: 12px solid blue;
background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 25x 30px 15px 1px rgba(0,0,0,0.4),
12px 12px 0px 8px rgba(0,0,0,0.4) inset;
-moz-box-shadow: 25px 30px 15px 1px rgba(0,0,0,0.4),
12px 12px 0px 8px rgba(0,0,0,0.4) inset;
-webkit-box-shadow: 25px 30px 15px 1px rgba(0,0,0,0.4),
12px 12px 0px 8px rgba(0,0,0,0.4) inset;
padding: 5px 20px;
}

As you can see, we have a shadow on our box which does not necessarily have to be square or rectangle in shape. Rounded corners make your site interesting and fun. In this case, the rounded corners have been achieved with the border-top-left-radius and the border-bottom-right-radius elements in the css code. There is a lot more that you can do with the css box shadow property and it comes in very handy in transforming your site into an exciting and fun experience for the user.

You can always play around with the values of the blur and spread distance in order to achieve the effect you need. Always remember to resize your box to fit the text that you have inside the div element. As you can see, CSS3 relies on heavy use of div elements in order to achieve control over the look of the website. There is much more that you can do with the box shadow such as layering several shadows within the box-shadow property, shadow on text, transitioning properties and a bunch of other styling options presented by this element.

In conclusion, the box-shadow property comes in handy when you are looking to achieve that shadow effect and give your text a better look. With this property, your site is totally transformed to an interactive and exciting experience for the user.

Web Design From Easy To Expert: 6 Great Tutorials

June 19, 2014 in Tutorials by Michael Howell

It’s easier than you might think to learn web design from scratch as long as you follow the right tutorials. The biggest mistake that some people make is trying to learn web design in the wrong order. Just like anything else, web design progresses from simple concepts to advanced ones, with everything you learn building on itself.

Using this guide, you’ll go from learning the basics of web design with HTML and CSS, to intermediate steps like using JavaScript to access an API, and on to advanced concepts like building and querying a database with SQL and PHP or handing events in real-time with AJAX. If you take these tutorials in order and slowly work through the steps, you’ll be able to design any website or online app that you can imagine.

1. Start With HTML

easyhtmlcode HTML is the language that tells your browser how to display text, which pictures to show, and what special content is embedded in your webpage. Without a strong grasp of the fundamentals of HTML there’s no way to understand the steps that come later, so it’s important that you start to learn web design with this series of tutorials. Once you’ve finished, you’ll be able to make basic web pages and better understand what’s really going on behind the scenes inside of your web browser.
http://www.easyhtmlcode.com/

2. Learn CSS In Style

css-tutorial
By incorporating CSS into your web design it will be easier to control how browsers display your content. From setting the margins to managing color schemes and even the very beginnings of conditional programming, CSS is a common and versatile tool that web designers use in a variety of ways every single day.

http://www.htmldog.com/guides/css/beginner/

3. Fast Functionality With Javascript

javascript-tutorialMost of the time, when something dynamic happens on a webpage JavaScript has at least a little bit to do with it. This will be your first foray into conditional programming and dynamic content on the web, taking information about a user’s actions and using it to modify your web page and change what they see. From simple things like changing the color of text when the mouse passes over it, to advanced scripts and even simple applications, JavaScript is the language that makes the internet come to life.

http://www.codeproject.com/Articles/755/JavaScript-For-Beginners

4. Building Web Forms

formguideForms are essential part of any website. Forms give the users a chance to reach out to you. It is important that you know how to build web forms and how to get it online. You should learn to build contact forms, calculation forms, order forms and other business forms. The forms provide a way for websites to capture leads and sales.
http://www.html-form-guide.com/contact-form/php-contact-form-tutorial.html

5. PHP And SQL For Data Driven Design

When it comes to professional websites, most of them are driven by databases. SQL, which is the most common database used today, provides a way to store information on the server in order to access it later. SQL databases can hold diverse kinds of information, from user’s passwords and account information to which advertising banner should be displayed next. Using PHP, you’ll be able to get to that data and use it in a meaningful way. Not only does PHP provide the tools to turn SQL queries into HTML effortlessly, it also can be used to easily put information into a database. If you’ve ever created a profile on a website or browsed a forum, you’ve used PHP and SQL.
http://www.tizag.com/mysqlTutorial/index.php

6. Add In Some Action With AJAX

Finally, AJAX is one of the latest developments in the world of web programming. Websites like GMail, which update and display information without the need to refresh the page, use AJAX or systems like it in order to selectively update certain portions of a web page. In addition to that, AJAX adds event-driven programming to the web, much like the kind used in desktop and phone applications. If you want to truly master web design, AJAX is the technology to learn.
http://learn.jquery.com/ajax/

Refresh a page using jQuery

January 31, 2014 in Reference by Michael Howell

Imagine you want to refresh the current page after a certain user action. In fact, you don’t need any special jQuery handling for this. Plain Javascript has location.reload(); function that you can use in your event handler.

Example:

$('#refresh_button').click(function()
{
location.reload();
});

Note, however that this may load the page from cache. If you want to do a “full refresh” that fell fetch the page from the server again, do

$('#refresh_button').click(function()
{
location.reload(true);
});

Format a date using jquery

January 28, 2014 in Reference by Michael Howell

There are many ways to format an a date to display on a page. In this tutorial we will see how to format a date using jQuery.

Using jquery-dateFormat plugin

This plugin is especially useful when you have a pre-selected date display format. jquery-dateFormat makes it easy to format the date based on a format string.
Here is a sample:

document.write($.format.date(new Date(), "Today: dd/MM/yyyy"));

The code above prints the date like this:

Today: 18/12/2014

Here is the link to the format pattern reference.

Pretty date formatting

prettyDate() function gives you the relative date that you often see in social media sites.
for example:

jQuery.format.prettyDate(new Date())

returns “just now”

This is useful in certain cases where the relative time reference is makes more sense, like the time of a comment. The date will be displayed like this

“1 minute ago”
“2 days ago”
etc.

Taking it global

When you have audience from different cultures and languages, you need to format the date, time, currency and numbers according to those cultures. In those scenarios, it is not advisable to use a fixed date format. You have to format the date according to the user’s locale.

Globalize.js is perfect for this purpose.
Using Globalize.js you can format the date according to user’s locale preference.
See why globalization

Globalize.format() function takes the date and formats it based on user preference and locale.
You don’t have to worry whether it is dd/mm or mm/dd

more on globalize date format.

Animate background color using jQuery

January 23, 2014 in jQuery Snippets by Michael Howell

So you want to animate the background color of an element for some nice effects.
Here are the best ways to do it.

Using the Bitstorm color animation plugin

The easiest would be using Bitstorm color animation plugin
The usage is simple:

$('#yourdiv').animate({backgroundColor: '#fff'})

This will animate the background color from current color to white in a smooth animation
This plugin supports animating the color of border or text color as well.

Demo | Download Source

Using jQuery UI

If you already have jQuery UI included in your page, there is no need to add any other plugin (like the Bitstorm plugin mentioned above). The code is same.

More info about the animate() jQuery function