Alf’s blog about geek stuffs

For a customer need, I’ve integrated the scriptaculous slider as shown here in Zend framework.

To achieve this, I’ve created a formSlider view helper which is then used by a slider form element.

The view helper and form element code is here. To allow ZF to find the helper, don’t forget to add path to helper in your bootstrap :

$layout->getView()->addHelperPath('Mc/View/Helper','Mc_View_Helper') ;

You need of course to include scriptaculous and prototype to make it work (available here and here) :

<script src="/prototype-1.6.0.2.js" type="text/javascript"></script>
<script src="/scriptaculous.js" type="text/javascript"></script>

Then, you can create a slider like this :

require_once('Mc/Form/Element/Slider.php') ;
$my_form->addElement(new Mc_Form_Element_Slider('my_element')
    ,'my_element') ;
$my_form->my_element->setLabel('My element : ')
    ->setMin(10)
    ->setMax(30)
    ->setStep(2);

and retrieve the value as usual :

$my_form->my_element->getValue() ;

And if you want to override the default style in your css, don’t forget the !important argument :

div.slider {
    width:256px !important;
    margin:10px 0 !important;
    background-color:lightgray !important;
    height:15px !important;
    position: relative !important;
 }

div.slider div.handle {
     width:10px !important;
     height:15px !important;
     background-color:darkgray !important;
     cursor:move !important;
     position: absolute !important;
 }

I was looking for a javascript which could automatically resize a textarea but the ones I’ve found were a bit buggy or ugly, so I’ve written mine. There’s just a tiny bug with copy/paste with mouse.

function autoresize(txtbox)
{
    var cols = txtbox.cols ;
    var content = txtbox.value ;
    var lineCount = 0 ;

    var lastEOL = -1 ;
    do {
        var begin = lastEOL+1 ;
        lastEOL = content.indexOf("\n",lastEOL+1) ;
        var line = "" ;
        if(lastEOL != -1) {
            line = content.substring(begin,lastEOL) ;
        } else {
            line = content.substring(begin,content.length) ;
        }
        var rows_in_line = Math.floor(line.length/cols)+1 ;
        lineCount += rows_in_line
    } while (lastEOL != -1) ;
    txtbox.rows = lineCount ;
}

and html code :

<textarea name="my_textbox" onkeyup="autoresize(this)"
onmouseup="autoresize(this)" rows="24" cols="80"></textarea>