abc

Share This blog with your friends, so that we can improve more & more . our aim is to easy & simple way of learning.

12/14/2020

How to create JavaScript animation - moving image

 in this below example move image from original position to right.

we use setTimeout and clearTimeout to start and stop image animate.


html input button click method handle.


<script type = "text/javascript">

 

var getimage = null;

var animate ;

function init() {

   getimage = document.getElementById('myImage');

   getimage.style.position= 'relative'; 

   getimage.style.left = '0px'; 

}

function move() {

   getimage.style.left = parseInt(getimage.style.left) + 10 + 'px';

   animate = setTimeout(move,60);    // call move in 60msec

}

function stop() {

   clearTimeout(animate);

   getimage.style.left = '0px'; 

}

window.onload = init;

 

</script>

<div>

 <img id = "myImage" src = "hello.png" />

 <p>Click the buttons below to handle animation</p>

 <input type = "button" value = "Start" onclick = "move()" />

 <input type = "button" value = "Stop" onclick = "stop()" />

</div>      


please comment your query.

How to access camera in android WebView

 if you are making hybrid apps , which works on all os(android, ios, windows)


step -1) in HTML add capture attribute .

<input type="file" accept="image/*" capture="camera">


step -2) go to uses permissions in mainfest.xml in android project

add below line to set uses permission 

<uses-permissions android:name="android.permission.camera" />



step -3) ask user to accept permission

webview.getSettings().setJavaScriptEnabled(true);

webview.getSettings().setDomStorageEnabled(true);

webview.getSettings().setPluginState(WebSettings.PluginState.ON);


webview.setWebChromeClient(new WebChromeClient(){

         

        @Override

        public void onPermissionRequest(final PermissionRequest request) {

            L.d("onPermissionRequest");

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

                 request.grant(request.getResources());

            }

        }

    });


just use this three steps and remaining is same . 


this useful when upload product, setting profile picture, attaching document.


what is Node.js, how to Install and work.

 Node.js is an open source server environment and run JavaScript on the server.


1. install Node.js  - install from official site  https://nodejs.org.


2. how to create and run file


step 1) make file with extension .js

step 2) save the file to other drive

step 3) open node.js command prompt 

step 4) change directory in command eg: E: for e directory , D: for d directory

step 5) then subdirectory/folder = cd E:\nodejsfolder

step 6) type node filename.js


3. writing hello world using node.js


add below code to abc.js 


var http = require("http");

http.createServer(function (request, response) {

   response.writeHead(200, {'Content-Type': 'text/plain'});

   response.end('Hello World\n');

}).listen(8081);

console.log('Server running at http://127.0.0.1:8081/');


open node.js command prompt(not normal command prompt) and type node abc.js

command prompt shows message "Server running at http://127.0.0.1:8081/"

go to this server from browser and check link http://127.0.0.1:8081/ , you will see "hello world"


if you close command prompt , server also close. to continuous on server add 'forget' module


4. install require packages using command.

npm install name.

for example - npm install ws --> to add websocket




remember to run use 'node filename.js' from command


4. create server 

var http = require("http");

var server = http.createServer(function(){

   console.log("Hello");

});

server.listen(3000);


 now go to browser and open localhost:3000 & then check command prompt it show hello means server started.


please comment if any query.

How to create google chart

 google chart is in bar chat, line chart, circle(pie) chart like various view


helpful link is https://www.gstatic.com/charts/loader.js


simple steps,

1) first call https://www.gstatic.com/charts/loader.js

2) in chart load core chart package, there are various package available 

3) pass some data to data variable

4) called object google.visualization.PieChart and method 'draw'




<html lang="en-US">

<body>

<div id="piechart"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<script>

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);


function drawChart()

{

  var data = google.visualization.arrayToDataTable([

   ['Work', 10], ['Eat', 1], ['TV', 3], ['Gym', 1], ['Sleep', 9] ]);


  var options = {'title':'My Day is planned shown in chart', 'width':550, 'height':400};

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);

}

</script>


</body>

</html>


above google chart is lightweight, easy to load, works on all browser, devices, easy to understand by user and also showing chart indication.

How to create Overlay box or modal to complete page.

 <html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.overlay {

  display: none;

  position: fixed;

  z-index: 1;

  padding-top: 100px;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgb(0,0,0);

  background-color: rgba(0,0,0,0.4);

}

.overlay-content {

  background-color: #fefefe;

  margin: auto;

  padding: 20px;

  border: 1px solid #888;

  width: 80%;

}

.closebtn {

  color: #aaaaaa;

  float: right;

  font-size: 28px;

  font-weight: bold;

}


.closebtn:hover,

.closebtn:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}

</style>

</head>

<body>


<h2>overlay Example</h2>


<!-- Trigger/Open The overlay -->

<button id="myBtn" onclick="openoverlay()">Open overlay</button>


