mozilla
Your Search Results

    overflow

    The overflow event is fired when an element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).

    General info

    Specification
    None, Mozilla specific
    Interface
    UIEvent
    Bubbles
    Yes
    Cancelable
    Yes
    Target
    Document, Element
    Default Action
    None.

    Properties

    Property Type Description
    target Read only EventTarget The event target (the topmost target in the DOM tree).
    type Read only DOMString The type of event.
    bubbles Read only boolean Does the event normally bubble?
    cancelable Read only boolean Is it possible to cancel the event?
    view Read only WindowProxy document.defaultView (the window of the document).
    detail Read only long (float) 0 for vertical overflow, 1 for horizontal, 2 for both

    Example

    <div id="wrapper">
        <div id="child"></div>
    </div>
    <br/>
    <label><input type="checkbox" id="toggle" checked/> Overflow</label>
    
    <style>
     #wrapper {
        width: 20px;
        height: 20px;
        background: #000;
        padding: 5px;
        overflow: hidden;
      }
    
      #child {
        width: 40px;
        height: 40px;
        border: 2px solid grey;
        background: #ccc;
      }
    </style>
    
    <script>
      var wrapper = document.getElementById("wrapper"),
          child = document.getElementById("child"),
          toggle = document.getElementById("toggle");
    
      wrapper.addEventListener("overflow", function( event ) {
          console.log( event );
      }, false);
    
      wrapper.addEventListener("underflow", function( event ) {
          console.log( event );
      }, false);
    
    
    
      toggle.addEventListener("change", function( event ) {
          if ( event.target.checked ) {
              child.style.width = "40px";
              child.style.height = "40px";
          } else {
              child.style.width = "10px";
              child.style.height = "10px";
          }
        
      }, false);
    </script>
    

    Document Tags and Contributors

    Contributors to this page: Sheppy, teoli, louisremi, ethertank, gfritzsche
    Last updated by: teoli,