Category: Revelation

I’m doing a WordPress site for a local business that involves a lot of custom PHP programming, which is interesting because I’ve never done PHP before. But heck, a language is a language and you can learn anything by googling these day.

So one of the things this site does is collect a bunch of information, and then submit it to a third party who then returns a URL for the specific payment page for that specific reservation, and you’re supposed to redirect the end user to that page to pay. I had that going where there was a WordPress shortcode that generated the form, and another WordPress shortcode on the destination page that did all that stuff, and then used a cheezy Javascript window.location=$url; thing to redirect it. That worked.

But the client had a look at it and didn’t like the fact that the end user ended up on a different site, and wanted it to pop up the payment page on a different tab or page. So I changed the Javascript to do window.open($url, "_blank");, but I found out that this causes every browser in the world to see that as a popup and block it. Asking end users to disable their popup blockers is probably a no-no.

Fortunately I discovered this post. He specifically talks about Chrome, but it also seems to work on Firefox, Mobile Safari, and even IE8. So I changed the form submit button into an ordinary button. Then I added a button click handler on it which quickly opens up a new window (if you delay it by single stepping with a Javascript debugger, it triggers the popup blocker) with some hopefully quick-loading bogus content, then making an AJAX call to get the URL, and in the “done” handler for the call, do a w.location = data.url; to redirect the new window to the correct url, and then does a “submit” on the form to take you to the correct new page on the original site. The Javascript code ended up looking like:

    
    /* When you submit the booking, make a popup window! */
    $('#info-form-fake-submit').on('click', function(eventObject) {
        var w = window.open(ajaxurl + "?action=pt_fake_page");
        $('body').addClass('loading');
        var $form = $('form.pt-form');
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            datatype: 'json',
            data: $form.serialize() + '&action=pt_complete_reservation'
        }).done(function(data, textStatus, jqXHR) {
            if (data.status == 'good') {
                w.location = data.url;
                $form.submit();
            } else {
                alert(data.msg);
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            alert(textStatus + ': ' + errorThrown);
        }).always(function() {
            $('body').removeClass('loading');
        });
    });

I was making a web site and there is a set of steps you have to go through. I thought it would be a good idea to have one of those bars across the top that shows you the steps you’ve done and what you have to do. You can see them when you’re checking out on Amazon, and when you’re ordering pizza on the Dominos site, among many others. The first problem I had was that nobody seems to know what to call these damn things, so it’s hard to google for them. If you google for “progress meter” or “progress bar”, you mostly find those ones like you see when you’re downloading files, where it says “20 minutes to go” and then 2 minutes later it says “10 minutes to go” and then 3 hours later it says “5 minutes to go”. If you google for “breadcrumb” you get the navigation type where you click on the items to navigate. So that was my first problem.

I eventually found one that I liked the look of, but it had one minor problem and one major problem. The minor problem was that you had to put in the number of elements at the top, which was a little tacky. The major problem was that when when I shrunk the screen down (ie. when I displayed it on an iPhone) things got all wonky and the lines and dots didn’t line up correctly. So I was thinking maybe I could do it using a table with a border along the bottom, but while I was playing around with that option, I discovered this answer in StackOverflow that would allow the divs to act like tables.

So I threw the two ideas into a blender and came up with the following CSS:
div.progtrckr-table {
width: 100%;
display: table;
table-layout: fixed;
margin-bottom: 20px;
}
div.progtrckr-table div {
display: table-cell;
width: 2%;
text-align: center;
padding-bottom: 0.5em;
vertical-align: bottom;
}
div.progtrckr-table div.progtrckr-done,
div.progtrckr-table div.progtrckr-doing {
color: black;
border-bottom: 4px solid yellowgreen;
}
div.progtrckr-table div.progtrckr-todo {
color: silver;
border-bottom: 4px solid silver;
}
div.progtrckr-table div:after {
content: "\00a0\00a0";
}
div.progtrckr-table div:after {
position: relative;
float: left;
left: 50%;
bottom: -1.3em;
line-height: 1.2em;
}
div.progtrckr-table div.progtrckr-done:after {
content: "\2713";
color: white;
background-color: yellowgreen;
height: 1.2em;
width: 1.2em;
border: none;
border-radius: 1.2em;
}
div.progtrckr-table div.progtrckr-doing:after {
content: "\039F";
color: yellowgreen;
background-color: white;
font-size: 1.5em;
bottom: -1.1em;
}
div.progtrckr-table div.progtrckr-todo:after {
content: "\039F";
color: silver;
background-color: white;
font-size: 1.5em;
bottom: -1.1em;
}

You can use it just by making a div of divs, like so:
<div class="progtrckr-table">
<div class="progtrckr-done">Pickup/Delivery Options</div>
<div class="progtrckr-done">Check Availability</div>
<div class="progtrckr-doing">Reserve Boards</div>
<div class="progtrckr-todo">Checkout</div>
</div>

When I first tried it, I still had a bit of a problem where the dots weren’t lining up correctly on a small screen. That’s when I discovered that there was something in the inherited CSS that was changing the line-height. I added a line-height: normal; to the div.progtrckr-table block, and all was well. I’m pretty happy with the results.

If you want to play with it, click the “Edit in JSFiddle” in the below:
[dciframe]http://jsfiddle.net/ptomblin/y26Xp/embedded/result/,100%,300,0,auto,border:1px solid blue;align:left;[/dciframe]

A little while ago, an epic rant from the co-founder of Liberty Bottle Works went viral. You can see stories about it here and here. Now, I like a company that puts their employees family time above the “Me Generation”‘s whiny entitlement, and I thought I could use a new water bottle, so I ordered one.

It arrived a few days ago, and it’s really nice bottle. But the valve that lets air into the bottle when you suck on it makes a funny little squeaking sound. So I wrote to the company, making it clear that I wasn’t complaining, just asking if they had any strategies to mitigate the noise. The response I got has a formatting change in the middle that makes me think this is a semi-canned response, but it’s still pretty awesome:

First off thank you for your support, it really means a lot to us.

I am sorry for the noise you are getting from the straw, here are a few tips to try and help that:
Regarding the cap. We have found that a few caps (when fresh off the line) may make a signature “Liberty” noise. There has been some debate as to which spirit animal this noise is indicative of. Some folks believe it to be the illusive “purr” of the Sasquatch, however for more practical reasons we believe it to be more closely related to the majestic dolphin (who knows what sound a Tuna makes). Albeit, as cute as it is, I agree that the call of the majestic dolphin should be reserved for the ocean as it can be a little disruptive in class, at the office, the gym, or during ones morning Yoga. FYI, Sasquatches are really into Yoga.

Although the most likely cause of this unique audible phenomenon is rare and unintended, it is however by design. The noise may be due to our precision molding along with the strategic placement of the umbrella “flutter” valve as well as the assembly process of our sport caps, each individually built by hand. On the underside of your cap, you’ll see a flat rubber upside down “umbrella” that is about 1cm wide. When using the bottle in “sippa” mode via the spout, air must go through the umbrella valve into the bottle to replace the volume of water leaving the otherwise sealed container. The passage of air through the umbrella valve in association with the inherent back pressure of fluid may cause the tightly placed (hand installed) umbrella valve to flutter and vibrate thus creating the majestic acoustic sounds of the dolphin.

> How can I make it stop?
So, what can be done? First I would try opening the cap and running warm water (please be careful) directly onto both sides of the umbrella valve. Then, while the rubber is softened, use your finger on the top of the opened cap to push the little rubber “bead” (that holds the umbrella valve in place) down through the cap. What we are trying to do is create just the slightest amount of space between the underside of the molded cap and the rubber umbrella valve. That should do the trick. Replace the cap and test to see if we’ve set the dolphin free.

In most of these cases the sound will also go away once the valve relaxes with normal use. However, if your dolphin is stubborn and refuses to swim off into the ocean blue, I’ll be happy to send you a replacement cap of your choice at no charge. After all, we stand behind or products 100%.

Thank you for your support and for the opportunity to provide you with a better product, made by friends right here in Washington State.

If there are any other questions I can answer please let me know!

Thanks,

Denise Fischer
Customer Service Manager

I must say, I love these guys. If you’re in the market for a metal water bottle, you could do a lot worse.