Forum Moderators: not2easy
<a href="bid.html" class="bid">Builders Information Department</a>
text-transform:capitalize won't work because I need more than just capitalization.
I have tried .bid:first-letter but that only changes the first letter of the first word in a paragraph, not ALL words in the paragraph.
I would appreciate help if anyone can. Thanks,
.bid { color: black; }
.bid span { font-size: 1.2em; color: red; }
.bid:hover { color: blue; }
.bid:hover span { color: red; }
Thank you so much.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Test</title>
<style type="text/css">
#BID { color: black; }
#BID span { font-size: 1.2em; color: red; }
#BID:hover { color: blue; }
#BID:hover span { color: red; }
</style>
</head>
<body>
<a href="bid.html" class="bid" id="BID">Builders Information Department</a>
<script type="text/javascript">
// This is just a namespace
var FOTI = function(){
return {
/**
* Initialize the page behaviors
*/
init : function() {
FOTI.capBID();
},
/**
* Replace the contents of BID with span wrapped first characters
*/
capBID : function() {
// Get the link to replace
var a = document.getElementById("BID");
if(!a ) return;
// Parse the text into an array
var arr = a.innerHTML.split(" ");
// Generate span's for each item in the array
for( var i = 0; i < arr.length; i++ )
{
arr[i] = "<span>" + arr[i].substr(0,1) + "</span>" + arr[i].substr(1);
}
// 4. Replace the contents of the original link
a.innerHTML = arr.join(" ");
//alert(a.innerHTML);
}
};
}();
window.onload = FOTI.init;
</script>
</body>
</html>
