Home/ Questions/Q 6892333
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:31:19+00:00

if ($(#makespan).is(:visible) == true) { var make = $(#make).val(); } else { var make

  • 0
if ($("#makespan").is(":visible") == true) { 
    var make = $("#make").val(); 
}
else {
    var make = $("#othermake").val(); 
}

Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake>&nbsp;-&nbsp;<span id=othermakecancel class=txtbutton>Cancel</span></span>

The above code runs smooth in Firefox, but doesn’t seem to work in Chrome. In Chrome it shows .is(":visible") = false even when it is true.

I am using following jQuery version: jquery-1.4.3.min.js

jsFiddle Link: http://jsfiddle.net/WJU2r/4/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It seems jQuery’s :visible selector does not work for some inline elements in Chrome. The solution is to add a display style, like "block" or "inline-block" to make it work.

    Also note that jQuery has a somewhat different definition of what is visible than many developers:

    Elements are considered visible if they consume space in the document.
    Visible elements have a width or height that is greater than zero.

    In other words, an element must have a non-zero width and height to consume space and be visible.

    Elements with visibility: hidden or opacity: 0 are considered visible,
    since they still consume space in the layout.

    On the other hand, even if its visibility is set to hidden or the opacity is zero, it’s still :visible to jQuery as it consumes space, which can be confusing when the CSS explicitly says its visibility is hidden.

    Elements that are not in a document are considered hidden; jQuery does
    not have a way to know if they will be visible when appended to a
    document since it depends on the applicable styles.

    All option elements are considered hidden, regardless of their
    selected state.

    During animations that hide an element, the element is considered
    visible until the end of the animation. During animations to show an
    element, the element is considered visible at the start at the
    animation.

    The easy way to look at it, is that if you can see the element on the screen, even if you can’t see its content, it’s transparent etc., it’s visible, i.e. it takes up space.

    I cleaned up your markup a little and added a display style (i.e. setting the elements display to “block” etc), and this works for me:

    FIDDLE

    Official API reference for :visible

    As of jQuery 3, the definition of :visible has changed slightly

    jQuery 3 slightly modifies the meaning of :visible (and therefore of
    :hidden).
    Starting with this version, elements will be considered
    :visible if they have any layout boxes, including those of zero width
    and/or height. For example, br elements and inline elements with no
    content will be selected by the :visible selector.

    • 0