Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    jquery: view more/ view less text

    Hi,
    How can i do a text extract like this,

    http://www.apple.com/trailers/universal/despicableme/

    where u can click to view more text and then click view less when u like to...

    thanks,
    Lau

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Quote Originally Posted by lauthiamkok View Post
    Hi,
    How can i do a text extract like this,
    I don't know what you think "text extract" means.

    But that's just an 'accordion' function. In addition to jQuery, you might have to load various 'plug-ins' for jQuery, other scripts. Just look at the documentation for those, or maybe ask someone in the Javascript 'Frameworks' board? MooTools should have similar. It's a pretty common effect.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Like this:-

    Code:
    <body onload = "toggle()">
    
    <div id = "theText"></div>
    <p  id = "but1" style="color:red;font-family:Arial; font-size:10pt; position:absolute; right:95px"; onclick = "toggle()">Show More</p>
    
    <script type = "text/javascript">
    
    var tflag = 0;
    function toggle() {
    var txt = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit erat sed enim convallis tincidunt. Vivamus vestibulum hendrerit blandit. Donec sagittis magna justo. Sed vehicula auctor mauris quis dictum. Aliquam erat volutpat. Phasellus at quam nibh, sed dictum neque. Maecenas lectus arcu, sagittis quis dapibus sed, lobortis id velit. Vestibulum ut tortor neque. Quisque porttitor ornare massa sit amet ornare. Vivamus arcu augue, fringilla in adipiscing eget, viverra sit amet purus. Praesent euismod, velit ac aliquet elementum, velit lectus laoreet magna, vel auctor diam libero non turpis. Fusce eu sapien in enim dapibus iaculis. Cras et molestie orci. Sed nec est elit, eu suscipit quam." +  "<br><br>" +
    "Phasellus accumsan aliquam quam, vitae fermentum purus pellentesque quis. Aliquam viverra lacus at tortor scelerisque vestibulum eget vitae orci. Etiam volutpat neque non erat facilisis egestas. Duis vulputate lacus eget nulla mattis vulputate. Fusce vehicula libero dolor, vitae tempor nulla. "
    
    if (tflag == 0) {  // show first 399 characters
    document.getElementById("theText").innerHTML = txt.substring(0,399) + "......";
    tflag = 1;
    document.getElementById("but1").innerHTML = "Show More";
    }
    else {
    document.getElementById("theText").innerHTML = txt;
    document.getElementById("but1").innerHTML = "Show Less";
    tflag = 0;
    }
    }
    </script>

    "To a young heart everything is fun" - Charles Dickens
    Last edited by Philip M; 07-19-2009 at 04:42 PM.

  • #4
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Like this:-

    Code:
    <body onload = "toggle()">
    
    <div id = "theText"></div>
    <p id = "but1" style="color:red; font-family:Arial; font-size:10pt"; onclick = "toggle()">Show More</p>
    
    
    <script type = "text/javascript">
    
    var tflag = 0;
    function toggle() {
    var txt = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit erat sed enim convallis tincidunt. Vivamus vestibulum hendrerit blandit. Donec sagittis magna justo. Sed vehicula auctor mauris quis dictum. Aliquam erat volutpat. Phasellus at quam nibh, sed dictum neque. Maecenas lectus arcu, sagittis quis dapibus sed, lobortis id velit. Vestibulum ut tortor neque. Quisque porttitor ornare massa sit amet ornare. Vivamus arcu augue, fringilla in adipiscing eget, viverra sit amet purus. Praesent euismod, velit ac aliquet elementum, velit lectus laoreet magna, vel auctor diam libero non turpis. Fusce eu sapien in enim dapibus iaculis. Cras et molestie orci. Sed nec est elit, eu suscipit quam." +  "<br><br>" +
    "Phasellus accumsan aliquam quam, vitae fermentum purus pellentesque quis. Aliquam viverra lacus at tortor scelerisque vestibulum eget vitae orci. Etiam volutpat neque non erat facilisis egestas. Duis vulputate lacus eget nulla mattis vulputate. Fusce vehicula libero dolor, vitae tempor nulla. "
    
    if (tflag == 0) {  // show first 399 characters
    document.getElementById("theText").innerHTML = txt.substring(0,399) + "......";
    tflag = 1;
    document.getElementById("but1").innerHTML = "Show More";
    }
    else {
    document.getElementById("theText").innerHTML = txt;
    document.getElementById("but1").innerHTML = "Show Less";
    tflag = 0;
    }
    }
    </script>

    "To a young heart everything is fun" - Charles Dickens
    thank you...

    im goin to try to modify it into jquery and with some animation like apple's.

    thanks!

  • #5
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    not able to make the more text slide down...

    Code:
    var tflag = 0;
    function toggle() 
    {
    var txt = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit erat sed enim convallis tincidunt. Vivamus vestibulum hendrerit blandit. Donec sagittis magna justo. Sed vehicula auctor mauris quis dictum. Aliquam erat volutpat. Phasellus at quam nibh, sed dictum neque. Maecenas lectus arcu, sagittis quis dapibus sed, lobortis id velit. Vestibulum ut tortor neque. Quisque porttitor ornare massa sit amet ornare. Vivamus arcu augue, fringilla in adipiscing eget, viverra sit amet purus. Praesent euismod, velit ac aliquet elementum, velit lectus laoreet magna, vel auctor diam libero non turpis. Fusce eu sapien in enim dapibus iaculis. Cras et molestie orci. Sed nec est elit, eu suscipit quam." +  "<br><br>" +
    "Phasellus accumsan aliquam quam, vitae fermentum purus pellentesque quis. Aliquam viverra lacus at tortor scelerisque vestibulum eget vitae orci. Etiam volutpat neque non erat facilisis egestas. Duis vulputate lacus eget nulla mattis vulputate. Fusce vehicula libero dolor, vitae tempor nulla. "
    
    if (tflag == 0) {  // show first 399 characters
    	var text = txt.substring(0,399) + "...";
    	$('#theText').html(text);
    	//$('#theText').slideUp();
    	$('#but1').html('Show More');
    	tflag = 1;
    	}
    else {
    	var text1 = txt.substring(0,399);
    	var text2 = txt.substring(399,10399);
    	$('#theText').append('<div class="test">'+text2+'<div>');
    	var text2 = $('.test').css({display:'none'}).slideDown();
    	$('#theText').html(text1 + text2);
    	$('#but1').html('Show Less');
    	tflag = 0;
    	}
    }
    does anyone have any ideas...?

    thanks

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    That is not what you asked for.

    Google for Javascript Accordion Scripts and especially
    http://tutorialblog.org/10-javascrip...rdion-scripts/
    http://www.java2s.com/Code/JavaScrip...dSlideDown.htm
    Last edited by Philip M; 07-19-2009 at 05:33 PM.

  • #7
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Just kick out the line

    Code:
    	$('#theText').html(text1 + text2);
    It's effectively overwriting the slidy thing you put in.

    Also, in this line
    Code:
    	var text2 = $('.test').css({display:'none'}).slideDown();
    if you really want to use a variable, call it something different. text2 is already in use, and that can cause confusion.

    But you don't really need a variable there, you can just put it like this:
    Code:
    $('.test').css({display:'none'}).slideDown();

  • #8
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    i have made it thanks,

    http://lauthiamkok.net/tmp/jquery/jq...ore_less_text/

    but maybe some code master can write this better than me. here is the entire code,

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
    <script type = "text/javascript">
    $(document).ready(function(){
    	var text = $('#content').html();
    	var extract = text.substring(0,300) + "...";
    	$('#content').html(extract);
    	$('#button').html('<a href="#" class="more">Show More</a>');
    	more(text);					
    });	
    
    this.more = function(text){	
    $('.more').click(function () {
    		$('#content').html(text);
    		$('#content').append('<div class="position"></div>');
    		position();
    		$('#button').html('<a href="#" class="less">Show Less</a>');
    		return false;
    	});
    }
    
    this.position = function(){	
    	var p = $(".position");
    	var position = p.position();
    	var pos_top = position.top;
    	$('#content').animate({height:pos_top+'px'}, function(){
    		less();
    	});	
    }
    
    this.less = function(){	
    $('.less').click(function () {
    	$('#content').animate({height:'100px'}, function(){
    		var text = $('#content').html();
    		var extract = text.substring(0,300) + "...";
    		$('#content').html(extract);
    		$('#button').html('<a href="#" class="more">Show More</a>');
    		more(text);
    		});	
    		return false;
    	});
    }
    </script>
    <style>
    
    div {
    	clear:both;
    	}
    	
    p {
    	margin:0px 0px 20px 0px;
    	clear:both;
    	}
    	
    #content{ 
    	height:100px; 
    	width:400px; 
    	overflow:hidden; 
    	border: 1px solid #0000FF;
    	}
    	
    .less{
    	color:#FF0000;
    	}
    	
    .more{ 
    	font-weight:bold;
    	}
    	
    
    </style>
    
    </head>
    <body>
    <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit erat sed enim convallis tincidunt. Vivamus vestibulum hendrerit blandit. Donec sagittis magna justo. Sed vehicula auctor mauris quis dictum. Aliquam erat volutpat. Phasellus at quam nibh, sed dictum neque. Maecenas lectus arcu, sagittis quis dapibus sed, lobortis id velit. Vestibulum ut tortor neque. </p>
    
    <p>Phasellus accumsan aliquam quam, vitae fermentum purus pellentesque quis. Aliquam viverra lacus at tortor scelerisque vestibulum eget vitae orci. Etiam volutpat neque non erat facilisis egestas. Duis vulputate lacus eget nulla mattis vulputate. Fusce vehicula libero dolor, vitae tempor nulla. Vestibulum ut tortor neque. Quisque porttitor ornare massa sit amet ornare.</p>
    </div>
    
    <div id="button"></div>
    
    </body>
    
    </html>


  •  

    Posting Permissions

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