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

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

#cjdraw div{
border:0px solid black;
function init(){
d1.go=new Function(makeFunky('d1','d2'));
d2.go=new Function(makeFunky('d2'));
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);}";
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>

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?

12-31-2005, 10:40 AM


lines are easy, be back with something

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

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


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)

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

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


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

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 :)

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

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):

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?)

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

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.

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

will put on my site soon

function zxcFadeColors(zxcc1,zxcc2,zxcary) {
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++){
zxcr+=zxcrstep; zxcg+=zxcgstep; zxcb+=zxcbstep;

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);

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

01-03-2006, 06:08 PM

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?

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

not got round to it yet

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