scale item javascript

gistfile1.js

<script type="text/javascript">

		/////////////////////////////////
		// Compact Scales
		/////////////////////////////////

		// To achieve the inline display of the title and the content, both block elements are floated with css.
		// This is great except when the title is long enough to overlap the floated content.
		// In that scenario, the title is pushing the content to the next line.
		// To prevent that, will calculate and set the space available to the title.
		// Calculate itemWidth and contentWidth.
		// Then set: titleWidth = itemWidth - contentWidth.

		// Needs to fire as soon as the document is ready.
		$(document).ready(function() {
			setScaleTitleWidth();
		});

		// Also needs to fire when the browser window is resized.
		$(window).resize(function() {
			setScaleTitleWidth();			
		});

		// Method for calculating and setting the title width.
		setScaleTitleWidth = function() {
			// Scope: define variables for this function.
			var scaleItems, itemWidth, contentWidth, titleWidth;

			// Init: set the variable values.
			scaleItems = $(".scale");
			itemWidth = "";
			contentWidth = "";
			titleWidth = "";

			// Apply: do stuff using the variables.
			// For each scale item, determine item and content width, then set title width.
			scaleItems.each(function(index) {
				itemWidth = $this.innerWidth();
				contentWidth = $this.find(".content").outerWidth();
				titleWidth = itemWidth - contentWidth;
				$this.find(".title").attr("style", "width=titleWidth;");
			};

			// Console for debugging.
			console.debug("scaleItems", scaleItems, "itemWidth", itemWidth, "contentWidth", contentWidth, "titleWidth", titleWidth);
		}

		/////////////////////////////////
		// Response List Behavior
		/////////////////////////////////
		// Natural form behavior: clicking the label checks/unchecks associated checkbox or radio button.
		// Orignally had the click event trigger on the wrapping label.
		// Discovered, however, that the event double-triggers on both the label and the input.
		// Because the click event on the label triggers a click event on the corresponding input.
		// This results in the function running twice.
		// Therefore, as it is coded now, the click event that triggers the function comes only from the input.
		// Which is also triggered when the label is clicked.
		// This results in the function properly executing once.
		// And allows for either the label or the input to be clicked in the UI.

		// Grab every label in each response-list.
		var responseItems = $(".response-list input")

		// Set a click-event on the inputs.
		responseItems.click(function(event){

			// Scope: define variables for this function.
			var clickedItem, parentList, previouslySelected;

			// Init: set the variable values.
			clickedItem = $(event.target);
			parentList = clickedItem.closest(".response-list");
			previouslySelected = parentList.find(".selected");

			// Apply: do stuff using the variables.
			// Remove the selected class from any previously selected input label.
			previouslySelected.removeClass("selected");
			// Add a selected class to the clicked input's wrapping label.
			clickedItem.parent("label").addClass("selected");

			// Console for debugging.
			//console.debug("clickedItem", clickedItem, "parentList", parentList, "previouslySelected", previouslySelected);
		});

	</script>