SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to realize this effect ?

    Hi,
    i'm not sure this is the right forum, so in case it is not, please tell me what language I should use to create this effect:

    On my frontpage, I have a long text, much to long. I would like after the first paragraph to have a "Read more link". When user click on it, it will instantly show the rest of the text. Is this javascript ? Ajax ?

    How to do this ?

    Thanks,
    Koros

  2. #2
    SitePoint Zealot krt's Avatar
    Join Date
    Sep 2005
    Location
    Australia
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is JavaScript but it can also be AJAX (though it does not seem to be required - it can be helpful though, one advantage is saving bandwidth; if you do not use AJAX, all the "read more" content is loaded but not shown)

    So you would have the truncated text followed by the "read more" link and then the hidden text.

    Code:
    <p>The first bit of the content. <a href="js-fallback-maybe?" onclick="document.getElementById('full_text').style.display = 'inline'; return false;">Read more</a>. <span style="display: none;">The remainder of the content</span></p>
    Please note that the above is just a proof of concept. I advise not using inline behaviour and CSS (I recommend moving this in with your CSS/JS). Also, document.getElementById would be replaced with a wrapper that allows for more cross browser compatibility.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Ontario Canada
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also use a div with the CSS property "overflow:hidden" to cut off the text you want to hide then show it with Javascript when your read more button is clicked.

    Here is a demo:

    HTML Code:
    <style type="text/css" media="screen">
    
        #article {
            width: 300px;
            height: 100px;
            overflow: hidden;
        }    
    
    </style>
    
    <script type="text/javascript">
        
        function toggleArticle( that )
        {
            // grab the article div
            var article = document.getElementById('article');
            
            // show the whole article
            article.style.overflow = 'visible';
            
            // hide the read more button
            that.style.display = 'none';
            
            // disable the HTML link
            return false;
        }
        
    </script>
    
    <div id="article">
    
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    </div>
    
    <a href="#" onclick="return toggleArticle(this)">Read More</a>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •