How to snip a message?

@GurusGuruAug 03.2004

I have a page, the contents of which are called from a flat text file using a cgi script. One of the Fields is ‘Description’. The matter of this ‘Description’ field is usually more than 400 characters. What I want is that when the data of this ‘Description’ field is retrived, it should only show about 45 characters followed by ‘……’ and not the whole content (400 characters)

to post a comment

JavaScript

12 Comments(s) _↴

@AdamGundryAug 03.2004 — #You would be much better off changing the CGI script, not Javascript.

Adam

@GurusGuruauthorAug 03.2004 — #The page contains <%description%> which is replaced by its contents from a flat text file. Can't there be a simple javascript which will see that <%description%> is replaced by not more than 45 characters. There is also a link on the page that goes to a detailed page which shows the whole content of <%description%>.

@PittimannAug 03.2004 — #Hi!

Example:

[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Untitled</title>
 <script language="JavaScript" type="text/javascript">
 <!--
 str="0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 ";
 str+="0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 ";
 str+="0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 ";
 str+="0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 ";
 str+="0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 ";
 str+="0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123";
 alert(str.length)//length before
 str=str.substring(0,45)+'......';
 alert(str)//string after
 alert(str.length)//length after
 //-->
 </script>
 </head>
 <body>
 </body>
 </html>[/code]

Cheers - Pit

@GurusGuruauthorAug 03.2004 — #Thanks. Basically I am good at copy, cut & paste. Have no idea about javascript. I am reproducing the html of the page. Where do I add your script. I did try adding it on the top. Whenever I called the page, alert boxes popped up.

<div align="center">

<center>

<table border="0" cellpadding="0" cellspacing="0" width="500">

<tr>

<td><b><%Caption%></b> <br>

<font face="Verdana, Arial" size="2" color="#006699">

<%Description%> <br>

</font></td>

</tr>

</table>

</center>

</div>

@PittimannAug 03.2004 — #Hi!

Well, I have to say, that AdamGundry's advice is 100% correct. I was just assuming, that you know how to deal with your server side stuff in combination with js. Particularly, that you are capable of passing a string coming from the server side script to a js variable's value and that you only need to know, how to get the first 45 chars from that variable.

Seeing the code you posted now I would say: simply shorten the stuff with the appropriate command in your server side language. This would also avoid that users with js disabled would get the full length of the string in a container which is too small for it.

Regards - Pit

@AdamGundryAug 03.2004 — #Ouch. Font tags and unnecessary tables. Anyway, if you have to use JS you could try something like this in place of <%Description%>:

<script type="text/javascript">

var str = '<%Description%>';

str = (str.length > 45 ? str.substring(0, 45) + '......' : str);

document.write(str);

</script>

<noscript>

<%Description%>

</noscript>

This assumes that the description is only on one line, and contains no single quotes or JS special characters. Like I said, a much better solution is to do this on the server.

Adam

@CharlesAug 03.2004 — #[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<title>Example</title>

<script type="text/javascript">



</script>

</head>

<body>

<h4>Description</h4>

<p id="description">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. </p>

</body>

</html>

[/font]

@GurusGuruauthorAug 03.2004 — #Thanks.

The script is working fine.

@GurusGuruauthorAug 04.2004 — #Are the following JS special characters?

- . , ( ) _ $ # ? /

@CharlesAug 04.2004 — #With my version you don't have to worry about quotes or any special characters. And, even better, people without JavaScript will still have access to the information.

@GurusGuruauthorAug 04.2004 — #I tried with your script also. It doesn't work. I am reproducing what I did. I may be goofing up somewhere.

<script type="text/javascript">



</script>

<p id="description"><%Description%></p>

@CharlesAug 04.2004 — #That's odd, it works for me. (When you make as many mistakes as I, you check everything.) Some thoughts...

That won't work if you have any HTML inside that P element.

You may have some other JavaScript on the page that is interfering.

It would be a far better thing to simply set the size of the containing element and set its overflow property to "hidden".

It would be a far, far better thing to clip the string server side.

If all else fails, post the URL.

Also in #JavaScript _↴

how could i do this?cookie to remember popup image scalling

Success!

Help @GurusGuru spread the word by sharing this article on Twitter...

Tweet This

How to snip a message?

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to snip a message?

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