javascript - Read more on Database result - Stack Overflow

admin 管理员组

文章数量: 1086019

Hi there my code is quite simple but Id like for the design purposes to keep everything neat , at the moment Im pulling all the description which is like Some could be huge others can be quite small , anyway to make it fair I decided to make a read more button and once I click it just expand on the text like , SO somehow to make it show the first 160 characters after that ... then ReadMore link button that when you click it expands and shows the whole text Heres my script that I use for now :

<p><?PHP echo $thismovie['description']; ?></p> <div style="text-align:right">

So I would like to know how this is done and if possible only using javascript, thanks !

Hi there my code is quite simple but Id like for the design purposes to keep everything neat , at the moment Im pulling all the description which is like Some could be huge others can be quite small , anyway to make it fair I decided to make a read more button and once I click it just expand on the text like , SO somehow to make it show the first 160 characters after that ... then ReadMore link button that when you click it expands and shows the whole text Heres my script that I use for now :

<p><?PHP echo $thismovie['description']; ?></p> <div style="text-align:right">

So I would like to know how this is done and if possible only using javascript, thanks !

• javascript
• php
• html
• mysql
• web

Share Improve this question Follow edited Jan 7, 2015 at 21:17 Jay Blanchard 34.4k1717 gold badges8080 silver badges126126 bronze badges asked Jan 7, 2015 at 21:12 MEXMEX 11911 silver badge1111 bronze badges 3

• Yes, you use javascript to achieve this. There are plenty of working examples readily available on the internet on how to achieve this. – Axel Commented Jan 7, 2015 at 21:20
• Yes there are but not when the result is min from mysql , I seem to be a newb at javascript and php not as great either ,and I did look for this before I posted this question Pulling results out of databse + expand text pulled aent easy – MEX Commented Jan 7, 2015 at 21:22
• It is easy. You simply output the entire description and hide the "extra" length of the description using javascript. If the intent is for the user to be able to click and show the whole description, you will need to load the whole description into the page. – Axel Commented Jan 7, 2015 at 21:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

While you could of course use PHP, another way is to use the text-overflow property of css correctly.

This method will put less strain on the server, especially when there are a bunch of descriptions on the page. Using PHP to concatenate every single one is not efficient and is not the correct way to do this.

Removing a class is much simpler. And you can add it back when you want to show less.

<style>
     .ellipsis {
         white-space: nowrap; 
         text-overflow: ellipsis; 
         overflow: hidden; 
         height: 14px;
     }
     .description {
         width: 300px;
         background: #ccc; 
         padding: 3px;
         margin-top: 30px;
         margin-bottom: 0;
     }
</style>

<!-- It is likely you would use a PHP loop for this but for illustration 
     purposes I've listed them out -->

<p class="description ellipsis"><?=$movie[0]['description']?></p>
<a href="#" class="read-more">Read More</a>

<p class="description ellipsis"><?=$movie[1]['description']?></p>
<a href="#" class="read-more">Read More</a>

<p class="description ellipsis"><?=$movie[2]['description']?></p>
<a href="#" class="read-more">Read More</a>

<!-- use as many as you want with no additional strain on server. -->

WITH JQUERY... http://jsfiddle/kx2nbv3z/

<!-- Include jQuery -->
<script src="//ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document)
        .on('click','.read-more',function() { 
            $(this).removeClass('read-more').addClass('show-less').html('Show Less').prev('.description').removeClass('ellipsis'); 
        })

        .on('click','.show-less',function() { 
            $(this).removeClass('show-less').addClass('read-more').html('Read More').prev('.description').addClass('ellipsis'); 
        })
    ;
</script>

WITH PURE JAVASCRIPT... http://jsfiddle/8wsbw0u8/

<script>


if (document.body.addEventListener) {
    document.body.addEventListener('click',yourHandler,false);
}
else {
    document.body.attachEvent('onclick',yourHandler);//for IE
}

function yourHandler(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    prev = target.previousSibling.previousSibling;
    if (target.className.match(/read-more/)) {
        target.className="show-less";
        target.innerHTML = "Show Less";
        prev.setAttribute("class","description");
        console.log(prev);
    }
    else if (target.className.match(/show-less/)) {
        target.className="read-more";
        target.innerHTML = "Read More";
        prev.setAttribute("class","description ellipsis");
    }
}
</script>

for PHP way:

$firstdesc=substr($thismovie['description'], 0, 160);

and when read-more pressed.

$totaldesc=substr($thismovie['description'], 160);

Ofcourse you can do it with Javascript too.

use the css style `text-overflow: ellipsis; and jquery for the full feature.

$('#read-more').click(function() {
    $('#description').css('width','100%');
});

#description {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="description">This is some long text that will not fit in the box</div> <a id="read-more" href="#">Read More</a>

本文标签： javascriptRead more on Database resultStack Overflow