Fancy follow-me widget behavior with some JavaScript

• facebook

For those of you using follow-me widgets, we'd like to share a nifty trick where you can use an image of a chat widget to initiate the follow-me behavior and then hide the chat widget image while the patron is using the follow-me widget. First, we'll show you the trick in action. Then we'll lift the hood and show how you can do it too!

Our example comes courtesy of Danielle Theiss from Rockhurst University's Greenlease Library and Jessica Hammond from the Mobius Consortium. Many thanks to them for letting us share their work with you! If the video below doesn't show up properly, you can also view it here.





If you'd like to try out their page out for yourself, follow this link to the Mobius search page.

Now, let's lift the hood and see how it works.

The first thing you'll want to do is to wrap the div containing your chat widget image within another div and give that div a distinctive id. Here is an example of what to do assuming you are using the output from our updated widget designer and using an id of "chat-widget".
<div id="chat-widget"> <div class="needs-js"> You need to enable JavaScript in your browser to chat with us. </div> </div>
Then you'll need to add a bit of JavaScript as close to the end of your BODY as possible.
<script type="text/javascript"> var id = 'chat-widget'; try { if (window.parent.location.href === undefined) { document.getElementById(id).style.display = 'none'; } else { document.getElementById(id).style.display = ''; } } catch (err) { document.getElementById(id).style.display = 'none'; } </script>
For those interested in the technical details... The if statement is to handle Chrome. The exception handling takes care of Firefox and IE. Seems to work fine for latest versions of Opera, SeaMonkey, and Camino too. Please let us know if you find a case that isn't handled.

That should do the trick. Have your own tips and tricks for follow-me widgets? Please share them in the comments below. :-)