PDA

View Full Version : [DHTML] Floaty UFO



Fuzzyspace
02-05-2007, 08:59 PM
1) CODE TITLE: Floaty UFO

2) AUTHOR NAME/NOTES: Fuzzyspace

3) DESCRIPTION: A UFO that floats into your viewing area then hangs around doing loops. If you move the scroll bar or resize the screen the UFO will eventually work its way back into the viewing area. Should work in most browsers.

4) URL TO CODE: http://www.spyatt.plus.com/FloatingUFO/FloatyUFO.html

or, ATTACHED BELOW (see #3 in guidelines below):

djr33
02-05-2007, 09:40 PM
Not working in FF 1.5 PC. Perhaps it's IE only?

Fuzzyspace
02-05-2007, 09:57 PM
How odd, it was working on FF 1.5 PC when i tried it earlier. What do you see there?

ddadmin
02-05-2007, 10:13 PM
It does work in FF1.5 it seems, it's just that you may have to wait a while before the craft floats into view. Regardless though, I think the days of including flying thingie scripts on DD are over. :)

blm126
02-06-2007, 08:41 PM
Regardless though, I think the days of including flying thingie scripts on DD are over. :)

Aw, come on, they are so entertaining!

Fuzzyspace
02-06-2007, 09:17 PM
blm126, thanks for supporting the flying thingie script cause :)

I considered submitting this one as it is different to all the other thingies and does work very nicely on a web page without being intrusive.

Lets be kind to a new coder while he's still motivated to post the rest of his scripts (Which are not flying thingies) ;)

cursed
02-06-2007, 11:41 PM
omg i love it XD

Support the Flying Thingies Cause!

djr33
02-07-2007, 03:54 AM
That did take a while.
I actually like the script.
Kinda fun, not too distracting. I think it might be a good one to add actually.
Could you attach a link to the image as well? That would make it a fun toy on the page.

codeexploiter
02-07-2007, 04:01 AM
Good one works in IE 7 and Firefox 2.0 quite well.

jscheuer1
02-07-2007, 05:21 AM
Zzzzapppp!

Twey
02-07-2007, 09:09 AM
Heh :)

It's a lot more distracting with a larger resolution (since the object doesn't go off-screen). Perhaps a more random motion?

Fuzzyspace
02-07-2007, 10:04 AM
Posted by djr33:
Could you attach a link to the image as well? That would make it a fun toy on the page.

Did you mean this?

http://www.spyatt.plus.com/FloatingUFO/images/UFO.gif


Posted by Twey:
Perhaps a more random motion?

The initial setup is random but then it follows a constantly changing eccentric CosSine path. I have a similar script using the same UFO that follows randomly generated spline paths but it looks kinda "Bumpy". To make it truly random i need to pull my socks up with regard to learning a bit more coding.

Thanks for the kind comments guys :)

djr33
02-07-2007, 10:09 AM
I meant a link on the active UFO on the page, so you could say "click the UFO to..." as a simple example.

When it went off the side of the screen (all on it's own... not based on my scrolling) it added a horizontal scrollbar.

Fuzzyspace
02-07-2007, 10:19 AM
I meant a link on the active UFO on the page, so you could say "click the UFO to..." as a simple example.

Actually i have been thinking about doing that, need to sort that out. The other idea was clicking on it could make it explode or fly off the viewing area, most likely while the user is screaming "Go awayyyy!" at it.


it added a horizontal scrollbar

Yes it overshoots from time to time (Its part of the scripts charm). Scroll bars could be removed but that would destroy the functionality of the page. Is there a way of preventing it from moving the scrollbar?

:)

djr33
02-07-2007, 10:36 AM
Seems like the math could limit it exceeding the width of the screen... I'd hope.


Ha, an explosion would be funny.

But what I was thinking is more along the lines of a useful script. We could put it on the page and have something float in, perhaps a "newspaper" icon or something and you click it and it takes you to an update. Or something along those lines. Just a thought.

Fuzzyspace
02-07-2007, 10:53 AM
Seems like the math could limit it exceeding the width of the screen... I'd hope.

