Most of the JavaScript snippets have code that manipulates the DOM. For that reason dom manipulating javascript code should have been executed after the DOM has loaded completely. That means...
...are fully loaded. The following snippets show how you can do this with plain JavaScript, jquery or prototype (dom ready event binding in other frameworks). Plain JavaScript document.addEventListener("DOMContentLoaded", function...
...the Sass that goes along with it, providing a fallback case for visitors without JavaScript that does regular text-overflow magic: .overflow_container white-space: nowrap overflow: hidden text-overflow...
...up with nsbp + space, causing 2 spaces width. Wrap the code in our unobtrusive JavaScript helper or another way it's run once the DOM is loaded...
Under the same origin policy, a web page served from server1.example.com cannot normally connect to or communicate with a server...
Imagine all the syntactical delights of Ruby and Haml for your JavaScript. You write in a nice language, but get normal JavaScript at runtime. All whilst having full access to...
...3rd-party JavaScript libraries (jQuery, PrototypeJS), debugging support (it becomes pure, readable JavaScript), existing support from test suites (it’s normal JavaScript) and growing support from various text editors (TextMate...
You can say: $(element).is(':visible') and $(element).is(':hidden') jQuery considers an element to be visible if it...
Ask before leaving an unsaved CKEditor Vanilla JavaScript way, but removes any other onbeforeunload handlers: $(function(){ document.body.onbeforeunload = function() { for(editorName in CKEDITOR.instances) { if (CKEDITOR.instances[editorName].checkDirty()) { return "Unsaved changes present...
Use the click method on the DOM element: let link = document.querySelector('a') link.click()
Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple. Using getComputedStyle First, find the element in question. let element = document.querySelector('.my-element...
...or $('.my-element').get(0) when using jQuery Next, use JavaScript's getComputedStyle. It takes an optional 2nd argument to filter for pseudo elements. let style = window.getComputedStyle(element, '::before')
...they forgot one very important part, the ability to use it when responding to JavaScript (JS) requests! In Rails 3.1 it’s incredibly easy to build your application’s JavaScript...
...an AJAX request to your application you can only write your response using regular JavaScript and not CoffeeScript, at least until CoffeeBeans came along...
...s legendary Functional library, here’s a lightweight tool to help keep track of JavaScript invocations. It works in Chrome, Safari, Firebug and IE8...
Attached (see below) is some code to allow using unobtrusive JavaScript on pages fetched with an AJAX call. After you included it, you now do not use the usual
...unobtrusive() to register new element activation callbacks $.unobtrusive = function(callback) { $(document).on('activate-unobtrusive-javascript', function(event, root) { $(root).each(callback); }); } // Define a function for all jQuery collections to manually...
...Using jasmine.clock().mockDate() you can mock new Date() (which returns the current time in Javascript) While you can use SinonJS Fake timers, using the built-in Jasmine clock will save...
...t been written down in this deck before, here it goes: When working with JavaScript Event objects, the DOM element that triggered the event is attached to them. [1]
...logs out the user). Rails probably does this because CSRF protection sort of requires Javascript. You want to enable CSRF protection in Cucumber scenarios that can speak Javascript. To do...
...and mocks in Cucumber rspec_candy Cucumber: Detect if the current Capybara driver supports Javascript
...non-breaking spaces or hyphens of various lengths. For this, use the ways below. Javascript, Coffeescript Use the \u escape sequence: note = '\u266A' You can use Unicode escape sequences in...
Getting a regular expression from a string in JavaScript is quite simple: new RegExp('Hello Universe'); # => /Hello Universe/ You can also use special characters: new RegExp('^(\\d+) users') # => /^(\d+) users...
Promises are the new way™ to express "Do this, and once you're done, do that". In contrast to callbacks...
Single step and slow motion for Cucumber scenarios can come in handy, especially in @javascript scenarios. # features/support/examiners.rb AfterStep('@slow_motion') do sleep 2 end AfterStep('@single_step') do print "Single...
...Note: You can also prevent the selenium webbrowser window from closing after a failed @javascript step. Fixing out-of-sync Cucumber output The problem with the @slow_motion step above...
...implements the technique in this card with tests and all caveats fixed. Related topic: JavaScript: Working with Query Parameters Javascript: Read params from url...
...Although there is no equivalent to this idiom in naked Javascript, there is a way to collect object properties (but not method results) if you are using common Javascript libraries...
If some of your JavaScripts fail on Internet Explorer, but only in staging or production environments, chances are that JavaScript compression is the culprit. By default, Rails 3.2 compresses JavaScript...
...with UglifyJS. I have seen a few cases where this actually breaks functioning JavaScript on IE (one example is the CKEditor). I fixed this by switching to Yahoo's YUI...
JavaScripts and CSS should be minified for production use. In Rails 3.1+ the asset pipeline will take care of this. Thus you're best off using an uncompressed version of...
...your Javascript in development. Also load the non-minified versions of libraries. This way debugging will be easier and you will still get all the minification love once deployed.
Controller responses often include Javascript code that contains values from Ruby variables. E.g. you want to call a Javascript function foo(...) with the argument stored in the Ruby variable @foo...
...by sprockets) has a nice feature where templates ending in .jst are compiled into Javascript template functions. These templates can be rendered by calling JST['path/to/template'](template: 'variables'): Hello, <%= name...
...templates/hello $("#hello").html(JST["templates/hello"]({ name: "Sam" })); Whatever is in the <%...
...%> is evaluated in Javascript. You can also use CoffeeScript here: Sprockets supports two JavaScript template languages: EJS, for embedded...