Forum | Appery.io

Thanks Willie. Long tap isn't perfect however, because on some OS-es it will trigger and collide with other events, for example on iOS in browser it is used for selecting/copying page elements.
Max, swiping is definitely a better option. I tried and it works fine. However, the major drawback is that you have provide user with some kind of hint that will encourage him/her to make such swipe... Therefore you still need an extra element to achieve this. Also if you would like to use swiping for navigating between pages it is not a good option.

Anyway, I agree with Fred that extending Appery components list with sliding panel is an excellent move! I will certainly seek for a best way of embedding it into my app. Any help from Appery in doing so, greatly appreciated

I did try something else put a label in the header set the margins for one side or other and set fonts to min size then for text is did panel with a tap event

There is usually a small icon in the top left corner. Sometimes there are three horizontal lines to indicate that there is a menu. Have you tried doing something like that?

Max,
As you suggest, small icon in the top left corner is ideal - the three horizontal lines is what I would like. However, there is no way, that I can find to put an icon in the header (I'm new to Appery so maybe don't know where to look). Is there a way?

Willie's solution would be one way, but not too ideal, if you also want a title in the header. And to have a header with nothing but the in it doesn't look real good.

If there is no header, then a button at the top corner could work, also.

I'm repeating myself, from above, but I do think a tab like is in the Visual Builder is ideal.

Please take look here, quite nice one:
http://www.building58.com/examples/ta...
I am thinking of using only part of this solution just to have this tab for clicking on the right or on the left site, to launch sliding panel.

And here less nice, but also working:
http://www.jqueryscript.net/animation...

Yes, that is the most common way of luring people into clicking something on the page , perhaps the best one, unfortunately the header in my app is "stuffed" with content and there is no way I can put anything else in here.

I didn't realize I could drag components to the header. While I still like the tab option on the panel, I now see how I can put that small icon there - with an image. (Still learning Appery!)

To Fred and anyone willing to have panel experience a bit improved with this handles helping to open sliding panels:

Please take look at this screen:

You can see two handles on the screen (you can of course use only one option).
Once you click on the handle, it hides and the panel is being show. Once you close the panel, the handle comes back.
Good news is that with a bit of effort you can create as many handles as you wish .

Now, to get this effect please follow this steps:

STEP 1)

On your page create two Appery HTML components. First one for left handle and the second one for right handle. Name them as you like. Then select component type to HTML and click 'Edit HTML'. Use this as HTML source for left handle component:

////
// ClickMe//
////

and this in case of right handle component:

"
ClickMe
"

Now we need a small trick, to make this handles' position fixed (not scrolling with the rest of page content). Drag them to page header (if not visible then enable it on page settings) Please remember to set the height property of HTML components to 0px, otherwise they will break header styling. Perhaps there is better way of fixing handles but I haven't found it (despite trying very hard...).

STEP 2)

Create JS asset containing this simpe code:

function togglePanelHandle(handleID, position){
// This function hides and unhides panel handle
document.querySelector(handleID + '-' + position).classList.toggle('handle-visible-' + position);
document.querySelector(handleID + '-' + position).classList.toggle('handle-hidden-' + position);
}

STEP 3)

We need something to hide handles when we open our panel. So please click on the left handle component created in the STEP 1 and add this JS to CLICK event:

togglePanelHandle('#PanelHandle', 'left');

do the same for right handle but use this JS:

togglePanelHandle('#PanelHandle', 'right');

Now we need something to open our panel. To do this click on left HTML component created in the STEP 1 and add 'Open panel' on click event (select the panel you wish to open from the drop-down list). For me the best option is to use left handle to open right-positioned panel and right handle to open left-positioned panel because they are animated simultaneously.

STEP 4)

Create CSS asset in Appery containing this:

/* This is styling for left and right panel handle */

/* General styling */

.handle {
width: 22px;
height: 65px;
position: absolute;
top: 200px;
background: #07a4cf;
opacity:0.6;
border: 1px solid #07a4cf;
overflow:hidden !important;
}

.handle-label {
width: 20px;
height: 63px;
position: absolute;
text-shadow: none;
color:#ffffff;
}

/* Left handle styling */

.handle-left {
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}

.handle-label-left {
top: 20px;
left: 22px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
writing-mode: lr-bt;
}

.handle-visible-left {
transition: 0.4s;
left: 0px;
}

.handle-hidden-left {
transition: 0.4s;
left:-25px;
}

/* Right handle styling */

.handle-right {
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}

.handle-label-right {
top: -18px;
right: 22px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
writing-mode: lr-tb;
}

.handle-visible-right {
transition: 0.4s;
right: 0px;
}

.handle-hidden-right {
transition: 0.4s;
right:-25px;
}

STEP 5)

In this step we need something that will show our handle again when the panel is closed. This is actually pretty simple. Just add this JS:

togglePanelHandle('#PanelHandle', 'left');

to 'Close panel' event in your Panel component. Remember to use this:

togglePanelHandle('#PanelHandle', 'right');

if your panel is on the left side.

My final remark: this solution was tested in Appery web tester and on iOS iPhone. You might need some extra tweaking on other platforms, especially in terms of vendor prefixes.
Also, I am pretty sure that some part of this solution can be improved. Feel free to do so.

Appery, you might want to add this functionality as an option in further releases, but it is just my opinion.

Adam - Totally awesome. Thank you for your work and for sharing it. Much appreciated!

Due to HTML stripping you need to rewrite manualy the HTML provided in STEP 1