public marks

PUBLIC MARKS from decembre with tags javascript & example

2018

JAVASCRIPT - IMAGE - LAZY LOAD - Lazy Loading Images? Don’t Rely On JavaScript! | Robin Osborne

(via)
One popular method to deal with this is to “Lazy Load” the images; that is, to only load the images just before the user will need to see them. If this technique is applied to the “above the fold” content – i.e., the first average viewport-sized section of the page – then the user can get a significantly faster first view experience. So everyone should always do this, right? Given the potential limitations, let’s work on a solution that can handle all my concerns: a. works without JavaScript (i.e., lazy loading is an enhancement) b. vanilla js – no dependencies on jquery or angularjs c. works with broken JavaScript (i.e., the browser supports JavaScript, but there’s a js error somewhere which causes your script to break; might not even be your fault!)

2017

JQUERY - CHECK/UNCHEK - Demo in JSFiddle

As per the jQuery documentation there are following ways to check if a checkbox is checked or not. Lets consider a checkbox for example (Check Working jsfiddle with all examples)

JAVASCRIPT - syntax - What does "use strict" do in JavaScript, and what is the reasoning behind it? - Stack Overflow

The statement "use strict"; instructs the browser to use the Strict mode, which is a reduced and safer feature set of JavaScript. List of features (non-exhaustive) Disallows global variables. (Catches missing var declarations and typos in variable names) Silent failing assignments will throw error in strict mode (assigning NaN = 5;) Attempts to delete undeletable properties will throw (delete Object.prototype) Requires all property names in an object literal to be unique (var x = {x1: "1", x1: "2"}) Function parameter names must be unique (function sum (x, x) {...}) Forbids octal syntax (var x = 023; some devs assume wrongly that a preceding zero does nothing to change the number.) Forbids the with keyword eval in strict mode does not introduce new variables Forbids deleting plain names (delete x;) Forbids binding or assignment of the names eval and arguments in any form Strict mode does not alias properties of the arguments object with the formal parameters. (i.e. in function sum (a,b) { return arguments[0] + b;} This works because arguments[0] is bound to a and so on. ) arguments.callee is not supported [Ref: Strict mode, Mozilla Developer Network]

jQUERY - JAVASCRIPT - jQuery udraggable Plugin

jquery.udraggable.js This plugin provides an API similar to jQueryUI's draggable but with support for unified mouse and touch events. It builds on Michael S. Mikowski's jquery.event.ue unified event plugin.

html - Draggable div without jQuery UI - Stack Overflow

(via)
Here's another updated code: $(document).ready(function() { var $dragging = null; $('body').on("mousedown", "div", function(e) { $(this).attr('unselectable', 'on').addClass('draggable'); var el_w = $('.draggable').outerWidth(), el_h = $('.draggable').outerHeight(); $('body').on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY - el_h / 2, left: e.pageX - el_w / 2 }); } }); $dragging = $(e.target); }).on("mouseup", ".draggable", function(e) { $dragging = null; $(this).removeAttr('unselectable').removeClass('draggable'); }); });​

jQUERY -JqueryUI - DRAG - JqueryUI Draggable

(via)
$ (selector, context).draggable (options) Method The draggable (options) method declares that an HTML element can be moved in the HTML page. The options parameter is an object that specifies the behavior of the elements involved. Syntax $(selector, context).draggable(options); You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows − $(selector, context).draggable({option1: value1, option2: value2..... });

jQuery - javascript - JS scrollbar recommendations? - Stack Overflow

by 1 other
I like to use: - Tiny Scrollbar for the minimalist design - JQuery Custom Content Scroller

2016

2015

JQuery - DEMO - arrays - JQuery .each() backwards - Stack Overflow

Here are different options for this: You can use this: $($("ul > li").get().reverse()).each(function (i) { $(this).text( 'Item ' + (++i)); }); ===or==== $($(".block-item").get().reverse()).each(function (i) { $(this).text(++i); });

JAVASCRIPT - DEMO - Maximum Characters for Text and Textarea Form Fields

Enforcing a maximum character length for text and textarea form fields is fairly easy to do.

SCRIPT - Floating Layer At Cursor Position

This post shows how to implement layers that will display content over existing content just below and to the right of the cursor position

GM - firefox - How to alter this javascript with Greasemonkey? - Stack Overflow

On Firefox Greasemonkey, you can do that with the stupefyingly brilliant (^_^) checkForBadJavascripts utility

2014

JAVASCRIPT - TUTO - DEMEO - Web Developer Introduction To Features of JavaScript "Function" Objects

by 1 other (via)
There are several ways to declare a function. All valid, but there are differences on how they're handled in the background.

javascript - Use Greasemonkey to replace links, to images, with images? - Stack Overflow

Replacing links to images is not too hard to do. However, I recommend that you keep the link but display the picture inside it. This is so you can click through if something goes wrong. For example, that sample page you gave has most of the linked images on a dead site. Other linked images only look like they point to images or might be blocked for "hot linking". To make the code robust and easy, we use jQuery and waitForKeyElements. Here is a complete working script that delinks the payload image-links on that sample site:

decembre's TAGS related to tag javascript

ajax +   animation +   api +   article +   bib +   bibliotheque +   blog +   bookmarklet +   browser +   carte +   checkbox +   code +   comment +   convert +   Cookie +   css +   cursor +   demo +   design +   dev +   development +   documentation +   dom +   editeur +   editor +   example +   exemple +   extension +   fichier +   firebug +   firefox +   flash +   flickr +   FlickrSurf+ +   fonction +   forum +   free +   function +   generator +   google +   google:maps +   greasemonkey +   guide +   hack +   howto +   htlm +   html +   image +   interface +   java +   jQuery +   json +   Korben +   library +   link +   list +   liste +   maps +   mobile +   ocr +   online +   opensource +   outil +   php +   player +   plugin +   programmation +   reference +   regex +   Responsive +   ressource +   scale +   script +   scroll +   scrollbar +   site +   size +   stackoverflow +   tag +   test +   text +   texte +   tips +   tool +   transform +   tuto +   tutorial +   tutoriel +   user +   userscript +   utilitaire +   video +   web +   web2.0 +   webdesign +   webdev +   xhtml +   xml +   xpi +   xul +