Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Flip card component
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.
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.