JavaScript ‘Click Me’ prank for beginners
Those new to javaScript can start to get a feel for grabbing page elements and adding events by building a simple application.
The “Click Me” prank is a single button which displays on the page. When the user tries to click the button, the button moves away from the cursor.
You can view the prank here. Feel free to download the file and use it as you wish.
Let’s start with the markup and styling:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style>
#button {
width:100px;
height:50px;
position:absolute;
top:100px;
left:100px;
}
</style>
</head>
<body>
<button id="button">Click Me!</button>
<script></script>
</body>
</html>
How to use JavaScript in WordPress pages, posts
Because WordPress tries to clean up raw code entered on pages or posts under default settings, it will take your JavaScript code and break it. Therefore, the first thing you have to do is make sure those “features” are disabled:
- In your dashboard go to Users, choose your profile and then check “Disable the visual editor when writing.”
Next, you have to install a plugin that lets you choose to keep your page in it’s raw code form. I chose Text Control, as recommended in the WordPress codex. Note: There seems to be a newer version (2.3) if you choose to install the plugin from inside the WP dashboard, but I couldn’t get it to work properly.
- Install Text Control.
- Go to the page you want to include JavaScript on and make sure there’s a saved version/draft. The plugin options may not appear in the backend of the individual page until there is a saved version.
- From Text Control’s two drop-down menus, choose “No Formatting” and “No Character Encoding”. Read More>>
