Home > Tags > JQuery
Page 1

How to create a filterable gallery with jQuery

We see filterable galleries in plenty of portfolios, they're a nice and tidy way of showing off different categories of work without forcing the user to review everything. We're going to build a filterable gallery using the data attribute that came with HTML5, this way we don't have to tie everything up with classes. If you want a better idea of what we will be creating, here's a demo. The data attribute  I mentioned in the introduction that in this tutorial we will be using the data attribute,...
Read more

15 Online resources for learning web design

There is no doubt that Web design can sometimes be a little intimidating, not only is there so much to learn but the environment is ever changing and it seems as if every day there is something new that you need to learn if you want to stay up-to-date. Don't know where to start? Don't worry we have compiled some of the best resources on the web for learning web design. Some of the suggestions offered here are free while some come at a small cost. Some focus only on HTML while others will teach you anything from HTML,...
Read more

30 most useful jQuery plugins

It seems as if the internet is filled with hundreds, if not thousands of jQuery plugins, sometimes it can be a little hard to keep track of all the new plugins, and therefore we have decided to bring you some of our favorite plugins, here is a list of 30 must see plugins. They cover all areas such as Form & Validation Plugins, Plugins for Responsive Layouts, as well as Web Typography Plugins, Animation Plugins and all sorts of other plugins. Do you think we have forgotten any plugins? If so then feel...
Read more

25 must read HTML, CSS and jQuery books

Everyone knows that in order to create the best websites you need to be up-to-date with the latest trends and developments. We asked experts and long timer designers and developers to share with us their favorite books, and the result is a selection of the very best books that everyone should read. Our list includes 25 books that all developers must read if they want to create great web sites. We cover everything from HTML to CSS, JavaScript and jQuery books. 1. Introducing HTML5      ...
Read more

Custom HTML, CSS and jQuery website template!

In this article we're going to design and implement a unique page layout. Our main logo and navigation bar will be locked and fixed onto the left side of the screen, and the larger right side of the screen will be scrollable and hold our main content. Before we start, check out the demo here. Ok, now that you've seen it, let's get started! Our first step will be to set up our sticky sidebar. Sidebar HTML Here's the HTML we'll use, place this right under your <body> tag: <div class="sidewrap"> <div...
Read more

Code Snippet: Keep Sidebar Elements in View When Scrolling

Whether it is a list of products you are promoting, published ads or other elements on the sidebar, you will likely want to have these elements in view at all times even when scrolling. By using JQuery, you can make this possible. To do this, use the code snippet below: //keep element in view (function($) { $(document).ready( function() { var elementPosTop = $('#sidebar-ads').position().top; $(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $(document).height(),...
Read more

7 Tools for Responsive Web Design

The move towards developing responsive websites has introduced a set of new tools that help can developers learn the ropes fast and start producing cross-browser and non-device specific websites quickly and more efficiently. Let us see some of these tools and resources that you can leverage as we get deeper into responsive web design: Adaptive Images Your website is increasingly being viewed on smaller screens that consume low bandwidth. In addition to other challenges associated with developing...
Read more

Create Animated Scrolling Presentation Decks Using scrolldeck.js

The scrolldeck.js library is probably one of the best ways out there to implement a scrolling presentation deck. All you have to do is build a web page with each slide as a div. It requires JQuery, Scrollorama, scrollTo, easing & scrolldeck  JS scripts to function. After linking all of the above scripts, create the slide deck on the document ready event and configure the settings as shown: $(document).ready(function() { var deck = new $.scrolldeck({ buttons: '.nav-button', slides: '.slide',...
Read more