Facebook Style Navigation

[Kapow36]

Hmmm, I am just not having any success at finding material on how to style panels (e.g. padding, width, headers) Does anyone know of any good resources?

[maxkatz]

Try jquerymobile.com or any CSS resources online.

[Kapow36]

Right, I've been there a lot, but whenever I set the attributes of the panel

"padding":"0px"

it does absolutely nothing

or... if i do

panel.css({"padding":"0px"});

that also does nothing

also, the javascript syntax does gives an error
panel.style.padding = "0px";

[Kateryna Grynko]

Hi,

https://developer.mozilla.org/en-US/d...
But this is outside the scope of our support and would require HTML&CSS knowledge.

[IamTunapo]

Hello Katya please i emailed you at a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a please i would really appreciate if i could get a sample code on how you did this please.

[Kateryna Grynko]

Hello,

We'll write a sample code that creates a panel without missing handlers.

[Kateryna Grynko]

Hi,

Here is the link with a function. Add the code as a JavaScript asset.

How to use

We propose you to place the Grid component on the page and leave there an only cell. Grid is a container for the menu. Next you need to place in the single cell all the right buttons and menus, you can simply add actions to them. Besides, the mapping continues working with such menu!

Then, on Page Show event add Run JavaScript action with the following code:
code if ( window.awesomeMenu == undefined) { // we need init panel only ONCE for screen
window.awesomeMenu = SlideMenu( Appery("mobilegrid_80"), Appery("mobilecontainer1") );
}/codewhere mobilegrid_80 is the grid with one cell. Also it's important to pass page container (mobilecontainer1).

That is, the first parameter describes the menu container, the second is needed to determine page container.

The function takes three parameters:

• side of the menu is displayed (by default, on the left) - the string "left" or "right";

• type of appearance;

• Theme Swatch.

  Read more here.

  Your menu is ready to call. You can add button to a header and add the following JavaScript on Click event:
  codewindow.awesomeMenu.panel("open");/code

  This is a temporary solution so test this carefully please.

[Rutger van Dijk5994263]

Today I had the same problem. What helped for me:

.leftPanel {
margin: 0px;
width: 100%;
}

.ui-panel-display-reveal {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

leftPanel is the name of the div

[RicardoP]

Katya, I can get the collapsible panel to work fine, but the events mappings are not working. I do lose all the events once the panel are detached. Any ideas on what might be going wrong?
Do you have a working sample with the above code that you coud share?

Thanks in advance,

a href="mailto:rperdiga@progress.com" rel="nofollow"rperdiga@progress.com/a

[Kateryna Grynko]

Hi Ricardo,

Are there any errors in console? (F12, Network)
What components do you use for menu?
Could you please attach a screen shot with all events ("Show All" button on Events tab)?