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.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jun 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Option boxes on www.brothercake.com

    Hi all,
    How hard is it to code the preferences boxes and options boxes that are used on www.brothercake.com on the right hand side.... I'm just curious at this point. Is there a script that someone developed or is it proprietary to his site only.... Thanks.

    Regards,
    Chuckie

  • #2
    Regular Coder
    Join Date
    May 2003
    Location
    Manassas, VA, USA
    Posts
    220
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try doing a search on dynamicdrive.com. There are a lot of scripts like that there.

    -Andrew

  • #3
    New to the CF scene
    Join Date
    Jun 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    brothercake website

    I looked all over Dynamic Drive and did not find anything like that.... any other ideas????

    Regards,
    Chuckie

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    brothercake is both a member AND a moderator here at codingforums.com (in fact, he moderates this very forum), and a darn good fellow, if I do say so myself.

    I'll PM him about this post.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Such a glowing tesimonial

    Well, the core scripting for that is at http://www.brothercake.com/includes/docking_boxes.js

    The way it works is that each of the boxes is enclosed in a container - a <cite> actually - but is otherwise juse normal HTML - no absolute positioning, which means it continues to be flexible to page size.

    Then, when you click on a box header the script copies the HTML from that node and creates a new one, which is positioned exactly on top, while the original is made invisible - this makes it look like you've picked it up.

    You can move it up and down - that's just a normal drag n drop which is fixed on the x-axis - then when you let go of it, it looks for the box position which is nearest to your mouse, then shows and moves the original node to that position, while destroying the copy.

    The repositioning is done with an IE-proprietary method called insertAdjacentElement; there is a standard method for doing the same thing - so the script could be made to work in gecko/07/Safari browsers as well - but I haven't got that far yet.

    Does that help any?
    Last edited by brothercake; 06-10-2003 at 10:04 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by brothercake
    The repositioning is done with an IE-proprietary method called insertAdjacentElement; there is a standard method for doing the same thing - so the script could be made to work in gecko/07/Safari browsers as well - but I haven't got that far yet.
    Haven't I posted insertAdjacentHTML for Mozilla a few times now?

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Better make a sticky

    j/k
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by jkd
    Haven't I posted insertAdjacentHTML for Mozilla a few times now?
    Yeah you have insertAdjacentElement equivalent
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    New to the CF scene
    Join Date
    Jun 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Brothercake,
    Can you provide an example of a cite that would interface with the JS file used in your includes dircetory. I tried checking out the source code on your site but since i'm fairly new to Javascript.... it's greek to me.

    Thanks for your help,
    Chuckie

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You mean the boxes themselves? Here's one of them:
    Code:
    <cite><table cellpadding=0 cellspacing=0 border=0 class=boxborder><tr><td>
    <table cellpadding=3 cellspacing=0 border=0 width=136 class="lightbg">
    <tr class="darkbg">
    <td colspan=2 class=move>
    <script language="javascript1.2">if(win&&ie5){insertArrow(3);}</script>
    <big class="h4f">What's related</big></td>
    </tr>
    </table>
    <table cellpadding=3 cellspacing=0 border=0 width=136 class="lightbg" class="lowertable">
    <tr>
    <td valign=top colspan=2><img src="/images/blank.gif" width=1 height=1 alt="" border=0></td>
    </tr>
    <tr>
    <td valign=top width=16><img src="/images/page.gif" width=16 height=16 alt="" border=0></td>
    <td valign=top width=120><a href="/search/"><small>Search</small></a></td>
    </tr>
    <tr>
    <td valign=top width=16><img src="/images/page.gif" width=16 height=16 alt="" border=0></td>
    <td valign=top width=120><a href="/mailinglist/"><small>Mailing list</small></a></td>
    </tr>
    </table></td></tr></table><br></cite>
    Leaving aside the shocking state of that HTML the thing to notice is the class name in the TD - class="move" - the document onmousedown reads the class name out of the event's target, and that class name means to intitiate drag and drop.

    Sorry I can't really make it any more easy for you ... it's kind of quite tightly embedded into the source of the site ..

    Maybe I should do a generic version of that ... bin meaning to for a while as it goes ..
    Last edited by brothercake; 06-10-2003 at 11:23 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #11
    New to the CF scene
    Join Date
    Jun 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Brothercake,
    Thanks for taking the time to explain the code but since I'm still at a newbie stage in my life with Javascript, I'll wait for you to come out with a generic version of the script.... Any ideas on when you might do such a thing

    Thanks,
    Chuckie

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't know really ... don't have much time at the moment cos of work ... but of course if you wanna pay me a grand for the job I'll do it now
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

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