PHP JavaScript: 01/31/18

Add HTML Editor (WYSIWYG) To Website.

The full form of WYSIWYG is What You See Is What You Get. WYSIWYG editor is driven by JavaScript through which users enter the formatted text. The WYSIWYG editor is converting the formatted text to HTML when the web form is submitted to the server.

TinyMCE is web-based WYSIWYG editor which enables you to convert HTML textarea fields to an editor. Here we’ll show you the simple steps to add TinyMCE editor to website or webpage by using JavaScript Code.

Index.html

<html>

<head>

tinymce.init({
        selector:'textarea',
  height: 300,
        width: 300,
});
</script>

</head>

<body>

</body>

</html>

Output:

Countdown Timer Using HTML, CSS, JAVASCRIPT

<html>

<head>
    <style type="text/css">
        body{
            text-align: center;
            font-family: sans-serif;
            font-weight: 100;

        }

        h1{
            color: #b53e0f;
            font-weight: 100;
            font-size: 40px;
            margin: 40px 0px 20px;
        }
        #clockdiv{
            font-family: sans-serif;
            color: #fff;
            display: inline-block;
            font-weight: 100;
            text-align: center;
            font-size: 30px;
        }
        #clockdiv > div{
            padding: 10px;
            border-radius: 19px;
            background: #2b0a26;
            display: inline-block;
        }
        #clockdiv div > span{
            padding: 15px;
            border-radius: 20px;
            background: #00816A;
            display: inline-block;
        }
        .smalltext{
            padding-top: 5px;
            font-size: 16px;
        }
    </style>
</head>

<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<script type="text/javascript">
var deadline = 'December 31 2018';


// Convert time to usable format


function getTimeRemaining(deadline) {
var t = Date.parse(deadline) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
       'total': t,
       'days': days,
       'hours': hours,
       'minutes': minutes,
       'seconds': seconds        };
    }


function Clock(id, deadline) {
var clock = document.getElementById(id);

// The query selector method only returns the first element that matches

 the specified selectors.

var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(deadline);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
 if (t.total <= 0) {
     clearInterval(timeinterval);
     }
  }
updateClock();
   var timeinterval = setInterval(updateClock, 1000);
 }

 Clock('clockdiv', deadline);

</script>

</body>
</html>

Output:

JavaScript Events

JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page.

When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.
Here we will see some examples, here I am explained few examples only.

1.Onclick Event:
It is the most frequently used event type, you just click the button then it shows the output.
<html>

<head>
<script type="text/javascript">
function SayHello() {
alert("Hello World");
}
</script>
</head>

<body>

<p>Click me then see the result</p>

<label>
<input type="button" onclick="SayHello()" value="SayHello"/>
</label>

<label>
<button type="button" onclick="this.innerHTML=Date()">
Time
</button>
</label>

</body>

</html>
Output:

2.Onload:
Execute a javascript immediately after a page has been loaded

<html>

<head>
<script>
function load() {
alert("Click ok I will show output");
}
</script>
</head>

<body onload="load()">
<h1>Hello Viewer</h1>
</body>

</html>
output:

3.Ondblclick:
Execute a javascript when an element is double clicked

<!DOCTYPE html>

<html>

<head>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML =
                "This is the example for double click event";
        }
    </script>
</head>

<body>
<p ondblclick="myFunction()">
    <button>Click Me Double</button>
</p>
<p id="demo"></p>
</body>

</html>

output:

↕

4.Onmouseover & Onmouseout:

<!DOCTYPE html>

<html>

<head>
    <script>
        function over(x) {
            x.style.color='red'; }
        function out(x) {
            x.style.color='green';
        }
    </script>
</head>

<body>
<div onmouseover="over(this)" onmouseout="out(this)">
    <h1> Hai Visitor </h1>
</div>
</body>

</html>

Output:

Onmouseover output: Onmouseout output:



5. Onkeypress: 

