[itdoell]

I'm in a seriously hair-pulling situation, in which I'm trying to create excerpts from a post which stay within a div with a fixed height/width. The problem with this is that it is extremely difficult to do... Even if I just limit the number of characters that appear, there's still the issue if the user creates line breaks, and even if I create an alternative function to detect line breaks there's still a matter of the length of the text between line breaks which will change the amount of space taken up.

So, after spending all of yesterday working on this I've come to the conclusion that in order to get a consistent and clean outcome, I could possibly do something along the lines of detecting whether or not a div is overflowing, and reduce the text as needed. Only problem is I have no idea how (or if) this is even possible.

In searching I found this...

function containsTooMuch(el) {
    var original = el.scrollLeft++;
    return el.scrollLeft-- > original;
}

However, I don't understand how that works or how I would implement it. Could anyone give me a hand in figuring out how I can accomplish this? Any help is appreciated, thank you.

[satis]

this is how I read it:

It's a function that you pass an element into... it could be any element that enables scrolling. The scrolling is important... so you'd need to add overflow: scroll to the style of the element.

In the first line, it sets a var called original to el.scrollLeft, which is a getter/setter for how far to the left the element is scrolled. Eg, if there's no scroll bar, or it's scrolled all the way to the left, it returns 0. It then adds++.... so after setting original to the value, it then set the scrollLeft to 1. If there's a scrollbar, the scrollbar just moved over one pixel to the right.

The second line then compares the current position of the scrollbar to the original position of the scrollbar. If the current position is greater than the original position, that means it has a scrollbar that incremented. It also decrements (--) the scrollbar to move it back to its original position. It returns the comparison... true if there's a scrollbar, false if there is not.

In your case, I think I'd start off by setting the scrollLeft to 0. With the function as written, I believe that if the scrollBar existed but was all the way to the right, it would still return false, since it would be unable to scroll further to the right. You may want to test that.

This post has been edited by satis: 23 June 2011 - 12:54 PM

[itdoell]

satis, on 23 June 2011 - 12:53 PM, said:

this is how I read it:

It's a function that you pass an element into... it could be any element that enables scrolling. The scrolling is important... so you'd need to add overflow: scroll to the style of the element.

In the first line, it sets a var called original to el.scrollLeft, which is a getter/setter for how far to the left the element is scrolled. Eg, if there's no scroll bar, or it's scrolled all the way to the left, it returns 0. It then adds++.... so after setting original to the value, it then set the scrollLeft to 1. If there's a scrollbar, the scrollbar just moved over one pixel to the right.

The second line then compares the current position of the scrollbar to the original position of the scrollbar. If the current position is greater than the original position, that means it has a scrollbar that incremented. It also decrements (--) the scrollbar to move it back to its original position. It returns the comparison... true if there's a scrollbar, false if there is not.

In your case, I think I'd start off by setting the scrollLeft to 0. With the function as written, I believe that if the scrollBar existed but was all the way to the right, it would still return false, since it would be unable to scroll further to the right. You may want to test that.

I appreciate the response but I still don't understand how I would implement this. I'm pretty shaky with Javascript and do not understand where I would implement this. Would I do it onchange?

[satis]

oh, right, ok

<script type='text/javascript'>

function containsTooMuch(el) {
    var original = el.scrollLeft++;
    return el.scrollLeft-- > original;
}
function test(el){
    if(containsTooMuch(el)){
         alert("it's too big!");
    }
}
</script>

<div style='overflow: scroll; width: 200px; height: 100px;' onchange='test(this)'></div>

If you mean, how to apply it to your specific situation... that's more complicated. Maybe:

<script type='text/javascript'>

function containsTooMuch(el) {
    var original = el.scrollLeft++;
    return el.scrollLeft-- > original;
}
function test(el){
    while(containsTooMuch(el)){
         el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length - 1);
    }
}
</script>

<div style='overflow: scroll; width: 200px; height: 100px;' onchange='test(this)'></div>

This is all untested code, so there may be some major problems with it.

[itdoell]

satis, on 23 June 2011 - 01:40 PM, said:

oh, right, ok

<script type='text/javascript'>

function containsTooMuch(el) {
    var original = el.scrollLeft++;
    return el.scrollLeft-- > original;
}
function test(el){
    if(containsTooMuch(el)){
         alert("it's too big!");
    }
}
</script>

<div style='overflow: scroll; width: 200px; height: 100px;' onchange='test(this)'></div>

If you mean, how to apply it to your specific situation... that's more complicated. Maybe:

<script type='text/javascript'>

function containsTooMuch(el) {
    var original = el.scrollLeft++;
    return el.scrollLeft-- > original;
}
function test(el){
    while(containsTooMuch(el)){
         el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length - 1);
    }
}
</script>

<div style='overflow: scroll; width: 200px; height: 100px;' onchange='test(this)'></div>

This is all untested code, so there may be some major problems with it.

Thanks man, I'll try to figure it out from here.

[satis]

hmmm, I played with it locally and it's not working for me. I'm not sure what the problem is. I'm going to keep jacking with it, but no promises.

[itdoell]

Okay, this isn't working at all. I've tried implementing the code and tweaking with it but neither version is working and it's beyond my knowledge of JS. Could someone please give me a bit more help with understanding and implementing this?

satis, on 23 June 2011 - 01:52 PM, said:

hmmm, I played with it locally and it's not working for me. I'm not sure what the problem is. I'm going to keep jacking with it, but no promises.

Okay thank you, I'm in the same boat.

[itdoell]

Okay, so I figured out how to detect whether or not the scrollbar exists in a different (and working) way. However, I still do not know how to get a working while loop that will remove characters from the div until the scrollbar disappears. Can anyone provide a hand here?

<script>
function scrollDetect(elemId) {
var elem = document.getElementById(elemId);
if (elem.scrollHeight > elem.clientHeight) {
//has scrollbar perform action
}
}
scrollDetect('pmessage');
</script>

<div id="pmessage" style="height:100px; width:200px; overflow:auto;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

This post has been edited by itdoell: 23 June 2011 - 03:30 PM

[satis]

I got my earlier code to work, but only when I used a timer to re-invoke the function repeatedly. It seems like if I just while loop it, it only works for the first iteration of the while loop. I'm thinking I may be catching the div while it's still rendering, so the scrollbars aren't registering yet. Not sure. Using a timer seems like a bit of a hack, but it seems to work.

I'm gonna mess with it some more tomorrow. I'll post my results then.

[itdoell]

satis, on 23 June 2011 - 05:16 PM, said:

I got my earlier code to work, but only when I used a timer to re-invoke the function repeatedly. It seems like if I just while loop it, it only works for the first iteration of the while loop. I'm thinking I may be catching the div while it's still rendering, so the scrollbars aren't registering yet. Not sure. Using a timer seems like a bit of a hack, but it seems to work.

I'm gonna mess with it some more tomorrow. I'll post my results then.

Thanks man I appreciate it.

[satis]

So, here's a working version

<html>
<head>
<script type='text/javascript'>
var timer;
function containsTooMuch(el) {
	el.scrollLeft = 0;
	el.scrollTop = 0;
    var hOrg = el.scrollLeft++;
	var vOrg = el.scrollTop++;
	if(el.scrollLeft-- > hOrg || el.scrollTop-- > vOrg)
		return true;
	return false;
}
function test(){
	var el = document.body.getElementsByTagName('div')[0];
	if(containsTooMuch(el)){
		el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length - 2);
		setTimeout(test, 5);
	}
}
</script>
</head>
<body onload='test()'>

<div style='overflow: scroll; width: 200px; height: 100px;'>
Because proteins are such large molecules, there are severe computational limits on the simulated timescales of their behaviour when modeled in all-atom detail. The millisecond regime for all-atom simulations was not reached until 2010,[2] and it is still not possible to fold all real proteins on a computer. Lattice proteins, however, are simplified in two ways: the amino acids are modelled as single "beads" rather than modeling every atom, and the beads are restricted to a rigid (usually cubic) lattice. This simplification allows them to reach their energy minima in a time quick enough to be simulated in full.
</div>

</body>
</html>

I tested it in Firefox 5. I don't see any reason why it wouldn't work in other browsers, but I didn't test it. I'm not happy with it, though... it just seems like such a hack. There has to be a better way.