Smart Fixed Navigation A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It's smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution. Browser support ie Chrome Firefox Safari Opera 9+ Web pages with a lot of content require a quick way for the user to get back to the top, where the navigation is (most of the time). Hence the old back-to-top button. But why should the user scroll back to the top, if we can make the navigation accessible at any time right where the back-to-top button is supposed to be?
Infinity.js A ListView is a container that moves content in and out of the DOM on the scroll event. ListViews help keep repaint times of expensive pages down (and scrolling smooth) by making sure that there are never too many elements onscreen at a single time. ListViews excel at speeding up long lists of complex HTML elements, where new content is frequently appended to the end and existing content is rarely removed. ListViews are simple, and have several caveats: they can't be nested inside each other, and they can't have heights set via CSS. Additionally, ListViews can't easily change sizes except by appending or removing elements, and so list items that need to slide open or change their sizing will be difficult to implement. Appending elements to a ListView is relatively fast, but removing elements is slower — so designs that need to remove elements multiple times a second at high framerates will struggle.
Circle Navigation Effect with CSS3 Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions. Web Starter Kit — Web Fundamentals Download Web Starter Kit (beta) What is Web Starter Kit? Web Starter Kit is an opinionated boilerplate for web development. Tools for building a great experience across many devices and performance oriented. Helping you to stay productive following the best practices outlined in Google's Web Fundamentals.
SlickMap CSS: A Visual Sitemapping Tool for Web Developers — Astuteo™ Side Projects SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of site maps while at the same time allowing for the pre-development of functional HTML navigation. Eliminates the need for additional software Easily revised with clients on-the-fly Clickable anchors with visible URLs Design process results in working HTML code
Facebox 1.3 What is it? Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. SweetAlert So... What does it do? Here’s a comparison of a standard error message. The first one uses the built-in alert-function, while the second is using sweetAlert. Normal alert Code: gmap : Smashinglabs What is gMap? gMap is a jQuery plugin embedding Google Maps into your website. It allows you to: set center, zoom level and type of map add multiple markers with custom icons, popups and titles position marker by latitude/longitude as well as by its address set your customized map controls retrieve map object and use it for even most complex tasks
<voice-elements> Provides you a simple DOM API to do speech synthesis (text to speech). In the following demo, we set some content into the text attribute. Then, by using the autoplay attribute, the voice is played when the element loads. Reload the page to hear it again. In the following demo, we define a different language by using the accent attribute. Transit - CSS transitions and transformations for jQuery What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (!$.support.transition) $.fn.transition = $.fn.animate; Fallback to frame-based animation