How to use this switcheroo plugin but not for displaying product?

How to use this switcheroo plugin but not for displaying product?

demo of said plugin: http://switcheroo.getkodo.com/

but not for the functionality shown on the demo page.

Only for a part like here  http://www.wpthemegenerator.com/ (see the mobile ready bar)



It took me some hours to find it but it may have been for nothing. 

Here is the example html source that makes it work, taken  from a phpbb theme that uses the switcheroo plugin:

  2. <div class="responsive">
  3. <!-- Mobile Button -->
  4. <div class="mobile-btn  pull-right hidden-xs">
  5. <a href="#" title="Smartphone View" ><i class="icon-mobile-phone"></i></a>
  6. </div>

  8. <!-- Tablet Button -->
  9. <div class="tablet-btn  pull-right hidden-xs">
  10. <a href="#" title="Tablet View" ><i class="icon-tablet"></i></a>
  11. </div>

  13. <!-- Desktop Button -->
  14. <div class="desktop-btn  pull-right hidden-xs">
  15. <a href="#" title="Desktop View" class="active"><i class="icon-desktop"></i></a>
  16. </div>
  17. </div>
The js:


  3. $(".responsive a").click(function(){
  4.   // If this isn't already active
  5.   if (!$(this).hasClass("active")) {
  6.     // Remove the class from anything that is active
  7.     $(".responsive a.active").removeClass("active");
  8.     // And make this active
  9.     $(this).addClass("active");
  10.   }
  11. });
It seems they use an iframe to render the page width onclick, is that the best way to achieve this?

I'm stuck at what css they add and what class they add it to or just to the style attribute of the iframe. I guess that magic happens inside the plugin itself? 

Tried it out;