Manual Javascript load another page

<div id="load"></div>
<script>

// ========= get method
var client = new XMLHttpRequest();
client.open('GET', 'http://<yourweb>/contentpage.php');
client.onreadystatechange = function() {
    document.getElementById('load').innerHTML=(client.responseText);
}
client.send();

// ========= post method

var http = new XMLHttpRequest();

var url = 'get_data.php';

var params = 'lorem=ipsum&para=meter';

http.open('POST', url, true);

//Send the proper header information along with the request

http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() {//Call a function when the state changes.

    if(http.readyState == 4 && http.status == 200) {

        console.log(http.responseText);

    }

}

http.send(params);

</script>

In another host page set <?php header("Access-Control-Allow-Origin: *");?>

Monitoring network tool ping with php

Using exec() function PHP ping IP Address


Monitoring network tool ping with php
How to use:
Type IP Address on the input text, e.g.
192.168.1.1
192.168.1.1-192.168.1.50
192.168.1.0/24

Github

Calculation arithmetic inline input text

Inspired from cell box on office spreadsheet.

---

Try typing arithmetic e.g.(2+5/2-1*3) then hit enter or move out cursor
This will calculate 2+5/2-1*3 to be 1.5

See the Pen Input text arithmetic inline calc by Hangs Breaker (@hangsbreaker) on CodePen.

Simple Shorting Data Table With Tinytable

Maybe it's old news about tinytable, but sometime other people don't know how to find data table, shorting, and paging.

This time I just want to share Tinytable modified by me. This is screenshot

To use Tinytable adding CSS on the header

<link rel="stylesheet" href="style.css" />

And add Javascript on the end of body

<script type="text/javascript" src="script.js"></script>

Then just add class to your table

<table class="tinytable">

Source code here(Dropbox)
Good Luck

Dynamic Add Table Row With Javascript

India Germany France United States Switzerland

Script:
<script language="javascript">
function addRow(tableID){
    var table=document.getElementById(tableID);
    var rowCount=table.rows.length;
    var row=table.insertRow(rowCount);
    var colCount=table.rows[0].cells.length;
    for(var i=0;i<colCount;i++){
        var newcell=row.insertCell(i);
        newcell.innerHTML=table.rows[0].cells[i].innerHTML;
        switch(newcell.childNodes[0].type){
            case "text":
                newcell.childNodes[0].value="";
                break;
            case "checkbox":
                newcell.childNodes[0].checked=false;
                break;
            case"select-one":
                newcell.childNodes[0].selectedIndex=0;
                break;
        }
    }
}

function deleteRow(tableID){
    try{
        var table=document.getElementById(tableID);
        var rowCount=table.rows.length;
        for(var i=0;i<rowCount;i++){
            var row=table.rows[i];
            var chkbox=row.cells[0].childNodes[0];
            if(null!=chkbox&&true==chkbox.checked){
                if(rowCount<=1){
                    alert("Cannot delete all the rows.");break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
    }
    catch(e){alert(e);}
}
</script>



    <input value="Add Row" onclick="addRow('dataTable')" type="button">

    <input value="Delete Row" onclick="deleteRow('dataTable')" type="button">

    <table id="dataTable" border="1" width="350px">
        <tbody><tr>
            <td><input name="chk" type="checkbox"></td>
            <td><input name="txt" type="text"></td>
            <td>
                <select name="country">
                    <option value="in">India</option>
                    <option value="de">Germany</option>
                    <option value="fr">France</option>
                    <option value="us">United States</option>
                    <option value="ch">Switzerland</option>
                </select>
            </td>
        </tr>
    </tbody></table>

Format Currency With Javascript

</script>
function formatCurrency(num) {
     num = num.toString().replace(/\Rp|/g,'');
     if(isNaN(num))
         num = "\";
     sign = (num == (num = Math.abs(num)));
     num = Math.floor(num*100+0.50000000001);
     cents = num%100;
     num = Math.floor(num/100).toString();
     if(cents<10)
         cents = "0" + cents;
     for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
         num = num.substring(0,num.length-(4*i+3))+'.'+
         num.substring(num.length-(4*i+3));
     return (((sign)?'':'-') + 'Rp ' + num + ',' + cents);

 }

document.write(formatCurrency(99021990));
</script>

Javascript Perulangan dan Segitiga

 <script type="text/javascript" charset="utf-8">
    document.write("- Segitiga 1<br>");
    for (var i=1;i<=5;i++){
        for (var j=1;j<=i;j++){
            document.write("*");
        }
        document.write("<br>");
    }
    document.write("- Segitiga 2<br>");
    for (var i=1;i<=5;i++){
        for (var j=i;j<=5;j++){
            document.write("*");
        }
        document.write("<br>");
    }
    document.write("- Segitiga 3<br>");
    for (var i=1;i<=5;i++){
        for (var j=i;j<=5;j++){
            document.write("_");
        }
        for (var k=1;k<=i;k++){
            document.write("*");
        }
        document.write("<br>");
    }
    document.write("- Segitiga 4<br>");
    for (var i=1;i<=5;i++){
        for (var j=1;j<=i;j++){
            document.write("_");
        }
        for (var k=i;k<=5;k++){
            document.write("*");
        }
        document.write("<br>");
    }
 
   
document.write("- Piramida 1<br>");
    for (var i=1;i<=5;i++){
        for (var j=i;j<=5;j++){
            document.write("_");
        }
        for (var k=1;k<=i;k++){
            document.write("*");
        }
        for (var l=1;l<=i-1;l++){
            document.write("*");
        }
        document.write("<br>");
    }
    document.write("- Piramida 2<br>");
    for (var i=1;i<=5;i++){
        for (var j=1;j<=i;j++){
            document.write("_");
        }
        for (var k=i;k<=5;k++){
            document.write("*");
        }
        for (var l=i+1;l<=5;l++){
            document.write("*");
        }
        document.write("<br>");
    }
</script>

Javascript Focus and Not Focus Tab

<script>
window.addEventListener('focus', function() {
    document.title = 'focused';
});

window.addEventListener('blur', function() {
    document.title = 'not focused';
});
</script>

Membuat Bilangan Terbilang Dengan Javascript

Kadang di perlukan membuat bilangan terbilang dari sebuah angka. Mungkin skrip berikut berguna bagi yang membutuhkan, maksimal bilangan sampai 100000000000000 (Seratus Triliun).

Demo
Rp.

Seribu Sembilan Ratus Empat Puluh Lima

Source Code:

Converter Hex to RGB and RGB to Hex

this function for convert Hex to RGB

function hexToRgb() {

  // Get the value from input text

    var hex = document.getElementById("hex").value;

  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    var rgb = "rgb("+parseInt(result[1], 16)+","+parseInt(result[2], 16)+","+parseInt(result[3], 16)+")";
  // Return value

    return rgb;
}

this function for convert RGB to Hex

function rgbToHex() {

  // Get value from input text
    var rgb = document.getElementById("rgb").value;

  // Remove all character and get the number
    rgb = rgb.replace(/[a-zA-Z()]+/g, "");

  // Split the string
    var res = rgb.split(",");

  // Get the individual value and set the hex
    var r = parseInt(res[0]).toString(16);
    var g = parseInt(res[1]).toString(16);
    var b = parseInt(res[2]).toString(16);

  // If result length == 1 add the 0 number
    r = r.length == 1 ? "0" + r : r;
    g = g.length == 1 ? "0" + g : g;
    b = b.length == 1 ? "0" + b : b;

  // Return value
    return "#"+r+g+b;
}

Result

See the Pen Converter Hex RGB by Hangs Breaker (@hangsbreaker) on CodePen.

Save File With Javascript

Source code:

Demo:

Javascript: Remove Line Break and Double Spacing

For remove break line use:  text.replace(/(\r\n|\n|\r)/gm," ");
For remove double spacing use:  text.replace(/\s{2,}/g, ' ');

Sample code:

Place text here...



Result here...

Demo:
Place text here...

Result here...

Source Code Real-Time HTML Editor Web based

Pernahkah anda mengunjungi http://codepen.io/, http://thecodeplayer.com/, http://www.w3schools.com/, http://www.codecademy.com/, http://jsfiddle.net/ yang di website tersebut terdapat text editor untuk membuat website, dan di sampingnya terdapat kotak untuk menampilkan hasil script yang telah di tulis di text editor tersebut.

Saya akan berbagi source code text editor yang serupa seperti website tersebut. Script ini berjalan secara offline, jadi anda tidak perlu koneksi internet untuk mencoba membuat website, dan script ini akan berjalan real time ketika anda mengetik script, maka kotak untuk menampilkan hasil script anda tersebut akan berjalan otomatis. Berikut source code-nya.

Progress Bar dengan PHP

Jika Anda memiliki script PHP berjalan lama yang mengeksekusi banyak proses, Anda mungkin perlu untuk menginformasikan pengguna tentang kemajuan proses ketika script masih berjalan dan belum selesai. Menggunakan progress bar dapat menjadi pilihan terbaik. Kita bisa menggabungkan fungsi PHP flush(), Javascript, dan CSS juga untuk membuat progress bar yang bagus.

Berikut adalah teknik pembuatan progress bar.

• Buat setidaknya satu elemen div dengan lebar tertentu dalam dokumen HTML Anda untuk menampilkan progress bar.
• Memperkirakan persentase kemajuan dalam script PHP Anda. Nomor ini akan digunakan untuk menentukan panjang progress bar.
• "Echo" Javascript untuk memperbarui isi dari elemen div di atas dengan div bahwa persentase lebar sama seperti kemajuan yang dihitung. Juga memberikan div warna latar belakang yang berbeda atau gambar latar belakang sehingga kita bisa melihatnya.
• "Flush" ke browser.

Kodenya.

Loading page dengan Javascript - PACE

     Pernah kepikiran membuat/meng handle loading page/ halaman website. Cari-cari di Google, nemu website PACE awalnya ragu mau makai itu, coba cari lagi yang lain, ketemu PACE lagi. Akhirnya terpasa di coba, dan ternyata bagus, ringan tidak perlu berbelit-belit. tinggal taruh aja Javascript dan css nya di halaman website sudah jalan otomatis dan mendeteksi halaman website otomatias.

Kalau mau di pasang di blog bisa di tambahkan di edit HTML templatenya atau di tambahkan widget yang HTML/javascript.

Kalau di sini saya menaruhnya di widget. Saya tambahkan widget HTML/javascript.

Berikut PACE script yang saya gunakan di widget.

Chart & Graph jqPlot

Plugin untuk membuat Chart dan Grafik (jqPlot).

Penggunaannya mudah tinggal panggil 2(dua) script .js dan 1(satu) script .css

Print Area Document dengan JavaScript

My page

DIV 1 content...


DIV 2 content...


Paragraph 1 content...

Sumber:http://www.developphp.com/view.php?tid=1390