FAVICON

With QR Scans, you can create short-cuts for any reference possible.  You may even use it for stock control and asset verification.  you may also create short notes for tasking etc.  it is essential that your clients must be able to contact you without having trouble to remember your contact number or e-mail address.  qR scans enable just that.  put it on posters, on envelopes, on booklets, everywhere!

WEB COLOURS

Websites are not able to use all colours, select from here (WEB SAFE) the colours able to be used by web sites.

Excellent Examples and study material as from:  W3Schools

TEXT

This is software applications that you will add to your webSite that will make your website more attractive to visit.

<!DOCTYPE html>

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>

<style>

body {

font-family: 'Sofia';font-size: 24px;

}

h6 {

    color: white;

    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

}

</style>

</head>

<body>

<h6>This is a Test MS3 Systems</h6>

</body>

</html>

ALTERING FONT NAME & EFFECT (GOOGLE FONTS)

You may alter the font name and color.  

gallery/text1

<div align="center">
<FONT color="#ffffff" size="+1">
<MARQUEE bgcolor="#ffffff" direction="left" loop="20" width="75%"> 
<STRONG>Hallo and welcome.</STRONG>
</MARQUEE>
</FONT>
</DIV>

MARQUEE

Scrolling text

Hallo and welcome.

<!DOCTYPE html> <html> <body>

<h2 title="I'm a header">The title attribute</h2>

<p title="I'm a tooltip"Mouse over this paragraph, to display the title attribute as a tooltip.</p> 

</body> </html>

TOOL TIP

Adding a tool tip to text that is displayed on screen.

  

The title attribute

 Mouse over this paragraph, to display the title attribute as a tooltip.

   


Hallo, this is us!

SPINNING TEXT

Hover with mouse cursor over text.

<style>
@keyframes spin {from {} to {transform:rotate(360deg);}}
.spin:hover {animation-name:spin;animation-duration:3s;position:absolute;}
</style>
<br><br><span class="spin">Hallo, this is us!</span>

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France

FANCY TABLE

Personalized table style

<!DOCTYPE html>
<html><head><style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: B1D2F0;}#customers tr:hover {background-color: #ddd;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style></head><body>

<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td><td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>

</body></html>

Responsive Text

Resize the browser window to see how the text size scales.

Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body></html>

RESPONSIVE TEXT

Auto resize % of text as window scales.

COLLAPSIBLES/ACCORDION

This will display additional information related to the heading.

This is all you need to know about MS3 Sytems ...

Security must be adhered to at all times ...

Solutions to all possible questions and ...

Unique and custom systems ...

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
    background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #555;
}

.collapsible:after {
    content: '\002B'; color: white; font-weight: bold; float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}
</style>
</head>
<body>

<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>This is all you need to know about MS3 Sytems ...</p>
</div>

<button class="collapsible">Security</button>
<div class="content">
  <p>Security must be adhered to at all times ...</p>
</div>
<button class="collapsible">Solutions</button>
<div class="content">
  <p>Solutions to all possible questions and ...</p>
</div>
<button class="collapsible">Systems</button>
<div class="content">
  <p>Unique and custom systems ...</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

COMPARISON TABLE

Compare products or sales

Comparison Table

Features Basic Pro
Security Products
Solution Products
System Products
Posters
Resources

<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    background-color: green;
}

th, td {
    text-align: center;
    padding: 16px;
}

th:first-child, td:first-child {
    text-align: left;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}
tr:nth-child(odd) {
    background-color: white
}

.fa-check {
    color: green;
}

.fa-remove {
    color: red;
}
</style>
</head>
<body>

<h2>Comparison Table</h2>

<table>
  <tr>
    <th style="width:50%">Features</th>
    <th>Basic</th>
    <th>Pro</th>
  </tr>
  <tr>
    <td>Security Products</td>
    <td><i class="fa fa-remove"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>Solution Products</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>System Products</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>Posters</td>
    <td><i class="fa fa-remove"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>Resources</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
</table>

</body></html>

FILTER TABLE 

Add a search function to your table.

My Customers

Name Country
Alfreds Futterkiste Germany
Berglunds snabbkop Sweden
Island Trading UK
Koniglich Essen Germany
Laughing Bacchus Winecellars Canada
Magazzini Alimentari Riuniti Italy
North/South UK
Paris specialites France

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}
#myTable tr {
  border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>My Customers</h2>

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

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>
<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>
</body>
</html>

SORTING LIST

