HTML5 CSS3

Dynamically add rows and html controls in table using jQuery

How to add rows dynamically in HTML table with textbox and textarea controls. Example: Download

<html>
<head>
<title>Table Dynamic Row Add Delete Demo</title>
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
</head>
<body>
<div>
<table id="tbl1">
<thead>
<tr>
<th>
Family
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="txtFamil_01" name="txtFamily_01" />
</td>
<td>
<input type="text" id="txtAddress_01" name="txtAddress_01" />
</td>
</tr>
<tr>
<td>
<textarea id="txtFamil_02" name="txtFamily_02"></textarea>
</td>
<td>
<textarea id="txtAddress_02" name="txtAddress_02"></textarea>
</td>
</tr>
</tbody>
</table>
<br />
<button type="button" id="btnAddNewRow">Add New Row</button>
<button type="button" id="btnSave" name="btnSave">Save</button>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#btnAddNewRow").on("click", function () {

var $newRows = $get_lastID();

$(“#tbl1>tbody”).append($newRows);

});

$get_lastID = function () {
var $id = $(‘#tbl1 tbody tr:last-child td:first-child textarea’).attr(“name”);
$lastChar = parseInt($id.substr($id.length – 2), 10);
$lastChar = $lastChar + 1;
var $newRows=””;
$newRow1 = “<tr> \
<td><input type=’text’ name=’txtFamily_0″+ $lastChar + “‘ /></td> \
<td><input type=’text’ name=’txtAddress_0” + $lastChar + “‘ /></td> \ </tr>”

$newRow2 = “<tr> \
<td><textarea type=’text’ name=’txtFamily_0″+ ($lastChar + 1) + “‘></textarea></td> \
<td><textarea type=’text’ name=’txtAddress_0” + ($lastChar + 1) + “‘></textarea></td> \ </tr>”

$newRows = $newRow1+$newRow2;

return $newRows;
}

$(“#btnSave”).on(“click”, function () {
$(“#tbl1 tbody tr”).each(function (i, tr) {

var famil1, famil2, address1, address2;

if (i % 2 === 0) { /* textbox find here*/
famil1 = $(this).find(‘td’).eq(0).find(‘input’).val();
famil2 = $(this).find(‘td’).eq(1).find(‘input’).val();
alert(famil1 + ” ” + famil2);
}
else { /* textarea find here */

address1 = $(this).find(‘td’).eq(0).find(‘textarea’).val();
address2 = $(this).find(‘td’).eq(1).find(‘textarea’).val();
alert(address1 + ” ” + address2);

}

});

});
});
</script>
</body>
</html>

CSS style problem with MVC rendered checkboxes using MVC helper

I have faced the issue with CSS for checkboxes in asp.net mvc. Below is mvc code.


 @Html.CheckBoxFor(model => model.GroupClosed)
  <label for="GroupClosed" class="block">
                            Group Closed
                        </label>

It will render as below:


 <div class="checkbox clip-check check-primary">
                        <span class="control-label" style="color:white">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <input id="GroupClosed" name="GroupClosed" type="checkbox" value="true"><input name="GroupClosed" type="hidden" value="false">
                        <label for="GroupClosed" class="block">
                            Group Closed
                        </label>
                    </div>                     

Before modify the css file as below.


.clip-check input[type="checkbox"]:checked + label:before,
 {
  border-width: 10px;
}

After modify:


.clip-check input[type="checkbox"]:checked + label:before,
.clip-check  input[type="checkbox"]:checked + input[type="hidden"] + label::before {
  border-width: 10px;
}

Note that the bold line contains the input[type=”hidden”] which identifies the hidden checkbox and solve the issue. I have added this line and make changes according to css has been written in css file. Happy 🙂

Send free SMS API

http://ubaid.tk/api-usage/

Required Params : uid, pwd, phone, msg.

uid : your userid for the required sms provider
pwd : your password for the required sms provider
provider : way2sms(default), fullonsms, smsindia, whozzat, smsinside, site2sms. if you do not specify any provider, way2sms will be used by default.
phone : phone number whom you want to send sms. seperate multiple phone numbers with a comma (,)
msg : your sms message, unlimited chars. will be sent as multiple msgs if crosses the message length for any provider

Optional Parameters
codes : 1. Send this if you require a user friendly msg from the server. for example, if codes=1 is not provided the server will return the result as an integer.
1 – SMS sent
-1 – Server Error
-2 – Invalid Username
-3 – Invalid message text
-4 – Login Failed
-5 – IP Blocked

HTML5 Video Player

Flash has always been the standard for displaying video online, yet with the arrival of HTML5 web developers have got more excellent possibilities to easily streamline video content. HTML5 new specifications for a video is for sure one of the most talked aspects in the range of many new notable HTML5 features developed for more dynamic web applications and interfaces. Though support for HTML5 is still evolving, a video element has clear benefits for the users who can now get browser-native video players without any third-party plugins at all.

Check below link that listed 10 HTML5 video player.
http://beginnerwebsitetutorial.com/2011/03/10/10-hhhhh/

compare video player and find which match with you requirement
http://praegnanz.de/html5video/

I suggested “HMTL5Media” is better, I tested it for iOS, and Android tablet its working fine.

Download source code from
https://github.com/etianen/html5media

http://mediaelementjs.com/

http://www.projekktor.com/downloads.php#source

Thanks