JavaScript Events
Last updated Jan 31st, 2020 | Page history | Improve this page | Report an issue
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$311 per month—let's make that $500!
Learn moreFredElementDrop¶
This event will trigger when any Element is dropped to a dropzone. You can access fredEl from the event.detail.fredEl
object.
Example¶
document.body.addEventListener("FredElementDrop", function() {
$owl();
});
FredElementSettingChange¶
This event will trigger when Element setting on any Element is changed. You can access fredEl from the event.detail.fredEl
object.
Example¶
document.body.addEventListener("FredElementSettingChange", function() {
$owl();
});
Full Featured Example¶
Here's an example use case of re-applying a jQuery class for a slider when changes are made.
Slider Element¶
The slider element will create new or fewer slides based on the number defined in the element's options.
Markup¶
<div class="col-md-8 owl-init slider-main owl-carousel">
{% for i in 0..(slides - 1) %}
<div class="item-slide">
<div class="card-banner" style="height:600px;">
<div class="overlay-cover d-flex align-items-center justify-content-center">
<div class="text-center">
<h3 data-fred-name="slider_header{{i}}">Default Value {{i+1}}</h3>
<p data-fred-name="slider_text{{i}}">This is some default text.</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
Options¶
{
"settings": [
{
"name": "slides",
"label": "Slides",
"type": "slider",
"value": 3,
"min": 1,
"max": 6
}
]
}
Template Script¶
The template will initialize the slider on first load, and re-initialize when the element is dropped or altered.
<link
rel="stylesheet"
href="//unpkg.com/owl.carousel/dist/assets/owl.carousel.min.css"
/>
<link
rel="stylesheet"
href="//unpkg.com/owl.carousel/dist/assets/owl.theme.default.min.css"
/>
<script src="//unpkg.com/jquery/dist/jquery.js"></script>
<script src="//unpkg.com/owl.carousel/dist/owl.carousel.js"></script>
<script>
var $owl = function() {
$(".owl-carousel").owlCarousel({
loop: true,
margin: 10,
nav: true,
items: 1
});
};
document.body.addEventListener("FredElementDrop", function() {
$owl();
});
document.body.addEventListener("FredElementSettingChange", function() {
$owl();
});
$(document).ready(function() {
$owl();
});
</script>