<!-- The overlay -->

<div id="myoverlay" class="overlay">


  <!-- overlay content -->

  <div class="overlay-content">

    <span class="closebtn" onclick="closebtn()">&times;</span>

    <p>Some text in the overlay..</p>

  </div>


</div>


<script>

var overlay = document.getElementById("myoverlay");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("closebtn")[0];

function openoverlay()

{

  overlay.style.display = "block";

}

function closebtn()

{

  overlay.style.display = "none";

}

window.onclick = function(event)  //outside overlay box click also hide box.

{

  if (event.target == overlay) {

    overlay.style.display = "none";

  }

}

</script>


</body>

</html>


in above example we have set two class one cover complete webpage, other is overlay box, one close button two hide open box.

simple display:none or block properties set from script and style. position must fixed to cover all page & background set rgba color.


How to create Image Zooming effect.

 this effect is useful when creating ecommerce website, showing detail view of image.



<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

* {box-sizing: border-box;}


.img-zoom-container {

  position: relative;

}


.img-zoom-lens {

  position: absolute;

  border: 1px solid #d4d4d4;

  width: 40px;

  height: 40px;

}


.img-zoom-result {

  border: 1px solid #d4d4d4;

  width: 300px;

  height: 300px;

}

</style>

<script>

function imageZoom(imgID, resultID)

{

  var img, lens, result, bx, by;

  img = $('#imgID');

  result = $('resultID');

  lens = $("div");

  $(lens).attr("class", "img-zoom-lens");

  img.parentElement.insertBefore(lens, img);

  bx = result.offsetWidth;

  by = result.offsetHeight;

  result.style.backgroundImage = "url('" + img.src + "')";

  result.style.backgroundSize = (img.width * bx) + "px " + (img.height * by) + "px";

  lens.addEventListener("mousemove", moveLens);

  img.addEventListener("mousemove", moveLens);

  lens.addEventListener("touchmove", moveLens);

  img.addEventListener("touchmove", moveLens);

  function moveLens(e) {

    var pos, x, y;

    e.preventDefault();

    pos = getCursorPos(e);

    x = pos.x - (lens.offsetWidth / 2);

    y = pos.y - (lens.offsetHeight / 2);

    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}

    if (x < 0) {x = 0;}

    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}

    if (y < 0) {y = 0;}

    lens.style.left = x + "px";

    lens.style.top = y + "px";

    result.style.backgroundPosition = "-" + (x * bx) + "px -" + (y * by) + "px";

  }

  function getCursorPos(e) {

    var a, x = 0, y = 0;

    e = e || window.event;

    a = img.getBoundingClientRect();

    x = e.pageX - a.left;

    y = e.pageY - a.top;

    x = x - window.pageXOffset;

    y = y - window.pageYOffset;

    return {x : x, y : y};

  }

}

imageZoom("trialimage", "trialresult");

</script>

</head>

<body>


<h1>Image Zooming effect</h1>


<p>Mouse over the image:</p>


<div class="img-zoom-container">

  <img id="trialimage" src="img_girl.jpg" width="300" height="240">

  <div id="trialresult" class="img-zoom-result"></div>

</div>



</body>

</html>


in above zoom effect details, 

1)define two container one is original image, second zoom preview.

2) get offsetWidth and offsetHeight using javascript.

3) set cursor and lens position

4) lens set to absolute position on image so that get exact zoom part from image.

5) main image from first container setting to other container background image.


Simple Tricks of PHP OOPS (object oriented Programming)

 1) A class is a template for objects, and an object is an instance of class. 


for example - car is class, bmw, mercedes is object


2) Define function in class called method,

 define variable in class called properties.



three principle in OOPS

 

A) Encapsulation - Binding (or wrapping) code and data together into a single unit are known as encapsulation. 


For example, a capsule, it is wrapped with different medicines.


via the use of "get" and "set" methods etc.(hide implementation detail)

for example -


<?php

class Animal

{

    private $family;

    private $food;


}

?>



B) Inheritance - via the use of extends keyword   (inherit from parent to child)



C) Polymorphism - If one task is performed in different ways, it is known as polymorphism 

 for example -

i) draw shape like circle, triangle (draw task in different ways)

ii) speak something like a cat speaks meow, dog barks woof  (speak task in different ways)


for polymorphism use implements keyword .



Abstraction -  Hiding internal details and showing functionality is known as abstraction. For example phone call, we don't know the internal processing




class car

{

   public $color = 'red' //property


   // method create   

   public function useofthis()

   {

return $this->color;   //using this keyword get property within same class

   }

}


$bmw= new car(); //object create


echo $bmw->color  // get property not add $ for property when calling

echo $bmw->useofthis() //get method





3) A constructor allows you to initialize an object's properties upon creation of the object.


