Web app & JS: How to trim long text string using javascript

[topelovely]

Am not a good js coder. Please I want to format a long {tag_name} to  display few letters of entered by the user using js:

This is what I got over the internet, kindly help.

This is my code

<script>

var string = "{tag_name}";

var length = 6;

var trimmedString = string.substring(0, length);

document.write(trimmedString)

</script>

<h1 class="newshead">{tag_name}</h1>

Regards.

[TheBCMan]

You can't mix and match raw BC templates with Javascript as Javascript excutes on the compiled BC HTML template.

This is how to do it with JS Jquery:

<h1 class="newshead" style="display:none">{tag_name}</h1>

<script>

var string = $('.newshead').html();

var length = 6;

var trimmedString = string.substring(0, length);

$('.newshead').html(trimmedString).show();

</script>

This wont display the text until it is "trimmed"

or even shorter

<h1 class="newshead" style="display:none">{tag_name}</h1>

<script>

$('.newshead').html($('.newshead').html().substring(0,6)).show();

</script>

[Liam Dilley]

If he is doing inline scripts then tags will render, so yes he can. Just not the correct code to use.

Your method will work inline or not, and its actually better to not do inline full stop.

[TheBCMan]

Inline script or not it will work perfectly fine and I've done it hundreds of times to re-write BC on the fly from an HTML point of view.

Read his question he wants to trim a BC string dynamically from existing data in the database

[Liam Dilley]

erm no, he just wants shorten his headers if it gets to long.

[TheBCMan]

I get what you mean, but there is nothing wrong with my answer it would work perfectly fine. If you use allow BC to re-write your JS you lose all portability.

I mean if you want to do it your method:

<script>

var string = "{tag_name}";

var length = 6;

var trimmedString = string.substring(0, length);

document.write('<h1 class="newshead">'+trimmedString+'</h1>');

</script>

But that is messy as hell

<h1 class="newshead"></h1>

<script>

$('.newshead').html('{tag_name}'.substring(0,6));

</script>

Would be another way. But I don't recommend this method, as dynamic JS isn't so portable and for larger things and debuging becomes a pain (or at least slower) at any sort of scale (at least IMO), but if you were in a bind there are some other options.

[Liam Dilley]

I would not to it either way. I would not look to mess with the shortning at all. I would ask the right question of "what are you trying to achieve".
This is a bad solution to a problem where his title is spilling over.

In terms of large scale and debugging you 100% defiantly would never code inline as above in any shape or form. If I was with a team who understood all my scripting would be in classes, it a level down but very portable and debugging is easy. That is why I wrote this:
http://forums.adobe.com/docs/DOC-2964
As a begniner step of doing things properly.

toplovely - why do you want this? Pretty sure with just some css tweaks we can solve the issue you have.

[topelovely]

Hi Liam, longest time. I have been following  your contributions with TheBCMan and it has been quite informative. The jquery stuff need some studying on my part. On your question, 'Why do you want this' . I'm working on a news website in which web app is used extensively. We want the headlines of each news item to be trimmed in order to make things line up well in the front-end. Kindly see below. You can see how the headlines are shorten and consistently lined up.

Thanks has you (TheBCMan & Liam) look into this.

Regards

[Liam Dilley]

The headline is your biggest point and you dont really want to have part of it css hidden etc as search engines do pick up on that.

What you should do really is either in terms of css...

Lower the font size of the headers, look to keep them shorter and maybe a height for that element so its only ever two lines. With a fixed height it and overflow:hidden you would achieve the same thing without javascript but content would still be hidden/cut off.

If you make a script that finds the height of the tallest element in a group you can have the others match that height.

Longer posts etc is something to be expected though and a good layout design means it is fine, just a few css tweaks and your layout looks nice and clean and still easy to read. You could also look into things like isotope (google it) as well.

[TheBCMan]

It the title are of unknown length from the BC database I suggest to do what I originally suggested.

<!-- Hide all the headers initally -->

<style>

.newshead{ display:none;}

</style>

<h1 class="newshead">{tag_name}</h1>

<script>

// loop through all the items, trim them and show them as quick as possible

$(document).ready(function() {

          $.each($('.newshead'), function(i,e) {

                      $(e).html($(e).html().substring(0,6)).show();

          });

});

</script>

For the cleanest results put the CSS and JS into your own files otherwise Liam will complain

But for the sake of the example and to make it simple.

[Liam Dilley]

Title BC, Database.. lol.

CSS, well ogranised content and do it the right way actually better, as in review the problem and provide the layout options for the best user experience.

[TheBCMan]

I don't see you posting any code to help the guy. Please show me in pure CSS without Javascript how to trim the titles and I'll eat my hat.