Discover Top Posts Tagged with #popup ask tutorial

Aug 2, 2015

Tutorial: Popup Askbox

As seen in my Library Theme.

Before we start, let me say that I didn’t write the original javascript for this. I found it about 2.5 years ago and no amount of searching has brought me to the original creator who I would source if I could.

I will try to make this tutorial as easy as possible for people who don’t know much about HTML. The code for adding a popup askbox comes in four parts, which I will try to make as clear as possible.

STEP 1: Find in your theme’s code the 'ask' link. It should look like this:

<a href="/ask">{AskLabel}</a>

Replace the link to look like this:

<a href="javascript:open('askbox');">{AskLabel}</a>

What this does is when you click your 'ask' link, instead of being sent to a new page you will trigger a javascript function. For now it will appear to do nothing.

STEP 2: Next we add the javascript function.

Start by finding these two tags in your theme's code: "</style>" and "</head>".

Next copy what's below into a space between these two tags:

This tells your browser what to do when the 'ask' link is clicked. But like before, you won't see anything happen yet.

STEP 3: Now to add the askbox itself. This can go anywhere in the body section, but if you don't know what you're doing, just find <body> and the code can be pasted immediately after it.

This is the code to copy and paste. I will give a breakdown immediately after.

<div id="askbox" class="closed"> <a id="askboxbg" href="javascript:open('askbox');"></a> <div id="ask"> <h1>{AskLabel}</h1> <iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/USERNAME.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe> </div> </div>

Breakdown:

The javascript from step 2 finds this <div> with the id "askbox" and will open or close it. We start with it "closed" so it remains closed until we click the "ask" link.

The second line in this code will (with the CSS below) give you a semi-transparent black background. The link means you can click anywhere on the background and it will close the popup. It does this by activating the exact same javascript as before, and the javascript just switches between open and closed.

The third line is a box containing your popup itself. If you know CSS you can make this look like anything you want.

The fourth is the title above your askbox. You can change {AskLabel} into anything you want your heading to say.

The fifth line, "<iframe...", is the askform itself. IMPORTANT: YOU MUST CHANGE USERNAME.TUMBLR.COM TO YOUR OWN URL OR IT WILL NOT WORK.

As a bonus, you can add an FAQ on a new line immediately before or after "<iframe..." like so: <p>FAQ here</p>

If you were to update your theme preview now, your askbox would appear at the top of your page and would make your theme look a mess. The final step will fix this.

STEP 4: Our last step is to style the popup. The code below will give you only a basic black and white style. People who know a bit of CSS may change it however they want.

The following needs to be pasted someplace between the "style" tags. If you're not sure where, find the "</style>" tag and paste the following immediately before it:

#askbox {position:fixed; z-index:20; width:100%; height:100%; background-color:rgba(0,0,0,0.75);} #askbox.open {display:block;} #askbox.closed {display:none;} #askboxbg {display:block; width:100%; height:100%; position:absolute; z-index:1;} #askbox #ask {width:500px; padding:20px; position:absolute; z-index:2; left:50%; margin:100px 0 0 -270px; text-decoration:none; color:black; background-color:white;}

Breakdown:

#askbox - This is the thing that will open and close. It will appear as the semi-transparent black background behind the popup. You can change the background-color, but it is best not to change anything else here.

#askbox.open, #askbox.closed - This is what makes the magic happen. Don't change this or your popup won't work.

#askboxbg - This is what makes it possible to click on the background and close the popup. Do not change any of the code here.

#askbox #ask - This is a the white popup itself. You can edit any of the code here except for the z-index.

Now if you click on your "ask" link the popup will work. Click on the background and it will close again. Well done, you've installed a popup askbox!

Doesn't work?

Nothing happens when I click my "ask" link? - Sometimes other javascript on your blog can break the popup code. If you have a music player, shimejis, falling snow, or anything similar, that can affect your popup askbox. If you remove those and your popup works, they were the problem. You have to choose between one or the other.

The popup comes up fine, but my askbox isn't there/is broken? - First check that when you did step three, you changed "username.tumblr.com" to your own url. If you have done this and your askbox still isn't working, check for typos, and also check that in your blog settings (tumblr.com/settings/blog/yourusername) you have enabled asks.

I was playing around with the code and now it's all broken? - You probably deleted something vital by accident. Return to the default code from this tutorial and try again.

It works on my blog but not on my customise page? - Tumblr is dumb sometimes. So long as it works for people visiting your blog it's fine.

I followed your tutorial perfectly and tried everything you said above and it's still not working! - That happens sometimes. Send me an ask and I will see what I can do.

Can I do the same for my submit form? - Yes. You can do it by duplicating everything here and replacing every single use of the word 'ask' with 'submit' (including askbox→submitbox, etc). Then replace the entire "<iframe...>" with the following code. REMEMBER TO CHANGE "USERNAME.TUMBLR.COM" WITH YOUR OWN URL.

#tutorial #tumblr tutorial #theme tutorial #popup ask tutorial #not a theme

themesbyeris