Thursday, July 22, 2010

Dojox Fish Eye Lite in XPages - Link Zoomer

A links that you see on the page would get zoomed in and out as u mouse over and mouse out on the same.
This is done with the help of Dojox Fish Eye Lite

<title>Fish Eye Light Anchor tag Example</title>
 
  Step1: Enclose the following style imports to a style tag on the xpage
    @import "../dijit/themes/soria/soria.css";
    @import "/resources/dojo.css";

Step 2: Add the following script tag to the XPage to specify the inclusion of dojo.js and djConfig parameters
  <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script>

Step 3: Now add the following script to your page
      dojo.require("dojox.widget.FisheyeLite");
       dojo.addOnLoad(function(){
        dojo.query("a", dojo.byId("myParagraph")).forEach(function(n){
          new dojox.widget.FisheyeLite({
            properties:{
              fontSize:1.50,
              letterSpacing:2.00
            }
        },n);
        }).connect("onclick",dojo,"stopEvent");
      });
 
Step 4: Add a custom link to your page, preview and mouse over them... The links will have
zoom in/zoom out effect as you mouse in and mouse out on them

2 comments:

  1. hello, I just discovered your blog. Will add it to my feed reader. I hope you may write many more blog posts on XPages, Dojo, Domino...

    ReplyDelete
  2. Happy to hear from you and Yep I will be writing more :)

    ReplyDelete