Updated: Check whether an element is visible or hidden with Javascript
- Added information about what jQuery considers "visible"
- Added a solution for Prototype
- Added a patch for Prototype that replaces the useless
Element#visible()
method with an implementation that behaves like jQuery.
Related cards:
Check whether an element is visible or hidden with Javascript
jQuery
You can say:
$(element).is(':visible')
and
$(element).is(':hidden')
jQuery considers an element to be visible if it consumes space in the document. For most purposes, this is exactly what you want.
Native DOM AP...
Check that an element is hidden via CSS with Spreewald
If you have content inside a page that is hidden by CSS, the following will work with Selenium, but not when using the Rack::Test driver. The Selenium driver correctly only considers text that is actually visible to a user.
Then I should not ...
JavaScript without jQuery
This is a presentation from 2019-01-21.
Summary
- We want to move away from jQuery in future projects
- Motivations are performance, bundle size and general trends for the web platform.
- The native DOM API is much nicer than it used to be, a...
Capybara: Finding invisible elements and how to test that an element is not visible
When Capybara locates elements in the DOM, by default it allows only accessing visible elements -- when you are using a driver that supports it (e.g. Selenium, not the default Rack::Test
driver).
Consider the following HTML:
<div class=...
Cucumber: Test that an element is not overshadowed by another element
I needed to make sure that an element is visible and not overshadowed by an element that has a higher z-index
(like a modal overlay).
Here is the step I wanted:
Then the very important notice should not be overshadowed by another element
`...
How to create giant memory leaks in AngularJS (and other client-side JavaScript)
This guide shows how to create an AngularJS application that consumes more and more memory until, eventually, the browser process crashes on your users.
Although this guide has been written for Angular 1 originally, most of the advice is relevant...
Issue Checklist Template
This is a checklist I use to work on issues. For this purpose I extracted several cards related to the makandra process and ported them into a check list and ref...
The JavaScript Object Model: Prototypes and properties
Speaker today is Henning Koch, Head of Development at makandra.
This talk will be in German with English slides.
Introduction
As web developers we work with JavaScript every day, even when our backend code uses anothe...
Unobtrusive jQuery to toggle visibility with selects and checkboxes
Use this if you want to show or hide part of a form if certain options are selected or boxes are checked.
The triggering input gets an data-selects-visibility
attribute with a selector for the elements to show or hide, like
<%= form.select...
Capybara: Quick checking for element presence (without retries or timeout)
Element finding is a central feature of Capybara. Since #find
is normally used to get elements from the current page and interact with them, it's a good thing that some Capybara drivers (e.g. Selenium) will wait an amount of time until the expec...