Add a mootools plugin

I'd like to add to a form a slider and use it instead of other controls.

Is there an established way to upload the plugin to a joomla/chronofroms folder, to load the plugin and to use it?

Thank you
maxx

Hi Maxx,

Which plug-in are you planning to use?

I did a set of forms with MooTools sliders a while ago with CFv3. I could dig out the code for that but my memory is that it was highly customised to create multiple sliders from database queries so may not help much.

Bob

Which plug-in are you planning to use?

http://js.frixxx.de/projects/DoubleSlider

I did a set of forms with MooTools sliders a while ago with CFv3. I could dig out the code for that but my memory is that it was highly customised to create multiple sliders from database queries so may not help much.

I wasn't looking for code, I suspected I'd have to write some. I just wondered how to load the plugin.

Thank you
maxx

Hi Maxx,

I fiddled around a bit and got a Double Slider working in a ChronoForm here .

Create a new folder /components/com_chronoforms/extras/ and copy the DoubleSlider.js file into it (it's the only one you need from the GitHub distro.

I then added a Custom Element element and a couple of text elements to my form. I gave the text elements names and ids: slider_1 and slider_2

In the Custom Element element I added:

<div id='doubleslider' >
  <div></div>
  <div></div>
</div>

In the form On Load event I added a Load CSS action, a Load JS action and a Show HTML action.

In the Load CSS I added:

#doubleslider {
    position: relative;
    width: 210px;
    height: 15px;
    background: #C9C9C9;
    margin-left: 150px;
}
#doubleslider div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 15px;
    height: 15px;
    background: #000;
}

and in the Load JS action

<?php
JHTML::_('behavior.mootools');
$doc =& JFactory::getDocument();
$doc->addScript(JURI::root().'components/com_chronoforms/extras/DoubleSlider.js');
?>
window.addEvent('domready', function() {
  var doubleslider;
  doubleslider = new DoubleSlider(
    'doubleslider',
    {
      range: [0, 80],
      start: [10, 70],
      onChange: function(firstValue, secondValue){
        $('slider_1').set('value', firstValue);
        $('slider_2').set('value', secondValue);
      }
    }
  );
});

NB The JHTML::_('behavior.mootools') line is there to force Joomla! to load the MooTools library before the DoubleSlider file.

Bob

You got the other half of the beer!

Thank you for all your useful tips, tricks and suggestions!

bye
maxx