PROGRAMMING HUB: August 2025

Sunday, 31 August 2025

Generate QR code using jQuery

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to generate QR code using jQuery.

Code for HTML Page

On the HTML page there will be two controls one is text box Control with the id named text_qrcode for to enter the input by the user and other control is Button with the id named button_submit. On the Button click I assigned a JavaScript function named QR_code() to the onclick event handler.

When user will click on the Submit button then JavaScript function named QR_code() will be called.

jQuery Implementation

First, the jQuery files jquery-1.8.2.js as well as qrcode.min.js is inherited

for to implement QR Code. Also created a JavaScript function named

QR_code. I will call JavaScript function on the click of Submit Button.

When user will enter the Button after entering the input inside the

textbox then QR Code will be automatically generated for the entered Text.

function QR_code()

{

var QR= document.getElementById(“txt_qrcode”).value;

var qrcode = new QRCode

(

"qrcode",

{

text: QR, // you can set your QR code text

width: 100,

height: 100,

colorDark : "#000000",

colorLight : "#FFFFFF",

correctLevel : QRCode.CorrectLevel.M

}

);

Here i am giving the complete HTML code for HTML page. You can copy and paste

this code to your HTML page to enjoy the execution of the Article.

<!DOCTYPE html>

<html>

<head>

<title>How to generate QR code using jquery</title>

<script src="https://code.jquery.com/jquery-1.8.2.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/

libs/qrcodejs/1.0.0/qrcode.min.js">

</script>

</head>

<body>

<h4>How to generate QR code using jquery

<a href="https://usingaspdotnet.blogspot.com">Demo</a></h4>

<!-- Here i set the  id="qrcode" to the  div tag -->

<div id="qrcode" style="padding: 10px;height:auto;width:65px;"></div>

<input type="text" id="txt_qrcode" />

<input type="button" id="btn_Submit" value="Submit"

onclick="QR_code()" />

<script type="text/javascript">

 function QR_code()

var QR= document.getElementById("txt_qrcode").value;

var qrcode = new QRCode

  "qrcode",

    text: QR, // you can set your QR code text

    width: 100,

    height: 100,

    colorDark : "#000000",

    colorLight : "#FFFFFF",

    correctLevel : QRCode.CorrectLevel.M

);

</script>

</body>

 </html>

Conclusion: In above code, I have been explained that how to generate QR code using

jQuery. This code is very helpful for every developer. Bye Bye and take care of yourself

Developers. We will comeback shortly with the new article.

Regards

Using Asp.net

Friday, 29 August 2025

News Ticker using JavaScript

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article, I will explain that how to implement New Ticker using JavaScript. This article is same working as like <Marquee> Tag.

Code for HTML Page

Implementation: On the HTML page I will place ul li Tags, inside the div with id named ticker as well as div with id named ticker-box. he <ul> tag in HTML stands for "unordered list." It is used to create a list of items where the order of the items is not semantically important. By default, items within an <ul> list are displayed with bullet points. Inside the li /li tag I write the content that will show inside the New Ticker using Java Below I am giving the complete code for this function. You can copy and paste the whole code on your HTML page to enjoy the execution of this program.

<div id="ticker">

<div id="ticker-box">

            <ul>

                <li><a href="https://usingaspdotnet.blogspot.com" target="_blank">

Visit Using Asp.Net</a>

It has survived not only five centuries, but also the leap into electronic

typesetting, remaining essentially unchanged.It was popularised in the 1960s

 with the release of Letraset sheets containing Lorem Ipsum passages, and

 more recently with desktop publishing software like Aldus PageMaker

including versions of Lorem Ipsum.

                </li>

                <li>

<a href="https://usingaspdotnet.blogspot.com" target="_blank">

Visit Using Asp.Net</a>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

                </li>

                <li>

<a href="https://usingaspdotnet.blogspot.com" target="_blank">

Visit Using Asp.Net</a>

 Lorem Ipsum has been the industry's standard dummy text ever since the

 1500s, when an unknown printer took a galley of

type and scrambled it to make a type specimen book.

                </li>

            </ul>

        </div>

        <script> startTicker('ticker-box', {speed:25, delay:500});</script>

    </div>

Implement New Ticker using JavaScript Function

On page load I will called JavaScript Function named start Ticker and I

 also passing two parameters named  with this

function ('ticker-box', {speed:25, delay:500}). First parameter id find from

 the div which I already explained in last paragraph i.e. place inside the

 <div id="ticker"> and second parameter is {speed:25, delay:500} speed

specify that speed of news or ads showing on the screen in the box.

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

<title>JavaScript News Ticker</title>

<style>

#ticker {

margin-bottom: 5px;

padding-left: 15px;

padding-right: 5px;

font-family: "Segoe UI", Optima, Helvetica, Arial, sans-serif;

line-height: 1.8em;

}

#ticker-box {

background-color: #40C0CB;

color: #FFF;

}

</style>

