Re-organising the Sidebar with jQuery

If you feel that you need to reorganise the sidebar in Virtual Campus, then it is possible to do so via a short snippet of jQuery.

Warning: This tutorial is for advanced users. If you are not sure what you are doing, please open a support ticket, where a SMILE expert will be happy to help. You will need to wrap all snippets in a script tag – <script> before, and </script> afterwards.

jQuery is a Javascript library that allows us to manipulate the DOM – perfect for moving elements around the page. Drop the below jQuery snippet into the “Head Scripts” box that can be located on the location edit screen.

$( document ).ready(function() {
  $('.chat-button').insertBefore('.video-wrap').css('border-top', '1px solid #000');
});

Target specific screen sizes

Alternatively, if you would like to target a specific screen size with this snippet, a few extra lines will check the device screen width and apply it accordingly

$( document ).ready(function() {
  var isMobile = window.matchMedia("only screen and (max-width: 760px)");
  if (isMobile.matches) {
    $('.chat-button').insertBefore('.video-wrap').css('border-top', '1px solid #000');
  }
});

Was this article helpful?

Related Articles