1. The forums have been upgraded to XenForo 1.4. Please post any issues or comments here.
  2. Our hosting provider will be performing some scheduled maintenance and upgrading during the early morning (US time) of Tue 28th July, starting at approx 2am EST, which will require some down time of the server.

Trick: Copy to Clipboard

Discussion in 'Hints, Tips and Tricks' started by grey666, Sep 30, 2011.

  1. grey666

    grey666 Member

    Level: Community
    This is a very obscure trick, but worthwhile at the same time.

    This allows you to copy any data to the windows clipboard from any field in any Fabrik form - on any javascript event.

    Download the code, place it in it's own directory - i.e. "www/zeroclipboard". www is your root web directory.

    Download the code here:
    http://code.google.com/p/zeroclipboard/downloads/list

    Next ...

    In the Fabrik form, place the following code in the Introduction area: Use the HTML Button ... (This puts a button at the top of your form, using Flash.)

    <script src="zeroclipboard/ZeroClipboard.js" type="text/javascript"></script>
    <div id="d_clip_button" style="border: 1px solid black; padding: 5px; margin: 5px; width: 40%;">Text To Clipboard</div>
    <script type="text/javascript">// <![CDATA[
    ZeroClipboard.setMoviePath( 'http://yourdomain.com/zeroclipboard/ZeroClipboard10.swf' );
    var clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );
    clip.setText( 'Copy me!' );
    clip.glue( 'd_clip_button' );
    // ]]></script>


    Next, add a javascript event to any Fabrik field.

    For example... a text box field. Add javascript, Action: On Change:
    clip.setText( $('db_content___Text').value );

    db_content is the Fabrik table name, Text is the field.


    Action: On Load:
    clip.setText( $('db_content___Text').value );


    That's it... click a button and the data from your Fabrik fields is copied to the Windows clipboard.

    Try mouse-over... it's fun.


    Multiple zeroclipboard buttons: (Fabrik Form, Introduction, HTML)
    <script src="zeroclipboard/ZeroClipboard.js" type="text/javascript"></script>
    <table style="width: 100%;" border="0"><tbody><tr><td>
    <div id="d_clip_button" style="border: 1px solid black; padding: 5px; margin: 5px; width: 40%;">Text To Clipboard</div>
    <script type="text/javascript">// <![CDATA[
    ZeroClipboard.setMoviePath( 'http://yourdomain.com/zeroclipboard/ZeroClipboard10.swf' );
    var clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );
    clip.setText( 'Copy me!' );
    clip.glue( 'd_clip_button' );
    // ]]></script>
    </td><td>
    <div id="e_clip_button" style="border: 1px solid black; padding: 5px; margin: 5px; width: 40%;">Output To Clipboard</div>
    <script type="text/javascript">// <![CDATA[
    ZeroClipboard.setMoviePath( 'http://Yourdomain.com/zeroclipboard/ZeroClipboard10.swf' );
    var clip2 = new ZeroClipboard.Client();
    clip2.setHandCursor( true );
    clip2.setText( 'Copy me!' );
    clip2.glue( 'e_clip_button' );
    // ]]></script>
    </td></tr></tbody></table>


    This creates two flash movies ... at the top of your form, which can monitor two different Fabrik fields at the same time.
     

Share This Page