browser.bubbles - multiple HTML popup div windows in your webpage

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.

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

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.

what can they do?

content can include simple text, fancy text, tables, images, pretty much any HTML you can have in a web page today.
bubbles have image content functionality built in, making each bubble an image viewer that can zoom to fit or display actual size, be resized and maintain aspect ratio, and allows image content from local or remote web servers.
multiple PDF documents can be embedded and viewed directly in the popup bubbles (if PDF viewing software is installed).
virtually any external URL/website can be embedded and viewed directly from within the popup bubble.
google maps can be effortlessly displayed, resized and moved around within a popup bubble.
multiple flash and shockwave applications can be embedded and used simultaneously (no overlay problems).
youtube videos or any other video content can be displayed in their own popup bubble.
"rich text" editing easily plugged into any popup bubble, complete with stylish formatting toolbars and color picker.
includes built-in support for dynamic content using AJAX. content can come from any type of web-server environment (classic ASP, .NET, PHP). or content can be static HTML loaded with the page on start-up. no more navigating back and forward. pages load faster because you are no longer reloading the same content on each page.
each popup bubble has built-in functionality to only print or copy the content in that bubble, and to protect content you can decide which bubbles can have their content printed or copied.
each popup bubble lives within the same web page, so you can use scripts to communicate between them.
easily execute scripts when bubble content is loaded.
elegantly handles when your browser is resized.
each popup bubble can be customised or branded with textures, colors, fonts, or other special effects.
space provided in each bubble for clickable banner advertising.
best of all, you can have all of the above and more, all at the same time. it's like running Windows in your web page. they can be the website itself, or they can operate as a layer over the top of your website. it's fast, it's smooth, it's reliable, and it works identically in all the major browsers (even IE6), on Windows, Mac, and Linux.

why do i want them?

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

websites are faster as you don't have to keep going back and forth between pages, reloading the same webpage content everytime.
there's less load on your websevers as they are serving less files back to the browser, and there's less to download for your users.
faster development time for developers as you only need to worry about the content, and not about the website infrastruture.
website users get a more efficient and faster experience, especially when the viewing or comparing of multiple pages is required.
based on an all modern operating systems, it's an easy to use interface that all users will be familiar with.

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

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 :

a demonstration video;
tube.bubbles for YouTube;

2. images in a browser.bubble :

an image;
another image;
yet another image;

3. PDF documents in a browser.bubble :

a PDF document;
another PDF dcoument;

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

the w3.org website;

5. google maps in a browser.bubble :

browser.bubbles was born here;

6. flash and shockwave in a browser.bubble :

a flash thingy (dangerous dave);
another flash thingy (optus tennis challenge);
and finally (animator vs. animation);

7. customised/branded browser.bubbles :

adding textures;

8. clickable banner advertising :

a simple flat advert in a bubble;
a clickable advert that opens a webpage;
a clickable advert that opens a bubble;

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.

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.

do this;
do that;
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!

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.

	download the browser.bubbles code :
	browser.bubbles v1.02 (zip) release date 12-Aug-2014

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

add 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):

<script id="browserbubblesJS" src="bubbles/browserbubbles.js" type="text/javascript"></script>

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:

<script id="browserbubblesJS" src="http://browserbubbles.npt747.com/bubbles/browserbubbles.js" type="text/javascript"></script>

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 :)

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?

i want to add browser.bubbles to my webpage;
i want to learn how to make a browser.bubbles webpage;
i want to use the bubble creation wizard;

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

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.