User Tools

Site Tools


html

HTML

Apply stylesheet to IFrame

:!: Avoid IFrames whenever possible!

<html>
 <head>
  <script type="text/javascript">
    <!--
    function addStyle() {
        var cssLink = document.createElement("link") 
        cssLink.href = "http://this-site.example.com/style.css"; 
        cssLink .rel = "stylesheet"; 
        cssLink .type = "text/css"; 
        frames['inner'].document.body.appendChild(cssLink);
    }
    //-->
  </script>
 </head>
 <body onload="javascript:addStyle()">
  <iframe src="http://remote-site.example.com/iframe.php" width="500" height="600" style="border: solid 1px black" name="inner" id="inner"></iframe>
 </body>
</html>

Textarea and TABs

:!: This is not my code (see links below). This approach uses jQuery.

jQuery.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      this.focus();
      sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  })
}
});

Now, here comes my snippet. Instead of focusing the next element it inserts a tab-character into a textarea.

	$("#inputData").keydown(function(e) {
		// tab-key has been pressed
		if (e.keyCode == 9) {
			// insert tab-character at current position (using method above)
			$(this).insertAtCaret("\t");
			// prevent the default behavior of cycling the focus
			e.preventDefault();
		}
	});

Source:

After refactoring

<script type="text/javascript">
 
(function(fn) {
	if (document.addEventListener) {	// W3C-compliant browser
		document.addEventListener("DOMContentLoaded", fn, false);
	} else {	// Internet Explorer
		document.onreadystatechange = function() {
			if (document.readyState == "interactive" || document.readyState == "complete") {
				fn();
			}
		};
	}
})(onReady);
 
 
 
function insertAtCaret(e, myValue) {
    if (document.selection) {
      e.focus();
      sel = document.selection.createRange();
      sel.text = myValue;
      e.focus();
    }
    else if (e.selectionStart || e.selectionStart == '0') {
      var startPos = e.selectionStart;
      var endPos = e.selectionEnd;
      var scrollTop = e.scrollTop;
      e.value = e.value.substring(0, startPos) + myValue + e.value.substring(endPos,e.value.length);
      e.focus();
      e.selectionStart = startPos + myValue.length;
      e.selectionEnd = startPos + myValue.length;
      e.scrollTop = scrollTop;
    } else {
      e.value += myValue;
      e.focus();
    }
}
 
function onReady()
{
	var e = document.getElementById("input");
	e.onkeydown = function(evt) {
		evt = evt || window.event;
 
		// tab-key has been pressed
		if (evt.keyCode == 9) {
			// insert tab-character at current position (using method above)
			insertAtCaret(e, "\t");
			// prevent the default behavior of cycling the focus
			evt.preventDefault();
		}
	};
}
 
</script>
 
<textarea id="input" rows="10" cols="80"></textarea>
html.txt · Last modified: 2012-04-28 11:05 CEST by dominik