How to cut-off text/content before it overflows the DIV area, then add a "more" link?

Discussion in 'JavaScript' started by callagga, Jun 3, 2007.

0
  1. #1
    Hi,

    Does anyone have the Javascript that could be used to cut-off text/content before it overflows the DIV area, then add a "more" link??? (noting browser & text re-sizing could be occurring)

    That is, say you have:
    (a) a content (DIV) area on your view that can expand/contract depending upon browser size ( i.e. when someone is re-sizing the browser window) and
    (b) dynamic text/content that is to be displayed, based upon user input - e.g. image a defined area/size for several user comments for example. Users can create their own comments, but you only want them to be able to take up a given amount of screen resource, and then perhaps have a "...more" link at the bottom if they go over.

    Any other suggestions welcome that address what I'm trying to do, which is really offering a area for display of user feedback where each piece of feedback has a maximum area it can take on the main screen only, and also that browser re-sizing & text resizing is possible.

    Tks
    Greg
     
    callagga, Jun 3, 2007 IP
  2. wing

    wing Active Member

    Messages:
    210
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    58
    #2
    wing, Jun 3, 2007 IP
  3. callagga

    callagga Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    umm, but how would one determine the number of characters that could fit the region though? (noting text resizing and browser re-sizing) It's more so this I really need some expert javascript direction on. Thanks Greg
     
    callagga, Jun 4, 2007 IP
  4. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Try this:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	function toggleComments(nLink){

		var nComment = document.getElementById('comments');
		nComment.style.overflow == 'hidden' ? nComment.style.overflow = 'auto' : nComment.style.overflow = 'hidden';
		nComment.style.borderBottom == '' ? nComment.style.borderBottom = '1px solid black' : nComment.style.borderBottom = '';
		nLink.firstChild.data == 'More...' ? nLink.firstChild.data = 'Close...' : nLink.firstChild.data = 'More...';
	}
	
</script>
<style type="text/css">

	 body {background-color:#eae3c6;margin-top:60px}
	#comments {width:300px;height:95px;font-family:times;font-size:12pt;text-align:justify;background-color:#f0fff0;border-left:1px solid black;padding:5px;border-right:1px solid black;padding:5px;border-top:1px solid black;padding:5px}
	.header {font-family:tahoma;font-size:14pt;text-align:center;background-color:#f0e68c;border-top:1px solid black;border-left:1px solid black;border-right:1px solid black;padding:5px}
	.commentContainer {position:absolute;top:50px;right:50px}
	.toggle {width:300px;font-family:times;font-size:12pt;text-align:right;background-color:#f0fff0;border-left:1px solid black;border-right:1px solid black;border-bottom:1px solid black;padding:5px}

</style>
</head>
	<body>
		<div class="commentContainer">
			<div class="header">User Comments
			</div
			<div id="comments" style="overflow:hidden">U.S. Census 2000 pegged Lakewood's population at 56,646. This tally represents a 5.1% DECREASE from 1990. Lakewood is the 14th largest city in Ohio and second largest suburb in Cuyahoga County. 21% of Lakewood's population is under age 18. In racial/ethnic categories census figures show: 52,723 White (93%); 1,116 Black (1.9%); 139 American Indian; 815 Asian; 349 other; 1,504 multi-racial; 1,269 Hispanic. The 1999 effective residential property tax is $77.67 per $1,000 of tax valuation. Cuyahoga County assesses residential property at 35% of the current market value. The average sale price for a home in Lakewood for 1999, the latest year for which data is available, was $121,200. The income tax rate is 1.5%. U.S. Census 2000 pegged Lakewood's population at 56,646.
			</div>
			<div class="toggle"><span style="cursor:pointer;color:#0000cd" onclick="toggleComments(this);return false">More...</span>
			</div>
		</div>
	</body>
</html>
    Code (markup):
     
    Mike H., Jun 4, 2007 IP
  5. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #5
    Mike's solution is about the best you can get... I had to do this once with a task related to image generation and PHP's image functions allow you to get the width of a text string at a certain text size. Of course, in a web app when the user can change text size and so forth, this will be hard to implement, unless you want to find a set of character widths for the font you use and calculate the exact width by summing the characters of the text string!
     
    krt, Jun 4, 2007 IP
  6. callagga

    callagga Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    thanks Mike/Krt

    This looks like a good fit to what I had in mind. Thanks for taking the time to post this and clarify there is not perfect javascript function to support exactly what I was after. In summary then the best I can do is probably:

    (a) constrain the amount of text for the area roughly at the server end
    (b) have a fixed DIV size for the content area (overflow hidden)
    (c) separate fixed size DIV area just below for the "more" field''

    Cheers
    Greg
     
    callagga, Jun 4, 2007 IP