Key press event is fired when a key that produce a character value is pressed down.

<!DOCTYPE html>

<html>

<head>
    <script>
        function press() {
            alert("You Pressed A Key Inside The Input Box");
        }
        
        function out(x) {
            x.style.color='green';
        }
    </script>
</head>

<body>
<p>If you have to press any key in text box then it shows the alert</p>
<input type="text" onkeypress="press()">
</body>

</html>



output:

Find Distance Between Two Latitude Longitude Co-Ordinates Using PHP


In the first, we find the distance between the two points in meters by assuming that the Earth is a perfectly round sphere with a radius of 6,371,008 meters. (Note that the Earth isn’t actually a perfect sphere; its radius at the poles is about 21 meters shorter than its radius at the equator. This will result in very slight inaccuracies in our calculations.)
In the second, we convert from meters to miles, yards, feet, and kilometers
so that you can get your distance in whatever units are needed.
<?php
function getDistanceBetweenPointsNew(
    $latitude1, $longitude1,
    $latitude2, $longitude2)
{
    $theta = $longitude1 - $longitude2;
    
    $miles = (
        sin(deg2rad($latitude1)) * 
        sin(deg2rad($latitude2))) + 
        (cos(deg2rad($latitude1)) * 
            cos(deg2rad($latitude2)) * 
            cos(deg2rad($theta)));
    
    $miles = acos($miles);
    $miles = rad2deg($miles);
    $miles = $miles * 60 * 1.1515;
    $feet = $miles * 5280;
    $yards = $feet / 3;
    $kilometers = $miles * 1.609344;
    $meters = $kilometers * 1000;
    return compact('miles', 'feet', 'yards', 'kilometers', 'meters');
}

$point1 = array('lat' => 40.770623, 'long' => -73.964367);
$point2 = array('lat' => 40.758224, 'long' => -73.917404);

$distance = getDistanceBetweenPointsNew($point1['lat'], 
    $point1['long'], $point2['lat'], $point2['long']);

foreach ($distance as $unit => $value) {
    echo $unit . ': ' . number_format($value, 4) . '<br />';
}
?>
Result:

Reference: https://inkplant.com/code/calculate-the-distance-between-two-points

PHP JavaScript

Add HTML Editor (WYSIWYG) To Website.

Countdown Timer Using HTML, CSS, JAVASCRIPT

<html>

JavaScript Events

2.Onload:
Execute a javascript immediately after a page has been loaded

<html>

<head>
<script>
function load() {
alert("Click ok I will show output");
}
</script>
</head>

<body onload="load()">
<h1>Hello Viewer</h1>
</body>

</html>
output:

3.Ondblclick:
Execute a javascript when an element is double clicked

4.Onmouseover & Onmouseout:

5. Onkeypress:

Key press event is fired when a key that produce a character value is pressed down.

Find Distance Between Two Latitude Longitude Co-Ordinates Using PHP

Labels

Popular Posts

Add HTML Editor (WYSIWYG) To Website.

Countdown Timer Using HTML, CSS, JAVASCRIPT

<html>

JavaScript Events

2.Onload:Execute a javascript immediately after a page has been loaded<html><head> <script>function load() {alert("Click ok I will show output"); } </script></head><body onload="load()"><h1>Hello Viewer</h1></body></html>output:

3.Ondblclick:Execute a javascript when an element is double clicked

4.Onmouseover & Onmouseout:

5. Onkeypress:

Key press event is fired when a key that produce a character value is pressed down.

Find Distance Between Two Latitude Longitude Co-Ordinates Using PHP

Labels

Popular Posts

2.Onload:
Execute a javascript immediately after a page has been loaded

<html>

<head>
<script>
function load() {
alert("Click ok I will show output");
}
</script>
</head>

<body onload="load()">
<h1>Hello Viewer</h1>
</body>

</html>
output:

3.Ondblclick:
Execute a javascript when an element is double clicked