Dynamically shortened Text with “Show More” link in Outsystems

Dynamically shortened Text with “Show More” link in Outsystems

  

Hi there,


I want to use these following CSS and Javascript inside Outsystems. 

Anyone has an idea how to put it in.


here is the code

CSS

a {
color: #0254EB
}
a\:visited {
color: #0254EB
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;
}
.comment {
width: 400px;
background-color: #f0f0f0;
margin\: 10px;
}

Javascript

$(document).ready(function() {
var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();

if(content.length > showChar) {

var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);

var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

$(this).html(html);
}

});

$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});


I want to re-use it so, should I use webblock? 

How can I put the document(in my case, it will be 'longtext.text') inside javascript?


Thank you in advance.


More detail: 

http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

Solution

Hi,

Here's a sample of how to do it. Basically, yes, you create a webblock with the required CSS and JavaScript. It also has an input parameter which is the text to be displayed.

I hope this helps.

Solution

Thank you so much! 

This is what I am looking for. 


Aurelio Santos wrote:

Hi,

Here's a sample of how to do it. Basically, yes, you create a webblock with the required CSS and JavaScript. It also has an input parameter which is the text to be displayed.

I hope this helps.