[Javascript] Moving elements with Javascript

[Terry Riegel]

Hello,

For me I would suggest using Walter Zorn's excellent drag and drop  
library.

http://www.walterzorn.com/

As far as determining the coordinates of an object this is the code I  
use to do it.

function findPosX(obj)
   {
     var curleft = 0;
     if(obj.offsetParent)
         while(1)
         {
           curleft += obj.offsetLeft;
           if(!obj.offsetParent)
             break;
           obj = obj.offsetParent;
         }
     else if(obj.x)
         curleft += obj.x;
     return curleft;
   }

   function findPosY(obj)
   {
     var curtop = 0;
     if(obj.offsetParent)
         while(1)
         {
           curtop += obj.offsetTop;
           if(!obj.offsetParent)
             break;
           obj = obj.offsetParent;
         }
     else if(obj.y)
         curtop += obj.y;
     return curtop;
   }



On Nov 27, 2007, at 4:51 AM, Alan Easton wrote:

> Hello All,
>
> Thanks for the advice.
>
> I think I am nearly there, but have a slight problem which you may  
> be able to help me with.
>
> If you look at http://www.celweb.co.uk/js/slide.html
>
> You will see it working to a degree.
>
> But, what I have had to do is hack it a bit. Basically, I need to  
> dynamically know the co-ordinates of 2 things:
>
> - The icon next to the "Add to Basket" button.
> - The top right basket image itself.
>
> What I have done is just guess where on the page the "Add to Basket"  
> icon is. This however, is impractical, as there will be text,  
> images, etc on the page, generated from the DB and I just to not  
> know how to put the icon next to the button, no matter where the  
> button is??
>
> Also, the top right basket image may not actually move, but I need  
> its co-ordinates. I think the way I am getting the icon to the  
> basket image is not the best, as it a hack based on where they are  
> now on the page.
>
> Please have a look at the page and code and see if you can come up  
> with a better way of doing it.
>
> Any help would be really appreciated.
>
> Many Thanks,
>
> Alan...
>
>
> Date: Mon, 26 Nov 2007 21:49:38 -0700
> From: peter at brunone.com
> To: javascript at lists.evolt.org
> CC:
> Subject: Re: [Javascript] Moving elements with Javascript
>
> Sounds fairly simple; you could use absolute positioning to situate  
> the elements (which is a bit of a pain to get right, but it's really  
> the only way to get them moving).  Then you would adjust the  
> style.left and style.top properties of the object, moving it  
> incrementally using the Javascript setTimeout function, and when it  
> reaches its destination, a simple style.display = "none" would make  
> it disappear.
>
> That's the bones of it, anyway; at least you have some terms to  
> research :)
>
> Peter
>
> From: "Rafael Menezes" soscpd at gmail.com
>
> DHTML is the tool i recommend to this task.
>
> Regards
> Rafael
>
>
> On 26/11/2007, Alan Easton <alaneaston666 at hotmail.com> wrote:
> Hello everyone,
>
> I have a question about moving elements from one part of the screen  
> to another.
>
> The situation is this. I am building a shopping cart, and would like  
> to add a bit of fancy functionality. When a visitor clicks my "Add  
> to Basket" icon, I would like the icon to then fly to a designated  
> point on the screen, either to the top of the page, out of sight, or  
> somewhere else on screen, then when it gets there, then to simply  
> disappear.
>
> I am not sure how hard this is, but I did see it on Microsoft's  
> site, and thought it looked very cool.
>
> It is a cool feature to have, that's all, and I was wondering if any  
> of you experts could help me out with it.
>
> Any help as always is greatly appreciated.
>
> Many Thanks,
>
> Alan...
>
> The next generation of MSN Hotmail has arrived - Windows Live  
> Hotmail _______________________________________________
> Javascript mailing list
> Javascript at lists.evolt.org
> http://lists.evolt.org/mailman/listinfo/javascript

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20071127/82caf7d6/attachment.htm>