Funny you should ask that. I was just playing with the code because I thought there should be options. A number of things have changed in order to get things to line up right using an arbitrary index that could split words. I also added a showspeed option to enhance the effect.
Anyways, here's the new script configured how I think you may want it:
Code:
<script type="text/javascript">
// Read More Script (c)2011 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
jQuery('head').append('<style type="text/css">.item, .hide, .story {display: none;}</style>');
jQuery(function($){
var defaultword = false, // set to default 'word' (quoted) to split on, or false (unquoted) to use default index
defaultindex = 50, // set to default index (unquoted positive integer) to split on if default word is set to false or is not found in the content
showspeed = 'slow'; // 'fast', 'normal', or 'slow', or unquoted integer representing milliseconds
////////////////////// No Need to Edit Beyond Here //////////////////////
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if($.browser.version < 8){
showspeed = '';
}
@end @*/
$('.item').each(function(){
var $t = $(this), html = $t.html(), word, index,
splitindex = $t.attr('data-splitindex') || ((word = $t.attr('data-splitword')) && (index = html.indexOf(word)) > -1? index :
defaultword && (index = html.indexOf(defaultword)) > -1? index : defaultindex);
$t.empty().append(html.substring(0, splitindex) + '<span class="more"> </span><a href="#" class="more">read more . . .</a><span class="story">' +
html.substring(splitindex) + ' </span><input type="button" class="hide" value="Hide Details">').css({display: 'block'});
});
$('.hide').click(function(e){
e.preventDefault();
$(this).parent('.item').find('.story, .hide').hide().end().find('.more').show();
});
$('.more').click(function(e){
e.preventDefault();
$(this).parent('.item').find('.more').hide().end().find('.story, .hide').show(showspeed);
});
});
</script>
Notes:
Because a p element will self close if it encounters a block level element within itself, it's safer to use div for the elements with class="item":
Code:
<div class="item"> <? echo ($profile['great_vacation'])?> </div>
Ideally though, there should be no html tags in <? echo ($profile['great_vacation'])?>. If there are and you use an arbitrary index, they can get truncated. Even with a splitword or defaultword, the control tags for the script could end up inside other elements, which could cause unexpected display issues or break the script.
If you want no animation as the content is revealed, set showspeed = ''
If using a word (defaultword or the data-splitword) and it's not in the content, the script will use the defaultindex.
There are optional data-splitword or data-splitindex attributes for the class="item" tags. These don't have to be used. If they are used, they override the defaults in the script. This demo shows how to use them:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
// Read More Script (c)2011 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
jQuery('head').append('<style type="text/css">.item, .hide, .story {display: none;}</style>');
jQuery(function($){
var defaultword = 'happening', // set to default 'word' (quoted) to split on, or false (unquoted) to use default index
defaultindex = 20, // set to default index (unquoted positive integer) to split on if default word is set to false or is not found in the content
showspeed = 'slow'; // 'fast', 'normal', or 'slow', or unquoted integer representing milliseconds
////////////////////// No Need to Edit Beyond Here //////////////////////
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if($.browser.version < 8){
showspeed = '';
}
@end @*/
$('.item').each(function(){
var $t = $(this), html = $t.html(), word, index,
splitindex = $t.attr('data-splitindex') || ((word = $t.attr('data-splitword')) && (index = html.indexOf(word)) > -1? index :
defaultword && (index = html.indexOf(defaultword)) > -1? index : defaultindex);
$t.empty().append(html.substring(0, splitindex) + '<span class="more"> </span><a href="#" class="more">read more . . .</a><span class="story">' +
html.substring(splitindex) + ' </span><input type="button" class="hide" value="Hide Details">').css({display: 'block'});
});
$('.hide').click(function(e){
e.preventDefault();
$(this).parent('.item').find('.story, .hide').hide().end().find('.more').show();
});
$('.more').click(function(e){
e.preventDefault();
$(this).parent('.item').find('.more').hide().end().find('.story, .hide').show(showspeed);
});
});
</script>
<style type="text/css">
.item {
margin: 4px;
}
</style>
</head>
<body>
<div class="item" data-splitword="London">Some Tantalizing Headline happening in London today as those a cappella pessimists benignly agree upon our random parabolas. That appraising performer authoritatively posts your lively planetesimals. Those lugubrious pekingese ably pat those abundant mice. That big planet austerely pokes the rambling goblins. His minuscule megaphones accidentally pray to your abiding fructose. Our miniature moles accessibly add to their befuddling halters. Their absorbing monsters augustly allow much about the mistrusting cats. Those rainy antidisestablishmentarians auspiciously heat those accusing mnemonics. Your approving pitchers believably help the accommodating pheasants. Our ranting boys automatically acknowledge those arrogant partridges.</div>
<div class="item" data-splitindex="55">Another Tantalizing Headline happening in Brussels today as that rasping artist benevolently apologizes for your appeasing plantations. An adjacent palindrome already pastes your aching monkeys. Your beautiful philosophers abusively amuse the aspiring men. An admonishing palette aberrantly advises their befitting mosquitoes. The raspy poinsettias ambivalently accept that mimicking mountain. The astonishing partisans abominably heap up his misleading paradigms. His rapid plants autocratically plug the better players. His becalming mugs angularly hook those ashamed banshees. A lingering parrot angrily hovers over her astounding pigs. A rattling mule abhorrently peels those admiring guffaws.</div>
</body>
</html>
Toggle script to show rest
Reply With Quote
Bookmarks