dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Tumblr 'more' tag

  1. #1
    Join Date
    May 2008
    Posts
    1

    Tumblr 'more' tag

    Hello,

    I am trying to accomplish a 'more' tag with Tumblr. So, if there are x amount of characters/words in a class then it only displays x amount of characters and adds a 'more' tag at the end.

    When the more tag link is clicked it should display the other text, like a collapsable div etc.

    I have googled a few scripts, but all require you to enclose the text you want hidden in a div etc, however the tumblr 'html view' for posting strips all css information, so the calculations need to be made in the main document or just with javascript as it doesn't strip away javascript code.

    I hope this is making sense. Any help would be greatly appreciated.
    Regards.

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Basic TAB display</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    function more(el,le){
    	el.innerHTML = el.innerHTML.replace(new RegExp("(.{"+le+"})(.*)","ig"),'$1<span style="display:none;">$2</span><a href="#" onclick="handle(this);">More</a>');
    }
    function handle(el){
    	if (el.innerHTML==="More"){
    		el.parentNode.getElementsByTagName("span")[0].style.display="inline";
    		el.innerHTML="Less";
    	}
    	else {
    		el.parentNode.getElementsByTagName("span")[0].style.display="none";
    		el.innerHTML="More";
    	}
    }
    window.onload = function(){
    	more(document.getElementById("whatever"),10);
    }
    </script>
    </head>
    <body>
    <div id="whatever">
    Here is a really long piece of text, but I think that I will just cut it short early.
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles