CSS: Sliding panels

Classic Servoy
1

Hi All,

I attach a small sample solution for webclient that has a nice sliding panel that slides out when you hover over ‘Subscribe’ label and slides back in when you remove your mouse.

Clearly it doesn’t work in smart client. But is it possible to implement something like that in smart client?

Cheers,
Maria

testTransition.servoy (4.32 KB)

2

you could try to use the rolloverimage, but I don’t think this is exactly the same behaviour.

Otherwise use the browsersuite and you’ll be able to use advanced html in smart-client.

3

mboegem:
you could try to use the rolloverimage, but I don’t think this is exactly the same behaviour.

Otherwise use the browsersuite and you’ll be able to use advanced html in smart-client.

Haha, I’ve just downloaded it and was trying out samples :)
Hope it works out for what I want!

Cheers,
Maria

4

mboegem:
you could try to use the rolloverimage, but I don’t think this is exactly the same behaviour.

Otherwise use the browsersuite and you’ll be able to use advanced html in smart-client.

Hi Marc,

I am using the ServoyBrowser bean from the BrowserSuite now and the sliding kind of happens but I still can’t figure out how to smooth it.

In fact, I just tried to use the original link from the internet with the effect I’m aiming for and the smooth sliding doesn’t happen even then.
Is it because of the limited UI capabilities in Servoy or something can still be done about it?

Here’s the code for the dataprovider variable for the bean and the updated sample solution is attached:

var slideout = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\
	 <html xmlns="http://www.w3.org/1999/xhtml">\
	 <head>\
	 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />\
	 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />\
	 <style>\
	 body{\
	    color: #484848;\
	    background-color: #f7f7f7;\
	}\
	.clear {\
	    clear: both;\
	}\
	h1{\
	    font-size: 58px;\
	    margin-bottom: 25px;\
	    height: 68px;\
	}\
	h3{\
	    font-size: 22px;\
	    margin-bottom: 25px;\
	}\
	p{\
	    text-align: left;\
	    margin-bottom: 20px;\
	}\
	#slide-out {\
		-moz-transition: all 1s ease-in-out;\
		-webkit-transition: all 1s ease-in-out;\
		-o-transition: all 1s ease-in-out;\
		transition: all 1s ease-in-out;\
		background-color: #686868;\
		height: 73px;\
		color: #fff;\
		position: relative ;\
		padding-top: 25px;\
		margin-top: -98px;\
	}\
	#slide-out:hover{\
		margin-top: 0px;\
	}\
	#subscribe{\
		line-height: 0px;\
	}\
	.page-wrap {\
	    position: relative;\
	    margin-right: auto;\
	    margin-left: auto;\
	    width: 635px;\
	}\
	#main-container{\
	    border-top:thick solid #484848;\
	    padding-top: 60px;\
	    text-align: center;\
	}\
	.button{\
		bottom:-63px;\
	    color:#000000;\
	    display:block;\
	    font-size:18px;\
	    height:28px;\
	    padding-top:5px;\
	    position:absolute ;\
	    right:0;\
	    text-align:center;\
	    text-decoration:none;\
	    width:105px;\
	    z-index:100;\
	    line-height: normal;\
	}\
	#subscribe ul li a{\
	    background-repeat:no-repeat;\
	    display:block;\
	    float:left;\
	    font-size:24px;\
	    height:38px;\
	    margin: 0px 20px;\
	    padding: 10px 0px 0px 55px;\
	    color: #d3d3d3;\
	    text-decoration: none;\
	    line-height: normal;\
	}\
	#subscribe ul li a:hover{\
	    color: #fff;\
	}\
	.fb{\
	    background-image: url("../images/facebook.png");\
	}\
	.twitter{\
	    background-image: url("../images/twitter.png");\
	}\
	</style>\
	 </head>\
	 <body>\
	 <div id="slide-out">\
   <div id="subscribe" class="page-wrap">\
   <ul>\
   <li ><a class="fb" href="#">Facebook</a></li>\
   <li><a class="twitter" href="#">Twitter</a></li>\
   </ul>\
   <div class="clear"></div>\
   <a href="#" class="button">Subscribe!</a>\
   </div>\
   </div>\
   <div id="main-container">\
   <div  class="page-wrap">\
   <h1>CSS3 : The Future is Near!\
   <h3>Hover over the subscribe button to see the cool slide effect created by using CSS3 purely.<small>Best viewed on Chrome and Safari</small>\
   Integer eu nunc in eros lobortis blandit. Suspendisse potenti.\
   Nunc porta tellus nec velit vehicula sodales. Aliquam vel grav\
   </div>\
   </div>\
   </body>\
   </html>\
   ';

Cheers,
Maria

testTransition.servoy (4.55 KB)

5

The answer is in your text: “Best viewed on Chrome and Safari”
The browser suite is using Safari on Mac OS X only. On Linux, it uses Firefox, on Windows it uses IE.
Alternatively (with 32-bit java), you could use XulRunner (which is the engine of Firefox), but Chrome is not available on Windows or Linux in the BrowserSuite.

6

ptalbot:
The answer is in your text: “Best viewed on Chrome and Safari”
The browser suite is using Safari on Mac OS X only. On Linux, it uses Firefox, on Windows it uses IE.
Alternatively (with 32-bit java), you could use XulRunner (which is the engine of Firefox), but Chrome is not available on Windows or Linux in the BrowserSuite.

Hi Patrick,

I am running Servoy Developer with 32-bit java and the Browser Suite properties on the Servoy admin page are untouched which I suppose means that XulRunner should be used.
The ‘forceNative’ property of the bean is false, unchecked.

Anything else you think I might be missing?

Cheers,
Maria

7

In your sample, ‘forceNative’ was set to true. When set to false, with 32-bit Java and ‘browsersuite.useXULRunner’ defaulting to true you are running XULRunner.
But even so, Xulrunner is still not Chrome or Safari, so your transitions are not compatible, sorry.

8

ptalbot:
In your sample, ‘forceNative’ was set to true. When set to false, with 32-bit Java and ‘browsersuite.useXULRunner’ defaulting to true you are running XULRunner.
But even so, Xulrunner is still not Chrome or Safari, so your transitions are not compatible, sorry.

Aw…
So when are you planning to integrate Chrome? :P

Cheers,
Maria