Viewing Limiting large bodies of text with a 'More' arrow

  1. Portal Home
  2. Forum
  3. EverWeb
  4. General Discussion

Limiting large bodies of text with a 'More' arrow



User: Christopher 12 years ago
You know sometimes when you see a large movie synopsis, only part of it is displayed followed by "..." and a More arrow. Click the arrow and voila! - there's the rest. Here's an example:

http://trailers.apple.com/trailers/magnolia/europareport/

Is there a way we can do this in EasyWeb?

Chris

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Paul-RAGESW 12 years ago
Yes, you will need to use the HTML Snippet and the more link won't work within EasyWeb but will work once published.

Put the HTML Snippet onto your page and enter this code in there (Modifying the text with the HTML tags to say whatever you want it to say);

<div class="comment more">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum laoreet, nunc eget laoreet sagittis,
quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
Duis eget nisl orci. Aliquam mattis purus non mauris
blandit id luctus felis convallis.
Integer varius egestas vestibulum.
Nullam a dolor arcu, ac tempor elit. Donec.
</div>

Then go to the Inspector->Page Settings (first tab) and enter this code into the Head Code Field;

Note: The line at the top that reads var showChar = 100; you can change 100 to any number of characters you want to be able to display.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/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;
});
});</script>
<style>
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;
}
.comment {
}</style>

-------------------------------
Paul
EverWeb Developer
User: Christopher 12 years ago
Thanks! I'll let you know how it works.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 12 years ago
See this page for a working example in EasyWeb - with a few embellishments...

http://roddymckay.com/EasyWeb/test/jquery-more.html

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Yelena 12 years ago
Roddy, great post. I have one question though - how can I change the color of text in paragraph? No matter what I tried I can't change it from black to white....Thank you!

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: Roddy 12 years ago
Look for this at the beginning of the CSS...

.more-block p {
font: 15px "Trebuchet MS", Verdana, sans-serif;
line-height:22px;
margin-bottom:20px;
}
.more-block h3 {
font: 20px 'Trebuchet MS', verdana,sans-serif;
color: #000;
margin : 0;
padding: 0
}

Change it to this...

.more-block p {
font: 15px "Trebuchet MS", Verdana, sans-serif;
color: #FFF;
line-height:22px;
margin-bottom:20px;
}
.more-block h3 {
font: 20px 'Trebuchet MS', verdana,sans-serif;
color: #FFF;
margin : 0;
padding: 0

I added "color: #FFF;" to the paragraph styles and changed "color: #000;" to "color: #FFF;" in the h3 style.
If you don't specify a color in CSS it defaults to black.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Yelena 12 years ago
Certainly worked! Many thanks!!!

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3


Post Reply
You must login or signup to post.