Sort list alphabetically.

Sort a HTML List Alphabetically

Click the button to sort the list alphabetically:

  • Oslo
  • Stockholm
  • Helsinki
  • Berlin
  • Rome
  • Madrid

<!DOCTYPE html>
<html>
<title>Sort a HTML List Alphabetically</title>
<body>

<p>Click the button to sort the list alphabetically:</p>
<button onclick="sortList()">Sort</button>

<ul id="id01">
  <li>Oslo</li> <li>Stockholm</li> <li>Helsinki</li> <li>Berlin</li> <li>Rome</li> <li>Madrid</li>
</ul>

<script>
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    b = list.getElementsByTagName("LI");
    //Loop through all list-items:
    for (i = 0; i < (b.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*check if the next item should
      switch place with the current item:*/
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /*if next item is alphabetically
        lower than current item, mark as a switch
        and break the loop:*/
        shouldSwitch= true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark the switch as done:*/
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

</body>
</html>

SKILLS LINES

Display skills capabilities graphically.

My Skills

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.html {width: 90%; background-color: #4CAF50;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}
</style>
</head>
<body>

<h1>My Skills</h1>

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>

</body>
</html>

PRICING TABLE

Select pricing option

Responsive Pricing Tables

Resize the browser window to see the effect.

  • Basic
  • R 9.99 / year
  • 10GB Storage
  • 10 Emails
  • 10 Domains
  • 1GB Bandwidth
  • Sign Up
  • Pro
  • R 24.99 / year
  • 25GB Storage
  • 25 Emails
  • 25 Domains
  • 2GB Bandwidth
  • Sign Up
  • Premium
  • R 49.99 / year
  • 50GB Storage
  • 50 Emails
  • 50 Domains
  • 5GB Bandwidth
  • Sign Up

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}

.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,1)
}

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}
</style>
</head>
<body>

<h2 style="text-align:center">Responsive Pricing Tables</h2>
<p style="text-align:center">Resize the browser window to see the effect.</p>

<div class="columns">
  <ul class="price">
    <li class="header">Basic</li>
    <li class="grey">R 9.99 / year</li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li class="grey"><a href="http://tools.ms3system.co.za" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header" style="background-color:#4CAF50">Pro</li>
    <li class="grey">R 24.99 / year</li>
    <li>25GB Storage</li>
    <li>25 Emails</li>
    <li>25 Domains</li>
    <li>2GB Bandwidth</li>
    <li class="grey"><a href="http://tools.ms3system.co.za" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">Premium</li>
    <li class="grey">R 49.99 / year</li>
    <li>50GB Storage</li>
    <li>50 Emails</li>
    <li>50 Domains</li>
    <li>5GB Bandwidth</li>
    <li class="grey"><a href="http://tools.ms3system.co.za" class="button">Sign Up</a></li>
  </ul>
</div>

</body>
</html>

BUTTONS

Buttons should stand out amongst the other elements as they are required for the user to interact with the page.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none; color: white; padding: 15px 32px;
    text-align: center; text-decoration: none;
    display: inline-block; font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>
<body>
<h2>CSS Buttons</h2>
<button><a href="https://www.ms3system.co.za"</a>Default Button</button>
<a href="https://www.ms3system.co.za" class="button">Link Button</a>
<button class="button"><a href="https://www.ms3system.co.za"</a>Button</button>
<input type="button" class="button" value="Input Button">
</body>
</html>

BUTTON TYPES

 

CSS Buttons

Link Button

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none; color: white; padding: 20px;
    text-align: center; text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>

<h2>Rounded Buttons</h2>
<p>Add rounded corners to a button with the border-radius property:</p>

<a href="https://www.ms3system.co.za" <button  class="button button1">2px</button></a>
<a href="http://www.tools.ms3system.co.za" <button  class="button button2">4px</button></a>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>

</body>
</html>

ROUNDED BUTTON TYPES

 

Rounded Buttons

Add rounded corners to a button with the border-radius property:

2px 4px

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none; color: white; padding: 16px 32px;
    text-align: center; text-decoration: none;
    display: inline-block; font-size: 16px;
    margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s; cursor: pointer;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}

.button3 {
    background-color: white; color: black; border: 2px solid #f44336;
}

