Jump to content

Archived

This topic is now archived and is closed to further replies.

man5

Is there a way to minify javascript code in the <head>?

Recommended Posts

For eg.  I would prefer to have a link like this in the head section.

<head>
   <script src="js/code.js"></script>
</head>

as oppose to like this.

<head>
      <script>
		var _debug = false;
		var _placeholderSupport = function() {
			var t = document.createElement("input");
			t.type = "text";
			return (typeof t.placeholder !== "undefined");
		}();

		window.onload = function() {
			var arrInputs = document.getElementsByTagName("input");
			var arrTextareas = document.getElementsByTagName("textarea");
			var combinedArray = [];
			for (var i = 0; i < arrInputs.length; i++)
				combinedArray.push(arrInputs[i]);
			for (var i = 0; i < arrTextareas.length; i++)
				combinedArray.push(arrTextareas[i]);
			for (var i = 0; i < combinedArray.length; i++) {
				var curInput = combinedArray[i];
				if (!curInput.type || curInput.type == "" || curInput.type == "text" || curInput.type == "textarea")
					HandlePlaceholder(curInput);
				else if (curInput.type == "password")
					ReplaceWithText(curInput);
			}

			if (!_placeholderSupport) {
				for (var i = 0; i < document.forms.length; i++) {
					var oForm = document.forms[i];
					if (oForm.attachEvent) {
						oForm.attachEvent("onsubmit", function() {
							PlaceholderFormSubmit(oForm);
						});
					}
					else if (oForm.addEventListener)
						oForm.addEventListener("submit", function() {
							PlaceholderFormSubmit(oForm);
						}, false);
				}
			}
		};

		function PlaceholderFormSubmit(oForm) {    
			for (var i = 0; i < oForm.elements.length; i++) {
				var curElement = oForm.elements[i];
				HandlePlaceholderItemSubmit(curElement);
			}
		}

		function HandlePlaceholderItemSubmit(element) {
			if (element.name) {
				var curPlaceholder = element.getAttribute("placeholder");
				if (curPlaceholder && curPlaceholder.length > 0 && element.value === curPlaceholder) {
					element.value = "";
					window.setTimeout(function() {
						element.value = curPlaceholder;
					}, 100);
				}
			}
		}

		function ReplaceWithText(oPasswordTextbox) {
			if (_placeholderSupport)
				return;
			var oTextbox = document.createElement("input");
			oTextbox.type = "text";
			oTextbox.id = oPasswordTextbox.id;
			oTextbox.name = oPasswordTextbox.name;
			//oTextbox.style = oPasswordTextbox.style;
			oTextbox.className = oPasswordTextbox.className;
			for (var i = 0; i < oPasswordTextbox.attributes.length; i++) {
				var curName = oPasswordTextbox.attributes.item(i).nodeName;
				var curValue = oPasswordTextbox.attributes.item(i).nodeValue;
				if (curName !== "type" && curName !== "name") {
					oTextbox.setAttribute(curName, curValue);
				}
			}
			oTextbox.originalTextbox = oPasswordTextbox;
			oPasswordTextbox.parentNode.replaceChild(oTextbox, oPasswordTextbox);
			HandlePlaceholder(oTextbox);
			if (!_placeholderSupport) {
				oPasswordTextbox.onblur = function() {
					if (this.dummyTextbox && this.value.length === 0) {
						this.parentNode.replaceChild(this.dummyTextbox, this);
					}
				};
			}
		}

		function HandlePlaceholder(oTextbox) {
			if (!_placeholderSupport) {
				var curPlaceholder = oTextbox.getAttribute("placeholder");
				if (curPlaceholder && curPlaceholder.length > 0) {
					Debug("Placeholder found for input box '" + oTextbox.name + "': " + curPlaceholder);
					oTextbox.value = curPlaceholder;
					oTextbox.setAttribute("old_color", oTextbox.style.color);
					oTextbox.style.color = "#c0c0c0";
					oTextbox.onfocus = function() {
						var _this = this;
						if (this.originalTextbox) {
							_this = this.originalTextbox;
							_this.dummyTextbox = this;
							this.parentNode.replaceChild(this.originalTextbox, this);
							_this.focus();
						}
						Debug("input box '" + _this.name + "' focus");
						_this.style.color = _this.getAttribute("old_color");
						if (_this.value === curPlaceholder)
							_this.value = "";
					};
					oTextbox.onblur = function() {
						var _this = this;
						Debug("input box '" + _this.name + "' blur");
						if (_this.value === "") {
							_this.style.color = "#c0c0c0";
							_this.value = curPlaceholder;
						}
					};
				}
				else {
					Debug("input box '" + oTextbox.name + "' does not have placeholder attribute");
				}
			}
			else {
				Debug("browser has native support for placeholder");
			}
		}

		function Debug(msg) {
			if (typeof _debug !== "undefined" && _debug) {
				var oConsole = document.getElementById("Console");
				if (!oConsole) {
					oConsole = document.createElement("div");
					oConsole.id = "Console";
					document.body.appendChild(oConsole);
				}
				oConsole.innerHTML += msg + "<br />";
			}
		}
	</script>
</head>

How can I make that happen? I rather not show that awful long code in the head.

Share this post


Link to post
Share on other sites

Put all that code in a file, name the file "code.js", put it inside the /js/ folder, and then replace everything you have now with the that you want to have.

Share this post


Link to post
Share on other sites

Oh so it's that simple.  Will do that. Thanks.

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.