Advertisement

How to Create Animations using Javascript | IAM Platform Tutorials

iam platform login page background

Learn how to create animations using JavaScript.


A Basic Web Page

To demonstrate how to create HTML animations with JavaScript, we can use a simple web page.

CODE:

<!DOCTYPE html>
<html>
<body><h1>My First JavaScript Animation</h1><div id =”myContainer”>
<div id =”myAnimation”>My animation will go here</div>
</div>

</body>
<html>


Styling the Elements

To make an animation possible, the animated element must be animated relative to a “parent container”.

The container element should be created with style = “position: relative”.

The animation element should be created with style = “position: absolute”.

CODE:

#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background: red;
}

The Animation Code

JavaScript animations are done by programming gradual changes in an element’s style.

The changes are called by a timer. When the timer interval is small, the animation looks continuous.

The basic code is:

CODE:

var id = setInterval(frame, 5);

function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}


Create the Animation Using JavaScript

CODE:

function myMove() {
var elem = document.getElementById(“myAnimation”);
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + ‘px’;
elem.style.left = pos + ‘px’;
}
}
}

FULL CODE:

<!DOCTYPE html>
<html>
<style>
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>

<p>
<button onclick=”myMove()”>Click Me</button>
</p>

<div id =”myContainer”>
<div id =”myAnimation”></div>
</div>

<script>
function myMove() {
var elem = document.getElementById(“myAnimation”);
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + ‘px’;
elem.style.left = pos + ‘px’;
}
}
}
</script>

</body>
</html>


How to Create a Filter List with Javascript | IAM Platform Tutorials

iam platform login page background

Learn how to create a filter list with JavaScript.


Filter List

How to use JavaScript to search for items in a list.


Create A Search List

Step 1) Add HTML:

CODE:

<input type=”text” id=”myInput” onkeyup=”myFunction()” placeholder=”Search for names..”>

<ul id=”myUL”>
<li><a href=”#” class=”header”>A</a></li>
<li><a href=”#”>Adele</a></li>
<li><a href=”#”>Agnes</a></li>

<li><a href=”#” class=”header”>B</a></li>
<li><a href=”#”>Billy</a></li>
<li><a href=”#”>Bob</a></li>

<li><a href=”#” class=”header”>C</a></li>
<li><a href=”#”>Calvin</a></li>
<li><a href=”#”>Christina</a></li>
<li><a href=”#”>Cindy</a></li>
</ul>

Note: We use href=”#” in this demo since we do not have a page to link it to. In real life this should be a real URL to a specific page.


Step 2) Add CSS:

Style the input element and the list:

CODE:

#myInput {
background-image: url(‘/css/searchicon.png’); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}#myUL {
/* Remove default list styling */
list-style-type: none;
padding: 0;
margin: 0;
}

#myUL li a {
border: 1px solid #ddd; /* Add a border to all links */
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6; /* Grey background color */
padding: 12px; /* Add some padding */
text-decoration: none; /* Remove default text underline */
font-size: 18px; /* Increase the font-size */
color: black; /* Add a black text color */
display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a.header {
background-color: #e2e2e2; /* Add a darker background color for headers */
cursor: default; /* Change cursor style */
}

#myUL li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}


Step 3) Add JavaScript:

CODE:

<script>
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById(‘myInput’);
filter = input.value.toUpperCase();
ul = document.getElementById(“myUL”);
li = ul.getElementsByTagName(‘li’);// Loop through all list items, and hide those who don’t match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName(“a”)[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = “”;
} else {
li[i].style.display = “none”;
}
}
}
</script>

Tip: Remove toUpperCase() if you want to perform a case-sensitive search.

FULL CODE:

CODE:

<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}

#myInput {
background-image: url(‘/css/searchicon.png’);
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}

#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}

#myUL li a.header {
background-color: #e2e2e2;
cursor: default;
}

#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>

<h2>My Phonebook</h2>

<input type=”text” id=”myInput” onkeyup=”myFunction()” placeholder=”Search for names..” title=”Type in a name”>

<ul id=”myUL”>
<li><a href=”#” class=”header”>A</a></li>
<li><a href=”#”>Adele</a></li>
<li><a href=”#”>Agnes</a></li>

<li><a href=”#” class=”header”>B</a></li>
<li><a href=”#”>Billy</a></li>
<li><a href=”#”>Bob</a></li>

<li><a href=”#” class=”header”>C</a></li>
<li><a href=”#”>Calvin</a></li>
<li><a href=”#”>Christina</a></li>
<li><a href=”#”>Cindy</a></li>
</ul>

<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById(“myInput”);
filter = input.value.toUpperCase();
ul = document.getElementById(“myUL”);
li = ul.getElementsByTagName(“li”);
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName(“a”)[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = “”;
} else {
li[i].style.display = “none”;

}
}
}
</script>

</body>
</html>


Continue reading “How to Create a Filter List with Javascript | IAM Platform Tutorials”

CSS & Javascript Modal Image Gallery | IAM Platform Tutorials

iam platform login page background

Learn how to create a modal image gallery (lightbox) with CSS and JavaScript.


Lightbox (Modal Image Gallery)

 


Create A Lightbox

Step 1) Add HTML:

CODE:

<div class=”row”>
<div class=”column”>
<img src=”img1.jpg” onclick=”openModal();currentSlide(1)” class=”hover-shadow”>
</div>
<div class=”column”>
<img src=”img2.jpg” onclick=”openModal();currentSlide(2)” class=”hover-shadow”>
</div>
<div class=”column”>
<img src=”img3.jpg” onclick=”openModal();currentSlide(3)” class=”hover-shadow”>
</div>
<div class=”column”>
<img src=”img4.jpg” onclick=”openModal();currentSlide(4)” class=”hover-shadow”>
</div>
</div><div id=”myModal” class=”modal”>
<span class=”close cursor” onclick=”closeModal()”>&times;</span>
<div class=”modal-content”><div class=”mySlides”>
<div class=”numbertext”>1 / 4</div>
<img src=”img_nature_wide.jpg” style=”width:100%”>
</div><div class=”mySlides”>
<div class=”numbertext”>2 / 4</div>
<img src=”img_fjords_wide.jpg” style=”width:100%”>
</div><div class=”mySlides”>
<div class=”numbertext”>3 / 4</div>
<img src=”img_mountains_wide.jpg” style=”width:100%”>
</div><div class=”mySlides”>
<div class=”numbertext”>4 / 4</div>
<img src=”img_lights_wide.jpg” style=”width:100%”>
</div>

<a class=”prev” onclick=”plusSlides(-1)”>&#10094;</a>
<a class=”next” onclick=”plusSlides(1)”>&#10095;</a>

<div class=”caption-container”>
<p id=”caption”></p>
</div>

<div class=”column”>
<img class=”demo” src=”img1.jpg” onclick=”currentSlide(1)” alt=”Nature”>
</div>

<div class=”column”>
<img class=”demo” src=”img2.jpg” onclick=”currentSlide(2)” alt=”Trolltunga”>
</div>

<div class=”column”>
<img class=”demo” src=”img3.jpg” onclick=”currentSlide(3)” alt=”Mountains”>
</div>

<div class=”column”>
<img class=”demo” src=”img4.jpg” onclick=”currentSlide(4)” alt=”Lights”>
</div>
</div>
</div>


Step 2) Add CSS:

CODE:

.row > .column {
padding: 0 8px;
}.row:after {
content: “”;
display: table;
clear: both;
}.column {
float: left;
width: 25%;
}/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}

.mySlides {
display: none;
}

/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}

/* Position the “next button” to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}

img.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

img.hover-shadow {
transition: 0.3s
}

.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}


Step 3) Add JavaScript:

CODE:

<script>
function openModal() {
document.getElementById(‘myModal’).style.display = “block”;
}function closeModal() {
document.getElementById(‘myModal’).style.display = “none”;
}var slideIndex = 1;
showSlides(slideIndex);function plusSlides(n) {
showSlides(slideIndex += n);
}function currentSlide(n) {
showSlides(slideIndex = n);
}function showSlides(n) {
var i;
var slides = document.getElementsByClassName(“mySlides”);
var dots = document.getElementsByClassName(“demo”);
var captionText = document.getElementById(“caption”);
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = “none”;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(” active”, “”);
}
slides[slideIndex-1].style.display = “block”;
dots[slideIndex-1].className += ” active”;
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

Full Code:

<!DOCTYPE html>
<html>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}

* {
box-sizing: border-box;
}

.row > .column {
padding: 0 8px;
}

.row:after {
content: “”;
display: table;
clear: both;
}

.column {
float: left;
width: 25%;
}

/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}

/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}

/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}

.mySlides {
display: none;
}

.cursor {
cursor: pointer
}

/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}

/* Position the “next button” to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

img {
margin-bottom: -4px;
}

.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

img.hover-shadow {
transition: 0.3s
}

.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
</style>
<body>

<h2 style=”text-align:center”>Lightbox</h2>

<div class=”row”>
<div class=”column”>
<img src=”img_nature.jpg” style=”width:100%” onclick=”openModal();currentSlide(1)” class=”hover-shadow cursor”>
</div>
<div class=”column”>
<img src=”img_fjords.jpg” style=”width:100%” onclick=”openModal();currentSlide(2)” class=”hover-shadow cursor”>
</div>
<div class=”column”>
<img src=”img_mountains.jpg” style=”width:100%” onclick=”openModal();currentSlide(3)” class=”hover-shadow cursor”>
</div>
<div class=”column”>
<img src=”img_lights.jpg” style=”width:100%” onclick=”openModal();currentSlide(4)” class=”hover-shadow cursor”>
</div>
</div>

<div id=”myModal” class=”modal”>
<span class=”close cursor” onclick=”closeModal()”>&times;</span>
<div class=”modal-content”>

<div class=”mySlides”>
<div class=”numbertext”>1 / 4</div>
<img src=”img_nature_wide.jpg” style=”width:100%”>
</div>

<div class=”mySlides”>
<div class=”numbertext”>2 / 4</div>
<img src=”img_fjords_wide.jpg” style=”width:100%”>
</div>

<div class=”mySlides”>
<div class=”numbertext”>3 / 4</div>
<img src=”img_mountains_wide.jpg” style=”width:100%”>
</div>

<div class=”mySlides”>
<div class=”numbertext”>4 / 4</div>
<img src=”img_lights_wide.jpg” style=”width:100%”>
</div>

<a class=”prev” onclick=”plusSlides(-1)”>&#10094;</a>
<a class=”next” onclick=”plusSlides(1)”>&#10095;</a>

<div class=”caption-container”>
<p id=”caption”></p>
</div>
<div class=”column”>
<img class=”demo cursor” src=”img_nature_wide.jpg” style=”width:100%” onclick=”currentSlide(1)” alt=”Nature and sunrise”>
</div>
<div class=”column”>
<img class=”demo cursor” src=”img_fjords_wide.jpg” style=”width:100%” onclick=”currentSlide(2)” alt=”Trolltunga, Norway”>
</div>
<div class=”column”>
<img class=”demo cursor” src=”img_mountains_wide.jpg” style=”width:100%” onclick=”currentSlide(3)” alt=”Mountains and fjords”>
</div>
<div class=”column”>
<img class=”demo cursor” src=”img_lights_wide.jpg” style=”width:100%” onclick=”currentSlide(4)” alt=”Northern Lights”>
</div>
</div>
</div>

<script>
function openModal() {
document.getElementById(‘myModal’).style.display = “block”;
}

function closeModal() {
document.getElementById(‘myModal’).style.display = “none”;
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName(“mySlides”);
var dots = document.getElementsByClassName(“demo”);
var captionText = document.getElementById(“caption”);
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = “none”;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(” active”, “”);
}
slides[slideIndex-1].style.display = “block”;
dots[slideIndex-1].className += ” active”;
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

</body>
</html>


CLICK HERE TO VIEW FUNCTIONING MODAL IMAGE GALLERY Continue reading “CSS & Javascript Modal Image Gallery | IAM Platform Tutorials”

CSS and Javascript Responsive Modal Image | IAM Platform Tutorials

css and javascript responsive modal image | iam platform tutorials

Learn how to create responsive Modal Images with CSS and JavaScript from the experts at IAM Platform!


Modal Image

A modal is a dialog box/popup window that is displayed on top of the current page.


Step 1) Add HTML:

CODE:

<!– Trigger the Modal –>
<img id=”myImg” src=”img_fjords.jpg” alt=”Trolltunga, Norway” width=”300″ height=”200″><!– The Modal –>
<div id=”myModal” class=”modal”><!– The Close Button –>
<span class=”close” onclick=”document.getElementById(‘myModal’).style.display=’none'”>&times;</span><!– Modal Content (The Image) –>
<img class=”modal-content” id=”img01″>

<!– Modal Caption (Image Text) –>
<div id=”caption”></div>
</div>


Step 2) Add CSS:

CODE:

/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}#myImg:hover {opacity: 0.7;}/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

/* Caption of Modal Image (Image Text) – Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation – Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}


Step 3) Add JavaScript:

CODE:

// Get the modal
var modal = document.getElementById(‘myModal’);// Get the image and insert it inside the modal – use its “alt” text as a caption
var img = document.getElementById(‘myImg’);
var modalImg = document.getElementById(“img01”);
var captionText = document.getElementById(“caption”);
img.onclick = function(){
modal.style.display = “block”;
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}// Get the <span> element that closes the modal
var span = document.getElementsByClassName(“close”)[0];// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = “none”;
}

FUll COde:

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>

<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image’s “alt” attribute as an image caption text inside the modal.</p>

<img id=”myImg” src=”img_fjords.jpg” alt=”Trolltunga, Norway” width=”300″ height=”200″>

<!– The Modal –>
<div id=”myModal” class=”modal”>
<span class=”close”>&times;</span>
<img class=”modal-content” id=”img01″>
<div id=”caption”></div>
</div>

<script>
// Get the modal
var modal = document.getElementById(‘myModal’);

// Get the image and insert it inside the modal – use its “alt” text as a caption
var img = document.getElementById(‘myImg’);
var modalImg = document.getElementById(“img01”);
var captionText = document.getElementById(“caption”);
img.onclick = function(){
modal.style.display = “block”;
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName(“close”)[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = “none”;
}
</script>

</body>
</html>


CLICK HERE TO VIEW WORKING IMAGE MODAL Continue reading “CSS and Javascript Responsive Modal Image | IAM Platform Tutorials”

How to Create a Modal Box | IAM Platform Tutorials

iam platform login page background

How To Create a Modal Box

A modal is a dialog box/popup window that is displayed on top of the current page:


Step 1) Add HTML:

CODE:

<!– Trigger/Open The Modal –>
<button id=”myBtn”>Open Modal</button><!– The Modal –>
<div id=”myModal” class=”modal”><!– Modal content –>
<div class=”modal-content”>
<span class=”close”>&times;</span>
<p>Some text in the Modal..</p>
</div></div>


Step 2) Add CSS:

CODE:

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}


Step 3) Add JavaScript:

CODE:

// Get the modal
var modal = document.getElementById(‘myModal’);// Get the button that opens the modal
var btn = document.getElementById(“myBtn”);// Get the <span> element that closes the modal
var span = document.getElementsByClassName(“close”)[0];// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = “block”;
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = “none”;
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = “none”;
}
}


Add Header and Footer

Add a class for modal-header, modal-body and modal-footer:

CODE:

<!– Modal content –>
<div class=”modal-content”>
<div class=”modal-header”>
<span class=”close”>&times;</span>
<h2>Modal Header</h2>
</div>
<div class=”modal-body”>
<p>Some text in the Modal Body</p>
<p>Some other text…</p>
</div>
<div class=”modal-footer”>
<h3>Modal Footer</h3>
</div>
</div>

Style the modal header, body and footer, and add animation (slide in the modal):

CODE:

/* Modal Header */
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}/* Modal Body */
.modal-body {padding: 2px 16px;}/* Modal Footer */
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}

@keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}


FULL CODE:
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
</head>
<body>

<h2>Animated Modal with Header and Footer</h2>

<!– Trigger/Open The Modal –>
<button id=”myBtn”>Open Modal</button>

<!– The Modal –>
<div id=”myModal” class=”modal”>

<!– Modal content –>
<div class=”modal-content”>
<div class=”modal-header”>
<span class=”close”>&times;</span>
<h2>Modal Header</h2>
</div>
<div class=”modal-body”>
<p>Some text in the Modal Body</p>
<p>Some other text…</p>
</div>
<div class=”modal-footer”>
<h3>Modal Footer</h3>
</div>
</div>

</div>

<script>
// Get the modal
var modal = document.getElementById(‘myModal’);

// Get the button that opens the modal
var btn = document.getElementById(“myBtn”);

// Get the <span> element that closes the modal
var span = document.getElementsByClassName(“close”)[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = “block”;
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = “none”;
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = “none”;
}
}
</script>

</body>
</html>


Bottom Modal (“Bottom sheets”)

An example on how to create a full-width modal that slides in from the bottom:

CODE:

<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}

/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}

@keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
</style>
</head>
<body>

<h2>Bottom Modal</h2>

<!– Trigger/Open The Modal –>
<button id=”myBtn”>Open Modal</button>

<!– The Modal –>
<div id=”myModal” class=”modal”>

<!– Modal content –>
<div class=”modal-content”>
<div class=”modal-header”>
<span class=”close”>&times;</span>
<h2>Modal Header</h2>
</div>
<div class=”modal-body”>
<p>Some text in the Modal Body</p>
<p>Some other text…</p>
</div>
<div class=”modal-footer”>
<h3>Modal Footer</h3>
</div>
</div>

</div>

<script>
// Get the modal
var modal = document.getElementById(‘myModal’);

// Get the button that opens the modal
var btn = document.getElementById(“myBtn”);

// Get the <span> element that closes the modal
var span = document.getElementsByClassName(“close”)[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = “block”;
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = “none”;
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = “none”;
}
}
</script>

</body>
</html>


VIEW WORKING MODALS HERE

Continue reading “How to Create a Modal Box | IAM Platform Tutorials”

Some Cool CSS Animated Buttons | IAM Platform Tutorials

iam platform login page background
Button one: “Pressed” effect.

CODE:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>

<h2>Animated Buttons – “Pressed Effect”</h2>

<button class=”button”>Click Me</button>

</body>
</html>

Button Two: Add an Arrow on Hover.

CODE:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: ‘\00bb’;
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right: 25px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>

<h2>Animated Button</h2>

<button class=”button”><span>Hover </span></button>

</body>
</html>

Button Three: “Ripple” Effect on Click.

CODE:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

.button:after {
content: “”;
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}

.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
</head>
<body>

<h2>Animated Button – Ripple Effect</h2>

<button class=”button”>Click Me</button>

</body>
</html>

SEE WORKING BUTTONS HERE Continue reading “Some Cool CSS Animated Buttons | IAM Platform Tutorials”

Cool Calendar Layout | IAM Platform Tutorials

iam platform login page background

Learn how to create a Calendar with CSS.


How To Create a Calendar Layout


Step 1) Add HTML:

CODE:

<div class=”month”>
<ul>
<li class=”prev”>&#10094;</li>
<li class=”next”>&#10095;</li>
<li>
August<br>
<span style=”font-size:18px”>2016</span>
</li>
</ul>
</div><ul class=”weekdays”>
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul><ul class=”days”>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class=”active”>10</span></li>
<li>11</li>
…etc
</ul>

Step 2) Add CSS:

CODE:

ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}/* Month header */
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
}/* Month list */
.month ul {
margin: 0;
padding: 0;
}.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}/* Previous button inside month header */
.month .prev {
float: left;
padding-top: 10px;
}/* Next button */
.month .next {
float: right;
padding-top: 10px;
}

/* Weekdays (Mon-Sun) */
.weekdays {
margin: 0;
padding: 10px 0;
background-color:#ddd;
}

.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}

/* Days (1-31) */
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}

.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color:#777;
}

/* Highlight the “current” day */
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}

CLICK HERE TO SEE A THIS CALENDAR LAYOUT.

Continue reading “Cool Calendar Layout | IAM Platform Tutorials”

How to create a Google Map in your Web page | IAM Platform Tutorials

iam platform login page background

Learn how to add a Google Map to a web page.


My First Google Map


1.   Start with a simple basic web page.

Add a <div> element where you want the map to display:

CODE:

<!DOCTYPE html>
<html>
<body><h1>My First Google Map</h1><div id=”map”>My map will go here</div></body>
<html>


2.  Set the size of the map:

CODE:

<div id=”map” style=”width:400px;height:400px;

3.  Create a JavaScript function to display the map:

CODE:

function myMap() {
var mapCanvas = document.getElementById(“map”);
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.2),
zoom: 10
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}

4. Variables

The mapCanvas variable is the map’s HTML element.

The mapOptions variable defines the properties for the map.

The center property specifies where to center the map (using latitude and longitude coordinates).

The zoom property specifies the zoom level for the map (try to experiment with the zoom level).

The google.maps.Map object is created with mapCanvas and mapOptions as parameters.


Add the Google API

The functionality of the map is provided by a JavaScript library located at Google:

CODE:

<script src=”https://maps.googleapis.com/maps/api/js?callback=myMap”></script>

Continue reading “How to create a Google Map in your Web page | IAM Platform Tutorials”

How to create a slideshow | IAM Platform Tutorials

iam platform login page background

Learn how to create a Slideshow with CSS and JavaScript.


Slideshow / Carousel

A slideshow is used to cycle through elements


Create A Slideshow

Step 1) Add HTML:

Example

<div class=”slideshow-container”>
<div class=”mySlides fade”>
<div class=”numbertext”>1 / 3</div>
<img src=”img1.jpg” style=”width:100%”>
<div class=”text”>Caption Text</div>
</div><div class=”mySlides fade”>
<div class=”numbertext”>2 / 3</div>
<img src=”img2.jpg” style=”width:100%”>
<div class=”text”>Caption Two</div>
</div><div class=”mySlides fade”>
<div class=”numbertext”>3 / 3</div>
<img src=”img3.jpg” style=”width:100%”>
<div class=”text”>Caption Three</div>
</div><a class=”prev” onclick=”plusSlides(-1)”>&#10094;</a>
<a class=”next” onclick=”plusSlides(1)”>&#10095;</a>
</div>
<br><div style=”text-align:center”>
<span class=”dot” onclick=”currentSlide(1)”></span>
<span class=”dot” onclick=”currentSlide(2)”></span>
<span class=”dot” onclick=”currentSlide(3)”></span>
</div>

Step 2) Add CSS:

Style the next and previous buttons, the caption text and the dots:

Example

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}/* Position the “next button” to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}


Step 3) Add JavaScript:

Example

var slideIndex = 1;
showSlides(slideIndex);function plusSlides(n) {
showSlides(slideIndex += n);
}function currentSlide(n) {
showSlides(slideIndex = n);
}function showSlides(n) {
var i;
var slides = document.getElementsByClassName(“mySlides”);
var dots = document.getElementsByClassName(“dot”);
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = “none”;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(” active”, “”);
}
slides[slideIndex-1].style.display = “block”;
dots[slideIndex-1].className += ” active”;
}

Automatic Slideshow

To display an automatic slideshow, use the following code:

Example

var slideIndex = 0;
showSlides();function showSlides() {
var i;
var slides = document.getElementsByClassName(“mySlides”);
for (i = 0; i < slides.length; i++) {
slides[i].style.display = “none”;
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = “block”;
setTimeout(showSlides, 2000); // Change image every 2 seconds
}

Watch a cool video on how to create a slideshow using CSS, HTML and Javascript

blank
Continue reading “How to create a slideshow | IAM Platform Tutorials”