.button3:hover {
    background-color: #f44336;
    color: white;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.button5:hover {
    background-color: #555555;
    color: white;
}
</style> </head> <body>

<h2>Hoverable Buttons</h2>
<p>Use the :hover selector to change the style of the button when you move the mouse over it.</p>
<p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the "hover" effect:</p>

<a href="https://www.ms3system.co.za" <button class="button button1">Green</button> </a>
<a href="https://www.ms3system.co.za" <button class="button button2">Blue</button> </a>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

</body> </html>

hOVERING BUTTONS

 

Hoverable Buttons

Use the :hover selector to change the style of the button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the "hover" effect:

Green Blue

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none; color: white; padding: 15px 32px;
    text-align: center; text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>

<button class="button button1">Shadow Button</button>
<a href="https://www.ms3system.co.za" <button class="button button2">Shadow on Hover</button> </a>

</body>
</html>

SHADOW BUTTONS

 

Shadow on Hover

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;}

.icon-bar {
    width: 100%;
    background-color: #555;
    overflow: auto;
}

.icon-bar a {
    float: left;
    width: 20%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.icon-bar a:hover {
    background-color: #000;
}

.active {
    background-color: #4CAF50 !important;
}
</style>
<body>

<div class="icon-bar">
  <a class="active" href="https://www.ms3system.co.za"><i class="fa fa-home"></i></a> 
  <a href="#"><i class="fa fa-search"></i></a> 
  <a href="#"><i class="fa fa-envelope"></i></a> 
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a> 
</div>

</body>
</html>

ICON BAR

 

Click on the buttons inside the tabbed menu:

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

TAB CONTROL

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 70%;
    border-left: none;
    height: 300px;
}
</style>
</head>
<body>

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
     
</body>
</html>

Sidenav Push Example

Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.

☰ open

SIDENAV PUSH MENU

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
    document.body.style.backgroundColor = "white";
}
</script>
     
</body>
</html>

gallery/hov

HOVERING SIDENAV

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#mySidenav a {
    position: absolute;
    left: -80px;
    transition: 0.3s;
    padding: 15px;
    width: 100px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    border-radius: 0 5px 5px 0;
}

#mySidenav a:hover {
    left: 0;
}

#about {
    top: 20px;
    background-color: #4CAF50;
}

#blog {
    top: 80px;
    background-color: #2196F3;
}

#projects {
    top: 140px;
    background-color: #f44336;
}

#contact {
    top: 200px;
    background-color: #555
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>

<div style="margin-left:80px;">
  <h2>Hoverable Sidenav Buttons</h2>
  <p>Hover over the buttons in the left side navigation to open them.</p>
</div>
     
</body>
</html>

hIDE MENU BAR - APPEAR WHEN SCROLL UP

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  background-color: #f1f1f1;
  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: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</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>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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>

Hoverable Dropdown

Move the mouse over the button to open the dropdown menu.

DROPDOWN MENU

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Rounded Active and Hover Buttons

PAGING

 

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
    border-radius: 5px;
}
</style>
</head>
<body>

<h2>Rounded Active and Hover Buttons</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

Split Button Dropdowns

Move the mouse over the arrow icon to open the dropdown menu.

sPLIT-DROP BUTTON

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
    background-color: #2196F3;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: absolute;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {
    display: block;
}

.btn:hover, .dropdown:hover .btn {
    background-color: #0b7dda;
}
</style>
</head>
<body>

<h2>Split Button Dropdowns</h2>
<p>Move the mouse over the arrow icon to open the dropdown menu.</p>

<button class="btn">Button</button>
<div class="dropdown">
  <button class="btn" style="border-left:1px solid #0d8bf2">
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

IMAGES

I will show you how to add special effects to your images (in process ...)

<!DOCTYPE html>
<html>
<body>

<h2>Images on Another Server</h2>

<img src="https://www.smartweb.co.za/css/images/seo-graphic.jpg" alt="SmartWeb.com" style="width:300px;height:142px;">

</body>
</html>

IMAGES ON ANOTHER SERVER

 

Images on Another Server

SmartWeb.com

UPLOADING IMAGE ONTO YOUR SERVER

 

  1. Open C-PANEL

  2. Open  FILE MANAGER

  3. EITHER FIND:

    1. Find the PUBLIC-HTML (for main domain):

      1. Find SITEPRO, then Gallery or Images folder

      2. Upload image

      3. Link for image must be /images or /gallery

    2. Find the sub-domain name:

      1. ​​​​​​​Find SITEPRO, then Gallery or Images folder

      2. Upload image

      3. Link for image must be /images or /gallery

 

FOR INSTANCE:

