Moving html element to a random direction

Here is a simple JavaScript function that can be used to move a html element to a random direction in page.

click on the code to select it.

//sets a random absolute position to a html element; receives the html element
function moveElmRand(elm){
  elm.style.position ='absolute';
  elm.style.top = Math.floor(Math.random()*90+5)+'%';
  elm.style.left = Math.floor(Math.random()*90+5)+'%';
}

- In the following example the moveElmRand() function is called when the mouse is over the button.

<button id="btn_test">Catch Me</button>
<script>
//sets a random absolute position to a html element; receives the html element
function moveElmRand(elm){
  elm.style.position ='absolute';
  elm.style.top = Math.floor(Math.random()*90+5)+'%';
  elm.style.left = Math.floor(Math.random()*90+5)+'%';
}

//get the #btn_test
var btn_test = document.querySelector('#btn_test');

//register to call moveElmRand() on mouseover event to #btn_test
btn_test.addEventListener('mouseover', function(e){ moveElmRand(e.target);});

//register click to #btn_test
btn_test.addEventListener('click', function(e){ alert('You are Good.');});
</script>

- Demo:

Try to click on this button:

<<-Get position and size .. -- Generate random numbers in ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add definition lists into a <dl> element?

<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>

Which CSS property can hide an element on page, letting an empty space in its place?

display position visibility

#id {
  visibility: hidden;
}

Click on the event which is triggered when the mouse clicks on an object.

onclick onmouseover onfocus

document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}

Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.

$_SESSION $_GET $_REQUEST

if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}

Last accessed pages

Shooter Games ⁽⁹²⁸⁷⁾
PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files ⁽⁶⁷⁷⁹⁾
jQuery parent, children and nth-child() ^(10848)
Add /Delete rows in HTML table with JavaScript ⁽¹⁷⁹⁾
Simple Admin Login PHP Script ⁽⁹¹⁰⁾

Popular pages this month

Flash Games - Free online Games ⁽¹³⁶⁰⁾
Qwop ⁽¹¹⁵⁸⁾
Tunnel Rush ⁽¹⁰⁶²⁾
Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 ⁽⁹⁸⁴⁾
Drag Racer V3 ⁽⁷⁵⁸⁾