Tuesday, October 2, 2012

changing element styles the plain old JavaScript way

I had to refactor this...

$('input[name=service]').live('click', function () {
   var service = document.getElementsByName("service");
   if (service[0].checked) {
      $('#pecs').attr('style', 'font-size: 1.5em;');
      $('#electric').attr('style', 'font-size: 0.75em;');
      $('#reviewsummary').attr('style', 'display: inline;');
      $('#reviewdetails').attr('style', 'display: inline;');
      $('#controls').attr('style', 'display: block;');
      $('#payTypes').attr('disabled', '');
   }
   if (service[1].checked) {
      $('#pecs').attr('style', 'font-size: 0.75em;');
      $('#electric').attr('style', 'font-size: 1.5em;');
      $('#reviewsummary').attr('style', 'display: none;');
      $('#reviewdetails').attr('style', 'display: none;');
      $('#controls').attr('style', 'display: block;');
      $('#payTypes').val("1");
      $('#payTypes').attr('disabled', 'disabled');
   }
});

 
 

To this...

$('input[name=service]').live('click', function () {
   var service = document.getElementsByName("service");
   if (service[0].checked) {
      var pecs = document.getElementById("pecs");
      var electric = document.getElementById("electric");
      var reviewsummary = document.getElementById("reviewsummary");
      var reviewdetails = document.getElementById("reviewdetails");
      var controls = document.getElementById("controls");
      var payTypes = document.getElementById("payTypes");
      pecs.style.fontSize = "1.5em";
      electric.style.fontSize = "0.75em";
      reviewsummary.style.display = "inline";
      reviewdetails.style.display = "inline";
      controls.style.display = "block";
      payTypes.disabled = false;
   }
   if (service[1].checked) {
      var pecs = document.getElementById("pecs");
      var electric = document.getElementById("electric");
      var reviewsummary = document.getElementById("reviewsummary");
      var reviewdetails = document.getElementById("reviewdetails");
      var controls = document.getElementById("controls");
      var payTypes = document.getElementById("payTypes");
      pecs.style.fontSize = "0.75em";
      electric.style.fontSize = "1.5em";
      reviewsummary.style.display = "none";
      reviewdetails.style.display = "none";
      controls.style.display = "block";
      payTypes.value = "1";
      payTypes.disabled = true;
   }
});

 
 

...as the jQuery stuff was causing some sort of conflict with some other JavaScript code that my boss, Nathan Carroll, wrote.

No comments:

Post a Comment