patternMinor
Altering input field width
Viewed 0 times
inputfieldwidthaltering
Problem
This gets every form element and calculates its width, then changes the input fields depending on the parent-form width:
It works as intended, but to learn a bit more I just want to know if there is a smarter way to write this little code in CoffeeScript.
$ ->
# Alter 'input' Width
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)
# on Resize
$(window).resize ->
inputResize()
# on Init
inputResize()It works as intended, but to learn a bit more I just want to know if there is a smarter way to write this little code in CoffeeScript.
Solution
Here are a few tips:
1) Use standard naming convention.
Try names like
2) Separate complex logic into smaller functions.
There's too much going on here.
Since tF is only used then you can get rid of it and use
Next, extract the input width size calculation to one function and you get something like this.
Final Code:
1) Use standard naming convention.
tE and tF sound like booleans and not a refence to an element.Try names like
el, $this or that instead.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()
inputPadding = parseInt( el.css("padding-left"), 10) + parseInt(el.css("padding-right"), 10)
formWidth - inputBorder - inputPadding
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()
inputPadding = parseInt( el.css("padding-left"), 10) + parseInt(el.css("padding-right"), 10)
formWidth - inputBorder - inputPadding
resizeFormInputs = ->
$("form").each ->
formWidth = $(this).width()
$(this).find("input").each ->
$(this).css "width", getNewInputSize($(this), formWidth)
$(window).resize(resizeFormInputs).triggerHandler "resize"Code Snippets
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)getNewInputSize = (el, formWidth) ->
inputBorder = el.outerWidth() - el.innerWidth()
inputPadding = parseInt( el.css("padding-left"), 10) + parseInt(el.css("padding-right"), 10)
formWidth - inputBorder - inputPadding
resizeFormInputs = ->
$("form").each ->
formWidth = $(this).width()
$(this).find("input").each ->
$(this).css "width", getNewInputSize($(this), formWidth)$ ->
getNewInputSize = (el, formWidth) ->
inputBorder = el.outerWidth() - el.innerWidth()
inputPadding = parseInt( el.css("padding-left"), 10) + parseInt(el.css("padding-right"), 10)
formWidth - inputBorder - inputPadding
resizeFormInputs = ->
$("form").each ->
formWidth = $(this).width()
$(this).find("input").each ->
$(this).css "width", getNewInputSize($(this), formWidth)
$(window).resize(resizeFormInputs).triggerHandler "resize"Context
StackExchange Code Review Q#15890, answer score: 7
Revisions (0)
No revisions yet.