I've been using the code below to truncate text in a div when it's too long.
It copies the style and text from the div to another hidden div in the page. It then iterates through shortening the string until the second div reaches the desired height.
The code works, except for the part where it copies across the styles. The alerts just show a blank message box. The font and font size are set in an external CSS file.
I've been Googling all morning, but this appears to be the only way that I can find to get the styles.
Yes but, javascript doesn't know CSS.
You need to write a code to let javascript in on the game. Until then try your styles inside the div tag to see if your checkFont is working
<div style="width: 109px;height: 92px;font-family: Calibri;...more...">...stuff here...</div>
It works perfectly with the style already applied. I just had to remove the +20 from while (divheight > orgheight+20);
I don't want to try and make you solve the whole problem for me, but could you possibly give me a slight pointer as to this JavaScript code?
Thanks a lot, you've been extremely helpful.
Westerly: there's a grid of these little divs where the text has to stay within the tiny little spaces allowed. Thanks for drawing my attention to the overflow property, I'm just looking into it.
It would seem the overflow was set to hidden in a parent object somewhere anyway. It results in half-lines of text at the bottom of the divs which don't look particularly pretty. I'd quite like the ellipses as well.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function getStyle(el, cssprop){
if (el.currentStyle) //IE
{
return el.currentStyle[cssprop];
}
else if (document.defaultView.getComputedStyle) //Firefox
{
return document.defaultView.getComputedStyle(el, "")[cssprop];
}
else //try and get inline style
{
return el.style[cssprop];
}
}
function init(){
var box = document.getElementById('box');
alert(getStyle(box, "width"));
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<style type="text/css">
#box {width: 200px; height: 185px; border: 1px solid black; background-color: blue;}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Doesn't have an ID:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;
function init(){
IE ? nRule = document.styleSheets[0].rules : nRule = document.styleSheets[0].cssRules;
for (i=0; i<nRule.length; i++)
{
if (nRule[i].selectorText == ".testClass")
{
alert('Width = ' + nRule[i].style.width + '\nHeight = ' +nRule[i].style.height);
nRule[i].style.backgroundColor = "#f0fff0";
}
}
}
IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<style type="text/css">
body {background-color: #fffacd; margin-top: 60px;}
.testClass {float: left; width: 200px; height: 150px; margin-right: 15px;
border: 1px solid black; background-color: #ff69b4; font-size: 16pt; color: blue;}
</style>
</head>
<body>
<div class="testClass">Now is the time for all good men to come to the aid of their country.</div>
<div class="testClass">That's one small step for man, one giant leap for mankind.</div>
</body>
</html>
Yes! That's exactly what I was trying to do! I was sure I'd got JavaScript styles like I was trying to before, but I must have done something else or not used it in the end.
Thank you ever so much, both of you, for all your help. My faith in forums has been greatly increased.
[RESOLVED] JavaScript get styles
Reply With Quote
Bookmarks