overflow

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

Revision Content

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
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>overflow</code> 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).</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