I am looking to implement a panel that slides out from the side of almost any page in an app. This panel has an embed code for soundcloud in it. The audio needs to continue even if the page is changed.
I am guessing this means I would need to make a javascript function that would create a jquery panel and the functions to open and close the panel. I do not understand exactly how to do this though through Appery.
Could someone help me with this please?
Thanks,
Eric
Hi Eric,
To get panel with one implementation within the app you need to use page templates. Details: http://devcenter.appery.io/documentat...
To get your audio works regardless active page you can use the solution described here: https://getsatisfaction.com/apperyio/...
Regards.
The is the problem though. Soundcloud does not like to stream mp3 files. They want you to use their embedded player. That is why I am looking to do a jQuery panel outside of appery.
I was trying to use this as a reference: https://getsatisfaction.com/apperyio/...
I could not get it working though.
Any ideas on how to get a panel working on different pages that will not interrupt the audio?
Thanks,
Eric
HI Eric,
Okay, here is a solution for your goal you want to achieve:
Add "page load" event handler.
Populate it with following JS code:
Details: http://prntscr.com/5ptxbw/direct
pre
var panelHTML = '';
var panelElement = jQuery(panelHTML);
jQuery("body").append(panelElement);
$( "#mypanel" ).panel();
/pre
Then you can open this panel with following JS code:
pre
$( "#mypanel" ).panel( "open");
/pre
Also you can close it following JS code if need:
pre
$( "#mypanel" ).panel( "close");
/pre
This panel will be available across of Appery.io JQM pages.
Regards.
Thanks Yurii! This worked. I am glad you added the screenshot because it contained a part of the code that was left out in your answer above (I am guessing because of getsatisfaction). The div portion in panelHTML was left out.
Hi Eric,
Yes you are right, GS eat part of my code.
Here is correct first portion of code(for other users):
precode
var panelHTML = '<div data-role="panel" id="mypanel"><>';
var panelElement = jQuery(panelHTML);
jQuery("body").append(panelElement);
$( "#mypanel" ).panel();
/code/pre
Regards.