jQuery not updating inline style with .css() in WordPress
<p>I'm trying to make a map on a contact page display full view port width. I'm using the 7 theme and my page content is written in HTML with Twitter Bootstrap and jQuery (specifically I use JADE and SASS but I'm sure that's irrelevant). My JavaScript is enqueued properly and console logs verified. This script runs no problem in a "vanilla" environment.</p>

<p>So I do a calculation to set the negative margin of an iFrame google map to the difference of the container and the view port width</p>

<p>Here's my JavaScript:</p>

<pre><code>jQuery(document).ready(function( $ ) {

  var $map = $("#map");
  var $mapWrap = $(".map-container");
  var margin = 0;

  margin = -.5 * ($(window).width() - $mapWrap.width());
  console.log($mapWrap.width());
  console.log($(window).width());
  console.log(margin);
  $map.css("margin", "0 " + margin);
  $(window).resize(function(){
    margin = -.5 * ($(window).width() - $mapWrap.width());
    $map.css("margin", "0 " + margin);    
  })
});
</code></pre>

<p>The console:</p>

<p>1140</p>

<p>1904</p>

<p>-382</p>

<p>Outside of WordPress this works like a charm and have used something similar a bunch of times. Upon inspection of the html page, jQuery adds a style inline attribute to the html element normally but in the WordPress environment the only inline style that gets added is <code>style="border: 0"</code>.</p>

<p>As a test I even tried to <code>addClass("randomClass")</code> but it wouldn't add said class. I'm led to believe it's a permission issue but I have exhausted all of my knowledge on this subject and am at the mercy of you fine folks. If I can figure this out someone will have to go with a non-full-width map on their contact page and that's just frightening.</p>