function applyStyles(obj, styles) {

var property;

var styleLength = Object.keys(styles).length;

for (var i = 0; i < styleLength; i++) {

property = Object.keys(styles)[i];

obj.style[property] = styles[property];

}

function extend(object1, object2) {

for (var attrname in object2) {

object1[attrname] = object2[attrname];

}

return object1;

}

function startTicker(id, param) {

var tickerBox = document.getElementById(id);

var defaultParam = { speed: 5, delay: 500, rotate: true };

var extendedParam = extend(defaultParam, param);

applyStyles(tickerBox, { overflow: "hidden", 'min-height': '40px' });

var ul = tickerBox.getElementsByTagName("ul");

var li = ul[0].getElementsByTagName("li");

applyStyles(ul[0], { padding: 0, margin: 0, position: 'relative', 'list-style-type': 'none' });

for (i = 0; i < li.length; i++) {

applyStyles(li[i], { position: 'absolute', 'white-space': 'nowrap', display: 'none' });

}

var li_index = 0;

var trans_width = tickerBox.offsetWidth;

var chunk_width = 1;

var iterateTickerElement = function(trans_width) {

li[li_index].style.left = trans_width + "px";

li[li_index].style.display = '';

var t = setInterval(function() {

if (parseInt(li[li_index].style.left) > -li[li_index].offsetWidth) {

li[li_index].style.left = parseInt(li[li_index].style.left) - chunk_width + "px";

} else {

clearInterval(t);

trans_width = tickerBox.offsetWidth;

li_index++;

if (li_index == li.length && extendedParam.rotate == true) {

li_index = 0;

iterateTickerElement(trans_width);

} else if (li_index < li.length) {

setTimeout(function() { iterateTickerElement(trans_width); }, extendedParam.delay);

}

}, extendedParam.speed);

tickerBox.onmouseover = function() {

clearInterval(t);

}

tickerBox.onmouseout = function() {

iterateTickerElement(parseInt(li[li_index].style.left));

}

iterateTickerElement(trans_width);

}

</script>

</head>

<body>

<ul>

<li><a href="https://usingaspdotnet.blogspot.com" target="_blank">Visit Using Asp.Net</a>

It has survived not only five centuries, but also the

leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the

release of Letraset sheets containing Lorem Ipsum passages,

and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</li>

<li>

<a href="https://usingaspdotnet.blogspot.com" target="_blank">Visit Using Asp.Net</a>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</li>

<li>

<a href="https://usingaspdotnet.blogspot.com" target="_blank">Visit Using Asp.Net</a>

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of

type and scrambled it to make a type specimen book.

</li>

</ul>

</div>

</div>

</body>

</html>

Conclusion: In above code, I have been explained how to implement New Ticker using JavaScript. This code is very helpful for every developer. Bye Bye and take care of you Developers. We will come back shortly with the new article.

Thanks and Regards

Using ASP.Net

Convert HTML Table to JSON in JavaScript

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article, I will explain that how to convert HTML Table data to JSON using JavaScript.

Code for HTML Page

Implementation: On the HTML page there will be HTML Table with id named table_customers and also place a control Button with id named btn_submit. On the OnClick event handler of the Button I will assign JavaScript function named Convert().

<tr>

<th>Country</th>

</tr>

<tr>

<td>Bharat Bhushan</td>

</tr>

<tr>

<td>Raman Kumar </td>

<td>India</td>

</tr>

<tr>

<td>Ruhika</td>

<td>Canada</td>

</tr>

<tr>

<td>Nancy</td>

</tr>

</table>

<hr/>

JavaScript function to convert HTML Table to JSON

When the Submit Button is clicked by the user, the JavaScript function named Convert() will be called. Inside the JavaScript function Convert(), the HTML Table is invoked using the document.getElementById JavaScript function. Then, a loop will be executed over the HTML Table Header cells and the cell values are copied to an Array. And after that, one more loop will be executed over the HTML Table rows. Inside each row a child loop is executed over the cells and copied to a JavaScript object which is later added to a JavaScript Array.

Finally, the JavaScript Array will be converted into a JSON string and displayed in JavaScript Alert Message Box.

function Convert() {

var table = document.getElementById("table_customers");

var header = [];

var rows = [];

for (var i = 0; i < table.rows[0].cells.length; i++) {

header.push(table.rows[0].cells[i].innerHTML);

}

for (var i = 1; i < table.rows.length; i++) {

var row = {};

for (var j = 0; j < table.rows[i].cells.length; j++) {

row[header[j]] = table.rows[i].cells[j].innerHTML;

}

rows.push(row);

}

alert(JSON.stringify(rows));

}

</script>

Below I am giving the complete code for this function. You can copy and paste the whole code on your HTML page to enjoy the execution of this program.

<!DOCTYPE html>

<html>

<head>

body { font-family: Arial; font-size: 10pt; }

table { border: 1px solid #ccc; border-collapse: collapse; }

table th { background-color: #F7F7F7; color: #333; font-weight: bold; }

table th, table td { padding: 5px; border: 1px solid #ccc; width: 150px }

</style>

</head>

<body>

<tr>

<th>Country</th>

</tr>

<tr>

<td>Bharat Bhushan</td>

<td>United States</td>

</tr>

<tr>

<td>Raman Kumar </td>

<td>India</td>

</tr>

<tr>

<td>Ruhika</td>

<td>France</td>

</tr>

<tr>

<td>Nancy</td>

<td>Russia</td>

</tr>

</table>

function Convert() {

var table = document.getElementById("table_customers");

var header = [];

var rows = [];

for (var i = 0; i < table.rows[0].cells.length; i++) {

header.push(table.rows[0].cells[i].innerHTML);

}

for (var i = 1; i < table.rows.length; i++) {

var row = {};

for (var j = 0; j < table.rows[i].cells.length; j++) {

row[header[j]] = table.rows[i].cells[j].innerHTML;

}

rows.push(row);

}

alert(JSON.stringify(rows));

}

</script>

</body>

</html>

Conclusion: In above code, I have been explained how to convert HTML Table data to JSON using JavaScript. This code is very helpful for every developer. Bye Bye and take care of you Developers. We will come back shortly with the new article.

Thanks and Regards

Using ASP.Net