Dev Stack Source

Answer : The display doesn't work with CSS transition or animation. Use opacity , visibility or z-index . You can combine all them. Try to use visibility: visible in place display: block and visibility: hidden in place display: none . And finally, combine z-index: -1 and z-index: 100 for example. Good work ;) If you are using @keyframes you should use -webkit-animation instead of -webkit-transition . Here is the doc for @keyframes animation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations. See code snippet below: .parent { background-color: #000; color: #fff; width: 500px; height: 500px; padding: 5px; } .myDiv { display: none; opacity: 0; padding: 5px; color: #600; background-color: #cec; } .parent:hover .myDiv { display: block; opacity: 1; /* "both" tells the browser to use the above opacity at the end of the animation (best practice) */ -webkit-animation: display-none-transition 1s both; animation:...

Answer : Don't use setGridLinesVisible(true) : the documentation explicitly states this is for debug only. Instead, place a pane in all the grid cells (even the empty ones), and style the pane so you see the borders. (This gives you the opportunity to control the borders very carefully, so you can avoid double borders, etc.) Then add the content to each pane. You can also register the mouse listeners with the pane, which means you don't have to do the ugly math to figure out which cell was clicked. The recommended way to apply a border to any region is to use CSS and a "nested background" approach. In this approach, you draw two (or more) background fills on the region, with different insets, giving the appearance of a border. So for example: -fx-background-fill: black, white ; -fx-background-insets: 0, 1 ; will first draw a black background with no insets, and then over that will draw a white background with insets of 1 pixel on all sides, giving the appea...

Answer : You can use the libgif library. It allows you to start/stop the gif and control which frame the gif is on. <script type="text/javascript" src="./libgif.js"></script> <img src="./example1_preview.gif" rel:animated_src="./example1.gif" width="360" height="360" rel:auto_play="1" rel:rubbable="1" /> <script type="text/javascript"> $$('img').each(function (img_tag) { if (/.*\.gif/.test(img_tag.src)) { var rub = new SuperGif({ gif: img_tag } ); rub.load(function(){ console.log('oh hey, now the gif is loaded'); }); } }); </script> (most of the code is taken directly from their example) I use x-gif it's pretty cool and easy to setup. From Github: <x-gif src="probably_cats.gif"></x-gif> Where you can add the following as attributes...