TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

December 13, 2024, 06:23:56 PM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,443
  • Total Topics: 21,252
  • Online today: 179
  • Online ever: 6,457 (November 30, 2024, 02:40:09 PM)
Users Online
  • Users: 0
  • Guests: 112
  • Total: 112

Screenmate / Virtual pet

Started by akulion, December 13, 2006, 09:02:17 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

akulion

hi

this is pretty cute - but some may find it annoying but either ways its a neat thingie...

In this I have only put one small animation of an alien, but u could use anything u like - any small animated gif from the net - whether its a flying angel or a dancing bear is up to u :P

Demo can be found on: http://goofy-goobers.com/forum

To install copy the alien gif attached to this post and upload to ur forum root

and the put this code in a script box - now one thing to know here is if you choose the block to be collapsible, then pressing the collapse button turns the screen mate off and expanding it makes him visible again...so u can use it as an on off switch if u like ;)

oh and one more thing change the link goofy-goobers.com (right near the end of the code) to your own page or whatever you want or if you prefer u can remove the link altogether by removing the A href tag :)


<head><script language="javascript">

var maxX=2;  // MAX HORIZ PIXEL STEPS
var maxY=2;  // MAX VERT PIXEL STEPS

var ns4=(document.layers)?true:false;
var ie4=(document.all && !document.getElementById)?true:false;
var ie5=(document.all && document.getElementById)?true:false;
var ns6=(document.getElementById&&navigator.appName.indexOf("Netscape")>=0)?true:false;
var w3c=(document.getElementById)?true:false;
var ww=0; var wh=0;
var ydir=true; var xdir=true;
var floatobj;
var x=0; var y=0;
var stepX=1;
var stepY=1;

function getwindowsize(){
ww=(ie4||ie5)?document.body.clientWidth:window.innerWidth;
wh=(ie4||ie5)?document.body.clientHeight:window.innerHeight;
}

function randomdir(){
if(Math.floor(Math.random()*2))stepX=Math.floor(Math.random()*maxX)+1;
if(Math.floor(Math.random()*2))stepY=Math.floor(Math.random()*maxY)+1;
if(Math.floor(Math.random()*2))xdir=(Math.floor(Math.random()*2))?false:true;
if(Math.floor(Math.random()*2))ydir=(Math.floor(Math.random()*2))?false:true;
setTimeout('randomdir()', Math.floor(Math.random()*5000)+600);
}

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(){
var sx=(ie4||ie5)?document.body.scrollLeft:pageXOffset;
var sy=(ie4||ie5)?document.body.scrollTop:pageYOffset;
var tp=(ns4)?floatobj.top:parseInt(floatobj.style.top);
var lf=(ns4)?floatobj.left:parseInt(floatobj.style.left);
var tx,ty;
if(ydir){
if(tp+stepY>=wh+sy-floatobj.ih-4){
ydir=false;
ty=tp-stepY;
}else ty=tp+stepY;
}else{
if(tp-stepY<=sy){
ydir=true;
ty=tp+stepY;
}else ty=tp-stepY;
}
if(xdir){
if(lf+stepX>=ww+sx-floatobj.iw-3){
xdir=false;
tx=lf-stepX;
}else tx=lf+stepX;
}else{
if(lf-stepX<=sx){
xdir=true;
tx=lf+stepX;
}else tx=lf-stepX;
}
moveid(floatobj,tx,ty);
}

window.onload=function(){
  floatobj=(ns4)?document.layers['floatobj']:(ie4)?document.all['floatobj']:document.getElementById('floatobj');
  floatobj.iw=(ns4)?floatobj.document.images["float"].width:document.images["float"].width;
  floatobj.ih=(ns4)?floatobj.document.images["float"].height:document.images["float"].height;
  if(ns6){
  floatobj.iw+=10;
  floatobj.ih+=10;
  }
  getwindowsize();
  x=ww/2;
  y=wh/2;
  moveid(floatobj,x,y);
  randomdir();
  setInterval('animate()',50);
}


window.onresize=function(){
  if(ns4)setTimeout('history.go(0)',400);
  else getwindowsize();
}
</script>

</style>

</head>
<div id="floatobj" style="width:46px; height:38px; position:absolute; left:0px; top:-200px; z-index:10000">
<a href="http://goofy-goobers.com"><img src="space.gif" border="0" width=46 height=38 name="float"></a>
</div>

akulion

I have also added a "random pet / image" funcionality to the script

So that with each page load there is a different image loaded. You can see the demo at my live site http://path-to-peace.com/forum

As for instructions just download the file attached to this post and follow instructions in the readme.txt file in it :up:

Also for additional 'cute' graphics and animations you can visit my graphics collection with over 4000+ graphics in it at: Aku's Graphics