"Read More>>" link ?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
nits4u
Forum Newbie
Posts: 15
Joined: Tue Jun 23, 2009 3:44 am

"Read More>>" link ?

Post by nits4u »

how to provide "read more" link to a long article ?

actually i don't have any idea how it is done, so i post it here rather than in any specific section.
User avatar
Bill H
DevNet Resident
Posts: 1136
Joined: Sat Jun 01, 2002 10:16 am
Location: San Diego CA
Contact:

Re: "Read More>>" link ?

Post by Bill H »

If you're talking about doing this on a blog, and you use blogger, I have found this method to be the most workable:
http://www.eblogtemplates.com/how-to-ad ... osts-link/
nits4u
Forum Newbie
Posts: 15
Joined: Tue Jun 23, 2009 3:44 am

Re: "Read More>>" link ?

Post by nits4u »

nope m not using it in any blog.
in new site.. :)
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: "Read More>>" link ?

Post by omniuni »

Well, to do it with JavaScript, anyway...

Add to the header:

Code: Select all

<script type="text/javascript">
        function changeClass(targetID, classA, classB){
                var node = document.getElementById(targetID);
                var currentClasses = node.className.split(' ');
                var currentFirstClass = currentClasses[0];
                if(currentFirstClass == classA){
                    currentClasses[0] = classB;
                }else if(currentFirstClass == classB){
                    currentClasses[0] = classA;
                }
                
                node.className = currentClasses.join(' ');
            }
        </script>
 
Make sure you have CSS Classes for "Hide" which sets the display to "none" and one for "show". Personally, I have two; "showInline" and "showBlock" depending on how I need to set the "display: blah;" in the CSS. Oh! And make sure your show and/or hide class is the first one listed!

And then in your page it looks like this:

Code: Select all

 
<span onClick="changeClass('div_unique_id', 'showBlock', 'hide');" style="cursor: pointer;">Show More</span>
<div id="div_unique_id" class="hide">
Your Text to Show and Hide...</div>
Last edited by Benjamin on Mon Jun 29, 2009 10:32 am, edited 1 time in total.
Reason: Changed code type from text to javascript.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: "Read More>>" link ?

Post by pickle »

Do you want to do this client-side, as in, when they click "Read More>>" the article expands instantly? If so, I'll move this to the "Javascript" forum.
Or server-side, as in, when they click "Read More>>" they get taken to another page that shows the whole article? If so, I'll move this to the "PHP - Code" forum.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
nits4u
Forum Newbie
Posts: 15
Joined: Tue Jun 23, 2009 3:44 am

Re: "Read More>>" link ?

Post by nits4u »

@ client side ....
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: "Read More>>" link ?

Post by omniuni »

Did my code work for you Nits?
nits4u
Forum Newbie
Posts: 15
Joined: Tue Jun 23, 2009 3:44 am

Re: "Read More>>" link ?

Post by nits4u »

omniuni wrote:Did my code work for you Nits?

hey it works...
actually i made a spelling mistake while using it. :|

thanx alot buddy . :D
Post Reply