While loop does not work

Page 1 of 1

9 Replies - 515 Views - Last Post: 26 June 2011 - 02:21 PM

#1 itdoell  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 239
  • Joined: 13-January 11

While loop does not work

Posted 23 June 2011 - 11:53 PM

I want to perform a loop while the scroll height of a div is larger than the set height (this will be done for excerpts) however the loop doesn't work (I realize this would be an endless loop). Yet it works when I replace "while" with "if".

function scrollDetect(elemId) {

	var elem = document.getElementById(elemId);
	while (elem.scrollHeight > elem.clientHeight) {
	alert('test!')
	}
}
scrollDetect('pmessage');


Is This A Good Question/Topic? 0
  • +

Replies To: While loop does not work

#2 J0K3R  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 13
  • View blog
  • Posts: 298
  • Joined: 19-December 08

Re: While loop does not work

Posted 24 June 2011 - 11:14 AM

In what context do you want to use this? Whats the purpose of it?
Was This Post Helpful? 0
  • +
  • -

#3 itdoell  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 239
  • Joined: 13-January 11

Re: While loop does not work

Posted 24 June 2011 - 01:49 PM

View PostJ0K3R, on 24 June 2011 - 11:14 AM, said:

In what context do you want to use this? Whats the purpose of it?

I'm using it for excerpts, so I'm going to check if the scroll is there (aka if there's overflow) and reduce text until the overflow no longer exists.
Was This Post Helpful? 0
  • +
  • -

#4 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 112
  • View blog
  • Posts: 454
  • Joined: 27-June 10

Re: While loop does not work

Posted 24 June 2011 - 02:25 PM

I understand what you're trying to do with this, but CSS would be a more viable option. It easily can create the automatic scrollbars, via overflow:auto;. Why are you wanting to manipulate this via Javascript?

If you take it out, it takes less page weight, anyway.
Was This Post Helpful? 0
  • +
  • -

#5 itdoell  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 239
  • Joined: 13-January 11

Re: While loop does not work

Posted 24 June 2011 - 06:01 PM

View Postmaniacalsounds, on 24 June 2011 - 02:25 PM, said:

I understand what you're trying to do with this, but CSS would be a more viable option. It easily can create the automatic scrollbars, via overflow:auto;. Why are you wanting to manipulate this via Javascript?

If you take it out, it takes less page weight, anyway.


You're misunderstanding what I'm trying to do. I have it set to overflow:auto already. What I am trying to do is check if the scrollbar is there, then I will reduce the text until the scrollbar is no longer there and add a "..." at the end of it. I don't want their to be scrollbars I just want to check if the posted text is longer than the allotted space.
Was This Post Helpful? 0
  • +
  • -

#6 itdoell  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 239
  • Joined: 13-January 11

Re: While loop does not work

Posted 25 June 2011 - 07:22 PM

So I want to be able to reduce text while a value is false until it becomes true, but it does not seem to be working.

function scrollDetect(elemId) {
	var elem = document.getElementById(elemId);
	if (elem.scrollHeight > elem.clientHeight) {
	var newContent = elem.innerHTML;
	newContent = newContent.slice(0, -5)
	elem.innerHTML = newContent;
	} else {
	var i = true;
	}
}
var i = false;
while (i === false)
{
scrollDetect('pmessage$id');
}


Any help is appreciated, thank you.

This post has been edited by macosxnerd101: 26 June 2011 - 02:19 PM
Reason for edit:: Fixed code tags

Was This Post Helpful? 0
  • +
  • -

#7 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 934
  • View blog
  • Posts: 2,332
  • Joined: 15-February 11

Re: While loop does not work

Posted 26 June 2011 - 11:00 AM

Are you trying to limit the user to the amount of text that can be entered?

P.S.
If you're dealing with an input element then you should be using the value property instead of innerHTML.

I just saw your other thread where you describe what you're trying to do.

I was playing around with the scrollHeight and clientHeight properties and I've come up with this... Explanation in the comments
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function scrolldetected(ele)
{
	//debugging purposes
	document.getElementById('results').innerHTML = "Scroll Height: " + ele.scrollHeight;
	document.getElementById('results').innerHTML += "<br />Client Height: " + ele.clientHeight;
	///////
	if(ele.scrollHeight > ele.clientHeight) //this means that the user has entered more text than the element can hold
	{
		//note I used value and not innerHTML here
		ele.value = ele.value.substr(0, ele.value.length - 1); //A newline character is counted in the length of the text as 1. So therefore if the user reaches the end and causes the element's scrollHeight to grow we'll remove the last character which will take it back to the previous line.
	}
}
</script>
</head>
<body>
<textarea onscroll="return scrolldetected(this)"></textarea>
<div id="results"></div>
</body>
</html>

This post has been edited by codeprada: 26 June 2011 - 11:11 AM

Was This Post Helpful? 0
  • +
  • -

#8 itdoell  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 239
  • Joined: 13-January 11

Re: While loop does not work

Posted 26 June 2011 - 12:01 PM

View Postcodeprada, on 26 June 2011 - 11:00 AM, said:

Are you trying to limit the user to the amount of text that can be entered?

P.S.
If you're dealing with an input element then you should be using the value property instead of innerHTML.

I just saw your other thread where you describe what you're trying to do.

I was playing around with the scrollHeight and clientHeight properties and I've come up with this... Explanation in the comments
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function scrolldetected(ele)
{
	//debugging purposes
	document.getElementById('results').innerHTML = "Scroll Height: " + ele.scrollHeight;
	document.getElementById('results').innerHTML += "<br />Client Height: " + ele.clientHeight;
	///////
	if(ele.scrollHeight > ele.clientHeight) //this means that the user has entered more text than the element can hold
	{
		//note I used value and not innerHTML here
		ele.value = ele.value.substr(0, ele.value.length - 1); //A newline character is counted in the length of the text as 1. So therefore if the user reaches the end and causes the element's scrollHeight to grow we'll remove the last character which will take it back to the previous line.
	}
}
</script>
</head>
<body>
<textarea onscroll="return scrolldetected(this)"></textarea>
<div id="results"></div>
</body>
</html>


I appreciate the help, however I do not want to prevent users from entering more text than can be displayed. I simply want to reduce the text afterward to show excerpts (like emails or blogs) so then when a user clicks the post it will display the full post.
Was This Post Helpful? 0
  • +
  • -

#9 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 934
  • View blog
  • Posts: 2,332
  • Joined: 15-February 11

Re: While loop does not work

Posted 26 June 2011 - 12:19 PM

Well that's a different story. If you're not going to load the links dynamically (Ajax) then they'll be more than likely made via PHP. Cut the excerpts down with substr and you can add three dots or what not after to show that there's more to the user.
Was This Post Helpful? 0
  • +
  • -

#10 macosxnerd101  Icon User is online

  • Self-Trained Economist
  • member icon




Reputation: 9143
  • View blog
  • Posts: 33,935
  • Joined: 27-December 08

Re: While loop does not work

Posted 26 June 2011 - 02:21 PM

Duplicate threads merged. Please avoid duplicate posting.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1