1. Important notice about Cloudbleed - if your site uses the Cloudflare CDN, and you intend to follow the Joomla security team's advice to change your site "secret", you MUST READ THIS NOTICE.
  2. Fabrik 3.6 Released Remember to backup and test your backup before proceeding with this update. Please report any problems you might experience with this new version here on the forum. You are safe to upgrade to Joomla! 3.7 and PHP 7.x with this version of Fabrik. View the blog for more details on this release.

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.
     
    jmoises likes this.

Share This Page