Tag: jQuery

All PostsTutorials

Dynamic Newsletter Signup Form with jQuery Animations

Landing pages are some of the toughest website layouts to put together. You need to converge with a series of different techniques for attracting your visitor’s attention and getting them interested enough to perform some action. In this tutorial we will create a simple newsletter signup page which is advertising a new iOS application.

The dynamic form effects will be handled in jQuery with some additional CSS3 properties as well. I haven’t connected any backend script into the form. But there are methods for situating a full registration form, such as MailChimp or even your own custom storage. This layout is a fantastic example of what can be accomplished using just a little bit of HTML5/CSS3 and JavaScript techniques.

Read More
All PostsHacksjQueryWeb Design

Useful jQuery Resources For Creating Full Screen Sliders

A few weeks back we featured a post showcasing websites utilising full screen sliders, its a pretty cool trend doing the rounds right now so I thought I would provide you with some resources to create the effect on your site. The resources I have included will allow you to replicate the full-screen or full width slideshow effect and most of the resources are written with jQuery, HTML5 and CSS3.

Read More
All PostsHTMLjQuerySocial NetworkingTutorials

Tutorial: Grabbing Popular Dribbble Shots Dynamically via jQuery

Compared with any other design network Dribbble always seems to come out on top. The quality of submissions is beyond comprehension to most graphics designers, especially with mobile/web user interfaces. There are so many amazing shots published every day but it’s tough to keep up with the constant flow of new publications.

In this tutorial I want to demonstrate how we can build a small webapp which dynamically pulls all the most recent popular shots from Dribbble. The interface is very simple to work with and we want to create all these effects without refreshing the page. For organizing the backend data I’ll be using a custom jQuery plugin named jribbble. It suits our needs perfectly and it’s so easy to get started – even a newbie JavaScript developer could pick this up in a couple hours.

Read More
All PostsjQuerySocial NetworkingWordPress

Best Pinterest Style WordPress Themes

Pinterest allows you to collect and share images, videos and other media content types with your follower base, many people do not know that WordPress supports many different post types, allowing WordPress users to post quotes, galleries, videos and images to their blog. Today I wanted to focus on the best WordPress themes that are built similar to Pinterest, these Pinterest themes mostly use the jQuery masonry layout and WordPress custom post types to display the content in a similar fashion to Pinterest.

Read More
Tutorial: Coding a jQuery Popup Modal Contact Form
All PostsCSSHTMLjQueryTutorials

Tutorial: Coding a jQuery Popup Modal Contact Form

Modal windows have become a popular asset for web & mobile developers. iPhone and iPad applications have such a limited screen real estate that it’s useful to bring in additional menus floating on top of the view. This concept also translates well into webpage interfaces where you can hide smaller, minute details.

In this tutorial I’ll demonstrate how we can build a minimalist modal contact form. I’ll be using jQuery along with the fancybox plugin to manage dynamic content. The open source code libraries make scripting so much easier. And we can implement a small Ajax call which submits the form data via PHP on the server end.

Read More
All PostsjQueryWeb Design

10 Useful jQuery Plugins For Enhancing Your Website UX

Incorporating jQuery effectively and modestly in your website build process is a great way to enhance and take your user experience to another level. Using jQuery plugins can be a great tool for helping display content to your users in a much more intuitive and interactive way. The jQuery community is fantastic, developers are consistently releasing new, quality jQuery plug-ins for us to incorporate into our websites.

In this post I will take show you a collection of jQuery plugins that are really useful for improving your overall user experience on your website.

Read More
All PostsjQueryTutorialsWeb Design

Tutorial: Creating A Sticky Sidebar Using jQuery

Today, I will be showing how to create a jQuery sticky sidebar script. Now, I’m sure many of you have a question: Why can’t I just use “position:fixed”?

Well, you can, but then the element with that style will stay where it is relative to the top of the viewport.

This means, if the element you are “fixing” in place is in the center of the page, it will stay in the center of the page as you scroll down. With this script, it will stay wherever you want it to be.

Read More