ForceTree.com

A Tip a day

8:36 AM

Animation / Text Effects in a Visualforce Page

11:35 PM

It may be required sometimes that you add some animation effects to messages displayed in your homepage or elsewhere, particularly when you want to catch the attention of a user.

I browsed through the forums and with some advice from people was introduced to Jquery. Jquery is an advanced form of javascript. It is a opensource plugin consisting of some complex javascript functions which can be easily adapted to any webpage.

Even though i used Jquery, i still do not understand how it works nor its technical details. So, using Jquery doesn't require that you learn it completely.

In this article i will be telling you how to use a Jquery plugin in your visualforce page, and thereby bring in animation effects into your visualforce page.

You can view/download the Jquery plugin from here.. Click here

You can view a demo of the Jquery plugin inside a Visualforce Page here .. Click here

Step 1:

Download the Jquery plugin and Unzip it. You will find several folders. You will need to upload some files into Static Resources inorder to use the plugin into our Visualforce Pages.

Step 2:

Create the following static resources:

Name refers to the name to be given to your Static Resource. Path refers to the path in the folder that you get after unzipping the Jquery plugin downloaded from http://jqueryui.com/demos/effect/

Name : TickerEffects_JqueryJS Path: Jquery Effects\development-bundle\jquery-1.4.2.js

Name: TickerEffects_Core Path: Jquery Effects\development-bundle\ui\jquery.effects.core.js

Name: TickerEffects_Pulsate Path: Jquery Effects\development-bundle\ui\jquery.effects.pulsate.js

Name: explode Path: Jquery Effects\development-bundle\ui\jquery.effects.explode.js

Name: highlight Path: Jquery Effects\development-bundle\ui\jquery.effects.highlight.js

Name: shake Path: Jquery Effects\development-bundle\ui\jquery.effects.shake.js

Name: democss Path: Jquery Effects\development-bundle\demos\demos.css

Step 3:

Create the following Visualforce Page.

<apex:page showHeader="false">
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Effects - Effect demo</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" ></link>
    <script src="{!URLFOR($Resource.TickerEffects_JqueryJS)}"></script>
    <script src="{!URLFOR($Resource.TickerEffects_Core)}"></script>

    <script src="{!URLFOR($Resource.explode)}"></script>

    <script src="{!URLFOR($Resource.highlight)}"></script>
    <script src="{!URLFOR($Resource.TickerEffects_Pulsate)}"></script>

    <script src="{!URLFOR($Resource.shake)}"></script>

    <link rel="stylesheet" href="{!URLFOR($Resource.democss)}"  />
    <style>
        .toggler { width: 500px; height: 200px; position: relative; }
        #button { padding: .5em 1em; text-decoration: none; }
        #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
        #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
        .ui-effects-transfer { border: 2px dotted gray; } 
    </style>
    <script>
    $(function() {
        // run the currently selected effect
        function runEffect() {
            // get effect type from 
            var selectedEffect = $( "#effectTypes" ).val();
            
            // most effect types need no options passed by default
            var options = {};
            // some effects have required parameters
            if ( selectedEffect === "scale" ) {
                options = { percent: 0 };
            } else if ( selectedEffect === "transfer" ) {
                options = { to: "#button", className: "ui-effects-transfer" };
            } else if ( selectedEffect === "size" ) {
                options = { to: { width: 200, height: 60 } };
            }

            // run the effect
            $( "#effect" ).effect( selectedEffect, options, 500, runEffect);
        };

        // callback function to bring a hidden box back
        function callback() {
            setTimeout(function() {
                $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
            }, 1000 );
        };

        // set effect from select menu value
        $( "#button" ).click(function() {
            runEffect();
            return false;
        });
    });
    </script>
</head>
<body background="{!URLFOR($Resource.BGImage1)}" style="font-family:Verdana;font-size:8pt;">

<div class="demo">

<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
        
        <p>
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
    </div>
</div>

<select name="effects" id="effectTypes">

    <option value="explode">Explode</option>

    <option value="highlight">Highlight</option>

    <option value="pulsate">Pulsate</option>

    <option value="shake">Shake</option>


</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Select a effect from the drop down.</p>
</div><!-- End demo-description -->

</body>
</html>

</apex:page>

See for yourself the results!!

Chatter Rollout Guide

2:27 AM

A Tip a day

Animation / Text Effects in a Visualforce Page

Chatter Rollout Guide

Pages

Search This Blog

Blog Archive

Subscribe

Like Us on FB