Yes there is enough flexibility in the script to do that, i would just have to change a few variables. It may still generate the scroll bar when the window is resized due to the nature of the script working its way back into the viewing area.


"newspaper" icon or something and you click it and it takes you to an update

I have another script (I could submit shortly) that moves a graphic around the screen in a predefined path (You can define the waypoints and how much it deviates from the path) that would work even better for that.

Anyhow i will have a go at making the UFO clickable. Kaboooom!

Fuzzyspace
02-07-2007, 12:17 PM
Ooh this is fun, need some help here.

Example code:

var testfire = document.getElementById("spaceship").fireEvent("onmouseover")
window.status = testfire

This is to check the mouse pointer is over the UFO, how would i get this to work? It just seems to return a false even after doing a onmouseover. The window.status is just for test purposes.

Fuzzyspace
02-07-2007, 03:11 PM
Never mind, ive figured how to do it. New version will be uploaded later.

Fuzzyspace
02-07-2007, 06:47 PM
New clickable version uploaded. The UFO now departs in an angry kind of way when you click on it. Of course thats if you can catch it in the first place...

http://www.spyatt.plus.com/FloatingUFO/FloatyUFO.html

I have another "click to a link" script that will work better than this one coming very soon, the UFO is rather hard to catch :D

techno_race
04-12-2007, 03:52 AM
I caught it.
I scanned the Pulsating Text code and the Spider Web links code, changed them and combined them:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>UFO+</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>
.disableHscroll{
width:100&#37;;overflow-x:hidden;overflow-y:scroll;
}

