Advertisement

jQuery

Latest Posts
  • Web Design
    jQuery
    Quick Tip: Sticky Navigation, Without the Awkward JumpWaypoints
    In this quick tutorial we're going to use jQuery and make a simple sticky navigation. With that done, we'll improve on our efforts by using jQuery Waypoints to make the effect smoother.Read More…
  • Web Design
    jQuery
    How to Build a Page Scroll Progress Indicator With jQuery and SVGIndicator thumb
    Today we will be looking at a few techniques for displaying scroll progress for users who are reading a page. We will cover two specific techniques you can employ to show scroll progress, and leave you with a toolset to create your own. Let's get started!Read More…
  • Web Design
    Complete Websites
    Finishing the Responsive Timeline Portfolio PagePortfolio2 thumb
    It's time to finish off our responsive timeline portfolio layout. In this tutorial we'll add some flair with CSS3 animations and jQuery.Read More…
  • Web Design
    jQuery
    Create a Quick, Sticky MenuSticky menu retina
    During this quick tutorial we're going to implement a sticky menu with CSS, toggling its visibility with jQuery. It's the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings.Read More…
  • Web Design
    JavaScript
    Build a Multi-Step Form InterfaceForm sideways retina
    Form usability is an incredibly important topic in web design. As one of the primary input interfaces provided to users, the usability of a form is essential to a good user experience. Today, we're going to build a multi-part form, complete with validation and animation. We'll cover a lot of ground, so buckle up!Read More…
  • Web Design
    Site Elements
    Reveal Content When Needed With an Expanding FooterFooter retina
    During this tutorial we're going to build an expanding footer; a user interface pattern which allows the user to click on expandable footer regions if they wish to see more content. The end result is comparable to the accordion effect sometimes applied to lists and you can find it used on sites such as seesparkbox.com. Additionally, we're going to be using Emmet to help us write our HTML at lightning speed.Read More…
  • Web Design
    jQuery
    Examining Responsive Navigation: Off Canvas PatternsNav patterns preview
    This is the final part in a Premium series about responsive navigation patterns. But here's the bonus: this one's freely available for everyone! In this tutorial we'll walk through four variations of patterns where navigation and page content is placed off canvas to conserve space until requested. It's time to stop copying and pasting, let's start understanding!Read More…
  • Web Design
    JavaScript
    Quick Tip: Implement a Sticky "Back to Top" ButtonGo to top preview
    In this quick tip screencast we're going to implement a feature which you may have seen on websites with lots of page content. This button appears when the browser window is scrolled beyond a certain point and will allow our users to easily navigate "back to top". The implementation is pretty straight-forward; first we'll create our link with HTML and CSS, then we'll use a bit of JavaScript to enhance the behavior. The Screencast Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube Read More…
  • Web Design
    UX
    Making Websites Location Aware With HTML5 GeolocationLocation preview
    Assumption can be a risky business in the world of UX, but some assumptions can enable you to deliver a more tailored user experience to your visitors. We're going to look at enhancing user experience by making your websites location aware.Read More…
  • Web Design
    Complete Websites
    Build a Responsive, Filterable Portfolio, with CSS3 TwistsPreview
    The inherent visual appeal of filterable portfolios (like the Tuts+ hub) has made them very popular. Today, we’ll be making one using straight-forward markup, CSS3 and a little bit of jQuery.Read More…
  • Web Design
    Site Elements
    Big Menus, Small Screens: Responsive, Multi-Level NavigationPreview
    If you’ve ever worked on a responsive website, you’ve no doubt had to tackle one of the trickiest problems in this emerging field: navigation. For simple navigation, the solutions can be straight-forward. However, if you’re working on something a bit more complex, maybe with multiple nested lists and dropdowns, a more dramatic rearrangement may be in order.Read More…
  • Web Design
    Site Elements
    A Flexible Approach to Responsive NavigationPreview
    Many responsive websites provide a horizontal navigation bar on large screens and drop-down navigation for smaller viewports. It's a perfectly decent approach, but it's not without its issues. Firstly, devices don't just come in large and small; they come in every size imaginable. Secondly, the navigation might well change over time. Thirdly, the layout or font size might vary across screen sizes. We're going to do things differently…Read More…
Advertisement
Advertisement