scrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease. Recently whilst working on a client project I was required to implement a “Scroll to top” feature to make it easy for the user to get back to the top of the page. I decided to take this further and turn it into a fully customisable jQuery plugin to work with any site. How to use Simply include the jquery.scrollUp.min.js file and place the following in the head of your document (make sure jQuery is included): Minimum setup Example with default options activeOverlay To create a visible line to help determin an ideal scroll distance from the top, assign a valid CSS colour to the activeOverlay setting. Fully Customisable ScrollUp is fully customisable through CSS which makes it simple to fit right into your project. Check out the demo for more style and feature examples.
Dynamic pagination • Alex MacCaw Pagination over a constantly changing list is hard. Really hard. In fact it should be one of those computer science problems up there with naming and cache invalidation. The issue especially surfaces in news sites, like Hacker News. The hierarchy of posts is constantly changing. Paginating on offset is out, since the valid offset is constantly changing. Well one one method is to store every possible sort order in memory. However this is a lot of data. @fat came up with a neat solution for Medium, which he shared with me recently. Send the server the IDs of the posts you already have when paginating. In other words I send an array containing all the previously fetched post IDs as a parameter whenever I’m fetching more paginated posts. That’s a pretty pragmatic solution, that in my opinion draws the right compromises. Kudos
kamens/jQuery-menu-aim A Simple, Comprehensive Overview of Javascript This isn’t a reference guide, programming tutorial or detailed overview. It’s a Javascript refresher, assuming you know another programming language and puts all the information in one place (just ctrl+f to find!). Javascript has nothing to do with Java, is dynamically typed and has C-like syntax. Enabling Javascript Include javascript inside HTML: <script> x = 3; </script> Reference external file: <script src=" Redirect if javascript disabled: <noscript><meta http-equiv="refresh" content="0; URL= Using Variables, Objects and Arrays Deep dive into objects. Comparisons and Manipulations Javascript has some funky types and comparisons. Conditionals and Loops Defining Functions Javascript Classes Javascript doesn’t have formal class notation, but you can create a “constructor” and add methods to it. Advanced Javascript Browser Document Object Model (DOM), and GUI Find and change HTML elements. Keep learning
Tooltipster - The jQuery Tooltip Plugin Styling your tooltips with a custom look ⇑ Tooltipster makes it very easy to go from one of the packaged themes and customize a few properties of your choice. To do so, we recommend that you create a so-called "secondary theme" which will override some properties of a packaged theme. Create a new css file and include it in your page. Inside the file, declare your customized rules like this: For your secondary theme to be applied, provide an array of themes instead of just one. Changing the size of the arrow might be the only challenging customization but it's doable! Updating a tooltip's content ⇑ It's easy as pie to update a tooltip's content - whether it's open or closed. $('#myelement').tooltipster('content', 'My new content'); // or when you have the instance of the tooltip: instance.content('My new content'); Tooltipster plays a subtle animation when the content changes. Using AJAX to generate your tooltip content ⇑ Forcing or disabling sides ⇑ // ... is the same as ...' 1) Open triggers
ECMA-262 » JavaScript. The core. Read this article in: Japanese, German (version 2), Arabic, Russian, French, Chinese. This note is an overview and summary of the “ECMA-262-3 in detail” series. Every section contains references to the appropriate matching chapters so you can read them to get a deeper understanding. Intended audience: experienced programmers, professionals. We start out by considering the concept of an object, which is fundamental to ECMAScript. ECMAScript, being a highly-abstracted object-oriented language, deals with objects. An object is a collection of properties and has a single prototype object. Let’s take a basic example of an object. For the code: we have the structure with two explicit own properties and one implicit __proto__ property, which is the reference to the prototype of foo: Figure 1. What for these prototypes are needed? Prototype objects are also just simple objects and may have their own prototypes. ECMAScript has no concept of a class. Easy enough, isn’t it? Figure 2. Figure 3.
Magnific Popup: Responsive jQuery Lightbox Plugin Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js). Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered. Dialog with CSS animation Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen. Popup with form Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button. Ajax popup Fast
HTML(.js) - Befriend the DOM! HTML document.documentElement The global HTML is the actual document root element and all element tags queried via the dot operator are descendants. HTML.tag... Element|Array HTML allows you to access document elements via their tag name. HTML.body.header; HTML.body.header.textContent = "A Better Header!" HTML.query(selector) Element|Array 0.10.0 HTML.query acts as a proxy for querySelectorAll and returns the selected element(s). HTML.query("#example"); HTML.query(".example"); HTML.query("#example").h1.em; HTML.tag....query(selector) Element|Array 0.10.0 You can, of course, use query on any "HTML-ified" element(s) to search only the children thereof. HTML.body.div.query(".example"); HTML.query(selector limit) Element|Array 0.11.0 HTML.query acts as a proxy for querySelector or querySelectorAll (as appropriate) and returns no more than the specified number of selected element(s). HTML.query("#example", 1); HTML.body.query(".example", 5); HTML.tag....each(callback(element,index,array)) Element|Array
jQuery plugin for Avgrund concept popin Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior). Tested with jQuery 1.4+, file size is under 2Kb, MIT Licensed. You can simply init Avgrund with one line and linking 'avgrund.css' file: $('element').avgrund(); Avgrund has several options for you to customize it easily: Avgrund plugin was inspired by Hakim's Avgrund.js demo.
Cory Gross -- How To Create Your Own Chrome Extensions I really like the Chrome browser. It wasn't until recently that I looked into creating extensions and was surprised by how simple it was. If you know basic HTML, CSS, JavaScript then you know all you need to be able to extend your Chrome browser in multitudes of ways. Getting Started With Extensions In order to get started creating a new extension all you need to do is create a new root directory for your extension. The Manifest Every extension must contain a file in the root directory with filename manifest.json. Google has published a list of all the fields supported in manifest version 2.. Background Pages Most extensions will have an entry in the manfiest.json which looks like the following: This entry specifies two scripts which will be loaded and kept in memory running in the background. Event Pages Background pages are by default persistent, they are loaded in when the extension starts and are kept in memory constantly. This is all you need to know to start adding some functionality.