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)

Sunday, July 8, 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:







Tuesday, May 29, 2018

Animated 3D Cube Using HTML CSS JAVASCRIPT

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






Monday, May 28, 2018

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

Monday, April 23, 2018

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">&nbsp;</td>';
}

$createtable .= '</tr>';
}

$createtable .= '</table>';
}

?>

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

<table border="0" width="200">

<tr>
<td width="80"><label>Column:</label></td>
<td width="120"><input type="text" name="colunn"></td>
</tr>

<tr>
<td><label>Line:</label></td>
<td><input type="text" name="line"></td>
</tr>

<tr>
<td colspan="2" align="right">
<input type="submit" value="Create Table">
</td>
</tr>

</table>

</form>

<?php

echo $createtable;

 ?>



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

Sunday, April 22, 2018

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>
<script>

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.

Thursday, April 19, 2018

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>
<div id='wrap'>
<table border="1">
<tr>
<td colspan="3"><input type="text" id="result" readonly></td>
<td><input type="button" value="C"  onClick="clearElement()"></td>
</tr>
<tr>
<td><input type="button" value="1" onClick="element('1')"></td>
<td><input type="button" value="2" onClick="element('2')"></td>
<td><input type="button" value="3" onClick="element('3')"></td>
<td><input type="button" value="+" onClick="element('+')"></td>
</tr>
<tr>
<td><input type="button" value="4" onClick="element('4')"></td>
<td><input type="button" value="5" onClick="element('5')"></td>
<td><input type="button" value="6" onClick="element('6')"></td>
<td><input type="button" value="-" onClick="element('-')"></td>
</tr>
<tr>
<td><input type="button" value="7" onClick="element('7')"></td>
<td><input type="button" value="8" onClick="element('8')"></td>
<td><input type="button" value="9" onClick="element('9')"></td>
<td><input type="button" value="/" onClick="element('/')"></td>
</tr>
<tr>
<td><input type="button" value="*" onClick="element('*')"></td>
<td><input type="button" value="0" onClick="element('0')"></td>
<td><input type="button" value="." onClick="element('.')"></td>
<td><input type="button" value="=" onClick="solve()"></td>
</tr>
</table>
</div>
</body>

CSS


<style type="text/css">
body,html{
matgin:0px;
}
input[type="button"]{
border:none;
width:100%;
outline: none;
}
#wrap
{
margin:10%;
}
</style>



Tuesday, April 17, 2018

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

<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
Body
<div id="map"></div>
<a href ='http://www.phpjavascript.com/2018/02/how-to-add-google-map-to-website-using.html'>MAP</a>
    <div id="right-panel">

    <div>

    <b>Start:</b>

    <select id="start">

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

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

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

      <option value="Pune">Pune</option>

    </select>

    <br>

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

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

    <select multiple id="waypoints">

      <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>

    <b>End:</b>

    <select id="end">

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

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

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

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

    </select>

    <br>

      <input type="submit" id="submit">

    </div>

    <div id="directions-panel"></div>

    </div>

Result


More Posts

FOLLOW