tweetboard effect sliding frame

Question

When you visit this link http://tweetboard.com/alpha/

you will see a Tweets label on the left. When you click this tweets label, another site loads inside this panel/iframe. Can you please help me understand how this feature is created? It seems that I should be able to create this effect using standard HTML and jQuery.

If you can point me to the right resources to generate this kind of UI, that will be great.

Thanks in advance.

Answer 1

Just "iframe" tag in "div". There no any JavaScript (only trivial things, like button pressing event).

Answer 2

You'll have to do a couple of things:

1. Load the external site into a div which is probably positioned absolutely off the page. (Note: you'd have to pass the external site through a proxy because $().load is AJAX)

$("#sliderpanel").load("/getpagescript?q=http://www.google.com");

1. Animate on click of your identifying button.

   $("#slider").click(function () {
           $(this).show("slide", { direction: "right" }, 1000);
     });

/* see: http://docs.jquery.com/UI/Effects/Slide */

3. Wire up a 'toggle' to close the panel, this can be done by replacing the above code with something like:

$("#slider").click(function () {
  if($(this).is(":hidden")) {
      $(this).show("slide", { direction: "right" }, 1000);
   } else {
      $(this).hide("slide", { direction: "left" }, 1000);
   }
});

You could use an iframe, but as far as I know, there is no way to perform a callback when the page is fully loaded in the iframe. If you're trying to write a plugin that does this, an replacing the first step with setting an iframe's content would be the way to go.

edit: sorry if any of the code blocks are messed up, SO isn't formatting according to whitespace or using the 'code' button in the editor.