October 22, 2015

Split a large content in previous next in jq

Hello guys, I was stuck with a problem of limited division size and i don’t wanted the scroll bar to mesh up my designs so I needed to┬áSplit a large content in previous next in jq. I also wanted this to be work with a class to follow so I write some codes to short this out.

have a look to Example

https://jsfiddle.net/shakalya/hr9wezvf/

You can follow the code below:

$( document ).ready(function() {
var contentCollection = $(“.allcontent”);
contentCollection.each(function() {
var obj= $(this);
var contentBlocks = $(this).text().replace(/.{500}\S*\.\s+/g, ‘$&@’).split(/\.\s+@/);
var contentBlocksLength = contentBlocks.length;
obj.html(”);
//alert(contentBlocksLength);
$.each(contentBlocks, function( index, value ) {
obj.append($(‘<div class=”textBlock”>’ + value + ((index != contentBlocksLength – 1) ? ‘.’ : ”) + ‘<div class=”contentNavigation”><a class=”pre”><</a> <a class=”next”>></a></div></div>’));
});
obj.find(‘.textBlock’).first().addClass(‘active’);

obj.find(‘.next’).on(‘click’, function () {
if (!obj.find(‘.textBlock.active’).is(‘:last-child’)) {
var $nextTextBlock = obj.find(‘.textBlock.active’).next(‘.textBlock’);
obj.find(‘.textBlock.active’).removeClass(‘active’);
$nextTextBlock.addClass(‘active’);
}
});

obj.find(‘.pre’).on(‘click’, function () {
if (!obj.find(‘.textBlock.active’).is(‘:first-child’)) {
var $previousTextBlock = obj.find(‘.textBlock.active’).prev(‘.textBlock’);
obj.find(‘.textBlock.active’).removeClass(‘active’);
$previousTextBlock.addClass(‘active’);
}
});
});
});

CSS:

.allcontent{
border:solid 5px #ddd;padding:10px;margin:10px;
}
.allcontent .textBlock {
display: none;
}
.allcontent .textBlock.active {
display: block;
}
.contentNavigation{
clear:both;
overflow:auto;
}
.allcontent .pre{
padding: 8px;
margin: 5px;
background-color:#eee;
border: solid thin #ccc;
display: inline-block;
float:left;
}
.allcontent .next{
padding: 8px;
margin: 5px;
background-color:#eee;
border: solid thin #ccc;
display: inline-block;
float:right;
}
a:hover{cursor:pointer;}

HTML

<div class=”allcontent”>…</div>

You may also like...

Leave a Reply