The Blog of TokyoRepublik.com

I recently recieved a request from a new client who said he wanted to use bubble popups on his site. A couple of examples can be seen on Panic’s Coda site (roll over the “download” button) and on Media Temple’s home page.

The basics of this trick have been covered fairly extensively on the jQuery for designers site. However, I wanted to create multiple instances of the popup for my client. Here’s an example of what we’ll be creating.

First up, we need to download the jQuery javaScript Library. As the jQuery guys say on their site, “jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.”

Next, you’ll need the javaScript page to make the bubble popups work. You can get your hands on that here. Copy and paste in to a javaScript fille named  bubblePopup.js

I put both of my javaScript files in a folder called js.

Let’s get started with the HTML. Obviously, we need to include the jQuery library on our page. Put the following code in your header section:

<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/bubblePopup.js” type=”text/javascript”></script>

Of course, you’ll need to make sure you’re linking to the correct place!

While we’re at it, create a new CSS file (in this example, it’s named popupStyle.css) and attach it to your HTML page.

<link href=”popupStyle.css” rel=”stylesheet” type=”text/css” />

I’ll give you the code I used on my examlpe page. This will allow you to get started quickly and easily. Then you can play around with the files as much as you want. Copy and paste the following code in to the body section of your page.

<div class=”bubbleInfo”>

<a class=”buttonArea” href=”#”>
<h1>Area 1</h1>
<p>This is the first area where we would like our popup to appear. Roll over to see the pop up.</p>
</a>
<div class=”popup”>
<p>In the pop up we can write regular text giving extra information to save save space. We can also write HTML. <a href=”http://www.google.com” target=”_blank”>Here is a link</a>, for example.</p>
</div>
</div>

You can paste this HTML as many times as you like, depending on how many popup bubbles you want.

Next, you’ll need the CSS. It’s pretty long so, for the sake of saving space, I’ve put it all in a file which you can see here. Copy and paste the CSS in to your CSS file.

Again, for the sake of ease, you can download the two images (one for the rollover button background and one for the popup itself) I used on the example here (button background) and here (popup).

Save both your HTML file as well as your CSS file and give it test.

That’s it! You’re done! Finito!

Play around with it and let me know how you get on. If you have any comments, questions or opinions, leave me a message below.

Thanks for reading.

Filed under: Design, Technical, Tutorial by TokyoRepublik
No Comments »

Tokyo Republik has recently finished the complete redesign of the site of one of Tokyo’s top underground bands, Missing Scene.

We worked with Geoff, the band’s lead singer and driving force to implement his ideas into a web site he could be proud of. Initial feedback has been extremely positive and the band have reported a large increase in the number of hits their site is receiving.

Be sure to check the band out when you have a chance. You can find details of the band’s upcoming gigs on their schedule page.

You can see the site here.

Thanks for reading.

Filed under: Design, Tokyo Republik by TokyoRepublik
No Comments »

I’ve just created a fan page on Facebook for Tokyo Republik. It’ll help keep you up to date about what I’m up to and hopefully, do a bit of Search Engine Optimisation (SEO) for me at the same time. Gotta get up them Google rankings!

You can become a fan of Tokyo Republik by following the linky link.

Thanks for reading.

Filed under: Tokyo Republik by TokyoRepublik
No Comments »