Flip card component

Vaadin 6 / 7 / 8 Framework UI
1

I want to creat a component with Flip card effect (similar to http://amilasilva88.blogspot.com/view/flipcard). I currently am using customlayout to create the html format and rotate3di.js (http://www.zachstronaut.com/projects/rotate3di/) for the flip effect. The jquery is loaded but I can’t make it flip. It flips just fine when I run the jquery in Firebug’s console.

This is my writeAjaxPageHtmlVaadinScripts

protected void writeAjaxPageHtmlVaadinScripts(Window window, String themeName, Application application, BufferedWriter page, String appUrl, String themeUri, String appId, HttpServletRequest request) throws ServletException, IOException {
        super.writeAjaxPageHtmlVaadinScripts(window, themeName, application, page, appUrl, themeUri, appId, request);
        page.write("<script type=\"text/javascript\">\n");
        page.write("//<![CDATA[\n");
        page.write("document.write(\"<script type='text/javascript' src='Flip/VAADIN/themes/jquery.js'><\\/script>\");\n");
        page.write("document.write(\"<script type='text/javascript' src='Flip/VAADIN/themes/base.js'><\\/script>\");\n");
        page.write("document.write(\"<script type='text/javascript' src='Flip/VAADIN/themes/rotate3di.js'><\\/script>\");\n");
        page.write("document.write(\"<script type='text/javascript' src='Flip/VAADIN/themes/d.js'><\\/script>\");\n");
        page.write("//]]>\n</script>\n");
    }

d.js jquery:

$(document).ready(function () {
    $('#nav-list-example div div.back').hide().css('left', 0);
    
    function mySideChange(front) {
        if (front) {
            $(this).parent().find('div.front').show();
            $(this).parent().find('div.back').hide();
            
        } else {
            $(this).parent().find('div.front').hide();
            $(this).parent().find('div.back').show();
        }
    }
    
    $('#nav-list-example div').hover(
        function () {
            $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
        },
        function () {
            $(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
        }
    );
});

CustomLayout’s layout template:

<div id="nav-list-example" style="height: 132px; width: 624px; margin: 48px 0;">
    <div style="width: 132px;height: 132px;float: left;margin-right: 24px;position: relative;">
        <div class="front" style="width: 132px;height: 132px;overflow: hidden;background: white;position: absolute;top: 0;left: 0;" location="front"></div>
        <div class="back" style="width: 132px;height: 132px;overflow: hidden;background: white;position: absolute;top: 0;left: 0;" location="back"></div>
    </div>    
</div>

And the code to create the component:

Panel p = new Panel();
        p.setSizeUndefined();
        addComponent(p);
        
        CustomLayout customLayout = new CustomLayout("flip");
        p.setContent(customLayout);
        
        Label e = new Label("This is the front.");
        customLayout.addComponent(e, "front");
        Label l = new Label("This is the back");
        customLayout.addComponent(l, "back");

I have tried for 2 days but to no avail. I would really appreciate your helps.
Thank you in advance.

2

Most likely what happens is that you try to add the event listeners before component elements are in the DOM. Although the document has been loaded, Vaadin components are only received with the next server round-trip (UIDL).

See e.g.
this thread
.