CSS: Sliding panels

Questions and answers for designing and implementing forms in Servoy

CSS: Sliding panels

Postby maria.kyselova » Thu Dec 13, 2012 12:00 am

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
Attachments
testTransition.servoy
(4.32 KiB) Downloaded 312 times
Cheers,
Maria
maria.kyselova
 
Posts: 172
Joined: Thu Aug 09, 2012 12:56 am

Re: CSS: Sliding panels

Postby mboegem » Thu Dec 13, 2012 12:25 am

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.
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: CSS: Sliding panels

Postby maria.kyselova » Sat Dec 15, 2012 3:38 pm

mboegem wrote: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
Cheers,
Maria
maria.kyselova
 
Posts: 172
Joined: Thu Aug 09, 2012 12:56 am

Re: CSS: Sliding panels

Postby maria.kyselova » Mon Dec 17, 2012 3:18 am

mboegem wrote: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:

Code: Select all
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
Attachments
testTransition.servoy
(4.55 KiB) Downloaded 314 times
Cheers,
Maria
maria.kyselova
 
Posts: 172
Joined: Thu Aug 09, 2012 12:56 am

Re: CSS: Sliding panels

Postby ptalbot » Mon Dec 17, 2012 3:43 am

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.
Patrick Talbot
Freelance - Open Source - Servoy Valued Professional
https://www.servoyforge.net
Velocity rules! If you don't use it, you don't know what you're missing!
User avatar
ptalbot
 
Posts: 1654
Joined: Wed Mar 11, 2009 5:13 am
Location: Montreal, QC

Re: CSS: Sliding panels

Postby maria.kyselova » Mon Dec 17, 2012 4:18 am

ptalbot wrote: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
Cheers,
Maria
maria.kyselova
 
Posts: 172
Joined: Thu Aug 09, 2012 12:56 am

Re: CSS: Sliding panels

Postby ptalbot » Mon Dec 17, 2012 5:26 am

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.
Patrick Talbot
Freelance - Open Source - Servoy Valued Professional
https://www.servoyforge.net
Velocity rules! If you don't use it, you don't know what you're missing!
User avatar
ptalbot
 
Posts: 1654
Joined: Wed Mar 11, 2009 5:13 am
Location: Montreal, QC

Re: CSS: Sliding panels

Postby maria.kyselova » Mon Dec 17, 2012 7:45 am

ptalbot wrote: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
Cheers,
Maria
maria.kyselova
 
Posts: 172
Joined: Thu Aug 09, 2012 12:56 am


Return to Forms

Who is online

Users browsing this forum: No registered users and 2 guests