recentpopularlog in

abberdab : javascript   66

Easier scrollytelling with position sticky
Why use Sticky?
The short version: when using the sticky graphic pattern, you need a bunch of JavaScript to handle the stuck state, dimensions, etc.. With this approach, that is all done with (minimal) CSS. This means less bugs, less maintenance, and more happiness.
animation  css  javascript  sticky 
june 2018 by abberdab
russellgoldenberg/enter-view: Dependency-free JavaScript library to detect when element enters into view
Dependency-free JavaScript library to detect when element enters into view. Useful for triggering sticky behavior and others.
css  javascript  scrolling 
june 2018 by abberdab
Introduction · Front-End Developer Handbook 2018
This guide for front-end folks covers HTML, CSS, and JavaScript and lists learning resources and development tools.
css  html  javascript  front-end  front-end-design  best-practices 
april 2018 by abberdab
Simple Swipe With Vanilla JavaScript | CSS-Tricks
I used to think implementing swipe gestures had to be very difficult, but I have recently found myself in a situation where I had to do it and discovered the reality is nowhere near as gloomy as I had imagined.

This article is going to take you, step by step, through the implementation with the least amount of code I could come up with. So, let's jump right into it!
javascript  css  gallery  slider  sliders  slideshow  touchscreen  mobile 
april 2018 by abberdab
Fizzy school
jQuery makes writing browser JavaScript so accessible, it's easy to skip over some of JavaScript’s core concepts. Fizzy School covers these concepts so novice developers can fill in the missing areas in learning JavaScript and jQuery.
js  jquery  best-practices  javascript 
september 2017 by abberdab
The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today – Smashing Magazine
For some time, we've run up against the limits of what CSS can do. Those who build responsive layouts will freely admit the frustrations and shortcomings of CSS...
javascript  element-queries  polyfills  rwd  dev 
july 2016 by abberdab
terwanerik/ScrollTrigger: Triggers classes on html elements based on the scroll position. Uses requestAnimationFrame so it doesn't jack the users scroll.
Triggers classes on html elements based on the scroll position. Uses requestAnimationFrame so it doesn't jack the users scroll. https://terwanerik.github.io/ScrollTrigger/

Does not require jQuery, written with vanilla javascript.
animation  javascript  scrolling  trigger 
july 2016 by abberdab
chris-pearce/css-guidelines: CSS Guidelines I use for personal projects including Scally CSS framework and at work
In addition to a documentation of this particular developers CSS approach, this guideline contains an exhaustive list of js and state-related class naming conventions.
css  guidelines  naming  naming-conventions  javascript  BEM 
june 2016 by abberdab
jwagner/smartcrop.js · GitHub
Smartcrop.js implements an algorithm to find good crops for images. Image: https://www.flickr.com/photos/endogamia/5682480447/ by N. Feans Demos Algorithm Overview Smartcrop.js works using fairly
images  javascript  cropping  utilities  photography 
december 2015 by abberdab
Handsontable
Excel-like spreadsheet for web apps. Handsontable is ready to use, open and free JavaScript component.
javascript  jquery 
november 2015 by abberdab
You Might Not Need jQuery
Examples of how to do common event, element, ajax and utility operations with plain javascript.
jquery  javascript  library  development  reference 
july 2015 by abberdab
Snap.svg
Nifty library for creating, manipulating and animating SVGs. For modern browsers (IE 9+).
svg  animation  library  javascript  hidpi 
october 2014 by abberdab
Datavisualization.ch Selected Tools
So, here's a collection of lots of different javascripty data visualization libraries / tools / whatevs that I came across.

http://selection.datavisualization.ch/

Given that we're sometimes asked to produce gratuitous chats/infographics, perhaps it's helpful to see what's available to us, and then work backwards from what looks cool to "what data can we find that fits these visuals?"
javascript  tools  visualization  graphs  charts  dev  www 
march 2013 by abberdab
Adactio: Journal—Conditional CSS
Just to recap, I was looking for a way of detecting from JavaScript whether media queries have been executed in CSS without duplicating my breakpoints. That bit is important: I’m not looking for MatchMedia, which involves making media queries in JavaScript. Instead I’m looking for some otherwise-useless CSS property that I can use to pass information to JavaScript.
css  javascript  mediaqueries  rwd 
december 2012 by abberdab
24 ways: Think First, Code Later
Finding alternatives to large libraries like jQuery when coding responsive sites that should be more mindful of bandwidth.
performance  javascript  responsive-design 
december 2012 by abberdab
3D Restaurant Menu Concept
An interactive, animated folding menu powered by CSS3 and Modernizr.
javascript  modernizr  animation  dev  www 
september 2012 by abberdab
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better
Make long and unwieldy select boxes more user-friendly. (I'm looking at IE...)
forms  select  jquery  javascript  iefix 
march 2012 by abberdab
jQuery Masonry
Version 3 released in June 2013!

Nifty jQuery plugin that enables tidy dynamic layouts containing mixtures of images of different aspect ratios and sizes.
design  javascript  jquery  layout  photography  gallery 
february 2012 by abberdab
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better
Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.
select  jquery  javascript  custom  forms  plugins 
september 2011 by abberdab
jQuery Form Plugin
From the fine folks who brought us the jCycle plugin.
"The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how "the data is submitted. Submitting a form with AJAX doesn't get any easier than this!
jquery  php  forms  ajax  javascript  dev  www 
june 2011 by abberdab
jQuery Google Feed Plugin
From the fine folks who brought you the jcycle plugin. "On April 16th, 2007, Google announced the Google AJAX Feed API. This is a pretty cool thing as it facilitates feed mashups by providing the server component. This means that developers can easily mash feeds on the client by simply including Google's new API script. And Google has provided a nice Developer's Guide which shows how to get started.
To simplify this even more for jQuery developers, I've created a small plugin which performs the task of unobtrusively converting an element, such as an <a>, into a <div> element which holds feed content.

Update: On May 8th, Google announced the Feed Control. As a result, this plugin has been updated (and simplified!) to use the new Google control."
google  feed  jquery  javascript  rss  dev  apis  www 
june 2011 by abberdab
/ie7/
Supposedly adds IE7 functionality to IE5.5+. Huh!
css  ie6  javascript  png  dev  www 
december 2007 by abberdab
24 ways: Transparent PNGs in Internet Explorer 6
Supposedly, links will work with this method even when contained within an element that has a transparent png background.
png  css  transparency  ie6  javascript  dev  design  www 
december 2007 by abberdab
IE PNG Fix - TwinHelix
Super fix for png transparency in IE6.
browser  png  css  javascript  unobtrusive  transparency  ie  dev  www 
november 2007 by abberdab

Copy this bookmark:





to read