In this tutorial I want to demonstrate how we can build a small script which handles any set number of documents. The JS code is a little bit tricky since we need to adapt for a large number of pages. However it is not very difficult to customize and get the design looking exactly as you would need it! Check out my sample demo below to get an idea of what we will be creating.
A quick Google search will yield plenty of handy autocomplete plugins — there’s even an option shared by jQuery UI which comes bundled with the library. However today I want to look into an alternative solution. The jQuery Autocomplete plugin released by DevBridge has the exact functionality that I find most appealing.
I want to demonstrate how we can build a custom modal window based off the jQuery plugin leanModal. The plugin is completely open source & free to use under the MIT general license. I like this plugin more than others because it just gives us the “bare basics” without too much customization. This leaves room to update the modal window via CSS and still utilize some extra parameters in jQuery.
The jQuery developer community has to be one of the most generous and hardworking group of people on the web. They’re constantly churning out amazingly useful and completely free tools that they share with anyone and everyone who wants to use them.
The quantity and quality of free jQuery plugins simply never ceases to amaze me. I’ve been keeping a list of some great ones that I’ve found lately and I thought I’d share it with you. Here are 40 awesome and free jQuery plugins that just about every web developer should check out.
After a long period of researching mobile responsive layouts, I’m spent quite a bit of time experimenting with various UI designs. One major hotspot on the page is often the website’s main navigation. Users want quick access to your content pages — and this will always be the case, either on a full monitor or a smaller mobile responsive screen.
For this tutorial I want to demonstrate how we can use a combination of CSS3 media queries along with some jQuery to manage a sliding navigation menu. The links will appear as normal on the frontend but drop into a hidden menu after resizing below 600px. Instead we see a little menu pull-down icon which will toggle open and closed on command.
When designing a navigation system for your website it is important to consider dynamic alterations for handling mobile support and responsive designs. But another systematic approach is to keep your visitors in full control throughout the entire viewing process. This often requires a quick-to-access menu or dropdown area for pulling links to other webpages.
In this tutorial I’m going to be building a top navigation bar which appears only after moving beyond the header navigation. This effect is great if you have a few pages which are most commonly accessed by visitors. The sticky navbar will stay fixed at the top of the screen and only disappear when re-entering the header nav zone. To get an idea of what we will be making check out my live demo example after the jump!
Today we’re going to look at the best jQuery plugins around that are specially built to make web type more awesome. Download a few and take your type further.
Recently, we published an outstanding collection of 40 jQuery plugins that every developer should check out. Today we’re following that up with some love for the MooTools crowd.
Like jQuery, MooTools has an awesome community of developers that constantly churn out stellar free plugins for all types of tasks and interfaces. In this collection you’ll find plugins for sliders, lightboxes, tags, navigation and a lot more.
So you decided you are going to design and develop yourself a personal portfolio. That’s great! You are well ahead of half of the web design and development community. But what about the remaining 50%? You have to show exclusive skills in a tiny space in order to shine in this fast growing industry.
In the past 3 weeks – since I made that decision, I learned a lot about developing a unique portfolio. Now I feel it is time to share this newly acquired knowledge with you.
What I came up after those 3 weeks is a cool game-inspired portfolio.
However, in practice, programming turns out to be much less scary than designers imagine it to be. Today I’m going to show you how programming is a skill that you can learn once and then apply to each new language that you pick up. We’ll take a look at three different programming constructs in three different languages to see how similar they really are. If you’d like to get started in programming but don’t know a single thing about it, this article is for you.
If you’ve been on the scene with iOS then you’ve surely seen some of the beautiful app websites cropping up. These have been released over the past couple of years as developers have been looking for ways to attract marketing potential. There are a lot of very standard-looking templates out there for web designers – but my hope is to tackle something new!
Today we’ll be creating a styled iPhone App website template using HTML5/CSS3. This will not be targeted onto a specific app, so we don’t include a download link to the app store. Instead I’ve created a small e-mail signup form through MailChimp so you can hook early adopters into the app for pre-release. This is great for developers who need to get something up and running for their product before it’s on the market.
Frontend web development has grown into a very popular niche. With the expansion of jQuery more web designers are beginning to create fantastic animations and page effects. The possibilities are limitless!
In this tutorial we’ll be creating a magazine-style drop down nav menu. This will be created with some fancy CSS3 techniques to work in standards-compliant browsers. Even if you are shaky with jQuery you should be able to keep up with this little bit of code, and possibly learn something new. Check out the live demo script in my example.