UX Design and Development course

jQuery demos

Setting Active States on Sticky Navigations while Scrolling

This experiment shows how to set the active state on links in a sticky navigation bar when scrolling.

Sticky-scroll.css

rangeslider.js

Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type="range"> slider element.

source

Adaptive backgrounds

A jQuery plugin for extracting dominant colors from images and applying it to its parent.

source

Magnifying glass for image zoom using Jquery and CSS3

Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action.

The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Jquery is used to position it at the cursor coordinates and change the background position accordingly.

Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state.

source

Key jQuery basics

jQuery is the next step in a long line of abstraction from the early days of the internet.

This repo is a simple step-by-step introduction to basic concepts in jQuery. It was these simple exercises that helped me to greater understand how jQuery works, so I hope that this helps you too as well.

The repo has a very simple directory with the step-by-step examples named appropriately. Comments within the code are there to explain the feature being addressed within the example.

source