Tether. Tether is a JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page.
For example, you might want a tooltip or dialog to open, and remain, next to the relevant item on the page. Tether includes the ability to constrain the element within the viewport, its scroll parent, any other element on the page, or a fixed bounding box. When it exceeds those constraints it can be pinned to the edge, flip to the other side of its target, or hide itself. Tether optimizes its location placement to result in the minimum amount of 'jankyness' as the page is scrolled and resized.
The page can maintain 60fps scrolling even with dozens or hundreds of tethers on screen (pop open the devtools timeline as you scroll this page). Tether is 5kb minified and gzipped, and supports IE9+, and all modern browsers. Select Drop Tooltip Shepherd Usage The element to be moved is called the 'element'. Attachment For example, lets move the element's attachment: Offset Methods. jQuery Tags Input. Creating Fancy Checkmark Icons with Pure CSS3. I was recently working on a personal project where I wanted to implement some cool “checkmark” icons like you see at left to spice up my unordered lists.
I could’ve done it quite easily with the list-style-image property, but I was trying to keep my images and http requests to a minimum, so I wanted to figure out another way to do it (plus, the challenge sounded kind of fun). I had just seen Nicolas Gallagher’s awesome pure css social media icons, though, and I thought, “If he can do that, than I could certainly create a simple check icon with just css3″.
I did figure it out with some experimenting and testing, and today I’m going to show you how to achieve the same effect. The #1 Rule of CSS3 Coding Before we start on any project, we have to remember the number one rule of CSS3 coding. It must be cross-browser acceptable. These are the two principles that I regard to be the unchangeable law for using CSS3. The Concept The Code Now, onto the fun part. We’re finsished! Some Thoughts.
Pure CSS3 Post Tags. This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts.
Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles. Take a look at the demo For CSS triangles you need to manipulate borders of an element that has zero height and width. CSS circle is simpler. All you need is a square element with rounded corners set to at least half the size of the element. I usually markup tags with unordered list. <ul class="tags"><li><a href="#">tag</a></li><li><a href="#">tag name</a></li></ul> I will add :before and :after pseudo elements and style them to achieve the styling I wanted I am placing the tags list at the bottom of the post element with adjusting ULs absolute position Height (and line-height) of the list item LI and anchor A is set.
Colors. Tool Tip. Hovercard - a jQuery plugin with built in Twitter and Facebook cards. Hover over the red text to see the hovercard in action: jQuery is a cross-browser JS library designed to simplify the client-side scripting of HTML.
It was released in January of 2006 by John Resig is an application developer at Khan Academy. He was a JavaScript tool developer for the Mozilla Corporation. He is also thecreator and lead developer of the jQuery JavaScript library. at BarCamp NYC. jQuery is free, open source software, dual-licensed under the MIT License and GNU General Public License, Version 2.[4] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. View Source <p>jQuery is a cross-browser JS library designed to simplify the client-side scripting of HTML. jQuery Shadow Plugin. Interact.js - JavaScript drag and drop, resizing and gestures with inertia and snapping.