Author Archive: Kavin Kumar, Mobile App developer, NCR Technosolutions

To give a List of the paragraph content with 3 dots (…)

Showing starting few words of a long text by not using client side or server side coding with three dots ahead
Have you ever thought of showing starting few words of a long text by not using client side or server side coding with three dots ahead?
Like: a quick brown fox jumps…
You may take example of showing mail content, product reviews.. These are generally of quite long length. But just to provide some idea on what the mail or the review context is, we may like to show the initial few words of the same.
We can do this either in css or jquery way, let’s see both methods.

JS


<!doctype html>

<html lang=”en”>

<head>

<style>

#fos{ width: 300px; height: 190px; overflow: hidden; }

#fos p { padding: 10px; margin: 0; }

</style>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

<script>

$( document ).ready(function() {

var p=$(‘#fos p’);

vardivh=$(‘#fos’).height();

while ($(p).outerHeight()>divh) {

$(p).text(function (index, text) {

returntext.replace(/\W*\s(\S)*$/, ‘…’);

});

}

});

 

</script>

<meta charset=”utf-8″>

<body>

<div id=”parent”>

<p>Loremipsum dolor sit amet, consecteturadipiscingelit. Proin nisi ligula, dapibus a volutpat sit amet, mattiset dui. Nuncporttitoraccumsanorci id luctus. Phasellusipsummetus, tincidunt non rhoncus id, dictum a lectus. Nam sedipsum a lacus sodaleseleifend. Vestibulumloremfelis, rhoncuselementumvestibulumeget, dictum utvelit. Nullamvenenatis, elit in suscipitimperdiet, orcipurusposueremauris, quisadipiscingipsumurna ac quam.</p>

</div>

 

</body>

</html>
In html part we have div of class parent having a child element

its height is fixed with css.
Now in the script part we have the magical part ,what we do is we check the height of the content holder in our case it’s the div element, and then we check if the height of the

is within the height of the div element then while the text of the

outside the height of the height of the div,we get the text by its index and replace it with … Isn’t it simple but it has a drawback, if the text size is large then the while loop runs unnecessary. So we ll see the css method.

CSS

We can achieve the same easily by using the css property-ellipsis;

#fos p { width: 250px;
white-space: nowrap;
word-wrap:break-word;
overflow: hidden;
text-overflow: ellipsis; }

So is css method perfect?No it has its own problem if you look at the output we get only a single line output we can’t make it multiline.

So the key css property behind this is: “text-overflow: ellipsis”. This appends 3 dots to the text after truncating the string. It adjusts the text length as per the width of the div.

Give it a try. Hope you will like it.

Working plunker link: http://plnkr.co/edit/1yMJtpcORrKSP6UXCneW?p=preview

Check if the input (mandatory) field is filled or empty using jquery

In this section we are going to see how to check whether the fields(mandatory) are filled by user before further action ,to be more clear let us say there are lots of input fields to get the detail from user and we also have a submit button to submit the details to the cloud for further processes .
So let’s create a jquery plugin for this purpose, but why plugin,the answer is simple we need to reuse the same code in lots of our projects .

blog1

Code for html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta content="width=device-width, user-scalable=no" name="viewport">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta name="apple-mobile-web-app-capable" content="yes" />

<title>stingme</title>

<head>

</head>

<body>

<div id="demo">

<label>Name</label><input id="user_name" name="User Name" value="" /><br />

<label>Address</label><input id="user_address" name="User Address" value="" />

<input type="submit" id="asd" value="Submit"/>

</div>

</body>

</html>

 

Here when you look at the html code you would notice the class name for the input values –backme
We have used it so that we can help out our jquery plugin to find the elements on which the function has to be applied for the desired output, nothing else to describe in the html part.

Code for script:

 

<script type=”text/javascript” charset=”utf-8″>

$(document).ready(function() {

$(“#asd”).click(function(){

a=0;

$(“.backme”).stingme();

if(a==valid)

{

console.log(“All fields entered”);

console.log(JSON.stringify(obj));

//submit json to ajax

}

else

{

console.log(“some fields are blank”);

//call error function

}

});

 

});

var a=0;

var valid=0;

var obj = {};

(function($) {

$.fn.stingme = function() {

valid=0;

return this.each( function() {

var key=$( this ).attr(“id”).trim();

valid++

console.log(“valid” +valid);

if($(“#”+key).val()!=””)

{ obj[key] = $(“#”+key).val();

// console.log(“valid1” +valid);

a++;

}

else

{ //console.log(“valid2” +valid);

alert(“Please Enter value for -“+$(‘#’+key).attr(‘name’));

a–;

//can highlight the particular field

}

});

 

}

 

}(jQuery))

 

</script>

 

We will now analyze the script part,
Whenever the submit button is clicked we call a function
Which in turn checks whether the input fields with classname –backme is filled or empty,if any of the field with classname -backme is empty then it shows an alert box indicating that the particular field is empty please fill it to continue.
To be user readability the alert message states that –Please Enter value for -User Name

blog1

If you note the click function you ld have come across the line $(“.backme”).stingme();
The above line means that we are binding the plugin named stingme with the elements having the class name backme.
That’s all folks happy coding.

Working plunker link: http://plnkr.co/edit/Upq2nFSCLbdaVU5rAfd9?p=preview