function __construct($name) { //double underscore before construct word

    $this->name = $name;

  }


4) If you create a __destruct() function, PHP will automatically call this function at the end of the script.


5) 

public - the property or method can be accessed from everywhere. This is default

protected - the property or method can be accessed within the class and by classes derived from that class

private - the property or method can ONLY be accessed within the class


6) Inheritance in OOP = When a class derives from another class.

-- child class has its all properties and method from parent class(main class) include its own property and method


7) We can access a constant from outside the class by using the class name followed by the scope resolution operator (::)


class Goodbye {

  const LEAVING_MESSAGE = "Thank you for visiting W3Schools.com!";

}


echo Goodbye::LEAVING_MESSAGE;


8) Abstract classes and methods are when the parent class has a named method, but need its child class(es) to fill out the tasks.



9) Interfaces allow you to specify what methods a class should implement.

define by interface keyword


10) Traits are used to declare methods that can be used in multiple classes. Traits can have methods and abstract methods that can be used in multiple classes, and the methods can have any access modifier (public, private, or protected).


11)Namespace -allow for better organization by grouping classes that work together to perform a task,

allow the same name to be used for more than one class


namespace ab;


How to create Responsive Image(All Devices good view) with Transparent text

 <html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}


 


.container {

  position: relative;

  max-width: 800px;

  margin: 0 auto;

}


.container img {vertical-align: middle;}


.container .content {

  position: absolute;

  bottom: 0;

  background: rgb(0, 0, 0); 

  background: rgba(0, 0, 0, 0.5); 

  color: #ffffff;

  width: 100%;

  padding: 20px;

}

</style>

</head>

<body>


<h5>Responsive Image with Transparent Text</h5>


<div class="container">

  <img src="trial.jpg" alt="background" style="width:100%;">

  <div class="content">

    <h1>Heading</h1>

    <p>Sample Text here Sample Text hereSample Text hereSample Text hereSample Text hereSample Text here.</p>

  </div>

</div>


</body>

</html>


in above example if you observe class 'content' which text overlay and transparent view using background: rgba(0, 0, 0, 0.5); 


RGBA - set opacity of rgb(red, green, blue) color , in above 0.5 means transparent to background up to half.

Share your valuable comment.

How to create Responsive header for Mobile webpages

 Responsive means which is works on all devices, it is mobile friendly. and it's also good SEO & user interface.


<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing: border-box;}


body { 

  margin: 0;

  font-family: Arial, Helvetica, sans-serif;

}


.header {

  overflow: hidden;

  background-color: #f1f1f1;

  padding: 20px 10px;

}


.header a {

  float: left;

  color: black;

  text-align: center;

  padding: 12px;

  text-decoration: none;

  font-size: 18px; 

  line-height: 25px;

  border-radius: 4px;

}

 


.header a:hover {

  background-color: #ddd;

  color: black;

}


.header a.active {

  background-color: dodgerblue;

  color: white;

}


.header-right {

  float: right;

}


@media screen and (max-width: 500px) {

  .header a {

    float: none;

    display: block;

    text-align: left;

  }

  

  .header-right {

    float: none;

  }

}

</style>

</head>

<body>


<div class="header">

  <a href="#default" class="logo"><img src="logo.png"/></a>

  <div class="header-right">

    <a class="active" href="#home">Home</a>

    <a href="#contact">Contact</a>

    <a href="#about">About</a>

  </div>

</div>


<div style="padding-left:20px">

  <h5>Responsive Header</h5>

  <p>Some sample content..</p>

</div>


</body>

</html>


check above code on mobile which shows different view of header , which is easy to user access.


How to create vertical tabs using CSS and JAVASCRIPT

 <html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing: border-box}

body {font-family: "Lato", sans-serif;}


/* Style the mytab */

.mytab {

  float: left;

  border: 1px solid #ccc;

  background-color: #f1f1f1;

  width: 30%;

  height: 300px;

}


/* Style the buttons inside the mytab */

.mytab button {

  display: block;

  background-color: inherit;

  color: black;

  padding: 22px 16px;

  width: 100%;

  border: none;

  outline: none;

  text-align: left;

  cursor: pointer;

  transition: 0.3s;

  font-size: 17px;

}


/* Change background color of buttons on hover */

.mytab button:hover {

  background-color: #ddd;

}


/* Create an active/current "mytab button" class */

.mytab button.active {

  background-color: #ccc;

}


/* Style the mytab content */

.mytabcontent {

  float: left;

  padding: 0px 12px;

  border: 1px solid #ccc;

  width: 70%;

  border-left: none;

  height: 300px;

}

</style>

</head>

<body>


<h2>Vertical mytabs</h2>

<p>Click on the buttons inside the mytabbed menu:</p>


