When you need to add a event listener to hundreds of elements, this might slow down the browser. An alternative...

Let's say you want to find the element with the text hello in the following DOM tree: hello

Localizing a non-trivial application can be a huge undertaking. This card will give you an overview over the many...

...weird sorting is necessary, since the pipeline does some unfortunate prefix detection, and would detect jquery-ui/jqueryui.js to live in the jquery folder. Putting longer folders first fixes this...

...We organize stuff like this: # jquery goes here vendor/asset-libs/jquery/jquery.1.7.2.min.js # jquery-ui goes here vendor/asset-libs/jquery-ui/jquery-ui-1.8.21.custom.min.js vendor/asset-libs/jquery-ui/jquery-ui-1.8.21.custom.css vendor/asset-libs/jquery-ui/images/.... # icon set goes here vendor/asset-libs/fugue/icons/.... Your app/assets/javascripts/application.js: ... //= require jquery.1.7.2.min //= require jquery-ui-1.8.21.custom.min ... Your app/assets/stylesheets/application.css: ...

There is no CSS selector for matching elements that contains a given string ¹. Luckily, Capybara offers the :text option to...

patrickmarabeas.github.io

...1rem "Open Sans"').then(() => {...

jQuery / fontSpy If your project uses jQuery, you could also use jQuery-FontSpy which also works in IE because it determines the font being loaded by...

}, failure: function() { alert('Font failed to load'); } }); You could also implement something like jQuery-FontSpy in vanilla JS or maybe use vanilla-fontSpy (we have not used it...

You can say: $(element).is(':visible') and $(element).is(':hidden') jQuery considers an element to be visible if it...

makandra dev
github.com

Note This card does not reflect the current state of lazy loading technologies. The native lazy attribute could be used...

makandra dev

If you want to play music or sounds from a browser, your choice is to use either Flash or the...

The attached compiler() function below applies JavaScript behavior to matching HTML elements as they enter the DOM. This works like...

getbootstrap.com

Recently I made an upgrade from Bootstrap 3 to Bootstrap 4 in a bigger project. Here are some tips how...

Some older Node modules rely on window.jQuery to be present. One suggested solution is to use this config in the...

The asset pipeline changes the paths of CSS files during precompilation. This opens a world of pain when CSS files...

makandra dev

Promises are the new way™ to express "Do this, and once you're done, do that". In contrast to callbacks...

Capybara gives you two different methods for executing Javascript: page.evaluate_script("$('input').focus()") page.execute_script("$('input').focus()")

To upload a file via AJAX (e.g. from an ) you need to wrap your params in a FormData object.

CSP hat zum Ziel einen Browser-seitigen Mechanismus zu schaffen um einige Angriffe auf Webseiten zu verhindern, hauptsächlich XSS...

When using jQueryUI's Sortable plugin (either directly or via Angular's ui.sortable), you might struggle testing your nice drag&drop GUI since Selenium webdriver does not support native dragging...

But jQueryUI uses jquery.simulate for their testing, so why shouldn't you? There is even an extension to it that makes testing drag & drop quite easy.

github.com

jquery-placeholder is a simple jQuery plugin that enables form placeholders in browsers that do not support them natively, i.e. IE < 10. Properties Works in IE6. Automatically checks whether the...

...and possibly other browsers.) Caches the results of its two feature tests in jQuery.fn.placeholder.input and jQuery.fn.placeholder.textarea. For example, if @placeholder is natively supported for input elements, jQuery.fn.placeholder.input will be true...

...Modern versions of the jQuery UI date time picker come with an additional file jquery-ui-sliderAccess.js. This adds plus/minus buttons next to the hour and minute sliders. After including the file...

There seems to be a nasty bug in Chrome 56 when testing with Selenium and Capybara: Slashes are not written...

Current webkit browsers like Chrome and Safari have a special variable in their consoles that refers to the selected DOM...

Most browsers have built-in drag and drop support for different page elements like text and images. While this may...

You can use text-overflow to truncate a text using CSS but it does not fit fancy requirements.