CODEWITHSUNDEEP
jquery
Val Do
Val Do

Reputation: 2695

Hide character in jquery

I need hide character after 35 and when I hover text show full text help me

<a class="dep_buttons" href="#"> something text something text something text something text something text something text </a>

$('.dep_buttons').mouseover(function () { 
    if($(this).text().length > 30) {
       $(this).stop().animate({height:"150px"},150);
}
})
$(".dep_buttons").mouseout(function(){
    $(this).stop().animate({height:"40px"},150);
});

Upvotes: 6

Views: 201

Answers (3)

Pramod
Pramod

Reputation: 141

Here is Demo

I used slice method of Javascript.

$(function(){
   var text = $('.dep_buttons').text();         
    var rem = text.slice(29, $('.dep_buttons').text().length);
text = text.replace(rem,"");
    var span = text + " <span class='toggleText'>"+rem+"</span>"            
$('.dep_buttons').text("").append(span);    
    $('.dep_buttons').mouseenter(function () {             
      $(this).find(".toggleText").stop().animate({opacity:1},500);
   });
   $(".dep_buttons").mouseleave(function(){             
      $(this).find(".toggleText").stop().animate({opacity:0},500);
    });
})

Upvotes: 2

guli
guli

Reputation: 1183

Do this like that :

var text = $('.dep_buttons').text();
if(text.length > 35) {
    var subText = text.substring(0,35) + '...';
    $('.dep_buttons').text(subText);
    $('.dep_buttons').mouseover(function () { 
        $('.dep_buttons').text(text);    
    });
    $(".dep_buttons").mouseout(function(){
        $('.dep_buttons').text(subText);
    });
}

Fiddle

Upvotes: 2

P.Sethuraman
P.Sethuraman

Reputation: 715

Demo FIDDLE

Jquery

    $(function () {
    $('.dep_buttons').each(function () {
            var stringText = $(this).text().trim();
            var substringText=stringText.substring(stringText,35);
            var remainingText=stringText.substr(35);
        $(this).html(substringText);
         $('.dep_buttons').mouseover(function () { 
                $(this).find('a').show();
          }).mouseout(function(){
                $(this).find('a').hide();
            });

        $('<a style="display:none;">'+remainingText+'                 </a>').appendTo($(this));
        });
});

Upvotes: 4

Related Questions