Develop Reference

Dynamically shortened text with “Read More” link using javascript

I have a text and I want to dynamically shortened the text with “Read More” link using JavaScript. I use the following JavaScript code:
var limitDesc = -1;
function ResponsiveDesc() {
//var limitDesc = 100;
//var isHTML = RegExp.prototype.test.bind(/(<([^>]+)>)/i);
var chars = $("#ResponsiveDescription").html();
if (chars.length > limitDesc) {
var visiblePart = $("<span> " + chars.substr(0, limitDesc - 1) + " </span>");
var dots = $("<span class='dots'>... </span>");
var hiddenPart = $("<span class='more'>" + chars.substr(limitDesc - 1) + "</span>");
var readMore = $("<span class='read-more'>More</span>");
readMore.click(function () {
$(this).prev().remove(); // remove dots
$(this).next().show(); //show hiddenPart
$(this).remove(); // remove readMore
});
$("#ResponsiveDescription").empty()
.append(visiblePart)
.append(dots)
.append(readMore)
.append(hiddenPart);
}
}
$(document).ready(function () {
if (limitDesc > 0 && $(window).width() < 500) {
ResponsiveDesc();
}
});
The main problem is that I don't what this code to cut my text in the middle of a word or a link. What is the best way to solve this problem ?
I can manually change the "limitDesc" variable on each page but when the content of the page is dynamic, it's impossible.
Thanks you in advance.

You can split the string at the last whitespace before your length limit.
You can determine it using lastIndexOf():
limitDesc = chars.lastIndexOf(" ", limitDesc);
http://www.w3schools.com/jsref/jsref_lastindexof.asp

jQuery - Multiple expanding galleries in tabs

I'm trying to get this code "Reveal gallery by Roko C. Buljan" - http://jsbin.com/zariku/9/edit?html,css,js,output - to work in multiple tabs here:
http://codepen.io/anon/pen/QjyMwg
JS:
var $prvw = $('#preview'),
$gall = $('.gooGallery'),
$li = $gall.find("li"),
$img = $prvw.find("img"),
$alt1 = $prvw.find("h2"),
$alt2 = $prvw.find("p"),
$full = $("<li />", {"class":"full", html:$prvw});
$li.attr("data-src", function(i, v){
$(this).css({backgroundImage: "url("+v+")"});
}).on("click", function( evt ){
var $el = $(this),
d = $el.data(),
$clone = $full.clone();
$el.toggleClass("active").siblings().removeClass("active");
$prvw.hide();
$full.after($clone);
$clone.find(">div").slideUp(function(){
$clone.remove();
});
if(!$el.hasClass("active")) return;
$img.attr("src", d.src);
$alt1.text(d.alt);
$alt2.text(d.title);
$li.filter(function(i, el){
return el.getBoundingClientRect().top < evt.clientY;
}).last().after($full);
$prvw.slideDown();
});
$(window).on("resize", function(){
$full.remove();
$li.removeClass("active");
});
2nd tab is working fine, but, when I'll try to open the first one the div isn't shown on the right position.
Can anyone please help me with a hint?

You're trying to use the same preview div for both gallerys. Try having 2 previews. Quickest way I could think would be do to something like this (be warned, this is kinda ugly):
var i = 1;
$('.gooGallery').each(function() {
var $gall = $(this);
var $prvw = $('#preview' + i); i = i+1;
var $li = $gall.find("li")
var $img = $prvw.find("img")
var $alt1 = $prvw.find("h2")
var $alt2 = $prvw.find("p")
var $full = $("<li />", {
"class" : "full",
html : $prvw
});
$li.attr("data-src", function (i, v) {
$(this).css({
backgroundImage : "url(" + v + ")"
});
}).on("click", function (evt) {
var $el = $(this),
d = $el.data(),
$clone = $full.clone(true);
$el.toggleClass("active").siblings().removeClass("active");
$prvw.hide();
$full.after($clone);
$clone.find(">div").slideUp(function () {
$clone.remove();
});
if (!$el.hasClass("active"))
return;
$img.attr("src", d.src);
$alt1.text(d.alt);
$alt2.text(d.title);
$li.filter(function (i, el) {
return el.getBoundingClientRect().top < evt.clientY;
}).last().after($full);
$prvw.slideDown();
});
$(window).on("resize", function () {
$full.remove();
$li.removeClass("active");
});
});
And then modify the preview div
<div id="preview1" class='preview'>
<img src="//placehold.it/300x180/369">
<div><h2></h2><p></p></div>
</div>
<div id="preview2" class='preview'>
<img src="//placehold.it/300x180/369">
<div><h2></h2><p></p></div>
</div>
Thought it looked weird so threw in the necessary css changes:
.preview{
display:none;
}
.preview > *{
float:left;
margin:3%;
}
.preview img{
max-width:100%;
}

Keep dropdown open on hover jQuery