<img src="/gallery/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

 

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="/gallery/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.ms3system.co.za/Programming/">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="#">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="#">
</map>

</body>
</html>

IMAGE HOTSPOT (uploaded image)

 

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="/gallery/slid3.jpg">
    <img src="/gallery/slid3.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="/gallery/forest.jpg">
    <img src="/gallery/forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">This is a forest</div>
</div>

<div class="gallery">
  <a target="_blank" href="/gallery/trans.jpg">
    <img src="/gallery/trans.jpg" alt="yoga in nature" width="600" height="400">
  </a>
  <div class="desc">yoga in nature</div>
</div>

<div class="gallery">
  <a target="_blank" href="/gallery/slid4.jpg">
    <img src="/gallery/slid4.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

GALLERY (uploaded images)

 

SLIDESHOW (uploaded images)

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* 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 {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  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}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head>
<body>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="/gallery/slid1.jpg" style="width:100%">
  <div class="text">My first ever photo</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="/gallery/slid2.jpg" style="width:100%">
  <div class="text">The amazing Yoga dancer</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="/gallery/slid3.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    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";
    setTimeout(showSlides, 3000); // Change image every32 seconds
}
</script>

</body>
</html>

Image Maps

Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:

WorkplaceComputerPhoneCup of coffee
gallery/slid9

IMAGE FADE - TOP NAME

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
</style>
</head>
<body>

<h2>Slide in Overlay from the Top</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="/gallery/avatarman.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
 
</body>
</html>

IMAGE FADE - NAME

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
    position: relative;
    width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
</head>
<body>

<h2>Opacity with Box</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
  
</body>
</html>

Slide in Overlay from the Top

Hover over the image to see the effect.

Avatar
Hello World

Opacity with Box

Hover over the image to see the effect.

Avatar
John Doe

MAGNIFY

 

Image Magnifier Glass

Mouse over the image:

Feel free to change the strength of the magnifier glass when initiating the magnify function.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.img-magnifier-container {
  position:relative;
}
.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 200px;
  height: 200px;
}
</style>
<script>
function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  /*create magnifier glass:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  /*insert magnifier glass:*/
  img.parentElement.insertBefore(glass, img);
  /*set background properties for the magnifier glass:*/
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  /*execute a function when someone moves the magnifier glass over the image:*/
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  /*and also for touch screens:*/
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;
    /*prevent the magnifier glass from being positioned outside the image:*/
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
    if (y < h / zoom) {y = h / zoom;}
    /*set the position of the magnifier glass:*/
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    /*display what the magnifier glass "sees":*/
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
</script>
</head>
<body>

<h1>Image Magnifier Glass</h1>

<p>Mouse over the image:</p>

<div class="img-magnifier-container">
  <img id="myimage" src="/gallery/slid1.jpg" width="800" height="450">
</div>

<p>Feel free to change the strength of the magnifier glass when initiating the magnify function.</p>

<script>
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("myimage", 3);
</script>

</body>
</html>

cOMPARISON SLIDER

 

Compare Two Images

