PHP JavaScript: css

Showing posts with label css. Show all posts

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

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>

Simple Text Animation Using HTML, CSS and JQuery

In this article, we are explaining a very simple way to animate text in different ways.

1. Includes(jquery and bootstrap libraries)
2. CSS to design content
3. Body of content
4. Javascript to perform actions

Animations
1. Blur-in on mouse hover
2. Blur-out on mouse hover
3. Change background to the text
4. Show/hide text in sequence

Includes

css

<style>

#fadeIn { font: 15px monospace; }

#fadeIn .letter { opacity: 0; }

#fadeIn .opacity {

-webkit-transition: opacity .15s ease-in-out;

-moz-transition: opacity .15s ease-in-out;

-ms-transition: opacity .15s ease-in-out;

-o-transition: opacity .15s ease-in-out;

transition: opacity .15s ease-in-out;

opacity: 1;

}

#backgroundPaint .background {

-webkit-transition: background .3s ease-in-out;

-moz-transition: background .3s ease-in-out;

-ms-transition: background .3s ease-in-out;

-o-transition: background .3s ease-in-out;

transition: background .3s ease-in-out;

background: yellow;

}

h1, h2

{

font-size: 1.6em;

font-weight: normal;

margin: 0;

}

{

font-size: 1.3em;

margin-top: 1.5em;

}

a.blur

{

text-decoration: none;

color: #339;

}

a.blur:hover, a.blur:focus

{

text-decoration: underline;

color: #933;

}

.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus

{

text-decoration: none;

color: rgba(0,0,0,0);

outline: 0 none;

-webkit-transition: 400ms ease 100ms;

-moz-transition: 400ms ease 100ms;

transition: 400ms ease 100ms;

}

.textshadow a.blur,

.textshadow a.blur.out:hover, .textshadow a.blur.out:focus

{

text-shadow: 0 0 4px #339;

}

.textshadow a.blur.out,

.textshadow a.blur:hover, .textshadow a.blur:focus

{

text-shadow: 0 0 0 #339;

}

</style>

Body

<body>

<button>Click</button>

<h2>Hello Programmer, Welcome to PHP Javascript - Wonderful place to learn programming.</h2>

</div>

<button>Click</button>

<h2>Hello Programmer, Welcome to PHP Javascript - Wonderful place to learn programming.</h2>

</div>

<p>The following links blur in on hover/focus</p>

<h1><a href="http://www.phpjavascript.com/" class="blur">Hover me (Blur-in)</a></h1>

<p>The following links blur out on hover/focus</p>

<h1><a href="http://www.phpjavascript.com/2018/01/display-json-data-in-table-using-jquery.html" class="blur out">Hover me (Blur-out)</a></h1>

</body>

JavaScript

$.fn.animateText = function (delay, styleclass) {

var text = this.text();

return this.each(function () {

var $this = $(this);

$this.html(text.replace(/./g, '<span class="letter">$&</span>'));

$this.find('span.letter').each(function (i, el) {

setTimeout(function () {

$(el).addClass(styleclass);

}, delay * i);

});

};

$('#fadeIn button').click(function () {

$(this).next('h2').animateText(15, 'opacity');

});

$('#backgroundPaint button').click(function () {

$(this).next('h2').animateText(8, 'background');

});

if (document.createElement("detect").style.textShadow === "") {

document.getElementsByTagName("html")[0].className += " textshadow";

}

</script>

Note:Paste javscript code at te bottom of your html code.
*Please share the article and follow our PHP Javascript for more.

* Display JSON data in dropdown

* Display JSON data in a table

How to add/remove text-box dynamically using JQuery/JavaScript?

This example demonstrates how to add/remove text field in the form dynamically. I saw so many examples on the web related to this query, but this is the simplest method in all of them.

Includes

Script

$(document).ready(function () {

//maximum input boxes allowed

var max_fields = 5;

//Fields wrapper

var wrapper = $(".input_fields_wrap");

//Add button

var add_button = $(".add_field_button");

//Initlal text box count

var x = 1;

//On add input button click

$(add_button).click(function (e) {

e.preventDefault();

//Max input box allowed

if (x < max_fields) {

//Text box increment

x++;

//Add input box

$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field btn-danger">Remove</a></div>');

}

});

//User click on remove text

$(wrapper).on("click", ".remove_field", function (e) {

e.preventDefault();

$(this).parent('div').remove();

x--;

})

});

</script>

Styles

body{

position: absolute;

width: 600px;

height: 200px;

z-index: 15;

top: 50%;

left: 30%;

margin: -100px 0 0 -150px;

}

.box{

background: grey;

padding-top: 10px;

padding-left: 60px;

padding-bottom: 10px;

width: 500px;

height: auto;

}

.btn-success{

padding: 5px;

}

input{

margin-top: 10px;

}

</style>

Body

<body>

<button class="add_field_button btn-success">Add More Fields</button><br>

</div>

</body>

Result

How to generate dynamic tables using Javascript/JQuery, CSS, HTML?


In this tutorail we are going to discuss about most questioned topic in the web, 
how to generate dynamic table using jquery. Here is the simple code for 
adding/deleting rows and columns dynamically.


<html>
<head>

<link rel="stylesheet"  
href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" 
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<script>
    $(function () {
        $("#addrow").click(function () {
            var tr = "<tr>" + "<td contenteditable='true'></td>".
                    repeat($("#myTable tr:eq(0) td").length) + "</tr>"
            $("#myTable").append(tr);
        });
        $("#addcolumn").click(function () {
            $("#myTable tr").append($("<td contenteditable='true'></td>"));
            $(document).on('click', '.js-del-row', function () {
                $('#myTable').find('tr:last').remove();
            });
            $(document).on('click', '.js-del-column', function () {
                $('#myTable').find('td:last').remove();
            });
        });
    });
</script>

<style type="text/css">
    body{
        position: absolute;
        width: 600px;
        height: 200px;
        z-index: 15;
        top: 50%;
        left: 40%;
        margin: -100px 0 0 -150px;
        background: grey;
    }
    table,tr,td
    {
        border: 1px solid white;
        border-collapse: collapse;
        padding:10px;
        margin-bottom:1em;
        color: white;
    }
    #mytable{
        position: absolute;
        margin-left:50px;
        margin-top: 25px;
    }
    .addtable{
        color: red;
        margin-left:50px;
        margin-top: 25px;
    }
</style>

</head>

<body>
    <div class="addtable">
        <a href='http://www.phpjavascript.com/' class='btn btn-danger'>Add</a>
        <input id="addrow" type="button" value="Add Row">
        <input id="addcolumn" type="button" value="Add Column">
        <button class="js-del-row">Delete Row</button>
        <button class="js-del-column">Delete Column</button>
    </div>
    <table id="myTable">
        <thead>
            <tr id="test" contenteditable="true"><td>S.No</td></tr>
        </thead>
        <tbody>
            <tr>
                <td contenteditable="true">0001</td>
            </tr>
        </tbody>
    </table
</body>

</html>

Result

Progress Bar Using HTML CSS and Jquery

A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format. The concept can also be regarded to include "playback bars" in media players that keep track of the current location in the duration of a media file.

Here is the simple code showing a progress bar from 1 to 100.



<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Progressbar</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
        .ui-progressbar {
            position: relative;
        }
        .progress-label {
            position: absolute;
            left: 50%;
            top: 4px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
        }
        .ui-widget-header {
            border: 1px solid #a03232;
            background: green;
            color: #333333;
            font-weight: bold;
        }
    </style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {
        var progressbar = $( "#progressbar" ),
          progressLabel = $( ".progress-label" );

         progressbar.progressbar({
            value: false,
          change: function() {
           progressLabel.text( progressbar.progressbar( "value" ) + "%" );
          },
         complete: function() {
         progressLabel.text( "Complete!" );
         }
     });

      function progress() {
        var val = progressbar.progressbar( "value" ) || 0;

       progressbar.progressbar( "value", val + 2 );

      if ( val < 99 ) {
      setTimeout( progress, 80 );
    }
  }

   setTimeout( progress, 2000 );
   } );
</script>
</head>
<body>

<div id="progressbar"><div class="progress-label">Loading...</div></div>


</body>
</html>

Result:

Everything about google pie chart

Its always a good idea to represent your data in a graphical way. here we are explaining how to use google graphs API.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

var options = {
title: 'My Daily Activities'
};

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

chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

Add these lines in your options variable

1. For 3D model pie chart.
is3D: true,

2. Adding background to pie chart
backgroundColor: 'skyblue',

3. Change legend text color and size
legendTextStyle: { color: 'red', fontSize: 15},

4. Change legend position
you can four different position options-top/bottom/left/right
legend:{ position:'bottom'},

5. Change title text color and size
titleTextStyle: { color: 'red', fontSize:16},

6. Change colors of pie slices
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],

7. Pie slice text display value and percentage
only for value.
pieSliceText: 'value',

only for percentage
pieSliceText: 'percentage',

for value and percentage
pieSliceText: 'value-and-percentage',

8.Change pie slice(labels) text color and size

pieSliceTextStyle : {fontSize:16, color:'red'},
Result:

PHP JavaScript

Animated 3D Cube Using HTML CSS JAVASCRIPT

Simple JavaScript code to design calculator

Script

HTML

CSS

Simple Text Animation Using HTML, CSS and JQuery

* Display JSON data in dropdown

* Display JSON data in a table

How to add/remove text-box dynamically using JQuery/JavaScript?

How to generate dynamic tables using Javascript/JQuery, CSS, HTML?

Result

Progress Bar Using HTML CSS and Jquery

Everything about google pie chart

Labels

Popular Posts