Facebook Style Navigation

[Sat Mandir Khalsa]

Any ideas about the best way to do facebook styles navigation with a slide out (swipe) nav bar on the side? See attached image

In the interest of performance, I don't think it should require a page change.

[Maryna Brodina]

Hello! This should help http://stackoverflow.com/questions/86...

[andi]

Hi did you get such a Navigation running?
Maybe you can show some code or example

[Kateryna Grynko]

Hi Andreas,

1) Add div component (Panel, List etc.), you can set Class Name.

2) Define special class, for example "side_panel"

3) On page Load run the following JavaScript:codevar panel = $(".side_panel").detach();
panel.attr({
"data-role":"panel",
"data-position": "left",
"data-display": "push",
"data-theme": "a",
"id": "myCoolestNavPanel"
});
panel.prependTo('div[data-role="page"]');
panel.parent().trigger( "create" )/code
4) Add Button component with the following code:code$(".side_panel").panel("open");/code

[doubletake]

Hi Katya,
This looks like a good workaround to leverage JQM Panel. I tried this code, but the div component is visible at top when the page loads, instead of being hidden until opened. Any ideas?

Thanks,
Don

[doubletake]

It appears to be an issue with Chrome. This code seems to work ok in Safari. What would cause it not to work in Chrome?

[Maryna Brodina]

Hello! Sorry, but it's outside the scope of our support.

[doubletake]

nevermind about Chrome. It is a refresh problem when running Test in appery.io . The first time the page opens, the panel content is visible and the open call doesn't work. Says the panel was not initialized.

However, if I refresh the page
http://appery.io/app/view/161c3142-b6...
the panel works fine.

I'll try using page show instead of load.

[doubletake]

Understand. I cannot get your exact sample code to work, as written. That is all I'm questioning. I'm not asking for additional support other than explaining why this code doesn't work.

Guess this is not a valid workaround for appery.io not supporting JQM Panel component yet. Unfortunately, I don't have the luxury of waiting until fall to get it.

Don

[Kateryna Grynko]

Hi Don,

As I can see in code generation, you use:
codepanel.prependTo('#j_63');/code
This piece of code doesn't work as ours one:
codepanel.prependTo('div[data-role="page"]');/code

You can also search here:
http://jquerymobile.com/demos/1.3.0/d...