Click and slide the blue slider to compare two images:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.img-comp-container {
  position: relative;
  height: 200px; /*should be the same height as the images*/
}
.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow:hidden;
}
.img-comp-img img {
  display:block;
  vertical-align:middle;
}
.img-comp-slider {
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 40px;
  height: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
}
</style>
<script>
function initComparisons() {
  var x, i;
  /*find all elements with an "overlay" class:*/
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    /*once for each "overlay" element:
    pass the "overlay" element as a parameter when executing the compareImages function:*/
    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    /*get the width and height of the img element*/
    w = img.offsetWidth;
    h = img.offsetHeight;
    /*set the width of the img element to 50%:*/
    img.style.width = (w / 2) + "px";
    /*create slider:*/
    slider = document.createElement("DIV");
    slider.setAttribute("class", "img-comp-slider");
    /*insert slider*/
    img.parentElement.insertBefore(slider, img);
    /*position the slider in the middle:*/
    slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    /*execute a function when the mouse button is pressed:*/
    slider.addEventListener("mousedown", slideReady);
    /*and another function when the mouse button is released:*/
    window.addEventListener("mouseup", slideFinish);
    /*or touched (for touch screens:*/
    slider.addEventListener("touchstart", slideReady);
    /*and released (for touch screens:*/
    window.addEventListener("touchstop", slideFinish);
    function slideReady(e) {
      /*prevent any other actions that may occur when moving over the image:*/
      e.preventDefault();
      /*the slider is now clicked and ready to move:*/
      clicked = 1;
      /*execute a function when the slider is moved:*/
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      /*the slider is no longer clicked:*/
      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      /*if the slider is no longer clicked, exit this function:*/
      if (clicked == 0) return false;
      /*get the cursor's x position:*/
      pos = getCursorPos(e)
      /*prevent the slider from being positioned outside the image:*/
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      /*execute a function that will resize the overlay image according to the cursor:*/
      slide(pos);
    }
    function getCursorPos(e) {
      var a, x = 0;
      e = e || window.event;
      /*get the x positions of the image:*/
      a = img.getBoundingClientRect();
      /*calculate the cursor's x coordinate, relative to the image:*/
      x = e.pageX - a.left;
      /*consider any page scrolling:*/
      x = x - window.pageXOffset;
      return x;
    }
    function slide(x) {
      /*resize the image:*/
      img.style.width = x + "px";
      /*position the slider:*/
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}
</script>
</head>
<body>

<h1>Compare Two Images</h1>

<p>Click and slide the blue slider to compare two images:</p>

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="/gallery/slid4.jpg" width="400" height="300">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="/gallery/slid5.jpg" width="400" height="300">
  </div>
</div>

<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>

</body>
</html>

Clocks and calendars make your website more user friendly and more attractive.

<script type="text/javascript" src="//100widgets.com/js_data.php?id=38"></script>

BLUE CLOCK

 

CLOCKS & CALENDARS

gallery/1

<script type="text/javascript" src="//100widgets.com/js_data.php?id=140"></script>

GREEN CLOCK

 

gallery/10

<script type="text/javascript" src="//100widgets.com/js_data.php?id=44"></script>

MODERN CLOCK

 

gallery/14
gallery/16

<script type="text/javascript" src="//100widgets.com/js_data.php?id=26"></script>

HORIZONTAL CLOCK

 

gallery/12

<script type="text/javascript" src="//100widgets.com/js_data.php?id=114"></script>

PULL-IN CLOCK & CALENDAR

 

gallery/18

<script type="text/javascript" src="//100widgets.com/js_data.php?id=106"></script>

BLOG CALENDAR

 

gallery/20

<script type="text/javascript" src="//100widgets.com/js_data.php?id=89"></script>

WEB CALENDAR

 

INFORMATION FUNCTIONS

The following functions will display information for the user to assist him/her in her task within your website.  it also displays information for you the site administrator.

To include the following Map functions, copy and Paste the script into a HTML element

gallery/info1

<script type="text/javascript" src="//100widgets.com/js_data.php?id=128"></script>

COUNTER:  VISITOR

this will display the amount of visitors your web site have at that moment.

gallery/info2

<script type="text/javascript" src="//100widgets.com/js_data.php?id=276"></script>

cALCULATOR

Your user may use this online calculator

gallery/info3

<script type="text/javascript" src="//100widgets.com/js_data.php?id=263"></script>

CONVERTOR

Use this convertor to convert almost anything.

gallery/info4

<script type="text/javascript" src="//100widgets.com/js_data.php?id=244"></script>

POSTAL TRACKER

This will track and identify the position of your post.

gallery/info5

<html>
  <head>
    <!--Load the AJAX API-->
    <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 = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

cHART

This will display a chart figure that will reflect your statistics.

 

To alter the PIE chart as a BAR chart, simply change the

GOOGLE.VISUALIZATION.PIECHART as

GOOGLE.VISUALIZATION.BARCHART

(EXPLANATION)

 

 

 

 

 

 

 

Content heading (what are you displaying)

Totals are determined here (number).

You are adding the content heading's content.  The number is the value of the item.

 

 

 

This is the main heading and the size of the chart to be displayed.

Here you are setting which chart type it is (PIE, BAR, etc)

gallery/info7

<script type="text/javascript" src="//100widgets.com/js_data.php?id=163"></script>

LIVE FOREX CHART

Display the live currency comparisons.

gallery/info8

<script type="text/javascript" src="//100widgets.com/js_data.php?id=268"></script>

BODY MASS INDEX (BMI)

Calculates your BMI.

 

<!DOCTYPE html>
<html>
<body>

<iframe height="300px" width="100%" src="" name="iframe_a"></iframe>

<p><a href="https://www.ms3system.co.za" target="iframe_a">MS3-WebSite</a></p>

<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>

</body>
</html>

IFRAME (WEBSITE WITHIN A WEBSITE)

Displays webSite or element within master website

MS3-WebSite

When the target of a link matches the name of an iframe, the link will open in the iframe.

<!-- CURRENCY-CONVERTER.ORG.UK CURRENCY CONVERTER 2 START -->
<div style="width:248px;margin:0;padding:0;border:1px solid #000000;background:#1E3C6E;">
<div style="width:248px;text-align:center;padding:2px 0px;background:#354D87;font-family:arial;font-size:11px;color:#F0F0F0;font-weight:bold;vertical-align:middle;">
Currency Calculator
</div>
<div style="padding:0px;">
<script type="text/javascript">    
var dcf = 'ZAR';
var dct = 'EUR';
var c = 'yes';
var fc = 'FFFFFF';
var lc = 'F0F0F0';
var bdr = '000000';
var mbg = '1E3C6E';
var mbg2 = '354D87';
var ac = '666666';
var ahc = 'EEEEEE';
var cfc = '350024';
var cbdc = '000000';
var cbgc = 'EEB059';
var ifc = 'E6E3DF';
var ibdc = '000000';
var ibgc = '524D4D';
var tz = '2';

</script><script type="text/javascript" src="https://www.currency-converter.org.uk/widget/CCUK-CC2-1.php"></script></div></div>
<!-- CURRENCY-CONVERTER.ORG.UK CURRENCY CONVERTER LIVE END -->

CONVERTOR:  CURRENCY

This will convert world currencies.

Currency Calculator

MAPS

maps will plot the position on a map.  TO use maps you will have to ensure that your website is HTTPS (secure site) activated.  To do this, you go to SETTINGS, then check the checkbox stating; "Publish Site with forced HTTPS".

gallery/a-set
gallery/b-set

To include the following Map functions, copy and Paste the script into a HTML element

gallery/map1

<script type="text/javascript" src="//100widgets.com/js_data.php?id=202"></script>Enter your text here

GEOLOCATION

This will plot your position where you are currently working from.

gallery/map2

<script type="text/javascript" src="//100widgets.com/js_data.php?id=131"></script>

LOCATION - VISITOR

This will indicate the position of the member visiting your website.

gallery/map3

<script type="text/javascript" src="//100widgets.com/js_data.php?id=167"></script>

LOCATION - VISITOR

This will indicate the position of the member visiting your website, displayed on a map

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;
    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&key=AIzaSyDHDMeR6Km0o-yyq0lYEQv8U_XydSL2hwE";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

</body>
</html>

DETERMINE GEO-LOCATION HTML

this will determine and records your geo-location (https required)

You will require a Google Map Key

MULTI POS LOCATORS ON GOOGLE MAP

Display layers of google position locators

 

  • 2000 position locators per layer.
  • Different colour options
  • Import MS Excel File

SOCIAL

These functions are socially related.  It is applications such as radio, social media communicators and even Web Cam control.

<script type="text/javascript" src="//100widgets.com/js_data.php?id=257"></script>

RADIO STATIONS

You will be able to play radio stations from your web site.

gallery/soc1
gallery/soc2

<script type="text/javascript" src="//100widgets.com/js_data.php?id=277"></script>

TRANSLATOR

this will translate from one language to another.

gallery/soc3

<script type="text/javascript" src="//100widgets.com/js_data.php?id=259"></script>

fACEBOOK LIKE BUTTONS

Both the like and unlike buttons are available.

<script type="text/javascript" src="//100widgets.com/js_data.php?id=73"></script>

LARGE SOCIAL & SHORTCUT BUTTONS

All social media is available and Faviourites.  The print button is a great shortcut to print the current view.

gallery/soc4

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>

<style>
#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 10px #333 solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
}
</style>
</head>