I'm making a quick animated drop down. I have it working great when you mouseover and mouseout on the initial button. I just cant get the HTML div that drops down to "hold" when you're hovered on the dropdown itself. here is a fiddle of what I'm doing: http://jsfiddle.net/kAhNd/
here's what I'm doing in the JS:
$('.navBarClickOrHover').mouseover(function () {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '200px'
});
}).mouseout(function () {
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
} else {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '0px'
});
}
});
It works, but the element doesn't stay dropped down when you have your mouse over it. I added in
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
}
to try to make it do nothing when you're hovered over '.dropdownCont'.
Having a hard time explaining it. I'm sorry, I hope I make sense. Any help would be awesome! here's my Fiddle: http://jsfiddle.net/kAhNd/

Here is your code transformed http://jsfiddle.net/krasimir/kAhNd/3/
var button = $('.navBarClickOrHover');
var isItOverTheDropdown = false;
var showDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '200px'
});
targetDropDown.off("mouseenter").on("mouseenter", function() {
isItOverTheDropdown = true;
});
targetDropDown.off("mouseleave").on("mouseleave", function() {
isItOverTheDropdown = false;
hideDropDown();
});
}
var hideDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '0px'
});
}
$('.navBarClickOrHover').mouseover(function () {
showDropDown();
}).mouseout(function () {
setTimeout(function() {
!isItOverTheDropdown ? hideDropDown : '';
}, 500);
});
I guess that this is what you want to achieve.

How to create checkbox on every new line in jquery+ jquery mobile?

I need to create checkbok on every new line .I got the event of new line by checking the height.But I need to add two div in main div in which first div contain checkbox .and second div contain data .I am facing in difficulties in that thing
here is my fiddle.
http://jsfiddle.net/naveennsit/TnTj9/1/
$(function() {
var h = -1;
setInterval(function () {
var newHeight = $('#realTimeContents').append("Hiiiii. is div").height();
if(h == -1) h = newHeight;
if(h != newHeight) {
h = newHeight;
// alert("I've changed height");
}
}, 1000);
});
I need to use checkbox in left div like this but not able to do that.
$("#leftdiv").append( "<label for='chk_" + idCounter + "'>" + val + "</label><input id='chk_" + idCounter + "' type='checkbox' value='" + val + "' />" );

I believe this is what you are looking for
Fiddle
JS:
$(function() {
var h = -1;
setInterval(function () {
var newHeight = $('#realTimeContents').append("Hiiiii. is div").height();
if(h == -1) h = newHeight;
if(h != newHeight) {
h = newHeight;
$("#left").append("<div class='cb'><input type=\"checkbox\" /></div>");
}
}, 100);
});
CSS:
#left {
float:left;
}
#realTimeContents {
width:400px;
line-height: 25px;
}
.cb {
height:25px;
}
HTML:
<div id="left"><div class='cb'><input type="checkbox" /></div></div><div id="realTimeContents" class ="left realtimeContend_h">
</div>
If you have variable line-heights, you could try removing the css for .cb and adding this:
if(h != newHeight) {
$("#left").find(".cb").last().css("height", newHeight-h);
h = newHeight;
$("#left").append("<div class='cb'><input type=\"checkbox\" /></div>");
}
Here's an update with features you seem to want from the comments:
Fiddle
I added some DOM and this JS:
$("#left").on("click", "input", function () {
var checkedIndexes = "";
var $cbs = $("#left").find("input");
$cbs.filter(":checked").each(function () {
checkedIndexes += "<span>" + $cbs.index(this) + "</span>";
});
$("#checkedRows").html(checkedIndexes);
});
$("#checkedRows").on("click", "span", function () {
var $box = $("#left").find("input").eq(this.innerHTML);
var $content = $("#content");
$content.scrollTop(
$box.offset().top - $content.offset().top + $content.scrollTop());
});
If you check boxes, they will show up at the top... if you click on the rows at the top, it will scroll to it.

jQuery change on click even to on load event

I've got the following code which I've put together, and I need to change it from the onclick event to onload, so it loads the modal window automatically when the page is loaded. However, for the life of me I can't work out how do it, i've tried many a permutation it just doesn't seem to work!
$(document).ready(function() {
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel');
var popURL = $(this).attr('href');
var query = popURL.split('?');
var dim = query[1].split('&');
var popWidth = dim[0].split('=')[1];
$('#' + popID)
.fadeIn()
.css({ 'width': Number( popWidth ) })
.prepend('<img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" />');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
});
return false;
});
});
This loads it at the moment:
Popup
Any help will be really appreciated, thanks

If you look up the documentation for the plugin you can move the logic for the popup into it's own function (called popOpen() in the example) and call that on load like this:
$('a.poplight[href=#?w=200]').popOpen();

Try:
$('a.poplight[href^=#]').trigger("click");
Or:
$('a.poplight[href^=#]').click();
These should be in your DOM Ready.

If I understood you correctly, you could try this:
$(document).ready(function() {
$this = $('a.poplight[href^=#]');
var popID = $this.attr('rel');
....