CODEWITHSUNDEEP
javascriptjquery
samar
samar

Reputation: 135

How to make this JS function work for each div

I want to replace last visible word with span of each div.

I used following code. It works but only for first div & it messes up all next div. Here is jsfiddle: http://jsfiddle.net/samarpw/yfthoa5j/

var $div = $('div'),
    size = [$div.width(), $div.height()],
    words = $.trim($div.text()).split(/\s+/),
    word;

for (var i = 0, len = words.length; i < len; i++) {
    var $clone = $div.clone().text(words.join(' ')).insertAfter($div);
    $clone.contents().wrap('<span />');
    var $child = $clone.children('span');

    if ($child.width() <= size[0] && $child.height() <= size[1]) {
        word = words.pop();
        $clone.remove();
        break;
    }

    words.pop();
    $clone.remove();
}

$('.txt').html($('.txt').html().replace(word, "<span class='red'>"+word+"</span>"));

Upvotes: 0

Views: 97

Answers (1)

Asfan Shaikh
Asfan Shaikh

Reputation: 769

This jQuery Example might be helpful.. 

jQuery(document).ready(function($) {
	$('.txt').each(function(index, el) {

		// Text Container Selector
		var $txt = $(this);

		// Selector Current Top Position
		var txtPos = $txt.offset().top;

		// Selector Height
		var size = $txt.innerHeight();

		// Get Words Array from String
		var txt_str = $txt.text().split(' ');

		// Make Emplty Selector's content
		$txt.html(' ');

		// Default Value of Last Word Index
		var last_word_index = 0;

		// Loop throught Each Word Araay Element
		$.each(txt_str, function(index, el) {

			// Wrap Each Word with <span> tag to Compare Top Position Selector
			$txt.append('<span>'+this+' </span>');

			// Currently appended <span> tag Index
			var $txtSpan = $txt.find('span').eq(index);

			// Currently appended <span> tag Top Position
			var txtSpanPos = $txtSpan.offset().top;

			// Currently appended <span> tag Height
			var txtSpansize = $txtSpan.innerHeight();

			// Comparing currently appended <span> tag position with Selector and Getting First not visible character
			if (txtSpanPos >= txtPos+size-(txtSpansize/1.5) && last_word_index <= 0) {

				// Getting previous <span> tag index of not visible Word 
				last_word_index = index - 1;
			}
		});

		// Declare new string variable
		var new_str = '';

		// Loop throught Each Word Araay Element
		$.each(txt_str, function(index, el) {

			var new_word = this;

			// New String Last word is wrapped with Span if all words are visible
			if (last_word_index == 0) {
				last_word_index = txt_str.length-1;
			}

			// Only last visible word is wrapped with Span
			if (index == last_word_index) {
				new_word = '<span class="red">'+new_word+'</span>';
			}
			new_str += new_word+' ';
		});

		// Adding all new string in Selector
		$txt.html(new_str);
	});
});
.txt{
	width: 60px;
	height: 80px;
	overflow: hidden;
}
.red {
	color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="txt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
<br>
<div class="txt">this is great to test if it is working.</div>
<br>
<div class="txt">Another example to test code working or not.</div>

Upvotes: 1

Related Questions