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)+'%';
}

Funny example with auto-moving a button

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

<h4>Example auto-moving html element</h4>
<p>Try to click on the following button.</p>

<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 mouseenter event to #btn_test
btn_test.addEventListener('mouseenter', function(e){ moveElmRand(e.target);});

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

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

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which meta tag provides a short description of the page?

<meta name="description" content="70-160 characters that describes the content of the page" />

Which CSS property is used to stop the wrapping effect of the "float"?

clear text-align position

#some_id {
  clear: both;
}

Click on the method which gets an array with all the elements in the document that have a specified tag name.

getElementsByName() getElementById() getElementsByTagName()

var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);

Indicate the PHP function which returns the number of elements in array.

is_[) count() strlen()

$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4

Last accessed pages

List with JavaScript events ⁽²¹⁶⁾
CSS3 transition ⁽¹⁴⁸⁷⁾
Get search data from URL address in JavaScript ⁽²³⁹⁶⁾
PHP MySQL - WHERE and LIKE ^(20977)
Add, Change, and Remove Attributes with jQuery ^(38241)

Popular pages this month

Making DIV Contents Scroll Horizontally, with multiple Div`s inside ⁽¹³⁹¹⁾
Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽¹³⁶¹⁾
Contact page - CoursesWeb ⁽¹³⁴²⁾
Tabs effect with CSS ⁽¹³⁴²⁾
Insert, Select and Update NULL value in MySQL ⁽⁸⁴³⁾