Create Your Own Page Load Progress Bar with Pace.js

Posted in Coding, JS & AJAX, Tutorials • Posted on 2 Comments

Progress bar informs the user about the waiting time for a page or specific task to load. Usually when the server loads so slow, the user waits and waits for a long time without having any idea how long it will finish loading. A progress bar gives user-friendly experience, thus, adds more value to the website.

Although you can create a page load progress bar with CSS3 animation, it is not dynamic at all. Good thing there is this built-in JavaScript plugin called Progess Automatically Certain to Entertain (Pace.js), a lightweight JavaScript library that consists of a cool and amazing progress bar indicator for your page load and Ajax navigation.

What’s great with Pace.js:

  • You can automatically load a progress bar within any web page you have in your website.
  • Pace.js is executed using a document-read state, event loop and Ajax requests within a specific element of the web pages.
  • It comes with 14 built-in themes (at the time of this writing) that you can choose from.
  • Progress is detected automatically.

In today’s tutorial, I am going to show you how to use this amazing plugin to load a progress bar on your site.

Create Your Own Page Load Progress Bar with Pace.js Read More

Beginners Guide to Working with jQuery Animation

Posted in JS & AJAX, Photo Effects, Quick Tips, Tutorials • Posted on 42 Comments

In this tutorial, we are going explore the basics of jQuery animations for you to get prepared for advanced designs. Animations is the core functionality behind the interactive elements in web design.

The design of a website plays a major role in attracting visitors on a consistent basis. Interactive designs get more attention compared to the plain old static designs.

Technology is improving at a rapid pace to cater the advanced modern web designs. As a result, CSS3 offers the animations without the help of JavaScript. Even though CSS3 and HTML5 are improving in leaps and bounds, jQuery seems to be the popular choice for creating interactive designs.

Let’s get started!

Beginners Guide to Working with jQuery Animation Read More

WordPress Plugin Development from Scratch, Part 3/4 – Custom Post Types

Posted in Coding, HTML & CSS, JS & AJAX, Plugins, Tutorials, WordPress • Posted on 13 Comments

Hello Everyone! Welcome back to the third part of this series on WordPress Plugin development for designers.

In the first part we identified the importance of WordPress plugins for you as designers and the basic structure of a plugin. Then we followed it up with the necessary coding required for developing plugins in the second part, by creating a jQuery slider for WordPress.

I am happy to announce that SlidesJS has won the voting contest and I’ll be using it through the rest of this tutorial series.

WordPress Plugin Development from Scratch, Part 3/4 – Custom Post Types Read More

How to Make Custom Designs for your jQuery Slider

Posted in Coding, HTML & CSS, JS & AJAX, Tutorials • Posted on 15 Comments

Sliders are a common component used in website design and for various purposes. We can create image, content, or video sliders using  jQuery. jQuery is the most popular JavaScript framework used for these sliders. A lot of jQuery sliders can be categorized based on the techniques used for sliding. The following are some common and trending techniques used by developers.

  • Layered Sliders – This is the latest addition to sliders with parallax effect.
  • Fade In/Out Sliders – These types of sliders do not have controls. Content just fades away one by one.
  • Banner Rotators – These sliders rotate in a circular path.

There are many other types of techniques as well. Each type of slider is suited for a different purpose and location on your website. Hence the designer has to carefully choose sliders for different locations.

How to Make Custom Designs for your jQuery Slider Read More

Microsoft Announces TypeScript: Will It Change The Web?

Posted in Coding, JS & AJAX, News, Web Design • Posted on 10 Comments

Like it or not, JavaScript has long established itself as a de-facto scripting language on the web. There are many programmers who are in love with JavaScript, and then there is an equal number of programmers who hate it. Yet, if you are developing for the web, you most probably deal with JavaScript in some way or another, at some point or the other.

Owing to such popularity, JavaScript has seen its fair share of clones copies languages that attempt to replace or build upon JS. CoffeeScript is a shining example, for instance.

Among such examples, we recently saw a new entrant few days ago. Yes, Microsoft announced the release of TypeScript, a typed superset of JavaScript.

What is it all about? Read on as we take a look at it in this article!

Microsoft Announces TypeScript: Will It Change The Web? Read More

Why It Is Good Idea To Learn jQuery in Year 2013?

Posted in 1WD Features, Coding, JS & AJAX, Web Design • Posted on 10 Comments

If you have anything to do with web development, you probably have heard the term ‘jQuery’ over a million times already. Believe it or not, jQuery has risen to popularity in a short span of time and today it stands as one of the most well-loved and popular entities when it comes to developing for the internet.

In this article, we shall be taking a look at jQuery in detail — its origins, advantages, disadvantages, and anything else that matters.

Why It Is Good Idea To Learn jQuery in Year 2013? Read More

Design an Awesome Product Page with CSS Background Attachments

Posted in Coding, HTML & CSS, JS & AJAX, Tutorials • Posted on 7 Comments

Today I am going to show you how to create a product page for your website with awesome CSS effects. We will be using CSS background attachments and jQuery to create these effects. There are 2 commonly used techniques using this effect. First method is creating the before and after effect of an image. I am going to create the second method which will change the product’ as we scroll down. Take a quick look at our demo product page to get an idea about the effect we are implementing in this tutorial.

Design an Awesome Product Page with CSS Background Attachments Read More

Create a Stylish Tweet Book with Jquery and CSS

Posted in Coding, HTML & CSS, JS & AJAX • Posted on 11 Comments

Twitter is a popular social networking service used by millions of users to share text-based content. It has been described as the “SMS of the Internet.” We love to tweet links and ideas we are interested as well as follow other people with similar interests. Everyone loves to follow a lot of people and hence there is a possibility of missing the most important tweets.

So in this tutorial I am going to create a stylish Tweet book to keep your best friends and view their Tweets. As you complete this tutorial you will gain knowledge in working with jQuery and CSS to create a stylish book design. You will also learn to work with the Twitter API using jQuery and AJAX. So let’s get started.

Once you open the demo click on the button with the arrow to open the book. Then click on a letter to load friends. Then click view button to get the recent tweets.

Create a Stylish Tweet Book with Jquery and CSS Read More

Create a Sliding Navigation Menu with jQuery

Posted in Coding, HTML & CSS, JS & AJAX • Posted on 11 Comments

Having a sliding navigation menu helps users to find the important pages of your website in a cool way. It is important to keep your navigation menu simple and user-friendly while keeping it attractive.

Consider a situation where you include your blog categories in a navigation menu. If you have a long category list, a drop down navigation menu will exceed the page height and the user might need to scroll to navigate to the last part of the menu. These small things are enough for a user to navigate away from your site.

To solve that, we are going to create a complete navigation menu using jQuery. I will explain how to compress large menus using sliding panels to keep the depth of your menu to a minimum level. Take a look at the demo before we get started. You can see that sub level menu items are hidden initially and displayed as sliding panels on click.

Create a Sliding Navigation Menu with jQuery Read More

How to Create a Multi-Step Form Using RhinoSlider

Posted in Coding, HTML & CSS, JS & AJAX • Posted on 18 Comments

How do you feel when you see a long Sign Up form for a website or service? Generally, people get bored when the Sign Up form is too long. Ideally, you should keep the form as simple as possible with minimum fields, and if that is not possible, try using a multi-step form.

The reason why Facebook Connect and Sign In with Twitter has become so popular these days is because of their simplicity, since users can sign up just by logging into their Facebook or Twitter account.

If you are using normal Sign Up forms and still require a lot of data from your users, a multi-step form is the best solution. So the form is broken into small sections and the user only sees one section at a time. Also, multi-step forms reduces the space you need on the page.

How to Create a Multi-Step Form Using RhinoSlider Read More
54.166.65.9 - unknown - unknown - US