Advertisement
salmancreation

Theme Demo Switch Bar Plugin

Aug 18th, 2015
234
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.23 KB | None | 0 0
  1. I want to use  https://github.com/OriginalEXE/Switcheroo
  2. demo of said plugin: http://switcheroo.getkodo.com/
  3.  
  4. but not for the functionality shown on the demo page.
  5.  
  6. Only for a part like here http://www.wpthemegenerator.com/ (see the mobile ready bar)
  7.  
  8.  
  9.  
  10. It took me some hours to find it but it may have been for nothing.
  11.  
  12. Here is the example html source that makes it work, taken  from a phpbb theme that uses the switcheroo plugin:
  13.  
  14. <div class="responsive">
  15. <!-- Mobile Button -->
  16. <div class="mobile-btn  pull-right hidden-xs">
  17. <a href="#" title="Smartphone View" ><i class="icon-mobile-phone"></i></a>
  18. </div>
  19.  
  20. <!-- Tablet Button -->
  21. <div class="tablet-btn  pull-right hidden-xs">
  22. <a href="#" title="Tablet View" ><i class="icon-tablet"></i></a>
  23. </div>
  24.  
  25. <!-- Desktop Button -->
  26. <div class="desktop-btn  pull-right hidden-xs">
  27. <a href="#" title="Desktop View" class="active"><i class="icon-desktop"></i></a>
  28. </div>
  29. </div>
  30. The js:
  31.  
  32.  
  33. $(".responsive a").click(function(){
  34.   // If this isn't already active
  35.  if (!$(this).hasClass("active")) {
  36.    // Remove the class from anything that is active
  37.    $(".responsive a.active").removeClass("active");
  38.    // And make this active
  39.    $(this).addClass("active");
  40.  }
  41. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement