Centering a Prompt Window in CSS

The HTML

<aside id="prompt">
    <section>
        <div>
            <p>your domb.</p>
            <button onclick="close_prompt()"><img alt="Close" title="Close" src="gfx/close-button.png" width="29" height="29" /></button>
        </div>
    </section>
</aside>

The JavaScript

function close_prompt() {
    var prompt = document.getElementById('prompt');
    prompt.parentNode.removeChild(prompt);
}

The CSS

#prompt {
    display: table;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
#prompt section {
    display: table-cell;
    vertical-align: middle;
}
#prompt section div {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid gray;
    box-shadow:         0 0 15px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0 0 15px rgba(50, 50, 50, 0.75);
    -webkit-box-shadow: 0 0 15px rgba(50, 50, 50, 0.75);
    display: inline-block;
    padding: 30px;
    position: relative;
}
#prompt p {
    text-align: center;
}
#prompt button {
    background: none;
    border: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}

The Abstruse Explanation

Having the two nested elements sucks, but it works like a damn charm. The user won’t be able to click anywhere on the screen, so don’t use this unless you’re sure you want to bring the experience of your site to a grinding halt.

You could probably apply close_prompt() to #prompt, to make closing a bit easier? If the person clicks within the rendered window, the event won’t get to #prompt, stopping instead at the untitled div. I’ll try it!

The Result

….

Nope!

At least in Chrome, even clicking on the little window triggers the function. Oh, well.

Recovering Themes

hellohappykingdom:

My theme is fixed!

You’re gonna laugh at what the cause was.

It was an unclosed HTML comment in my theme’s code. -____- (You know the one… “<!—”)

That alone was enough to bork the entire Customize Theme page.

The Support staff responded right away within 24 hours and also gave me this REALLY handy link. I didn’t even know this page existed, it’s so handy. It lets you revert your theme to an automatic backup Tumblr made in the past.

(via chiptuney-deactivated20130121)

Reverse Arrays in PHP

foreach(array_reverse($array) as $key => $entry) echo "$key: $entry\n";

That’s if you want to go through a list backwards. There’s an optional second argument, $preserve_keys, which only applies to numerical keys and is set to false by default.

More information on the function can be found in the official documentation, here: PHP: array_reverse - Manual

Using XMLHttpRequest Responses

If you’re trying to use XMLHttpRequest’s response-ability, but nothing comes from checking it, you’re probably not doing it correctly. You have to attach a function to its state-change trigger, like so:

var server_call = new XMLHttpRequest();

server_call.onreadystatechange = function() {
    if(server_call.readyState != 4) return;
    console.log(server_call.responseText);
};
server_call.open("GET", "whatever.php");
server_call.send();

This way, your console will be updated with whatever is returned.