Ramblings on technology with a dash of social commentary
RSS icon Email icon Home icon
  • What happened to the j.mp sidebar?

    Posted on June 2nd, 2012 phpguru No comments

    A few years back, I found the iPhone app Runmeter. It keeps getting better, too, and is still one of the best $5 I ever spent. Very cool app. When you finish a run, skate or walk, it sends you a j.mp short link to a Google map of your exercise with all the stats it captured via GPS.

    As a web developer interested in link shortening services, I instantly signed up to use j.mp to shorten my links.

    One of the best things about the j.mp link shortening service was the j.mp sidebar, a Javascript bookmarklet that creates a side panel over whatever site you’re on that allows you to use the j.mp shortening service without leaving the page you’re on. It was elegant, easy and just perfect for my needs.

    Even though around September of 2009 bit.ly encouraged their users to switch to j.mp to make their URLs even shorter, they have now appeared to have tabled the j.mp brand along with the excellent j.mp sidebar. This wouldn’t be a big deal if the new bit.ly services were the same or better, but they’re far from it. The new bit marker is annoying and takes five times longer to shorten a link, tries to integrate with sharing sites for you and lots of other annoyances.

    So they deprecated the j.mp sidebar, which as of the time of this writing is still working, but you cannot find it anywhere on the web! So frustrating.

    To combat this problem, here are some instructions below — just sign up for bit.ly if you don’t already have an account, and follow the steps below.

    bit.ly j.mp sidebar bookmarklet

    Drag this link to your browser’s bookmark toolbar
    j.mp sidebar

    bit.ly j.mp sidebar manual creation method

    1. Create a new blank bookmark in your bookmark toolbar folder and name it j.mp sidebar (or bit.ly sidebar if you prefer)

    2. Paste in the following for the URL

    Enjoy!

  • JQuery Timer Opens ColorBox…Then Flash Displays on Top in IE

    Posted on November 22nd, 2010 phpguru No comments

    I’m in the process of adding a new feature to the home page of a client’s website. The desired functionality is best described as follows:

    When visiting the home page, after a few moments, I want an overlay to appear, and inside the overlay will be a promotion to sign up for the website’s email newsletter.

    A friend of mine (o3c) recently turned me onto ColorBox, from Colorpowered.com. Excellent stuff! I’m almost done implementing it, and ran into a few integration issues that I thought I’d share. For the record, I want to state that none of the issues I ran into are problems with ColorBox! The ColorBox code is rock-solid. No, as usual, the problems are with Flash content on the page, and particularly within Microsoft Internet Explorer. As usual, everything works fine in Firefox, Safari & Chrome.

    So we have a couple of questions to answer. One is: How do you open ColorBox with a Timer? And the second is: How do you open a ColorBox over Flash in IE?

    Timers are still done with “old school javascript.” The syntax is a little goofy, but it’s not specifically JQuery related. We’ll come back to that.

    You have Flash on a page, and when your ColorBox appears on the page in IE, the Flash content underneath the overlay draws over top of the ColorBox overlay content, right? Contrary to how the rest of the world behaves (correctly), Adobe Flash (by default) draws last, which causes it to look like it’s on top of everything else. There are usually some easy fixes for that (most often, #3, below).

    Still reading? Ok, let’s get down to it. Here’s some general troubleshooting tips before we begin.

    1. Make sure your page Validates. Use the validator.w3.org
    2. Depending on your usage, you may have to make IE8 behave like IE7… a.k.a. force IE7 compatibility mode
    3. Tell the Flash content to have the “wmode” parameter, and set the value to “transparent

    Now, you may have already tried all of these things. I did, and the Flash content was still showing on top of my ColorBox content.

    So what’s a web developer to do. JQuery to the rescue. What we can do is hide the Flash content before the ColorBox appears, and turn it back on when the ColorBox goes away. It’s not a perfect solution, but it will hopefully work on all browsers so we can go about our day.

    In looking at the ColorBox API/Documentation, they’ve provided two events that look to be very helpful to this type of situation. Scroll down to the bit about “Extending,” almost to the very bottom where it says “Event Hooks” and look for the following:

    ‘cbox_open’ triggers when ColorBox is first opened, but after a few key variable assignments take place.
    ‘cbox_closed’ triggers as the close method ends.

    The container on my page that contains the Flash content has an id=’img_accordian’. My first thought was to do something like:

    $('#img_accordian').bind('cbox_open', function(){
       $(this).hide();
    }).bind('cbox_closed', function(){
       $(this).show();
    });

    but the above did not work! When I reloaded the page, it had no effect. No errors, but nothing happening. A quick Google search revealed this tidbit on the ColorBox Discussion Group on Google. So I just tried the more obvious…

    $().bind('cbox_open', function(){
       $('#img_accordian').hide();
    }).bind('cbox_closed', function(){
       $('#img_accordian').show();
    });

    Boo-yah! Now I can move onto something much more fun. So much of my time wasted due to inadequacies of Internet Explorer. Sigh… such is life.

    Whoops — not so fast — now that we have our signup form opening into a ColorBox iFrame, it shows every time we visit the home page. We want it only to show this pop-up-style signup form once during the user’s session. A cookie is the perfect place to store a simple “yes,” value, indicating that the user has seen the popup already.

    Another Google search on JQuery Cookie found the JQuery Cookie plugin. To make use of this, we need to open the signup form ColorBox only if the user has not seen it already. Then if we open it, we can set the cookie that says they saw it, thus preventing it from showing again (until we clear cookies or the cookie expires.)

    The two last features you’ll see in the code below are the finished timer, which I have set to open in 7.5 seconds. In testing, I may change it to 7, 6 or even 5 seconds. Also, I wanted a second “signup for e-news” link on the page in the footer that triggered the ColorBox overlay. So you’ll see in my code I created a custom object, “cbprops” to store the custom ColorBox configuration values, and then attached it to fire on the #signup_link.

    Here’s the final completed code.

    $(document).ready(function()
    {
        var cbprops = {opacity: 0.5, href:"/signup", width:"660px", height:"680px", iframe:true};
        if($.cookie('viewed_signup')!='yes')
        {
            var timer = setTimeout(function(){
            $.fn.colorbox(cbprops); }, 7500);
        }
        $("#signup_link").colorbox(cbprops);
    }).bind('cbox_open', function(){
        $('#img_accordian').hide();
        $.cookie('viewed_signup','yes')
    }).bind('cbox_closed', function(){
        $('#img_accordian').show();
    });

    There you have it, folks. We’re using a Javascript timer to open a ColorBox that hides Flash content in the background and setting a cookie so it only happens once. I hope you enjoyed reading — happy programming! Feel free to steal this code. If stealing doesn’t sit right with you, feel free to donate to JQuery or buy a 2011 Funny Pug Calendar!

  • IE7 IE8 Compatibility Issues

    Posted on September 23rd, 2009 phpguru No comments
    I’ve noticed some goofy issues with IE 8 & Shadowbox recently, and also a few JQuery things break
    Some of the stuff I put on a bunch of sites doesn’t work exactly right in IE8;  There’s a meta tag you can use to force IE8 to behave like IE7
    Bottom line: Take a look at your sites in IE8 – they may not work how they did in IE7.
  • jquery image cross fade

    Posted on August 16th, 2009 phpguru No comments

    I just spent an hour trying to figure out how to make an image cross-fade into another image using the amazing JQuery library.

    First I read this post,  and then continued on to part two.

    These tutorials are close, but the code was a bit confusing at first, and it didn’t seem that simple to integrate into my site.

    Then I found the motherlode:

    This single JQuery CrossSlide plug-in is easy to use instantly. It lets you perform slide-in and slide-out transitions with or without transparency fading in between multiple images.

    It even emulates the popular Ken Burns effect that is built into iMovie.

  • Color Scheme Designer: The Best Online Color Picker

    Posted on May 30th, 2009 phpguru 1 comment

    If you haven’t stumbled upon the online Color Scheme Designer, I don’t think you’ve lived.

    Maybe you’ve seen a Pantone color guide , which is great for designing for print, or a Javascript Color Picker or an HTML color picker form control you can use in your CMS system, but this web page goes way beyond that. Not only is this tool one of the most amazing DHTML / Javascript applications I’ve ever seen, it is extremely useful piece of software that I hope never goes down. The original version of the online color picker at WellStyled.com now has a new URL: www.colorschemedesigner.com

    Using this tool you can interactively create and modify palettes consisting of 1, 2, 3, 4 or more color tones and play with the hues, saturation and brightness to capture a pleasing palette for use in any design. It sort of reminds me of Kai’s Power Tools Gradient Designer — online, on a web page you can bookmark.

    Petr Staníček, the website’s creator is one of my heros. I’m moved to donate. It’s that good.

  • Detecting Flash Version for JW Player in Shadowbox

    Posted on May 2nd, 2009 phpguru 6 comments

    I ran into a situation today where a client told me the video player I integrated into his custom website CMS wasn’t working on his computer. Naturally, I gave him the standard web developer response to any bug: “Well, it works fine on my computer…” After all, I successfully tested on Firefox 2, Firefox 3, IE6, IE7, Safari 3, Safari 4, Opera and Chrome on my MacBook Pro running Windows XP under Bootcamp.

    After a little technical sleuthing, we narrowed the issue down to the Flash plug-in version. Mine was Flash version 10.0 -r22 while his was Flash version 9.x. An unanswered forum post about Flash version detection at the Shadowbox website, and a forum post at longtail video both describe the exact situation we were having, so I knew I wasn’t crazy.

    Okay, so we needed to test for the Flash plug-in version before blindly serving up an .flv coded for Flash 10 to users with 9 or lower. Remembering that the “old school way” of hand-coding the object/embed tag properties for embedding the Flash player in a web page allowed you to edit the required minimum version your content needs.

    <OBJECT classid="clasid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
    WIDTH="432" HEIGHT="330" id="myMovieName" >
    <PARAM NAME="movie" VALUE="myMovieName.swf" />
    <PARAM NAME="quality" VALUE="high" />
    <PARAM NAME=bgcolor VALUE=#FFFFFF>
    <EMBED
    src="/flash/ myMovieName.swf" quality="high" bgcolor=#FFFFFF
    WIDTH="432" HEIGHT="330" NAME="myMovieName" ALIGN=""
    TYPE="application/x-shockwave-flash"
    PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
    </EMBED>
    </OBJECT>

    On this particular site, and most modern websites with multimedia capabilities, we’re loading a Shadowbox gallery via a Javascript file, that in turn loads the Flash player dynamically depending on the type of media that is selected for viewing/playback. I figured the first place to look was the Shadowbox API. I thought I it would probably have a ‘minimum required Flash player version’ variable to pass to it. Sure enough, there is:

    flashVersion: The minimum Flash version required to play a flash movie (as a string). Defaults to "9.0.0"

    Here’s my new sample Javascript code to embed Shadowbox version 3.0b, and test for the Flash Version:

    <link rel="stylesheet" type="text/css" href="javascripts/shadowbox3.0b/shadowbox.css">
    <script type="text/javascript" src="javascripts/shadowbox3.0b/shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init({
    language: "en",
    players: ["qt","flv","img","swf"],
    flashVersion: "10.0.0"
    });
    </script>

    Uploaded, tested, works. What this code actually does (for users with Flash 9.x and below) is causes the included SWFObject with ExpressInstall.swf to be displayed instead of your content, which seamlessly encourages your website visitor  to upgrade their Flash plug-in. If you want more customizable control over the alternate content your user sees, you might want to look into the Flash Detection Kit at Adobe.

    Don’t you love well-documented open-source software? What a treat it is when fantastically useful and free code is actually documented and works as expected. That’s the beauty of open source. As it turns out, if we weren’t using Shadowbox to display Flash video inside a gallery, here’s how you can do the same thing with the JW Player Support for FlashVars API, by using the client variable:

    client (Flash MAC X,0,XXX,0): Version and platform of the Flash client plugin. Useful to check for e.g. MP4 playback or fullscreen capabilities.

    Note this not the same thing as the JW Player API. You use that if you want to customize the JW Player itself, mostly from within Flash.

    On a somewhat related note, while talking about this issue with the best Flash designer in Florida I work with frequently, he asked me if I had ever heard of Kewbee, the Browser Plug-in Switcher, which is a great way to run multiple Flash versions simultaneously on the same computer. I think I’ll give that a try to make online software browser testing even easier. Now who doesn’t want need that?