Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    need help making this script more OOP / implimentable / customizable

    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

    Code:
    <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?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    see

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

    lines are easy, be back with something

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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

    I await your "back with something" with baited breath
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    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

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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)
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    new version - may be more changes

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

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hehe, please tell me if i'm getting too greedy

    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    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

  • #11
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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?)
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    see the attached zip
    Attached Files Attached Files

  • #13
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #14
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    bug in previous
    replace with

    will put on my site soon

    Code:
    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);
    }

  • #15
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •