All the jQuery-related tutorials, ideas and various posts in Stampede Constructs
The majority of web developers are dependent on jQuery as their go-to JavaScript framework. It is flexible and evolving with every version. The community is also very huge, so you can always find a solution with a Google search.
Chartist.js is a simple responsive charting library build with SVG that allows you to build many kinds of bar, line and pie charts. It is lightweight (<20KB), simple to use but highly customizable and is not dependent on any JS libraries. One super feature is the ability to apply CSS3 transitions to the SVG elements to produce animated responsive charts in modern browsers. Hit button below to see the examples of charts created using chartis.js and how to set them up.
WebResourcesDepot has made a collection of useful jQuery plugins to improve your e-commerce websites. The list of plugins cover various areas including product presentation, interactive cart and forms validation. However some of the plugins like slideshows can be adopted to pretty much any kinds of websites. If I may add one to the list, another excellent jQuery plugin suitable for e-commerce websites is the jQuery Store Locator plugin which allows users to see which stores are available in a given place via Google Maps. View the e-commerce jQuery plugins list by visiting the link below.
Showing off your content in a slider/slideshow can be a wonderfully engaging experience for your users. Web developer Jacob Gube listed eight free responsive slideshow plugins he thinks are the best out there right now. Some of the sliders listed are pure CSS3 slideshow and the rest are jQuery plugins. I have personally worked with Flexslider countless times and can vouch for its flexibility. Another notable mention is the lightweight and equally solid slideshow plugin called jQuery Cycle2.
One of the keys to a successful online store is presenting customers with detailed product images. Even better, you can make the images interactive by letting users view them in a 360° manner. This image rotation effect can be achieved using the jQuery rollerblade.js plugin. User can drag, hover or slide (on touchscreen devices) from left to right to rotate the images. Feeling adventurous? Rollerblade.js also allows you to create as many rotators on one page as you would like.
The best part is rollerblade.js also works well in IE9+. Awesome!
Many aspiring web developers want to know what the differences between JavaScript and jQuery actually are. While both start with a J, there are also a couple of other similarities as well. It may surprise you to learn that JavaScript and jQuery are actually the same thing – jQuery is a set of JavaScript libraries that have been designed specifically to simplify HTML document traversing, animation, event handling, and Ajax interactions. That said, in order to use either one of these scripting languages you need a solid foundation in JavaScript.
In this brilliant article by Bryan Wilde, you will learn further what JavaScript is, what jQuery is, their differences – JavaScript vs jQuery and which scripting language is the better choice for your future web development projects.
Once in a while, someone came up with a mindblowing solution to an interface problem. How exactly do you design an overload of information to avoid from overwhelming your reader? Pete from onextrapixel has created Flip Out Cards – a jQuery plugin that lets you display more information by flipping out extra cards without consuming much space. In essence, the plugin gathers all the cards, group them together based on the direction defined (left, right, bottom, and top), position them correctly and hide them out of view. All animations are driven by CSS3, so you could also manipulate class names based on the flip sequence preferred.
My favourite is demo #5, where the card expands in all directions on mouseover. Cool stuff.
Ideas struck Martin Angelov, the founder of tutorialzine.com, at the most convenient time. Upon finding this pretty dribble shot, he felt the urge to convert it into a working clock and share it with his readers. Find out how to code a digital clock using HTML, CSS and jQuery by following this very handy tutorial.
Stampede Design