...

View Full Version : Option boxes on www.brothercake.com



chuckie365
06-09-2003, 09:58 PM
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

STDestiny
06-09-2003, 10:33 PM
Try doing a search on dynamicdrive.com. There are a lot of scripts like that there.

-Andrew

chuckie365
06-10-2003, 02:05 AM
I looked all over Dynamic Drive and did not find anything like that.... any other ideas????

Regards,
Chuckie

beetle
06-10-2003, 02:37 AM
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.

brothercake
06-10-2003, 11:00 AM
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?

jkd
06-10-2003, 03:41 PM
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? :)

beetle
06-10-2003, 04:18 PM
Better make a sticky :p

j/k :cool:

brothercake
06-10-2003, 04:29 PM
Originally posted by jkd
Haven't I posted insertAdjacentHTML for Mozilla a few times now? :)
Yeah you have ;) http://codingforums.com/showthread.php?threadid=15767

chuckie365
06-11-2003, 12:15 AM
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

brothercake
06-11-2003, 12:21 AM
You mean the boxes themselves? Here's one of them:


<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 :o 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 ..

chuckie365
06-11-2003, 06:12 PM
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

brothercake
06-11-2003, 08:36 PM
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 :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum