Category Archives: HTML

Getting border width with jQuery

Posted on June 28, 2010 by Stefan Siebel

Say the HTML is this

<div id="mydiv" style="border:10px solid #ff0000;">Hello World</div>

then you get the width of the border with this:

var borderWidth =($("#mydiv").outerWidth() - $("#mydiv").width()) / 2;

Posted in HTML, JavaScript | Leave a comment

HTML: Hiding border of focused elements

Posted on June 5, 2010 by Stefan Siebel

When you focus a link or some other focusable HTML element, you’ll get some more or less ugly outline which might not quite be what you want. In Firefox it’s for example a dotted border:

To remove this outline e.g. for all links, simply add this CSS:

a {
  border: 0;
  outline: 0;
}

This won’t work for any element in Internet Explorer. You might have to add some none standard attribute:

<a href="#" hidefocus="true">some link</a>

Posted in CSS, HTML | Leave a comment

HTML5 show off

Posted on June 4, 2010 by Stefan Siebel

This week Apple show’s off Safari’s HTML5 capabilities … check it out, it’s impressive: Apple HTML5

There is also a page for Google Chrome demonstrating some pretty neat HTML5: Chrome Experiments

Posted in HTML | Leave a comment

Capturing keyboard events for div’s and other non-input elements

Posted on May 23, 2010 by Stefan Siebel

Last week a friend of mine was claiming that you can’t easily capture keyboard events on non-input HTML elements such as div or span. The fact is: it is easy.

See this demo:

You can use the arrow down / up keys to move the selection down or up. Find a working demo here.

The HTML:

<ul id="list">
	<li class="list-item" tabindex="0">test 1</li>
	<li class="list-item" tabindex="1">test 2</li>
	<li class="list-item" tabindex="2">test 3</li>
	<li class="list-item" tabindex="3">test 4</li>
	<li class="list-item" tabindex="4">test 5</li>
	<li class="list-item" tabindex="5">test 6</li>
	<li class="list-item" tabindex="6">test 7</li>
</ul>

Really the only trick here is to add a tabindex attribute to each list element. This way it can receive the focus and starts to capture keyboard events.

The JavaScript:

$(".list-item").bind({
	keydown: function(e) {
		var key = e.keyCode;
		var target = $(e.currentTarget);
 
		switch(key) {
			case 38: // arrow up
				target.prev().focus();
				break;
			case 40: // arrow down
				target.next().focus();
				break;
		}
	},
 
	focusin: function(e) {
		$(e.currentTarget).addClass("selected");
	},
 
	focusout: function(e) {
		$(e.currentTarget).removeClass("selected");
	}
});
$("li").first().focus();

The keydown event figures out which key was pressed. If it was the arrow up key it selects the previous element and sets the focus on it. For the arrow down key the following element gets the focus. The focusin and focusout events add or remove a css class in order to make the selection more visible.

You can find the complete code of the example here: http://gist.github.com/410789 or by clicking view source in the demo.