Selecting part of a story for display

Say, i have a field that store stories, how do i
select and display only part of a story, while
providing a link that will fetch out the whole
story like it’s done in news sites. I know the
LEFT fuction can be used for something like that,
but i don’t think that’s what they use.LEFT will
select a fixed number of characters for all the
stories and the displayed parts in some cases may
not make sense.

they use a second column, typically VARCHAR(255), and they write a special synopsis of the story in there

Damn boy, I just saw your picture with your book & I know you must have been a stud back in the day. :eek: Have you ever been on TV because I could swear I’ve seen you before, or are you a famous writer or something?

They could maintain a separate summary of the story.

I’ve also seen stories, after they have been extracted from the db, expand along these lines

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>read more</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

window.onload=function() {
var read = document.body.getElementsByTagName('p');
for(var i=0; i<read.length; i++) {
    if(read[i].className=='read') {
        read[i].className+=' less';
        
        var more=document.createElement('span');
        more.appendChild(document.createTextNode('Read more ...'));
        more.className='readmore';
        more.onclick=function(){moreLess(this);};
        read[i].appendChild(more);
        }
    }
}
 
function moreLess(obj) {
var cn=obj.parentNode.className;
var txt='';
if(cn.indexOf('less')!=-1) {
cn=cn.replace(/less/g,'more');
txt='Read less ...';
}
else {
cn=cn.replace(/more/g,'less');
txt='Read more ...';
}
obj.parentNode.className=cn;
obj.firstChild.data=txt;
}
</script>
<style type="text/css">
body {
font-size:80%;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
}

.read {
position:relative;
width:25em;
border:1px solid #9cf;
padding:0.5em;padding-bottom:1.2em;
} 

.more {
height:auto;
}

.less {
height:4em; /* lines of text shown + link */
overflow:hidden;
}

.readmore {
position:absolute;
width:25em;
bottom:0;left:0;
cursor:pointer;
color:blue;
background:#fff;
padding:0 0 0 0.5em;
}
</style>
</head>
<body>

<p class="read">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.</p>
<p class="read">Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

</body>
</html>

whaddya mean, back in the day? what’s wrong with the way i look now? :smiley: :smiley:

famous writer? ha ha – i wish!!

:slight_smile:

You could use SUBSTRING_INDEX, which is way better than the LEFT since you can set the number of words instead of characters


  SELECT 
      your_field, 
  ,   SUBSTRING_INDEX(your_field, ' ' , 50) AS shortDesc
  FROM your_table

nice one, donboe, that looks almost like something i woulda wrote

btw, you’ve got consecutive commas there

:slight_smile:

another option I’ve seen used is along these lines

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
ul {
list-style-type: none}
.more_content {
margin: 10px 0px 0px 50px;
padding: 5px 5px 5px 5px;
width: 200px;
height: 100px;
border: 1px solid black;
overflow: auto;
display: none}
</style>
<script type="text/javascript">
function showHideMore(link_id,elemId) {
    var linkObj = document.getElementById(link_id);
    var contObj = document.getElementById(elemId);
    var status = (contObj.style.display == 'block')? 'none' : 'block';
    //display/hide the more content for this elemId
    contObj.style.display=status;
    //change the link innerHTML
    linkObj.innerHTML = (status == 'block')? 'Show less' : 'Show more';
}
</script>
 
</head>
<body>
<div>
    <ul>
        <li>
           <div>
               <a id="m1_link" href="#" onclick="showHideMore(this.id,'m1_cont'); return false;">Show more</a>
               <div id="m1_cont" class="more_content">More 1 content</div>
           </div>
        </li>
        <li>
           <div>
               <a id="m2_link"  href="#" onclick="showHideMore(this.id,'m2_cont'); return false">Show more</a>
               <div id="m2_cont" class="more_content">More 2 content</div>
           </div>
        </li>
        <li>
           <div>
               <a id="m3_link"  href="#" onclick="showHideMore(this.id,'m3_cont'); return false;">Show more</a>
               <div id="m3_cont" class="more_content">More 3 content</div>
           </div>
        </li>
        <li>
            <div>
               <a id="m4_link"  href="#" onclick="showHideMore(this.id,'m4_cont'); return false;">Show more</a>
               <div id="m4_cont" class="more_content">More 4 content</div>
           </div>
        </li>
    </ul>
</div>
 
</body>
</html>

I just saw the commas rudy thank you for that :wink: I know you like SUBSTRING_INDEX, so do I :slight_smile:

Thanks folks.