# Altering input field width

This gets every form element and calculates its width, then changes the input fields depending on the parent-form width:

$-> # Alter 'input' Width inputResize = ->$('form').each ->
tF = $(this) formWidth = tF.width() tF.find('input').each -> tE =$(this)
inputBorder = (tE.outerWidth() - tE.innerWidth())
tE.css 'width', ->
# on Resize

## 2) Separate complex logic into smaller functions.

There's too much going on here.

 inputResize = ->
$('form').each -> tF =$(this)
formWidth = tF.width()
tF.find('input').each ->
tE = $(this) inputBorder = (tE.outerWidth() - tE.innerWidth()) inputPadding = parseInt(tE.css('padding-left')) + parseInt(tE.css('padding-right')) tE.css 'width', -> (formWidth - inputBorder - inputPadding)  Since tF is only used then you can get rid of it and use $(this) directly. Next, extract the input width size calculation to one function and you get something like this.

  getNewInputSize = (el, formWidth) ->
inputBorder = el.outerWidth() - el.innerWidth()

resizeFormInputs = ->
$("form").each -> formWidth =$(this).width()
$(this).find("input").each ->$(this).css "width", getNewInputSize($(this), formWidth)  Final Code: $ ->
getNewInputSize = (el, formWidth) ->
inputBorder = el.outerWidth() - el.innerWidth()

resizeFormInputs = ->
$("form").each -> formWidth =$(this).width()
$(this).find("input").each ->$(this).css "width", getNewInputSize($(this), formWidth)$(window).resize(resizeFormInputs).triggerHandler "resize"


This is pretty good, you could do that, don't know if you find it much more readable:

$-> # Alter 'input' Width inputResize = ->$('form').each ->
tF = $@ formWidth = tF.width() tF.find('input').each -> tE =$ @
inputBorder = (tE.outerWidth() - tE.innerWidth())
$(window).resize -> inputResize() # on Init inputResize()  • Thank you! I didn´t know the $ @ :) - learned something. – Rockbot Sep 25 '12 at 7:24
• One last question: Would it be possible to use loops where i used each() ? – Rockbot Sep 25 '12 at 15:03
• Yes, and the performance would be a little better. But I usually care more about readability. You could do: for input in tF.find('input'), then replace tE = $@ by tE =$ input – standup75 Sep 25 '12 at 20:34