PHP JavaScript: 2018

Hide navbar when user starts to scroll the page down using javascript

Hide a navbar when the user starts to scroll the page using javascript

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
            background-color: orange;
            font-family: Arial, Helvetica, sans-serif;
        }
        #navbar {
            background-color: #333;
            position: fixed;
            top: 0;
            width: 100%;
            display:block;
            transition: top 0.3s;
        }
        #navbar a {
            float: left;
            display: block;
            color: red;
            text-align: center;
            padding: 15px;
            text-decoration: none;
            font-size: 17px;
        }
        #navbar a:hover {
            background-color: green;
            color: orange;
        }
    </style>
</head>
<body>
<div id="navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#news">About Us</a>
    <a href="#news">Contact Us</a>
    <a href="#news">Sitemap</a>
</div>
<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
    <p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b></p>
    <p>Scroll down this frame to see the effect!</p>
    <p>Scroll up to show the navbar.</p>
</div>
<script>
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
        var currentScrollPos = window.pageYOffset;
        if (prevScrollpos > currentScrollPos) {
            document.getElementById("navbar").style.top = "0";
        } else {
            document.getElementById("navbar").style.top = "-50px";
        }
        prevScrollpos = currentScrollPos;
    }
</script>
</body>
</html>

Result:

Automatic Image Slider Using Javascript




<!DOCTYPE html><html>

<title>Automatic Slider Using Javascript</title>

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

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<style>
    .mySlides {display:none;}
</style>

<body>

<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="C:\Users\csuser\Desktop\ssss\images\download.jpg"

 style="width:100%">
<img class="mySlides" src="C:\Users\csuser\Desktop\ssss\images\images.jpg"

 style="width:100%">
<img class="mySlides" src="C:\Users\csuser\Desktop\ssss\images\shanghai.jpg" 

style="width:100%">
</div>
<script>
    var myIndex = 0;
    carousel();
    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
        setTimeout(carousel, 2000); // Change image every 2 seconds    }
</script>
</body>
</html>





Result:

Animated 3D Cube Using HTML CSS JAVASCRIPT

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<title>CSS3 3D Cube</title>
	<style>
	body{line-height:1}
	nav ul{list-style:none}
	blockquote,q{quotes:none}
	blockquote:before,blockquote:after,q:before,q:after{content:none}
	a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
	ins{background-color:#ff9;color:#000;text-decoration:none}
	mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
	del{text-decoration:line-through}
	abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
	table{border-collapse:collapse;border-spacing:0}
	hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
	input,select{vertical-align:middle}
	a, a:visited {
	color: #0101d0;
	font-weight: bold;
	cursor: pointer;
	font-size: 20px;
	font-family: arial;
	line-height: 20px;
	display: inline-block;
	padding: 10px;
	}
	a:hover {
	color: #000;
	}
	#wrapD3Cube {
	width: 250px;
	height: 213px;
	margin: 20px auto;
	background-color: #EEE;
	}
	#D3Cube {
	width: 112px;
	height: 112px;
	top: 50px;
	transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
	-moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
	-webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
	margin: auto;
	position: relative;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	}
	#D3Cube > div {
	position: absolute;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	width: 112px;
	height: 112px;
	float: left;
	overflow: hidden;
	opacity: 0.85;
	}
	#side1 {
	transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #ff0000;
	}
	#side2 {
	transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #4d0000;
	}
	#side3 {
	transform: translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
	background-color: #006600;
	}
	#side4 {
	transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #000066;
	}
	#side5 {
	transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #602020;
	}
	#side6 {
	transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #3399ff;
	}
	</style>
	</head>

	<body>
	<div id="wrapD3Cube">
	<div id="D3Cube">
	<div id="side1"></div>
	<div id="side2"></div>
	<div id="side3"></div>
	<div id="side4"></div>
	<div id="side5"></div>
	<div id="side6"></div>
	</div>
	</div>
	<p style="text-align: center;">
	<a onclick="turnLeft()">Left</a>
	<a onclick="turnRight()">Right</a> <br />
	<a onclick="flipCube()">Flip</a>
	</p>
	</body>

	<script>
	var cubex = -22, // initial rotation
	cubey = -38,
	cubez = 0;
	function rotate(variableName, degrees) {
	window[variableName] = window[variableName] + degrees;
	rotCube(cubex, cubey, cubez);
	}
	function rotCube(degx, degy, degz){
	segs = "rotateX("+degx+"deg) rotateY("+degy+"deg) rotateZ("+degz+"deg) translateX(0) translateY(0) translateZ(0)";
	$('#D3Cube').css({"transform":segs});
	}
	function turnRight() {
	rotate("cubey", 90);
	}
	function turnLeft() {
	rotate("cubey", -90);
	}
	function flipCube() {
	rotate("cubez", -180);
	}
	</script>

	</html>

Result

Download file with speed limit using PHP

Here we are explaining about how to limit speed for the file download operation.

<?php
// File form server
$local_file = 'user.php';

// filename that the user gets as default
$download_file = 'myFile.php';

// set the download rate limit (=> 10 kb/s)
$download_rate = 10;

if(file_exists($local_file) && is_file($local_file)) {

// send headers
header('Cache-control: private');
header('Content-Type: application/octet-stream');
header('Content-Length: '.filesize($local_file));
header('Content-Disposition: filename='.$download_file);

// flush content
flush();

// open file stream
$file = fopen($local_file, "r");

while (!feof($file)) {

// send the current file part to the browser
print fread($file, round($download_rate * 10));

// flush the content to the browser
flush();

// sleep one second
sleep(1);
}

// close file stream
fclose($file);
}
else {
die('Error: The file '.$local_file.' does not exist!');
}
?>

For more:

Unknown Features
Beautiful Designs
Security Features

Create tables dynamically from user input using PHP

In this tutorial we are going to learn about how to generate table columns and rows dynamically from user input.

Very simple code generate dynamic table.

Here is the code.

PHP code get requested number of columns and rows through loops and then simply display the table.

You always can make it more attractive by adding CSS styles.

<?php

$createtable = '';

if ($_POST){

$createtable .= '<table border="1">';

for ($i = 0; $i < $_POST['line']; $i++) {

$createtable .= '<tr>';

for ($j = 0; $j < $_POST['colunn']; $j++) {

$createtable .= '<td width="50"> </td>';

}

$createtable .= '</tr>';

}

$createtable .= '</table>';

}

<tr>

<td width="80"><label>Column:</label></td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

<?php

echo $createtable;

For any queries or any new code requests comment below in the comment section.

How to get URL parameters using JavaScript?

In this tutorial we are going to show you how to parse a URL and get values from the URL that you are passed.

We will be using the JavaScript's built in function split() which splits the string from a separator which is passed as a parameter to this function. The result is stored as an array and we will be using it multiple times since we want to split data into key value pairs, as the server generally processes it.

Just have a look at the following simple code.

<html>

<head>

<title>PHPJavascript.com</title>

</head>

var URL = "http://www.phpjavascript.com?firstValue=name&secondValue=email";

var query = URL.split('?')[1].split('&');

query.forEach(function(key) {

var pair = key.split('=');

alert(pair[0] + '=' + pair[1]);

});

</script>

</html>

URL will be split into parts based on the type of separators you are given in the function.
In this example we gave ('?', '&')

In forEach loop we are checking for the key and value pairs.
Those should be

key1 = firstValue
value1 = name
key2 = secondValue
value2 = email

We are alerting the result that generated here.

For any queries please comment in the bellow comment section.
For more interesting and useful code snippets please follow our blog.

Simple JavaScript code to design calculator

For creating a basic calculator in JavaScript, we use table structure, input type button, and JavaScript functions.

Input type button use is to take input from the user.
The table structure use is to create calculator structure.
Functions to evaluate the data.

Three simple functions to process all data

Script

1. element()

Which is used to read values from each button

function element(val){

document.getElementById('result').value+=val;

}

2. solve()

This function performs all arithmetic operations like(+,-,/,*)

function solve(){

var value1= document.getElementById('result').value;

let res = eval(value1);

document.getElementById('result').value=res;

}

3. clearElement()

Which is used to clear input value in the calculator

function element(val){

document.getElementById('result').value+=val;

}

HTML

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

CSS

body,html{

matgin:0px;

}

input[type="button"]{

border:none;

width:100%;

outline: none;

}

#wrap

{

margin:10%;

}

</style>

Generating path between start and end points through way points using google map API

In this article we explaining about how to dynamically generate a path between multiple points(start, end and way points) by using google map direction API.

Here is the simplest way of doing it, we explain it step by step.

CSS

<style>

#right-panel {

font-family: 'Roboto','sans-serif';

line-height: 30px;

padding-left: 10px;

}

#right-panel select, #right-panel input {

font-size: 15px;

}

#right-panel select {

width: 100%;

}

#right-panel i {

font-size: 12px;

}

html, body {

height: 100%;

margin: 0;

padding: 0;

}

#map {

height: 100%;

float: left;

width: 70%;

height: 100%;

}

#right-panel {

margin: 20px;

border-width: 2px;

width: 20%;

height: 400px;

float: left;

text-align: left;

padding-top: 0;

}

#directions-panel {

margin-top: 10px;

background-color: #23b0ff;

padding: 10px;

overflow: scroll;

height: 174px;

}

</style>

Script

function initMap() {

var directionsService = new google.maps.DirectionsService;

var directionsDisplay = new google.maps.DirectionsRenderer;

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 6,

center: {lat: 41.85, lng: -87.65}

});

directionsDisplay.setMap(map);

document.getElementById('submit').addEventListener('click', function() {

calculateAndDisplayRoute(directionsService, directionsDisplay);

});

}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {

var waypts = [];

var checkboxArray = document.getElementById('waypoints');

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

if (checkboxArray.options[i].selected) {

waypts.push({

location: checkboxArray[i].value,

stopover: true

});

}

directionsService.route({

origin: document.getElementById('start').value,

destination: document.getElementById('end').value,

waypoints: waypts,

optimizeWaypoints: true,

travelMode: 'DRIVING'

}, function(response, status) {

if (status === 'OK') {

directionsDisplay.setDirections(response);

var route = response.routes[0];

var summaryPanel = document.getElementById('directions-panel');

summaryPanel.innerHTML = '';

// For each route, display summary information.

for (var i = 0; i < route.legs.length; i++) {

var routeSegment = i + 1;

summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +

'</b><br>';

summaryPanel.innerHTML += route.legs[i].start_address + ' to ';

summaryPanel.innerHTML += route.legs[i].end_address + '<br>';

summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';

}

} else {

window.alert('Directions request failed due to ' + status);

}

});

}

</script>

API

<script async defer

src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

</script>

Here is the procedure to create new API key

http://www.phpjavascript.com/2018/02/how-to-add-google-map-to-website-using.html

Body

<div>

<b>Start:</b>

<option value="Hyderabad">Hyderabad</option>

<option value="Banglore">Banglore</option>

<option value="Delhi">Delhi</option>

</select>

<br>

<b>Waypoints:</b> <br>

<i>(Ctrl+Click or Cmd+Click for multiple selection)</i> <br>

<option value="Delhi">Delhi</option>

<option value="Banglore">Banglore</option>

<option value="Chenai">Chenai</option>

<option value="Hyderabad">Hyderabad</option>

<option value="Tripura">Tripura</option>

<option value="Varanasi">Varanasi</option>

</select>

<br>

<option value="Chenai">Chenai</option>

<option value="Kolkata">Kolkata</option>

<option value="Mumbai">Mumbai</option>

<option value="Rajasthan">Rajasthan</option>

</select>

<br>

</div>

</div>

PHP JavaScript

Hide navbar when user starts to scroll the page down using javascript

Automatic Image Slider Using Javascript

Animated 3D Cube Using HTML CSS JAVASCRIPT

Download file with speed limit using PHP

For more:

Create tables dynamically from user input using PHP

How to get URL parameters using JavaScript?

Simple JavaScript code to design calculator

Script

HTML

CSS

Generating path between start and end points through way points using google map API

CSS

Script

Result

Labels

Popular Posts