The 10 Best Tools For Web Development this Autumn

Finding the right tool isn’t always the easiest of tasks. When it comes to tools and resources devoted to web development and graphic or web design, there’s an abundance available. However, not all of them are worth your time, while others could improve the quality of your work tremendously. We’ve taken it upon us to […]

JavaScripting is the online Reference of JavaScript Libraries

It seems like every month there’s a new dozens JavaScript libraries to keep up with. Open source has revolutionized the way we release code and publish online. How can anyone keep up with all these incredible libraries, plugins, and code repositories? A new reference site JavaScripting has the answer. It’s meant to be the complete […]

jQuery lightGallery is a free Responsive Lightbox for your Website

With so many plugins under the jQuery umbrella it can be tough to know where to turn. Lightboxes have been around for years but only recently have moved towards the trend of responsivity. Mobile responsive websites are huge and the best plugins are learning to accommodate. jQuery lightGallery is an open source responsive lightbox plugin […]

Coding a Toggle-Based FAQ Page with CSS3 and jQuery

Company websites often have Frequently Asked Questions for people who don’t know much about the corporation or their services. Larger pages with Q&A listed together will often have a table of contents at the top. I don’t like this method because the pages end up long and sometimes confusing to navigate.

This tutorial is based around a similar idea, but using toggle effects for each question. As the user clicks on a question the answer will slide down and toggle into view. Users can also click already-opened questions which toggles them closed again. This technique is perfect for saving room on the page while cramming together an assortment of helpful information.

css3 jquery faq toggle tutorial preview screen

The Rising Trend of Dynamic Expandable Search Fields

Anybody who follows web design trends will know about expanding search fields. These are typically small input boxes or magnifying glass icons which grow in size whenever given focus. As the user de-focuses off the element it’ll usually retract back to the compressed form.

I love this idea because it saves a lot of room on the page, and it works the same for most any website. Most people browsing the web have developed a sense of understanding for how these expandable search fields behave. In this article I want to cover some more unique design styles for building dynamic search forms. As trends evolve I expect to see more of these search boxes in the coming months and years.

How To Code a Hidden Author Bio Display using jQuery

I was browsing through websites one day and came across one really interesting feature. Jennifer Perrin has a small blog on her website which uses a fixed top navbar. In the center you’ll find a profile avatar photo which displays her full author bio(triggered by hover). This is a really interesting feature and I’ve set out to replicate the idea using jQuery.

So in this tutorial I want to demonstrate how we can build a very simple HTML5 webpage recreating a full author bio display. The entire bio container is hidden until the user hovers over the avatar photo. Take a peek at my live demo to see what it should look like:

hidden author bio display hover tutorial screenshot

Building a Single-Page Dynamic Website using AnimateScroll.js

Sliding parallax websites incorporate animation with page sections to build a very unique experience. Over the past few years I have found a large number of parallax designs wrapped into a single webpage. Notably this parallax interface may be hard-coded from scratch, but there are lots of free open source plugins to do the job quicker.

In this tutorial I want to demonstrate how we can use AnimateScroll to build a sliding single-page website layout. I’ve kept inner page content to a minimum so we can see exactly how the CSS structure works with the animations. Keep in mind this definitely isn’t a tough concept to implement. But you should have an understanding of page hierarchy and CSS positioning or it gets confusing fast. Check out my live demo example to see exactly what we are making.

jquery animate scroll library single page tutorial preview screenshot

How To Make a Custom HTML5 Select Menu with Selectize.js

Detailed and customized input fields have been a great focus of modern web development. The jQuery library along with similar open source projects have provided a framework to build with. It has lead to numerous advances within the field of user interface design. Especially for customizing the typical “default” components in form elements.

In this tutorial I want to introduce the Selectize plugin for jQuery. It allows developers to greatly alter the presentation of input fields related to select menus and tag-formatted text fields. This can provide a tremendous benefit on projects where you need a cleaner, updated interface. It is a fairly straightforward process and shouldn’t take more than 60 minutes to create. Take a peek at my live demo to see what we are making.

jquery selectize custom select menus html5 demo