introduction | about | demonstration | download | support | contact
browser.bubbles | multiple popup windows inside your webpage | copyright © 2014
what are browser bubbles?

do you want to "display stuff" in your webpage?

perhaps you could use one of these ...

hi, i'm a browser bubble

to the untrained eye it looks just like a little popup window that lives inside your web browser.

it can be opened and closed, moved around, resized, maximised, minimised, all the things a good popup window should be able to do.

it can contain plain text, fancy text, pictures, video, PDF documents - pretty much anything that can be displayed in a webpage.

but then things start to get interesting.

next page

browser.bubbles logo introduction

so you want to know everything about browser.bubbles?

well ... this windows-looking popup IS a browser.bubble.

we should probably start by introducing you to the anatomy of a browser.bubble. here's a simple overview of how they work.

with introductions out of the way, lets get down to the details ...

browser.bubbles logo what are they?

browser.bubbles are a new web user interface for displaying website content in a users web browser.

virtually any web content can be displayed in multiple stylish "windows looking" popup DIV's, complete with curves, shadows, textures, transparency effects, and customization.

based purely in JavaScript, CSS and basic HTML, a single web page can display as many browser.bubble popups as you want. they can be resized, minimized, maximized, and moved around the web page. each popup can be easily accessed via a task-bar within the web page.

browser.bubbles logo what can they do?

browser.bubbles logo why do i want them?

looking good and providing lots of functionality is great, but there are even more advantages to using browser.bubbles.

so stop reading and have a play ... and then go and download browser.bubbles to use in your own website

browser.bubbles logo browser.bubbles in action

this whole website is a demonstration of browser.bubbles in action. below are just a few simple ways in which browser.bubbles can be used:

1. youtube video in a browser.bubble :

2. images in a browser.bubble :

3. PDF documents in a browser.bubble :

4. external URL/websites in a browser.bubble :

5. google maps in a browser.bubble :

6. flash and shockwave in a browser.bubble :

7. customised/branded browser.bubbles :

8. clickable banner advertising :

want to know more about browser.bubbles? don't be shy, we want to share. for some more indepth information on browser.bubbles, take a look at our details page.

already seen enough and you want to start making your own browser.bubbles website? you'll need to download the latest version first.

browser.bubbles logo customised bubbles

this is a customised bubble (check out the textures baby)!

you can change the fonts, colours, backgrounds. if it can go in a CSS style sheet, then you can use it ... be creative.

in this bubble, we have set the background for the bubble content to have a texture (a different texture for when the bubble is active and inactive), as well as changing the bubble frosting texture too (that's the texture in the title bar and status bar).

we then changed the default font to "Courier New", and made it gray instead of black, as well as changing the font and font size in the title bar. oh, and we've also changed the font for the "action buttons", and made their highlight color a lovely sunny yellow. awwww!

these are just some of the things you can change. check out the web developer user manual for a complete list.

this is the contents of a browser.bubble bubblebox.
  1. do this;
  2. do that;
  3. do something else;
try playing with the different formatting options and then see how easy it is to access the content as either text, rich text, or as HTML by using the copy buttons below.

this bubble contains a simple flat (non-clickable) advert in the status bar (at the bottom of this bubble).

its job is to look pretty and get noticed. perhaps display some information or a reminder for something.

this bubble contains a simple clickable advert in the status bar.

you just have to click on the advert to be whisked away to a lovely webpage somewhere on the internet.

this bubble also contains a simple clickable advert in the status bar.

this time the advert will open another lovely bubble when you click on it.

you have successfully clicked on the demo advert and opened up a webpage in a new browser window.

well done!

you can close this browser window now if you like.

you have successfully clicked on the demo advert and opened up a lovely new bubble.

well done!

browser.bubbles logo download browser.bubbles to use in your own website

to use browser.bubbles in your own website, simply follow the following steps:

note:if your web hosting environment does not allow you to upload files to your website, skip to step 3.
step 1download the browser.bubbles code :

browser.bubbles v1.02 (zip) release date 12-Aug-2014
step 2add the browser.bubbles files to your website :

open the downloaded zip file and extract/upload the files to a folder in your website (ie, \bubbles\).

note:you can remove the "bubblebox" sub-folder if you are not using the "bubblebox" rich text editing features.
step 3add the browser.bubbles script to your webpage :

copy the following line into the <HEAD> element of your webpage (adjust the src attribute accordingly if using a differnt sub-folder or website URL):

src can be a full URL or a relative URL, and can be located on a completely separate website from your webpage if required.

if your web hosting environment does not allow you to upload files to your website, set the src attribute to use the browser.bubbles website directly:

note:browser.bubbles makes no guarantee about server and script availability.
when your page is viewed, browser.bubbles will load automatically. if everything loads successfully, you should be able to see the browser.bubbles taskbar in your page:


you are now ready to start adding content to some bubbles :)

browser.bubbles logo support for developers

need a bit of help?

if you are a web developer wanting to use browser.bubbles in your website, then hopefully these pages will provide you with all the information you need.

what do you need help with?

if you can't find what you are looking for, contact us.

browser.bubbles logo how to contact browser.bubbles

please feel free to contact us at browser.bubbles for any reason using the following:

      email :

if you are experiencing technical "issues" of any kind, please be sure to include some techno-babble about the web browser the issue is occuring in and which operating system you are using.

please note that we are located in the United Kingdom and are unable to respond outside of local office hours.