<div class="mytab">

  <button class="mytablinks" onclick="openCity(event, 'India')" id="defaultOpen">India</button>

  <button class="mytablinks" onclick="openCity(event, 'America')">America</button>

  <button class="mytablinks" onclick="openCity(event, 'Africa')">Africa</button>

</div>


<div id="India" class="mytabcontent">

  <h3>India</h3>

  <p>India is the capital city of England.</p>

</div>


<div id="America" class="mytabcontent">

  <h3>America</h3>

  <p>America is the capital of France.</p> 

</div>


<div id="Africa" class="mytabcontent">

  <h3>Africa</h3>

  <p>Africa is the capital of Japan.</p>

</div>


<script>

function openCity(evt, cityName) {

  var i, mytabcontent, mytablinks;

  mytabcontent = document.getElementsByClassName("mytabcontent");

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

    mytabcontent[i].style.display = "none";

  }

  mytablinks = document.getElementsByClassName("mytablinks");

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

    mytablinks[i].className = mytablinks[i].className.replace(" active", "");

  }

  document.getElementById(cityName).style.display = "block";

  evt.currentTarget.className += " active";

}


// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

</script>

   

</body>

</html> 


What is PHP super global


predefined variables in PHP called "super global", which means that they are always accessible, regardless of scope - and you can access them from any function, class or file without having to do anything special.



Below are Super global,

1) $GLOBALS

2) $_SERVER

3) $_REQUEST

4) $_POST

5) $_GET

6) $_FILES

7) $_ENV

8) $_COOKIE

9) $_SESSION


1) $GLOBALS - means accessible variables outside of function , for example - $GLOBALS['z'] this variable also accessible outside function 'addition'


<?php 

$x = 75;

$y = 25; 


function addition() {

  $GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y'];

}


addition();

echo $z;

?>


2) $_SERVER - 


$_SERVER['PHP_SELF'] - current PHP file name

$_SERVER['GATEWAY_INTERFACE'] - version of the Common Gateway Interface (CGI) currently using

$_SERVER['SERVER_ADDR'] - Host server IP address

$_SERVER['SERVER_NAME'] - name of the host server (such as infyleaf.tech)

$_SERVER['REQUEST_METHOD'] request method used to access the page (such as POST)

$_SERVER['QUERY_STRING'] query string if the page is accessed via a query string

$_SERVER['HTTP_ACCEPT'] Accept header from the current request

$_SERVER['HTTP_ACCEPT_CHARSET'] Accept Charset header from the current request

$_SERVER['HTTP_HOST'] Host header from the current request

$_SERVER['HTTP_REFERER'] complete URL of the current page (not reliable because not all user-agents support it)

$_SERVER['HTTPS'] Is the script queried through a secure HTTP protocol

$_SERVER['REMOTE_ADDR'] IP address from where the user is viewing the current page

$_SERVER['REMOTE_HOST'] Host name from where the user is viewing the current page

$_SERVER['REMOTE_PORT'] port being used on the user's machine to communicate with the web server

$_SERVER['SCRIPT_FILENAME'] absolute pathname of the currently executing script

$_SERVER['PATH_TRANSLATED'] file system based path to the current script

$_SERVER['SCRIPT_NAME'] path of the current script

$_SERVER['SCRIPT_URI'] URI of the current page


3) $_REQUEST - get requested name  $name = $_REQUEST['fname']; when form is post


4) $_POST - when post form get value of input for eg -

 $_POST['firstname'], $_POST['mobile']

 

<form action="" method="post">

<input type="text" name="mobile"/>

<input type="submit" value="save"/>

</form>


5) $_GET - get value from url , but should remember not pass secure value like password to this variable.


6)$_FILES - to get value from files when post input type file

basename($_FILES["fileToUpload"]["name"]);


for example 


if ($_FILES["fileToUpload"]["size"] > 2000000) {

  echo "Sorry, your file is too large.";

  $uploadOk = 0;

}


7)$_ENV - get environment variables

<?php

$arr=getenv();

foreach ($arr as $key=>$val)

echo "$key=>$val

";

?>



8) $_COOKIE - get cookie value 


in below example checking if cookie name set or not

<?php

$cookie_name = "user";

$cookie_value = "Mayur";

setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day

?>

<html>

<body>


<?php

if(!isset($_COOKIE[$cookie_name])) {

  echo "Cookie named '" . $cookie_name . "' is not set!";

} else {

  echo "Cookie '" . $cookie_name . "' is set!<br>";

  echo "Value is: " . $_COOKIE[$cookie_name];

}

?>


9) $_SESSION - store value in session , temporary storage over multiple page. 


first line should be session_start();


$_SESSION["favcolor"] = "green";


in case any query please comment


An Introduction to the Laravel Framework: What It Is and Why You Should Use It

  If you're a PHP developer looking for a modern, efficient, and powerful framework to build web applications, look no further than Lara...