...

View Full Version : need help making this script more OOP / implimentable / customizable



canadianjameson
12-31-2005, 07:21 AM
Hello all,

I have a neat challenge here. A whilr back I asked Harry Armadillos help to create a script that would incrimentally show the border of a div / TD, so as to give the appearance of it being drawn infront of the user. this is what he came up with: it works in I.E and FF (others i am not sure of)

here's how it looks: www.enviromark.ca/spiderBorder.htm



<html><head>
<style>
#cjdraw div{
position:relative;
width:0px;
height:0px;
border:0px solid black;
}
</style>
<script>
function init(){
d1=document.getElementById('cjdraw1');
d2=document.getElementById('cjdraw2');
d1.go=new Function(makeFunky('d1','d2'));
d2.go=new Function(makeFunky('d2'));
setTimeout("d1.go()",20);
}
function makeFunky(who,next){
var str="this.style.borderWidth='0px 0px 1px 1px';if(parseInt(this.style.height)<100){this.style.height=parseInt(this.style.height)+4+'px';setTimeout('"+who+".go()',20);}else if(parseInt(this.style.width)<100){this.style.width=parseInt(this.style.width)+4+'px';setTimeout('"+who+".go()',20);}";
if(next)
str+="else{setTimeout('"+next+".go()',20);}"
return str;
}
</script></head><body onload='init()'>
<div id=cjdraw><div id='cjdraw1' style='width:0px;height:0px'></div>
<div id='cjdraw2' style='left:100px;width:0px;height:0px'></div>
</div>
<script>
</script>
</body></html>

while functional, it is not very practical as I cannot impliment it on my pages because of how it was designed. I need help to make this more user-friendly (and cross-browser, if anything pops out at anyone).

what I need to get is a script that I can drop in to any page, assign certain table cells / divs ID's in an incrimental order, and have the script draw the borders according to the order of the ID's (so that it looks as it does in the above script).

is this possible?

vwphillips
12-31-2005, 10:40 AM
see

http://www.vicsjavascripts.org.uk/SketchPad/SketchPad.htm

lines are easy, be back with something

canadianjameson
12-31-2005, 05:37 PM
hehehe, i was hoping you'd respond to this thread.

the sketchpad is cool! I can see how lines would be easy after something like that :D

I await your "back with something" with baited breath

vwphillips
12-31-2005, 06:22 PM
this turned ot a bit big but I hope to add images and effects
may do a simpler version later

click on 1 and 4 on

http://www.vicsjavascripts.org.uk/Demos/OutLine1.htm

canadianjameson
12-31-2005, 06:44 PM
cool cool.

I'll toy around with it and post back with questions / suggestions.

I assume i can call onload multiple effects at once (i'll try anyways)

canadianjameson
12-31-2005, 08:50 PM
one thing I see as being a possible request is the following:

part of the reason I want to do this is to create the illusion of certain things / borders being drawn at the same time. this will most likely be an onload event, and will be happening to various objects at once. (although the ability to selectively onclick activate will come in very handy).

the crux of the issue is that i need to be able to "remotely activate" the function. beit with an onload on onclick, The most frequent use will probably be "when this occurs (onload or onclick, etc), have the function applied to border of that object.

so basically I could activate it on any DIV (etc), as long as it had an ID.

i don't know if that made sense... i guess in theory it's akin to having one mouseclick activate two or more functions

vwphillips
01-01-2006, 08:51 PM
new version - may be more changes

http://www.vicsjavascripts.org.uk/Demos/AddOutLine.htm

canadianjameson
01-01-2006, 11:30 PM
you're an absolute beast, i swear it.

heh, i had an idea which you may find amusing. I don't know if this would work, and even if it did I don't know if it would look good... but i'll throw it out there anyways.

you know that object fader script you help me with before; what if you could interface that with this script to fade in the leading edge of the border as it is being "drawn" on the screen.

just a thought, actually i had it while stumbling home from the newyears party last night :D

canadianjameson
01-01-2006, 11:41 PM
hehe, please tell me if i'm getting too greedy :o

I'm also suggesting so many features because I know that you are coding these for other people as well, so i figure i should try and help you offer the most features :)

vwphillips
01-01-2006, 11:52 PM
one of the effects is opacity (fade)

the line opens from the center as could not decide opening from the left of right ad saves coding

canadianjameson
01-02-2006, 03:09 AM
i see i see.

i guess what I had in mind was more along the lines of the front edge of the line was faded as it moved along.

so i guess like this

normal line (as it is drawn):
_
__
___
____
_____
______
_______
etc

faded front part:
_
__
___
____
_____
______
_______
________


my example is kind of lame, but I couldn't think of another way to describe it, lol.

(p.s: i'm looking for a good 3-in-one script to display a gallery of images, a slideshow of the images, and a fade-in and out auto change script to display one image after another. would you have one already made or should I start a new thread and see if anyone has one?)

vwphillips
01-02-2006, 02:06 PM
see the attached zip

canadianjameson
01-02-2006, 04:19 PM
hehe, works for me :)

thanks vic, i really appreciate it.

I'm going to start a new thread for the gallery, have a look if you get the chance.

vwphillips
01-02-2006, 06:29 PM
bug in previous
replace with

will put on my site soon


function zxcFadeColors(zxcc1,zxcc2,zxcary) {
zxclen=zxcary.length;
zxcc1=zxcc1.replace('#',''); zxcc2=zxcc2.replace('#','');
var zxcr=zxcHexToInt(zxcc1.substring(0,2));
var zxcg=zxcHexToInt(zxcc1.substring(2,4));
var zxcb=zxcHexToInt(zxcc1.substring(4,6));
var zxcr2=zxcHexToInt(zxcc2.substring(0,2));
var zxcg2=zxcHexToInt(zxcc2.substring(2,4));
var zxcb2=zxcHexToInt(zxcc2.substring(4,6));
var zxcrstep=Math.round((zxcr2-zxcr)/zxclen);
var zxcgstep=Math.round((zxcg2-zxcg)/zxclen);
var zxcbstep=Math.round((zxcb2-zxcb)/zxclen);
for (zxc0=0;zxc0<zxclen-1;zxc0++){
zxcary[zxc0]="#"+zxcIntToHex(zxcr)+zxcIntToHex(zxcg)+zxcIntToHex(zxcb);
zxcr+=zxcrstep; zxcg+=zxcgstep; zxcb+=zxcbstep;
}
zxcary[zxclen-1]='#'+zxcc2;
}

function zxcIntToHex(zxcn){
if (zxcn>255){zxcn=255; }
if (zxcn<0){zxcn=0; }
var zxcresult=zxcn.toString(16);
if (zxcresult.length==1){ zxcresult="0"+zxcresult; }
return zxcresult;
}

function zxcHexToInt(zxchex){
return parseInt(zxchex,16);
}

canadianjameson
01-02-2006, 06:43 PM
heh, cool, thanks a lot.

I'm about to make my image gallery post, it will be there soon. I think it will mainly be a small variation on the object fade script, so your previous script would be the logical choice

vwphillips
01-03-2006, 06:08 PM
update

canadianjameson
01-03-2006, 07:38 PM
just a functional code update, or did you add features?

on a side note, i remember you were going to add this feature to the fade script: http://www.yourtotalsite.com/examples/yellow_fade_technique/Example.html#faq1

did you ever get a chance to do it?

vwphillips
01-03-2006, 08:08 PM
study the fade abd color gradient

not got round to it yet

canadianjameson
01-03-2006, 08:33 PM
cool cool. i shall go check the code now.

take your time, it isn't as pressing as the image gallery



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum