Reports IDs that are being used by multiple elements within a page, including the number of occurrences of each one
A Pen by Craig Patik on CodePen.
Craig Patik patik
- Progressive enhancement is still important
- You cannot rely on JavaScript being available. Period.
- Face It: You Can’t Rely on JavaScript
- Why we should support users with no JavaScript (See section "Why wouldn’t javascript be available?" and the next section)
- The Seven Deadly Sins Of JavaScript Implementation (See #4)
Some of these articles may be old but their arguments hold true. In particular, with more and more people relying on flaky, high-latency cellular networks to deliver sites there is possibly even more concern that JS may not work, even in an otherwise capable browser.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin breakpoint($size: "", $maxWidth: false) { | |
| @if $size == "" { | |
| $size: 20em; // Put your "main" or most-used breakpoint here to use it as a default | |
| } | |
| // Default, `min-width` media query | |
| @if $maxWidth == false { | |
| @media (min-width: $size) { @content; } | |
| } | |
| // Alternative `max-width` media query |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Source data (JSON) from the server | |
| data = { | |
| abc: { | |
| def: { | |
| ghi: 'jkl' | |
| } | |
| } | |
| }; | |
| // The path you're looking for (you want the value of `ghi`) |
The popover plugin displays HTML in a container that overlays the page. It is triggered by clicking on a button or other UI element and the container is positioned near the element. The popover can be displayed and hidden at will.
The plugin must be provided with an options object and a jQuery collection of elements.
patik
/ jQueryMobile Blackberry 6 collapsible content bug
Created
February 10, 2011 21:09
On a Blackberry Bold 9650 running OS 6, collapsible elements do not expand/collapse properly. This workaround adds an event listener with a `setTimeout` of zero milliseconds.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>BB6 Collapsible</title> | |
| <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"> | |
| <script src="http://code.jquery.com/jquery-1.5.min.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| if (/blackberry/i.test(navigator.platform)) { |
patik
/ custom.selector.test.html
Created
December 10, 2011 22:16
Customized Zepto for fake selectors
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> .hidden { display: none; } </style> | |
| <script src="zepto.custom.js"></script> | |
| <script> | |
| $(document).ready(function(e) { | |
| // This should print 2 results: #div3 and #div4 | |
| console.log("visible:", $("div:visible")); |
patik
/ scrollToHash.user.js
Last active
September 28, 2015 21:28
Scroll to the heading that matches the URL hash
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Scroll To Heading From Hash | |
| // @author Craig Patik | |
| // @namespace http://github.com/cpatik | |
| // @version 1.0 | |
| // @description Enable jumping to any heading without adding IDs to the heading elements | |
| // @include http://* | |
| // ==/UserScript== | |
| // Site owners can drop the code below into their pages, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // @name Enhanced Alpha.App.Net | |
| // @description Image previews, Repost links, and Twitter character count on Alpha.App.Net | |
| // @namespace http://patik.com/code/user-scripts/ | |
| // @include https://alpha.app.net/* | |
| // @version v20120903.1 | |
| // ==/UserScript== | |
| (function _adnenhance_init(win) { | |
| var adnenh = {}; |
OlderNewer