Skip to main content

TUTORIALS EXERCISES REFERENCES

KmarsHub

Demo v5.0 - KmarsHub

<!DOCTYPE html>
<html>
<body>

<p id="kmars">Click the button to change the layout of this paragraph</p>

<script>
function myFunction() {
    var x = document.getElementById("kmars");
    x.style.fontSize = "30px"; 
    x.style.color = "lime"; 
}
</script>
<a href="/2010/07/demo-v5.0.html">Demo v 5.0</a>
<button onclick="myFunction()">Click Me!</button>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

</body>
</html>

<style>
.html {border-radius: 16px;}
</style>
<svg class="html" height="300" width="200">
  <polygon points="0,0 120,0 200,80 200,300 0,300" style="fill:red;" />
  Sorry, your browser does not support inline SVG.
</svg>
<svg class="html" height="300" width="200">
  <polygon points="0,0 120,0 200,80 200,300 0,300" style="fill:lime;" />
  Sorry, your browser does not support inline SVG.
</svg>
<svg class="html" height="300" width="200">
  <polygon points="0,0 120,0 200,80 200,300 0,300" style="fill:blue;" />
  Sorry, your browser does not support inline SVG.
</svg>

<script>
function topresp() {
  var x = document.getElementById("topnav");
  var y = document.getElementsByClassName("res-hide");
  var framesize = document.getElementById("framesize");
  var hidesetting = document.getElementById("dropSetting");
  var hideedit = document.getElementById("dropEdit");
   if (hidesetting.classList.contains('show')) {
        hidesetting.classList.remove('show');
      }
   if (hideedit.classList.contains('show')) {
        hideedit.classList.remove('show');
      }
  if (x.className === "topnav notranslate") {
    x.className += " responsive";
    x.style.height = "inherit"
        y.display = "none";
framesize.style.cssText += ';display:block !important;';
framesize.style.width = "100%"
  } else {  
    x.className = "topnav notranslate";
    x.style.height = "auto"
        y.display = "none";
framesize.style.cssText = ';display:block;';
framesize.style.width = "auto"
framesize.style.background = "green"
framesize.style.padding = "8px 0px"
framesize.style.float = "right"
  }
}
</script>
<script>
/*

When the user clicks on the button, 
toggle between hiding and showing the dropdown content   menuEdit */
function menuEdit() {
document.getElementById("dropEdit").classList.toggle("show");
var closeDrop = document.getElementById("dropSetting");
 if (closeDrop.classList.contains('show')) {
        closeDrop.classList.remove('show');
      }
}

function submenuEdit() {
document.getElementById("subdropEdit").classList.toggle("show");
}

function menuSetting() {
document.getElementById("dropSetting").classList.toggle("show");
var closeDrop = document.getElementById("dropEdit");
 if (closeDrop.classList.contains('show')) {
        closeDrop.classList.remove('show');
      }
    
}
function submenuSetting() {
document.getElementById("subdropSetting").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
/*
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
*/
</script>