Put jQuery on your page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
… and link to the plugin:
<script src="https://github.com/mhulse/jquery-kerplop/raw/gh-pages/jquery.kerplop.min.js"></script>
Next, Kerplop can be instantiated like so:
$(function() {
$('.kerplop').kerplop();
});
Here's an example with all the "global" options:
$(function() {
var $kerplop = $('.kerplop');
if ($kerplop.length) {
$kerplop.kerplop({
from : '',
to : '',
use : 'html',
flag : 'kerplopped',
onInit : function($from, $to) { console.log('onInit', this, $from, $to); },
onAfterInit : function($from, $to) { console.log('onAfterInit', this, $from, $to); }
});
}
});
… where:
from
: Element, ID name, to copy from. Used if data-from
local is not defined. Default: ""
.to
: Element, ID name, to copy to. Used if data-to
local is not defined. Default: ""
.use
: Replacement function to use when copying content from, or to, other elements. Allowed values are after
, append
, before
, html
, prepend
and text
. Default: html
.flag
: CSS class name to apply to element that's copied from, or the the element that's copying its contents to another element; useful for when you want to hide the kerplopped
element using CSS techniques. Default: kerplopped
.onInit
: Callback on plugin initialization; this function gets passed two arguments 1) the "from" element 2) the "to" element and "this" is the context of the current element.onAfterInit
: Callback after plugin initialization; this function gets passed two arguments 1) the "from" element 2) the "to" element and "this" is the context of the current element.The beauty of this plugin is that it uses HTML5 data
attributes to "localize" the plugin options.
Kerplop's data-
options are:
data-kerplop-from
: IBID.data-kerplop-to
: IBID.data-kerplop-use
: IBID.data-kerplop-flag
: IBID.<div class="kerplop" data-kerplop-from="other"></div>
prepend
.<div class="kerplop" data-kerplop-from="outgoing" data-kerplop-use="prepend"></div>
data-
locals:<div class="kerplop2" class="kerplopped"><p><b>Out</b>going #2</p></div>
In this case, Kerplop will use options defined in plugin call (see examples above).
append
and use a class name of "off".<div class="kerplop" data-kerplop-to="incoming" data-kerplop-use="append" data-kerplop-flag="off"><p>HTML here!</p></div>
To hide the original element, you could simply use display: none;
or something more screen reader and SEO-friendly, like:
.off {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Check out the demo page for a live example.
(Scan QR code with phone and/or click to view the latest demo.)
Copyright © 2013-16 Micky Hulse
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.