Change an attribute after the page loads

Question

I have been working on a problem that needs to adjust an attribute based on the screen width.

I thought that I could use media queries, but those are purely advisory for a tags and then I decided that I would use a JavaScript function which I got working and placed in the onclick() .

I know that my function is working in jsFiddle but in my application is appears that the change is happening before the AJAX reloads the page so the change in attribute is getting set back so my change is not working because of the page load. I found an ajaxComplete function :

$( document ).ajaxComplete(function() {
  var actual_width=window.innerWidth;
  alert("width: " + actual_width);
  if(actual_width < 1281) {
    var h1=document.getElementById('sigsLink');
    alert("Font Size: " + h1.style.font-size);
    var newFontSize = "35px";
    h1.style.height = newFontSize;
  }
});

Here is the HTML :

<span id="sigs" style="display: block;">
    <li >
        <a id="sigsLink" href="#" class="sigsLink" >Manage    Signatures</a>
    </li>
</span>

The CSS :

#sigsLink{
    font-size: 14px;
}

Please tell me if I'm using the AJAX correctly because my page doesn't even seem to be calling it. Here is my JSFiddle that doesn't seem to be working either: http://jsfiddle.net/Arandolph01/Lj5yr/3/ What am I missing?

EDIT:

So Thanks to the suggestion by IndieRok I think I'm getting closer and tried:

$(document).ready(function() {
  var actual_width=window.innerWidth;
  //alert("width: " + actual_width);
  if(actual_width < 982) {
      var newFontSize = "35px";
      $('.sigsLink').css({
          fontSize:newFontSize
      });
  }
});

This gives me a JavaScript error "Uncaught TypeError: undefined is not a function". What am I doing wrong?

Thank you.

Answer 1

I don't know what you did to your jsfiddle, but the console displays a bunch of errors...

I changed the code a bit and used $(document).ready event and got it working

$(document).ready(function() {
      var actual_width=window.innerWidth;
      //alert("width: " + actual_width);
      if(actual_width < 982) {
          var newFontSize = "35px";
          $('.sigsLink').css({
              fontSize:newFontSize
          });
      }
});

[updated jsfiddle V2] http://jsfiddle.net/Lj5yr/7/ )