underflow

  • Revision slug: Mozilla_event_reference/underflow
  • Revision title: underflow
  • Revision id: 295329
  • Created:
  • Creator: louisremi
  • Is current revision? No
  • Comment

Revision Content

The undeflow event is fired when an element is no longer overflowed by its content (only works for elements styled with overflow != visible).

General info

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

Properties

{{OpenEventProperties()}}{{UIEventProperties()}}{{CloseEventProperties()}}

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>

Revision Source

<p>The <code>undeflow</code> event is fired when an element is no longer overflowed by its content (only works for elements styled with overflow != visible).</p>
<h2 id="General_info">General info</h2>
<dl>
  <dt style="float: left; text-align: right; width: 120px;">
    Specification</dt>
  <dd style="margin: 0 0 0 120px;">
    None, <i>Mozilla specific</i></dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Interface</dt>
  <dd style="margin: 0 0 0 120px;">
    UIEvent</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Synchronicity</dt>
  <dd style="margin: 0 0 0 120px;">
    synchronous</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Bubbles</dt>
  <dd style="margin: 0 0 0 120px;">
    Yes</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Cancelable</dt>
  <dd style="margin: 0 0 0 120px;">
    Yes</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Target</dt>
  <dd style="margin: 0 0 0 120px;">
    Document, Element</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Default Action</dt>
  <dd style="margin: 0 0 0 120px;">
    None.</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties()}}{{UIEventProperties()}}{{CloseEventProperties()}}</p>
<h2 id="Example">Example</h2>
<pre class="brush:html;">
&lt;div id="wrapper"&gt;
&nbsp;&nbsp;&nbsp; &lt;div id="child"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;br/&gt;
&lt;label&gt;&lt;input type="checkbox" id="toggle" checked/&gt; Overflow&lt;/label&gt;

&lt;style&gt;
 #wrapper {
&nbsp;&nbsp;&nbsp; width: 20px;
&nbsp;&nbsp;&nbsp; height: 20px;
&nbsp;&nbsp;&nbsp; background: #000;
&nbsp;&nbsp;&nbsp; padding: 5px;
&nbsp;&nbsp;&nbsp; overflow: hidden;
  }

  #child {
&nbsp;&nbsp;&nbsp; width: 40px;
&nbsp;&nbsp;&nbsp; height: 40px;
&nbsp;&nbsp;&nbsp; border: 2px solid grey;
&nbsp;&nbsp;&nbsp; background: #ccc;
  }
&lt;/style&gt;

&lt;script&gt;
  var wrapper = document.getElementById("wrapper"),
&nbsp;&nbsp;  &nbsp; child = document.getElementById("child"),
&nbsp;  &nbsp;&nbsp; toggle = document.getElementById("toggle");

  wrapper.addEventListener("overflow", function( event ) {
&nbsp;&nbsp;  &nbsp; console.log( event );
  }, false);

  wrapper.addEventListener("underflow", function( event ) {
&nbsp;&nbsp;  &nbsp; console.log( event );
  }, false);



  toggle.addEventListener("change", function( event ) {
&nbsp;&nbsp;  &nbsp; if ( event.target.checked ) {
&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp; child.style.width = "40px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp; child.style.height = "40px";
  &nbsp;&nbsp;&nbsp; } else {
&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; child.style.width = "10px";
&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp; child.style.height = "10px";
  &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp; &nbsp;
  }, false);
&lt;/script&gt;
</pre>
Revert to this revision