Question

how to display a small number (left top border) above a border around an element?

basically I am looking for a way to highlight elements and identify them with a number.

UPDATE:

Basically the elements highlight on mouseover by having border property defined. on mouseout, border is transparent (disappears).

what I’d like to do is how to display a number outside of the border highlight selected?

Solution I just thought about is using a custom generated numbered image border and just use border-image dynamically

Answer 1

Assuming you want to insert this number dynamically for any element without having to worry about relatives and absolutes here is a solution.

Code:

<div id="box"></div>

---

#box{
    background:red;
    height:140px;
    width:250px;
    margin:30px;
}

.number{
    background:#ccc;
    display:block;
    font-weight:bold;
    border:1px solid #000;
    font-size:10px;
}

---

// Create an span element that will have the number
var number          = $("<span />").text("5").addClass("number");
// Set the number width and height
var numberWidth     = 10;
var numberHeight    = 10;

// Get the target element
var element         = $("#box");
// Get width, height and position
var elementWidth    = element.width();

// These two are only necesary if you want to position
// the number in a different corner (e.g bottom, right)
var elementHeight   = element.height();
var elementPosition = element.offset();

// Apply css to the number element
// Position is based on the target element position
number.css({
    position: "absolute",
    left:     elementPosition.left - numberWidth,
    top:      elementPosition.top  - numberHeight,
    width:    numberWidth,
    height:   numberHeight
});

// Insert the number to the body
number.appendTo("body");