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>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
         tinymce.init({
        selector:'textarea',
        height: 300,
        width: 300,
        });
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>
Output:
by at No comments:
Tags , , , , , , ,

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:

by at No comments:
Tags , , , ,

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:









































by



at





No comments:
  


















Tags
,
,
,
,


























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












by



at





No comments:
  


















Tags
,
,
,
,
,
,
,

















          

        

          

        

          

        










Most Commonly Used PHP Functions














htmlentities()



This PHP function is used to convert all applicable characters to HTML entities. When you want to display some HTML code in your page it will show the result of your code but not the actual code in that kind of situation you can use htmlentities() and one more function Htmlspecialchars() will be explaining more about this function down.
<?php
$str = "I like <b>PHP</b>";
echo "Actual result:<br>";
echo $str.'<br><br>';
echo "Result by using function:<br>";
echo htmlentities($str);
?>



Result:



Htmlspecialchars()
<?php
$str = "<a href='http://www.phpjavascript.com/'>PHP</a>";
echo "Actual result:<br>";
echo $str.'<br><br>';
echo "Result by using function:<br>";
echo htmlspecialchars($str, ENT_QUOTES);
?>
Result:



strip_tags()
This function is identical to htmlentities() function except strip_tags function strips html tags and html from a string.
<?php
$str = "<a href='http://www.phpjavascript.com/'>PHP</a>";
echo "Actual result:<br>";
echo $str.'<br><br>';
echo "Result by using function:<br>";
echo strip_tags($str, ENT_QUOTES);
?>
Result:



explode()
The explode function take its input as a string and convert it into an array. The function takes the first parameter as separator and second one is a string. It converts a string into an array based on the separator.
<?php
$cars = "BMW,Mercedes,Audi,Honda,Ferrari";
$brands = explode(",", $cars); //separate by comma(,)
echo 'Brand Name : '.$brands[0].'<br>'; //BMW
echo 'Brand Name : '.$brands[2]; //Audi
?>



Result:


implode()
This function is just opposite to explode function. As explode function converts string into array, but the implode function take its input as array and convert it into string.
<?php
$cars = array("BMW","Mercedes","Audi","Honda","Ferrari");
$brands = implode(",", $cars);
echo $brands;
?>
Result:



rand()
The rand() function outputs a random number. there are two optional parameters that you can add to set mi and max for the number.
<?php
echo rand();
echo '<br>';
echo rand(10,20);
?>
Result:




str_replace()
This function is useful when you want to do a simple match and replace. 
This function accepts four parameters,
 three required. find, replace, string, count(optional).

<?php
$string = 'aaa-bbb-ccc';
echo str_replace('-', '*', $string);
?>

Result:



date()
The date() function can have two parameters, 
format(required) and timestamp(optional).
<?php
echo date("d-m-Y h:i:s");
?>
Result:





strlen()
The strlen function will return the length of a given string. 
The spaces and characters are added to the count.
<?php
$stringOne = "Hello PHP";
echo 'stringOne Length = ' . strlen($stringOne) . '<br><br>';
$stringTwo = " Welcome code";
echo 'stringTwo Length = ' . strlen($stringTwo);
?> 
Result:




count()
This function count the number of element in a array.

<?php
$Alphabets = array("A", "B", "C", "D", "E");
echo 'Count = '.count($Alphabets);
?>

Result:

array_combine()
This function creates an array by using 
one array for keys and another for its values.
<?php
$fruit_color = array("green", "red", "yellow");
$fruits = array("avocado", "apple", "banana");
$fruits_array= array_combine($fruit_color, $fruits);
print_r($fruits_array);
?>
Result:



array_unique()
You can use this function to removes duplicate values from an array.
<?php
$input = array("a" => "green", "red", "b" => "green", "blue", "red");
$result = array_unique($input);
print_r($result);
?>
Result:



print_r()
This function is used to print array variable in a way that’s readable by humans.
<?php
$fruits = array ("a" => "Banana", "b" => "Apple");
print_r ($fruits);
?>
Result:



strrev()
This function reverses the given string.
<?php
echo strrev("Hello PHP");
?>
Result:





trim()
This function removes characters, space from the string form both the ends.
<?php
$str = "Hello PHPJavaScript";
echo $str . "<br>";
echo trim($str,"Ht");
?>
Result:



ucfirst()


This function Converts the first character to uppercase.
<?php
echo ucfirst("hello php!");
?>
Result:



For all PHP built in functions, go to  PHP.NET


Please do share and fallow our blog for more intresting content.




















by



at





No comments:
  


















Tags
,
,
,
,
,
,
,
,

















        

      









Subscribe to:
Posts (Atom)







Labels




php
(35)


javascript
(31)


phpjavascript
(30)


jquery
(23)


html
(20)


mysql
(14)


database
(9)


codeigniter
(4)


json
(4)


bar chart
(2)


calendar
(2)


column chart
(2)


framework
(2)


google maps
(2)


query
(2)


tables
(2)


url
(2)


dropdown
(1)










Popular Posts