Saturday, August 30, 2014

Button in center / Reload the page

↓  Copy the HTML into your choice of web editing software (don't highlight the long lines)  ↓

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>test code</title>
<head>
<script>
function myFunction() {
location.reload();
}

</script>
<style>
body {
background-color: hsla(185,50%,44%,1.00);
}
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%
}
</style>
<body>
<div class="wrapper">
  <button class="button" onClick="location.reload();">Reload</button>
</div>
</body>
</html>

The script highlighted in yellow is the function to cause the page to reload.  You can rename myFunction to whatever you want.

The style highlighted in blue is optional CSS code.  It centers the button in the middle of the page with a blueish background.  Delete the stuff highlighted in blue and the button will be in the upper right corner.

The 'div' class highlighted in blue connects with the CSS code and it centers the button.  Class="button" is what makes it dead center in the page.

The '<button' tag highlighted in yellow is what creates the button.  Onclick is what happens when you click the button.  In the quotes that says location.reload() is what happens when you click the button.

Just before </button> is the text on the button.  You can make it say anything you want, but it helps if it makes sense.

Tuesday, August 26, 2014

What is Derp Tutorials?

The basic concept of Derp Tutorials is video or text tutorials that it either gets straight to the point or just lists the steps to accomplish the task.  No fluff, just the needed task.

↓ Here is an example video ↓