<body>
<div id="container">
    <video autoplay="true" id="videoElement">

    </video>
</div>
<script>
        var video = document.querySelector("#videoElement");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    alert("error");
}
</script>
</body>
</html>

LIVE WEB CAM

You will have a live Web Cam view on your website.  Take note that it must be a secure (HTTPS) site and be aware of data usage.

gallery/soc5

Resize the browser window to see how the size of the video player will scale when the width is less than 400px.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
    width: 100%;
    height: auto;
}
</style>
</head>
<body>

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Resize the browser window to see how the size of the video player will scale.</p>

</body>
</html>

VIDEO PLAYER (upload/link video)

 

MP4, OGG, WEBM player

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<p><b>Note:</b> The autoplay attribute does not work on some mobile devices.</p>

</body>
</html>

VIDEO PLAYER (autoplay)

FULL SCREEN VID-BACKGROUND

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    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%;
    padding: 20px;
}

#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #ddd;
    color: black;
}
</style>
</head>
<body>

<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</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>

PROGRAMS

This is software applications that you will add to your webSite so to make your website more attractive to visit.

<script type="text/javascript" src="//100widgets.com/js_data.php?id=146"></script>

PhotoShop Mobile

A photo editing software (for your tablet & cellular phone)

gallery/prog1

DATA

Data is required to be imported / stored within your website.

LINK/IMPORT/EXPORT GOOGLE DOCS

handling data with Open Shared Google Spreadsheet

STEP 1:  LOG INTO GOOGLE ACCOUNT

 

STEP 2:  OPEN GOOGLE DOCS

 

STEP 3:  START A BLANK SHEET

 

  • SHARE
  • NAME FILE
  • CLICK ADVANCED
  • CHANGE...
  • ON - PUBLIC ON THE WEB (CAN VIEW ONLY)
  • SAVE
  • INVITE OTHER EDITORS (EMAIL ADDRESSES)
  • COPY LINK AT THE TOP AND PASTE ONTO NOTEPAD   
  •  
  •  (https://docs.google.com/spreadsheets/d/1mtMUoB8J9wrZx3VhH7XyVJ4qoU56CM2huHY3sVFf6IA/edit?usp=sharing)
  •  
  • CLICK MAIN MENU FILE
  • PUBLISH TO WEB
  • EMBED
  • EITHER SHEET1 OR ENTIRE 
  • COPY THE IFRAME HTML CODING
  • PASTE UNDERNEATH THE FIRST LINK PASTED ON NOTEPAD
  • CLOSE GOOGLE SHEETS
  •  
  • COPY THE FIRST LINK THAT YOU PASTED ONTO NOTEPAD
  • DELETE THE SECOND LINK FROM HTTP: untill you see &AMP;SINGLE (last part to delete is GID=0)
  •  
  • <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQErJC0jVIyOAuPeC1RVwR5NtyALaMXdRgdLqnmdD73p_Mk8wDQEFh_WS1guiTv7KUN8lqIWiuEK-A_/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
  • NOW PASTE THE FIRST LINK STARTING FROM HTTP and all of the rest just after the src="
  •  
  • <iframe src="https://docs.google.com/spreadsheets/d/1mtMUoB8J9wrZx3VhH7XyVJ4qoU56CM2huHY3sVFf6IA/edit?usp=sharing&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
  •  
  • Copy this entire IFRAME HTML and create your HTML element.  Paste within the HTML Coding and add the following size settings:
  •  
  • <iframe width=100% height=400 src="https://docs.google.com/spreadsheets/d/1mtMUoB8J9wrZx3VhH7XyVJ4qoU56CM2huHY3sVFf6IA/edit?usp=sharing&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
  •  
  • THE EDITOR AND ADMINISTRATOR OF THIS SHEET MUST BE LOGGED ON (GMAIL) TO EDIT THE DATABASE.  THE REST WILL ONLY BE ABLE TO VIEW THE DATA.  IF IN VIEW MODE, YOU ARE ABLE TO FIND (SEARCH) AND USE ALL FUNCTIONS SUCH AS FILTERING AND PIVOT TABLES, ETC.

An editable sheet will load and display this firstly.  I therefore advise you to create a sub program for each SHEET.  The sheet below is in preview mode (the copy and paste to the first LINK was not done) only (not editor mode - to edit in this manner, you need to add a LINK button to GOOGLE SHEETS).

LOCAL DEVICE STORAGE (SAVING)

store information bmo headings on local server (5mb only text)

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.lastname="De Lange";

    localStorage.firstname="Milda"
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>
</html>

LOCAL DEVICE STORAGE (LOADING)

load information bmo headings from local server (5mb only text)

<!DOCTYPE html>
<html>
<body>

<div id="result2"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Retrieve
 document.getElementById("result2").innerHTML = localStorage.firstname;

} else {
    document.getElementById("result2").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>
</html>

LOCAL DEVICE STORAGE (BUTTON TO STORE AND LOAD INFO)

load information bmo headings from local server (5mb only text)

Click the button to see the counter increase.

Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).

<!DOCTYPE html>
<html>
<head>
<script>
function resetcounter() {
    localStorage.removeItem("clickcount");
}
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result3").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
    } else {
        document.getElementById("result3").innerHTML = "Sorry, your browser does not support web storage...";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result3"></div>
<p><button onclick="resetcounter()" type="button">Reset!</button></p>
<div id="result3"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

XML DATABASE 

Local device driven web database (Table Result)

 

The database is a XML file that is stored within your Web Disk (of the specific domain/sub domain).  I created a folder called XMLTOOLS to store all database XML files.  The scripting will load the XML info files into the respective formats.     (take note that the script path and file names are case sensitive).           The actual XML file.



<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<button type="button" onclick="loadDoc()">Get my MENU collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "/xmltools/menu.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>food</th><th>price</th></tr>";
  var x = xmlDoc.getElementsByTagName("food");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

download

MS3XML editor

 

FREE TOOL FROM MS3 TO CREATE AND EDIT YOUR DATABASE.

Into a Table

<!DOCTYPE html>
<html>
<body>

<div id='showUser'></div>

<script>
displayUser(0);

function displayUser(i) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myFunction(this, i);
        }
    };
    xmlhttp.open("GET", "/xmltools/test3.xml", true);
    xmlhttp.send();
}

function myFunction(xml, i) {
    var xmlDoc = xml.responseXML; 
    x = xmlDoc.getElementsByTagName("admin");
    document.getElementById("showUser").innerHTML =
    "Name: " +
    x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
    "<br>Username: " +
    x[i].getElementsByTagName("username")[0].childNodes[0].nodeValue +
    "<br>Password: " + 
    x[i].getElementsByTagName("password")[0].childNodes[0].nodeValue;
}
</script>

</body>
</html>

Entry by Index

Name:  Joe

User Name: joe

Password: 437284321fdsafd3

<!DOCTYPE html>
<html>
<body>

<div id='showProduct'></div><br>
<input type="button" onclick="previous()" value="<<">
<input type="button" onclick="next()" value=">>">

<script>
var i = 0, len;
displayCD(i);

function displayProduct(i) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myFunction(this, i);
        }
    };
    xmlhttp.open("GET", "/xmltools/test1.xml", true);
    xmlhttp.send();
}

function myFunction(xml, i) {
    var xmlDoc = xml.responseXML; 
    x = xmlDoc.getElementsByTagName("product");
    len = x.length;
    document.getElementById("showProduct").innerHTML =
    "Product: " +
    x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
    "<br>Cost: " +
    x[i].getElementsByTagName("cost")[0].childNodes[0].nodeValue +
    "<br>Shipping Cost: " + 
    x[i].getElementsByTagName("shipping")[0].childNodes[0].nodeValue;
}

function next() {
if (i < len-1) {
  i++;
  displayProduct(i);
  }
}

function previous() {
if (i > 0) {
  i--;
  displayProduct(i);
  }
}
</script>

</body>
</html>

Entry Navigated

Name:  Joe

User Name: joe

Password: 437284321fdsafd3

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<p>Click on a CD to display album information.</p>
<p id='showCD'></p>
<table id="demo"></table>

<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "cd_catalog.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 
x = xmlDoc.getElementsByTagName("CD");
table="<tr><th>Artist</th><th>Title</th></tr>";
for (i = 0; i <x.length; i++) { 
  table += "<tr onclick='displayCD(" + i + ")'><td>";
  table += x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
  table += "</td><td>";
  table +=  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
  table += "</td></tr>";
}
document.getElementById("demo").innerHTML = table;

function displayCD(i) {
  document.getElementById("showCD").innerHTML =
  "Artist: " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
  "<br>Title: " +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
  "<br>Year: " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
</script>

</body>
</html>

active Table

(Displays content in a table, however when the user click on an entry on the table, the detail is revealed)

PASSWORD PROTECTED PAGE

This coding will protect a page from being entered.  you will create a new page, but will not make it visible on the menu list.

<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Please Enter Your Password',' ');
while (testV < 3) {
if (!pass1) 
history.go(-1);
if (pass1.toLowerCase() == "letmein") {
alert('Thankyou and welcome!');
window.open('http://www.tools.ms3system.co.za/#stats');
break;

testV+=1;
var pass1 = 
prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3) 
history.go(-1);
return " ";

</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Enter Statistics Page" onClick="passWord()">
</FORM>
</CENTER>

pASSWORD PROTECTED PAGE

 

only if the password is correct, the page will be displayed.  The page will be called bmo this button as created by the script below