v\:* {
BEHAVIOR: url(#default#VML)
}
</style><script>
<!--

//Pulsating Text (Chris A e-mail: KilerCris@Mail.com)
//Permission granted to Dynamic Drive to feature script in archive
//For full source and 100's more DHTML scripts, visit http://www.dynamicdrive.com

var divs = new Array();
var da = document.all;
var start;

//CONFIGUER THESE VARS!!!!!!
//speed of pulsing
var speed = 50;

function initVars(){

if (!document.all)
return

//Extend of shrink the below list all you want
//put an "addDiv(1,"2",3,4); for each div you made,
//1)'id' of div
//2)color or glow(name or hex)(in quotes!!!)
//3)minimum strength
//4)maximum strength

addDiv(body,"yellow",2,11);


//NO MORE EDITING!!!!!!



startGlow();
}

function addDiv(id,color,min,max)
{
var j = divs.length;
divs[j] = new Array(5);
divs[j][0] = id;
divs[j][1] = color;
divs[j][2] = min;
divs[j][3] = max;
divs[j][4] = true;
}

function startGlow()
{
if (!document.all)
return 0;

for(var i=0;i<divs.length;i++)
{
divs[i][0].style.filter = "Glow(Color=" + divs[i][1] + ", Strength=" + divs[i][2] + ")";
divs[i][0].style.width = "100%";
}

start = setInterval('update()',speed);
}

function update()
{
for (var i=0;i<divs.length;i++)
{
if (divs[i][4])
{
divs[i][0].filters.Glow.Strength++;
if (divs[i][0].filters.Glow.Strength == divs[i][3])
divs[i][4] = false;
}

if (!divs[i][4])
{
divs[i][0].filters.Glow.Strength--;
if (divs[i][0].filters.Glow.Strength == divs[i][2])
divs[i][4] = true;
}
}
}
-->
</script></head><body onload="initVars();msover('#FFEEEE')"><script>

/***********************************************
* Spider Web Links- Copyright (c) Peter Gehrig
* Website: http://www.24fun.com
* Script available at/modified by Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
***********************************************/

// Minor modification by DD to disable horizontal scrollbar
///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////

// the default color of the 8 spiderlines
var defaultcolor="#F5F5F5"

// the width of the 8 spiderlines while highlighting textlinks (pixels)
var lineweighthighlight=14

// the width of the 8 spiderlines while NOT highlighting textlinks (pixels)
var lineweightnormal=2

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var distancetomouse=0

var mousepos_x=0
var mousepos_x=0

var marginleft=0
var margintop=0
var marginbottom=0
var marginright=0

var margincenterx
var margincentery

var mousepos_x=0
var mousepos_x=0

if (document.all&&window.print){
document.write('<div id="bodycontent" style="position:relative">')
}

function initiateanimation(){

marginbottom=ietruebody().clientHeight
marginright=ietruebody().clientWidth
margincenterx=Math.floor(marginright/2)
margincentery=Math.floor(marginbottom/2)

rectangulartopleft.to=marginleft+","+margintop
rectangulartopright.to=marginright+","+margintop
rectangularbottomleft.to=marginleft+","+marginbottom
rectangularbottomright.to=marginright+","+marginbottom

rectangulartop.to=margincenterx+","+margintop
rectangularright.to=marginright+","+margincentery
rectangularbottom.to=margincenterx+","+marginbottom
rectangularleft.to=marginleft+","+margincentery

rectangulartopleft.strokecolor=defaultcolor
rectangulartopright.strokecolor=defaultcolor
rectangularbottomleft.strokecolor=defaultcolor
rectangularbottomright.strokecolor=defaultcolor

rectangulartop.strokecolor=defaultcolor
rectangularright.strokecolor=defaultcolor
rectangularbottom.strokecolor=defaultcolor
rectangularleft.strokecolor=defaultcolor
}

function msover(thiscolorhighlight){
if(document.all&&window.print){
rectangulartopleft.strokecolor=thiscolorhighlight
rectangulartopright.strokecolor=thiscolorhighlight
rectangularbottomleft.strokecolor=thiscolorhighlight
rectangularbottomright.strokecolor=thiscolorhighlight

rectangulartop.strokecolor=thiscolorhighlight
rectangularright.strokecolor=thiscolorhighlight
rectangularbottom.strokecolor=thiscolorhighlight
rectangularleft.strokecolor=thiscolorhighlight

rectangulartopleft.strokeweight=lineweighthighlight
rectangulartopright.strokeweight=lineweighthighlight
rectangularbottomleft.strokeweight=lineweighthighlight
rectangularbottomright.strokeweight=lineweighthighlight

rectangulartop.strokeweight=lineweighthighlight
rectangularright.strokeweight=lineweighthighlight
rectangularbottom.strokeweight=lineweighthighlight
rectangularleft.strokeweight=lineweighthighlight
}
}

function msout(){
if(document.all&&window.print){
rectangulartopleft.strokecolor=defaultcolor
rectangulartopright.strokecolor=defaultcolor
rectangularbottomleft.strokecolor=defaultcolor
rectangularbottomright.strokecolor=defaultcolor

rectangulartop.strokecolor=defaultcolor
rectangularright.strokecolor=defaultcolor
rectangularbottom.strokecolor=defaultcolor
rectangularleft.strokecolor=defaultcolor

rectangulartopleft.strokeweight=lineweightnormal
rectangulartopright.strokeweight=lineweightnormal
rectangularbottomleft.strokeweight=lineweightnormal
rectangularbottomright.strokeweight=lineweightnormal

rectangulartop.strokeweight=lineweightnormal
rectangularright.strokeweight=lineweightnormal
rectangularbottom.strokeweight=lineweightnormal
rectangularleft.strokeweight=lineweightnormal
}
}


function momouse(){
if(document.all&&window.print){
mousepos_x=ietruebody().scrollLeft+event.clientX
mousepos_y=ietruebody().scrollTop+event.clientY

rectangulartopleft.from=mousepos_x+","+mousepos_y
rectangulartopright.from=mousepos_x+","+mousepos_y
rectangularbottomleft.from=mousepos_x+","+mousepos_y
rectangularbottomright.from=mousepos_x+","+mousepos_y

rectangulartop.from=mousepos_x+","+mousepos_y
rectangularright.from=mousepos_x+","+mousepos_y
rectangularbottom.from=mousepos_x+","+mousepos_y
rectangularleft.from=mousepos_x+","+mousepos_y
}
}

if(document.all&&window.print){
//document.body.className="disableHscroll"
ietruebody().className="disableHscroll"
code="<v:line id=rectangulartopleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
code+="<v:line id=rectangulartopright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
code+="<v:line id=rectangularbottomleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
code+="<v:line id=rectangularbottomright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"

code+="<v:line id=rectangulartop style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
code+="<v:line id=rectangularright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
code+="<v:line id=rectangularbottom style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
code+="<v:line id=rectangularleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"

document.body.insertAdjacentHTML("afterBegin",code)
document.onmousemove=momouse
window.onload=initiateanimation
}
</script>
<div id="spaceship" style="position:absolute; visibility: hidden">
<img src="images/UFO.gif" border="0" onClick="goaway()">
</div>

techno_race
04-12-2007, 03:56 AM
<script type="text/javascript">

var xobjectsize = 144
var yobjectsize = 52
var xstep = (Math.round(Math.random(new Date().getMilliseconds()))*600)-300
var ystep = 600
var degstep = 2
var xstepsize = "big"
var ystepsize = "big"
var circledeg = -90
var clicked = "no"

if (typeof document.body.scrollTop !== "undefined")
{
imagescrollpos = document.body.scrollTop-2000
heightwindow = document.body.offsetHeight
widthwindow = document.body.offsetWidth
}
if (typeof window.pageYOffset !== "undefined")
{
imagescrollpos = window.pageYOffset-2000
heightwindow = innerHeight
widthwindow = innerWidth
}

function circledraw()
{
var circlerad = (circledeg*(2*Math.PI/360))*degstep
var sindraw=Math.round(Math.sin(circlerad)*ystep)+(heightwindow/2)-(xobjectsize/2)
var cosdraw=Math.round(Math.cos(circlerad)*xstep)+(widthwindow/2)-(xobjectsize/2)
if (typeof document.body.scrollTop !== "undefined")
{
scrolloffset = document.body.scrollTop
heightwindow = document.body.offsetHeight
widthwindow = document.body.offsetWidth
}
if (typeof window.pageYOffset !== "undefined")
{
scrolloffset = window.pageYOffset
heightwindow = innerHeight
widthwindow = innerWidth
}
if (imagescrollpos<scrolloffset)
{
imagescrollpos += (Math.ceil((scrolloffset-imagescrollpos)/50))
}
if (imagescrollpos>scrolloffset)
{
imagescrollpos -= (Math.ceil((imagescrollpos-scrolloffset)/50))
}
var es = document.getElementById("spaceship")
es.style.visibility = "visible"
es.style.left=cosdraw
es.style.top=sindraw + imagescrollpos
liftoff = sindraw + imagescrollpos
wobble = cosdraw
circledeg++
if (xstep>=widthwindow/2)
{
xstepsize = "small"
}
if (ystep>=heightwindow/2)
{
ystepsize = "small"
}
if (xstep<=-widthwindow/2)
{
xstepsize = "big"
}
if (ystep<=-heightwindow/2)
{
ystepsize = "big"
}

if (xstepsize=="big")
{
xstep++
}
else
{
xstep--
}
if (ystepsize=="big")
{
ystep++
}
else
{
ystep--
}
if (clicked=="no")
{
setTimeout(circledraw, 50)
}
}
setTimeout(circledraw, 1000)

function goaway()
{
clicked = "yes"
var es = document.getElementById("spaceship")
es.style.top = liftoff
es.style.left = wobble + Math.round(Math.random(new Date().getMilliseconds())*20)-10
liftoff-=5
if (liftoff>=-100)
{
setTimeout(goaway, 50)
}
else
{
es.style.visibility = "hidden"
}
}




</script>

<script type="text/javascript">
document.write('<div id="body">');
for (ytesttext=1 ; ytesttext <=2000 ; ytesttext++)
{
document.write("Test text " + ytesttext + " the webpage goes here, the webpage goes here, the webpage goes here, the webpage goes here, the webpage goes here, the webpage goes here. <br>")
}
document.write('</div>');
</script></body></html>
Sorry about the cutoff, I had to shorten it to 10,000 chars. :p (Why do they have that requirement?) :mad:
I haven't tried it yet and it disables the horizontal scrollbar. :)
The second code comes after the first. :rolleyes: