Spaces [Archive] - CodingForums.com

ironboy

10-02-2011, 09:56 PM

To the best of my knowledge there is no pure CSS way of creating "tabs" that act like tabs in a Word-processor --> you can set them at different positions and if your text is going over one (or several) of those positions we automatically snap to the next available next time the text contains a tab...

But it can be done quite easily with JavaScript (at least for left tabs):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/**
* hrsAsTabs
* settings: {
* parentElement: -> DOM element: the parent element which the tabs apply,
* positions: -> Array of numbers: tab positions in pixels (within the parentElement),
* }
*/
var hrsAsTabs = function(settings){
s = settings;
var i, j, pos, el, spans = [], hrs = s.parentElement.getElementsByTagName('hr');
// replace hrs with spans
for(i = hrs.length-1; i >= 0; i--){
el = document.createElement('span');
with(el.style){margin = 0;padding = 0;border = 0;background = 'none';display = 'inline-block'};
spans.unshift({el:el});
s.parentElement.replaceChild(el,hrs[i]);
};
// fix tabs
for(i = 0; i < spans.length; i++){
pos = spans[i].el.offsetLeft;
for(j = 0; j < s.positions.length; j++){
if(s.positions[j] > pos){
spans[i].el.style.width = (s.positions[j] - pos) + 'px';
break;
}
}
}
};

// example
onload = function(){
hrsAsTabs({
parentElement: document.getElementById('example'),
positions: [100,200,500]
});
};
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="example">
Hello<hr/>Tab 1<hr/>Tab 2<hr/>Tab3<br/>
Something long here<hr/>New tab<hr/>Next tab
</div>
</body>
</html>