Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com

Recent Comments

Powered by Disqus

Back to articles

The most annoying javascript object

Annoyer class creates an HTML element which is annoyingly moving across the users screen. Even when user scrolls, object moves to visible area. Object tries to find only top of elements.

It is also possible to provide callbacks for different events, for example, to change picture in object, or change object's position on hover, etc. Object's method change also allows to change object to specified or random position

Package contains annoyer.js and annoyer.packed.js (packed javascript)and three example files: example.html, annoying_fly.html and annoying_twitter.html, to demonstrate class functionality.
 

Contents

Download

Back to contents

Example codes

Back to contents

<script type="text/javascript" src="./annoyer.js" ></script>
<script type="text/javascript">
//create instance
var annoy = new annoyer({
    width: 50,
    height: 50,
    step: 3,
    interval: 10,
    startX: -50,
    startY: -50,
    css: {background: "red"},
    html: "<p>Text</p>",
    onmouseover: function(el){el.style.border = "2px solid red";},
    onmouseout: function(el){el.style.border = "none";},
    oninit: function(el){},
    onclick: function(el){},
    onfly: function(el, xState, yState){},
    onstart: function(el){},
    onland: function(el){}
});
</script>

Examples in action

Back to contents

Example scripts provided with package in action:

Method list

Back to contents

Constructor

Back to method list

Method name new annoyer(config);
Description Create annoying element that will move to random visible positions
Input parameters

json config - Json structure with configuration properties

  • int step - step by how much pixels should object move in each iteration(default: 3)
  • int interval - time in miliseconds for each iteration (default: 10)
  • int width - width of object in pixels (default: 50)
  • int height - height of object in pixels (default: 50)
  • int startX - starting position on x axis (default: -50)
  • int startY - starting position on y axis (default: -50)
  • string html - html code to put inside object (default: '')
  • json css - object with additional css properties to add, all javascript css properties supported (default: none)
  • function oninit - callback function when object is initialized, receives HTML element as argument (default: none)
  • function onstart - callback function when object starts moving, receives HTML element as argument (default: none)
  • function onfly - callback function on each step while object is moving, receives HTML element as argument and direction of movement on each axis (default: none)

    example function(el, xState, yState){};

    Possible x states: none, left, right

    Possible y states: none, up, down

  • function onland - callback function when object stops moving, receives HTML element as argument (default: none)
  • function or string onclick - callback function when object is clicked or string 'change', to randomly change objects position (default: none)
  • function or string onmouseover - callback function when object is hovered or string 'change', to randomly change objects position (default: none)
  • function or string onmouseout - callback function when object is unhovered or string 'change', to randomly change objects position (default: none)
Example input 
//create instance
var annoy = new annoyer({
	width: 100,
	height: 100,
	startX: -100,
	startY: -100,
	html: "<p>Text</p>",
	onmouseover: function(el){el.style.border = "2px solid red";},
	onmouseout: function(el){el.style.border = "none";}
});

Change objects position

Back to method list

Method name change() or change(x,y)
Description Move object to another position
Input parameters

int x - position on x axis

int y - position on y axis

if x or y is not specified, will move to a random position

Latest changes

Back to contents

None for now


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus