github.com/anseki/jquery-plainoverlay @1.0.1
Chat with this repoWhat it actually does AI analysis from the code graph — generated when you open this
README
jQuery-plainOverlay
Recommend: PlainOverlay instead of "jQuery-plainOverlay"
No dependency, Modern browsers supported, Lightweight & Single file, and more features
The simple jQuery Plugin for customizable overlay which covers a page, the elements or the iframe-windows that is specified. jQuery-plainOverlay has basic functions only, and it has no image files and no CSS files. Just one small file.
See DEMO
This is used for making the users wait until the your application is ready.
The elements under the overlay don't accept access via mouse or keyboard. And the scrollable elements (e.g. <body>, `
or`) which are specified can't scroll.</p>
<p>The your progress-element (messages or images that means "Please wait...") can be shown to the users on the overlay. You can free style it to perfect match for your web site. Or jQuery-plainOverlay has a simple builtin progress-element.</p>
<p>jQuery-plainOverlay does:</p>
<ul>
<li>Covering a page, the elements or the iframe-windows that is specified with the overlay.</li>
<li>Avoiding focusing the elements under the overlay. (by pressing Tab key)</li>
<li>Avoiding scrolling a page, the elements or the iframe-windows that is specified.</li>
</ul>
<pre><code class="language-js">// Cover an element with overlay.
$('#post-form').plainOverlay('show');
// Hide overlay.
$('#post-form').plainOverlay('hide');
// Cover all of a page.
$('body').plainOverlay('show'); // Or, $(document), $(window)
</code></pre>
<h2>Getting Started</h2>
<p>Load after jQuery.</p>
<pre><code class="language-html"><script src="jquery-1.11.0.min.js"></script>
<script src="jquery.plainoverlay.min.js"></script>
</code></pre>
<h2>Methods</h2>
<h3><code>show</code></h3>
<pre><code class="language-js">element = element.plainOverlay('show'[, options])
</code></pre>
<p>Cover the specified element with the overlay. This element may be <code><body></code>, <code><iframe></code> or a box-element like `</p>
<p><code>.</code>$(document)<code>and</code>$(window)<code>are same as</code>$('body')<code>.
If</code>options<code>(see [Options](#options)) is specified, the element is initialized with specified</code>options<code>before the overlay is shown. If the element is not initialized yet, it is initialized even if</code>options<code>is not specified (with the default options).
The element can be initialized by new</code>options` any number of times.</p>
<h3><code>hide</code></h3>
<pre><code class="language-js">element = element.plainOverlay('hide'[, ignoreComplete])
</code></pre>
<p>Hide the overlay.</p>
<p>By default, behavior restrictions of the element (e.g. scrolling) are removed after the fading effect took <a href="#duration"><code>options.duration</code></a> to complete. (i.e. after the overlay was hidden completely.)<br />
If <code>true</code> is specified to <code>ignoreComplete</code>, the restrictions are removed when <code>hide</code> method is called, and <a href="#plainoverlayhide"><code>plainoverlayhide</code></a> event is triggered.<br />
For example, this is used to do something about the element (e.g. changing scroll position) while the overlay is shown.</p>
<h3>Initialize</h3>
<pre><code class="language-js">element = element.plainOverlay([options])
</code></pre>
<p>Initialize the specified element. (preparation the overlay)<br />
The <a href="#show"><code>show</code></a> method too, can initialize. This is used to initialize without showing the overlay at voluntary time.<br />
You can specify <code>options</code> to every <a href="#show"><code>show</code></a> method. But, if <code>options</code> of an element isn't changed, re-initializing it isn't needed. Then, you specify <code>options</code> to only first <a href="#show"><code>show</code></a> method, or use this method for initializing it only once.<br />
If you don't customize any options (using default all), this method isn't needed because <code>options</code> isn't specified to <a href="#show"><code>show</code></a> method, and the element is initialized at only first time.</p>
<p>In this code, it is initialized meaninglessly again, again, and again:</p>
<pre><code class="language-js">$('#show-button').click(function() {
// Same initializing per every showing
$('#list').plainOverlay('show', {duration: 500});
});
</code></pre>
<p>In this code, it is initialized at once:</p>
<pre><code class="language-js">// Initialize without showing
var list = $('#list').plainOverlay({duration: 500});
$('#show-button').click(function() {
// Show without initializing
list.plainOverlay('show');
});
</code></pre>
<p>In this code, it is initialized at once:</p>
<pre><code class="language-js">$('#show-button').click(function() {
// Initialize at only first time
list.plainOverlay('show');
});
</code></pre>
<h3><code>option</code></h3>
<pre><code class="language-js">currentValue = element.plainOverlay('option', optionName[, newValue])
</code></pre>
<p>Return the current option value (see <a href="#options">Options</a>) as <code>optionName</code>. If <code>newValue</code> is specified, it is set before returning.</p>
<p><em>NOTE:</em> The current version of the jQuery-plainOverlay can change option value of <a href="#duration"><code>duration</code></a> and <a href="#opacity"><code>opacity</code></a> options. Use <a href="#initialize">Initialize</a> method to update option value of others.</p>
<h3><code>scrollLeft</code>, <code>scrollTop</code></h3>
<pre><code class="language-js">element = element.plainOverlay('scrollLeft', scrollLen)
</code></pre>
<pre><code class="language-js">element = element.plainOverlay('scrollTop', scrollLen)
</code></pre>
<p>jQuery-plainOverlay avoid scrolling the element. These methods are used instead of <code>element.scrollLeft</code> and <code>element.scrollTop</code> methods to scroll the element while the overlay is shown.</p>
<p>For example:</p>
<pre><code class="language-js">$('body').plainOverlay('show', {
show: function(event) {
// Now, the overlay is shown. The user can't scroll the page.
// Do something...
// Scroll the page to show something.
$('body').plainOverlay('scrollLeft', 100).plainOverlay('scrollTop', 400)
// And hide the overlay.
.plainOverlay('hide');
}
});
</code></pre>
<h2>Options</h2>
<p>An <code>options</code> Object can be specified to <a href="#show"><code>show</code></a> or <a href="#initialize">Initialize</a> method. It can have following properties.</p>
<h3><code>duration</code></h3>
<p>Type: Number<br />
Default: <code>200</code></p>
<p>A number determining how long (milliseconds) the effect animation for showing and hiding the overlay will run.</p>
<h3><code>fillColor</code></h3>
<p>Type: String<br />
Default: <code>'#888'</code></p>
<p>A fill-color of the overlay.</p>
<pre><code class="language-js">$('#list').plainOverlay({fillColor: 'red'});
</code></pre>
<p><code>color</code> is an alias for <code>fillColor</code>.</p>
<h3><code>opacity</code></h3>
<p>Type: Number<br />
Default: <code>0.6</code></p>
<p>A number in the range <code>0.0</code> (invisible) to <code>1.0</code> (solid).</p>
<pre><code class="language-js">$('#list').plainOverlay({opacity: 0.3});
</code></pre>
<p>If you want to style the overlay more, add style to <code>plainoverlay</code> class.</p>
<pre><code class="language-css">.plainoverlay {
background-image: url('bg.png');
}
</code></pre>
<h3><code>progress</code></h3>
<p>Type: Function or Boolean<br />
Default: Builtin Element</p>
<p>The jQuery-Element that is returned by specified Function is shown to the users as the progress-element on the overlay. This is usually the messages or images that means "Please wait...".<br />
If <code>false</code> is specified, nothing is shown on the overlay.<br />
The builtin element (default) is shown via CSS Animations in modern browsers (e.g. Firefox, Chrome, etc.), and it is shown via simple effect in legacy browsers (IE9, IE8, etc.). This choice is automatic.</p>
<pre><code class="language-js">$('#list').plainOverlay({
progress: function() { return $('
I am busy...
'); }
});
</code></pre>
<p>Of course your image files, some CSS codes which are distributed free in the internet, or any elements can be used. (e.g. SVG Animations <a href="https://github.com/jxnblk/loading">jxnblk/loading</a>)</p>
<p>If you want to change the color of shapes in the builtin progress-element, use CSS below.</p>
<pre><code class="language-css">/* Change to red */
.jQuery-plainOverlay-progress {
border-color: red !important;
}
.jQuery-plainOverlay-progress-legacy div {
background-color: red !important;
}
</code></pre>
<h3><code>zIndex</code></h3>
<p>Type: Number<br />
Default: <code>9000</code></p>
<p>A <code>z-index</code> CSS property of the overlay.</p>
<h3><code>show</code>, <code>hide</code></h3>
<p>Type: Function<br />
Default: <code>undefined</code></p>
<p>The <a href="#plainoverlayshow"><code>plainoverlayshow</code></a> and <a href="#plainoverlayhide"><code>plainoverlayhide</code></a> event handlers. This is convenient way to do <code>on(type, handler)</code> method. (see <a href="#events">Events</a>)</p>
<pre><code class="language-js">$('#form1').plainOverlay({show: function(event) { console.log(event); } });
</code></pre>
<p><em>NOTE:</em> If this option is specified in the <a href="#show"><code>show</code></a> method, declared Function or the variable the Function is assigned should be specified (Don't specify the function expression). Because the <a href="#show"><code>show</code></a> method may be called again, and the <em>function expression</em> generates the new Function every time.<br />
The <em>"function statement"</em> and the <em>"function operator"</em> are different.<br />
See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#Defining_functions">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#Defining_functions</a><br />
For example, this code is OK:</p>
<pre><code class="language-js">function handler(event) { console.log(event); }
$('#show-button').click(function() {
$('#form1').plainOverlay('show', {show: handler});
});
</code></pre>
<p>This code registers event handler repeatedly when the <a href="#show"><code>show</code></a> method is called:</p>
<pre><code class="language-js">$('#show-button').click(function() {
$('#form1').plainOverlay('show', {show: function(event) { console.log(event); } });
});
</code></pre>
<h2>Events</h2>
<h3><code>plainoverlayshow</code></h3>
<p>Triggered when the overlay is shown. (after the fading effect took <a href="#duration"><code>options.duration</code></a> to complete.)<br />
An event handler can be attached when initializing via <a href="#show-hide"><code>options.show</code></a> as well.</p>
<pre><code class="language-js">$('#form1').on('plainoverlayshow', function(event) {
$('#loading', event.target).text(size + ' Bytes Downloading');
});
</code></pre>
<h3><code>plainoverlayhide</code></h3>
<p>Triggered when the overlay is hidden.<br />
By default, it is triggered after the fading effect took <a href="#duration"><code>options.duration</code></a> to complete. If <a href="#hide"><code>hide</code></a> method is called with <code>ignoreComplete</code> argument, it is triggered when <code>hide</code> method is called.<br />
An event handler can be attached when initializing via <a href="#show-hide"><code>options.hide</code></a> as well.</p>
<pre><code class="language-js">$('#form1').on('plainoverlayhide', function(event) {
$('#complete-message').show();
});
</code></pre>
<h2>Note</h2>
<ul>
<li>If target is <code><iframe></code> element, jQuery 1.10.3+ or 2.0.4+ must be used. (see <a href="http://bugs.jquery.com/ticket/14180">#14180: focusin/out special events don't work cross-window</a>)</li>
<li>As everyone knows, IE8- has many problems. CSS <code>position:fixed</code> in HTML without <code><!DOCTYPE></code> is ignored.<br />
If your web site supports IE8- and it use <code>position:fixed</code>, HTML must include <code><!DOCTYPE></code> even if jQuery-plainOverlay is not used. And jQuery-plainOverlay uses <code>position:fixed</code>.</li>
<li><a href="#plainoverlayshow"><code>plainoverlayshow</code></a> and <a href="#plainoverlayhide"><code>plainoverlayhide</code></a> events bubble up the DOM hierarchy.</li>
</ul>
<h2>See Also</h2>
<ul>
<li><a href="https://anseki.github.io/plain-overlay/">PlainOverlay</a> : The simple library for customizable overlay which covers all or part of a web page.</li>
<li><a href="https://anseki.github.io/plain-modal/">PlainModal</a> : The simple library for fully customizable modal window in a web page.</li>
</ul>
Core symbols most depended-on inside this repo
experimentalShape
Languages
Modules by API surface
For agents
$ claude mcp add jquery-plainoverlay \
-- python -m otcore.mcp_server <graph>