Forum | Appery.io

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,

1. To get panel with one implementation within the app you need to use page templates. Details: http://devcenter.appery.io/documentat...

2. 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:

1. Add "page load" event handler.

2. 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

3. Then you can open this panel with following JS code:

   pre

   $( "#mypanel" ).panel( "open");

   /pre

4. 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")&#46;append(panelElement);
$( "#mypanel" )&#46;panel();

/code/pre

Regards.