Is there a way to have the music player play even when changing pages etc.?
Unfortunately no, the player is attached to a page. But you can show hide groups instead of changing pages, and then the music can go on.
Thank for that I thought about doing that but theres way to many features on my website to keep track off if it was all on one page.
Will bubble ever support such a feature in the future.
Is it possible to have a repeating group with a list of song e.g: a playlist
and when the user click the song title the player starts that song
Yes, that one you can. just use a group with the player in it and display data in the group.
For music across pages, unfortunately that’s a browser limitation.
could make each page a reusable element and then just have a single page with all the subpages as hidable reusable elements in it. Then the player lives in the main page and you just show/hide the subpages
thing is you can’t use Bubble’s navigation actions then, need to use your own to show/hide pages, but still you can send data to reusables since they do have a Type, so you could pull it off
using reusables (even if you reuse each one once) for the conceptual subpages will help in managing the events (they live in the reusable, not in one big page)
since you only have one page then you also have faster refresh, but may have longer initial time to bring the first page
also you can export to a native app by marking the first page as being for a “native app” (has some option I think on its popup). BTW, regarding that one I’d expect Bubble to be able to also make multi-page apps into native single-page ones by doing this thing other the hood (convert pages to reusables)
1 Like
@ItsJustBusiness mixcloud.com does what you’re looking for. Everything basically happens on one page and two content areas are updated as you navigate through the site, but it does change the URL without actually refreshing the page.
If you make reusable elements or groups you could basically put all of the components from each page into the group and then uncheck the “Element is visible” setting.
Then you’ll get an easy way to toggle the different groups/pages on and off when you want to edit them. If you’re familiar with Photoshop, I liken the concept to layers.
Example:
Here the Nav Menu is visible because I clicked beside it on the Hideable section
Here it is when I unclick on it in the Hideable section
Then through workflow you could hide/unhide the groups based on the menus/buttons that users click on.
I think the only thing left to do would be to figure out how to update the URL without actually changing the page. I know bubble is doing this on their Reference page, so it might be doable.
1 Like
Not that I’m aware of, but I think that’s that’s the type of thing you’re looking to do. Try playing some music and then navigating through some of the menu items. Notice how the music player always stays at the bottom. If you use Google Chrome and inspect the page in a collapsed view you’ll notice that only a few DIVs get updated (you can see this as a highlighted area over the text) as you click through the site. all of the other elements stay the same.
Here’s a screen capture showing what I’m talking about.
if you could have two instances of the same Bubble app maybe in the same HTML page in different IFRAMEs and have them communicate via their (common since its the same Bubble app) database. The one IFRAME (could have 0 size) would host the page of the Bubble app that has the player and the other IFRAME (that would take up the whole screen) would host the normal UI navigation (login etc.)
Not sure if such a strategy would cause any trouble to Bubble with its back navigation actions, if it talks to the browser to do back then it should be fine, if not should try to first load the the player, then the other IFRAME (via some delay with javascript or a meta refresh in the header [load first another page in the main iframe that then goes to the login after some delay])
example to host a Bubble app in an IFRAME (this one if put it an .html file btw makes a file that you can post even via e-mail or give on USB key etc. to someone to open up your Bubble web app as if it was some opaque app [shows the same URL in the browser address bar though which may not be wanted if you want people to be able to bookmark and jump directly to certain URLs in your Bubble app])
<html>
<head>
<title>Class Project Assistant</title>
<link rel="shortcut icon" type="image/ico" href='favicon.ico' />
<style type="text/css">
body
{
margin:0;
padding:0;
overflow-y:hidden;
}
iframe
{
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<iframe src="http://bubble.is/site/cpa">
<a href="http://bubble.is/site/cpa">Class Project Assistant</a>
</iframe>
</body>
</html>