jQuery code does not execute when page runs

jQuery code does not execute when page runs

Hi all,

I am working on a responsive CMS site and partly utilizing jQuery to re-position elements depending on the browser size.

I am using media queries to detect the browser size and add a class to the body depending on that result. I then use jQuery to move elements depending on what class is on the body tag.

The below code is my attempt at doing so, but it will not work. I do get "ready" in the console, so I know it is entering the .ready function. Also, I tried to add an else statement at the end with console.log, but it never printed.

The classes / selectors should be right, as I have tried replacing document.ready with:
  1. $(window).resize(function(){
and it works perfectly. When I use window.resize, the elements re-position as desired. However, window.resize only triggers when the browser is resized, not when it loads. So if smaller browsers load the page, they will see the elements in an unmoved position.
  1. $(document).ready(function () {
  2.     console.log("ready!");
  3.     if ($('body').hasClass("responsive-layout-normal")) {
  4.         console.log("normal");
  5.         $('.region-sidebar-first').append($('.region-sidebar-first-inner')).contents();

  7.     } else if ($('body').hasClass("responsive-layout-narrow")) {
  8.         console.log("narrow");
  9.         $('.region-sidebar-first').append($('.region-sidebar-first-inner')).contents();

  11.     } else if ($('body').hasClass("responsive-layout-mobile")) {
  12.         console.log("mobile");
  13.         $('#block-system-main').append($('.region-sidebar-first-inner')).contents();

  15.     }

  17. });