Link : http://www.mediafire.com/file/by2fe5mym9ww20v/Calculator.zip
Monday, May 28, 2018
Wednesday, May 16, 2018
Monday, May 14, 2018
Wednesday, May 9, 2018
Add a video and auto play in your website using html and css
Add the html code : index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<video autoplay muted loop id="myVideo">
<source src="vdo.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="content">
<h1>My Content on the Video.....</h1>
<p>Md. Alamgir Hossain </p>
<p>Department of Computer Science & Engineering</p>
<p>Jessore University of Science & Technology</p>
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
</body>
</html>
Add the CSS code : main.css
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
height: 50%;
padding: 20px;
}
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<video autoplay muted loop id="myVideo">
<source src="vdo.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="content">
<h1>My Content on the Video.....</h1>
<p>Md. Alamgir Hossain </p>
<p>Department of Computer Science & Engineering</p>
<p>Jessore University of Science & Technology</p>
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
</body>
</html>
Add the CSS code : main.css
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
height: 50%;
padding: 20px;
}
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
Sunday, May 6, 2018
How to create a link with html button that go the same page but different div
Html Code :
And the goal division is myDIV :
<!DOCTYPE html>
<html>
<head>
<title>Link with same page but different DIV</title>
<script type="text/javascript">
function myFunction() {
document.getElementById("myDIV").scrollIntoView(true);
}
</script>
</head>
<body>
<button onclick="myFunction()">Click Me</button>
<div id="myDIV">
<h1>Md. Alamgir Hossain</h1>
<h1>Dept. of Computer Science & Engineering</h1>
<h1>Jessore University of Science & Technology</h1>
<h1>You Tube</h1>
</div>
</body>
</html>
And the goal division is myDIV :
<!DOCTYPE html>
<html>
<head>
<title>Link with same page but different DIV</title>
<script type="text/javascript">
function myFunction() {
document.getElementById("myDIV").scrollIntoView(true);
}
</script>
</head>
<body>
<button onclick="myFunction()">Click Me</button>
<div id="myDIV">
<h1>Md. Alamgir Hossain</h1>
<h1>Dept. of Computer Science & Engineering</h1>
<h1>Jessore University of Science & Technology</h1>
<h1>You Tube</h1>
</div>
</body>
</html>