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 5 of 5
  1. #1
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts

    DHTML animation (two divs trading places)

    I have an application i have been working on for a few days, and i am almost done thanks to CF. Heres the last little add-on i want for this application. Its for a real estate company and they use this application to adjust the pictures in their gallery. They switch just fine without any problems. What i want is instead of them just switching i want animation.

    I want them to move to the opposing div. Like if i were to select the "div1" and selected "div4". I would want the "div1" to start moving towards "div4"'s loacation and "div4" to start moving towards "div1"s location. Doeas anyone know where i can find an example like this or even a tutorial? Thanks for any help.

    here is my page and what it looks like now.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
    
    body {
    background-color:#f2f2f2;
    }
    
    
    
    #pictrueContainer {
    width:300px;
    text-align:center;
    margin:10px;
    border:1px solid #666666;
    background-color:#FFFFFF;
    padding-bottom:3px;
    }
    
    #outsidePictrueContainer {
    width:300px;
    
    margin:10px;
    border:1px solid #666666;
    background-color:#FFFFCC;
    padding-bottom:3px;
    }
    
    .pictureEven {
    height:75px;
    width:295px;
    background-color:#CCCCCC;
    border:1px solid #000000;
    margin-top:3px;
    text-align:left;
    position:relative;
    }
    
    .pictureEven img {
    height:75px;
    width:75px;
    background-color:#CCCCCC;
    border-right:1px solid #000000;
    border-bottom:0px;
    border-left:0px;
    border-top:0px;
    }
    
    .pictureEven img:hover {
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    opacity:.50;
    cursor:pointer;
    }
    
    .pictureOdd {
    height:75px;
    width:295px;
    background-color:#CCCCCC;
    border:1px solid #000000;
    margin-top:3px;
    text-align:left;
    position:relative;
    }
    
    .pictureOdd img {
    height:75px;
    width:75px;
    background-color:#CCCCCC;
    border-right:1px solid #000000;
    border-bottom:0px;
    border-left:0px;
    border-top:0px;
    }
    
    .pictureOdd img:hover {
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    opacity:.50;
    cursor:pointer;
    }
    
    .link_style {
    position:relative;
    vertical-align:top;
    left:60px;
    top:27px;
    font-family:"Courier New", Courier, monospace;
    font-size:12px;
    color:#333333;
    
    }
    
    </style>
    
    <script type="text/javascript">
    
    var foo = null; // object
    
    function doMove() {
      foo.style.top = parseInt(foo.style.top)+3+'px';
      setTimeout(doMove,5); // call doMove in 20msec
    }
    
    function init() {
      foo = document.getElementById('title'); // get the "foo" object
      foo.style.top = '0px'; // set its initial position to 0px
      foo.style.zIndex='100';
      doMove(); // start animating
    }
    
    
    
    var selectedCount = 0;
    var firstSelectedDiv;
    var secondSelectedDiv;
    
    function toggleTiles(tile)
    {
        switch (selectedCount)
        {
            case 0:
                selectedCount = 1;
                firstSelectedDiv = document.getElementById(tile);
                firstSelectedDiv.style.opacity = '0.5';
    			firstSelectedDiv.style.filter ="alpha(opacity='50')";
                break;
            case 1:
                selectedCount = 2;
                secondSelectedDiv = document.getElementById(tile);
                if ( secondSelectedDiv == firstSelectedDiv )
                {
                    alert("Must Select Two images");
                    selectedCount = 1;
    
                } // end: if
                else //
                {
                    secondSelectedDiv.style.opacity = '0.5';
    				secondSelectedDiv.style.filter ="alpha(opacity='50')";
                    toggleTiles(null);
    
                } // end: else
                break;
            case 2:
                var swapTileContents = firstSelectedDiv.innerHTML;
                firstSelectedDiv.innerHTML = secondSelectedDiv.innerHTML;
                secondSelectedDiv.innerHTML = swapTileContents;
                alert('swapped');
                firstSelectedDiv.style.opacity = '1.0';
    			firstSelectedDiv.style.filter ="alpha(opacity='100')";
                secondSelectedDiv.style.opacity = '1.0';
    			secondSelectedDiv.style.filter ="alpha(opacity='100')";
                selectedCount = 0;
                break;
        }
    }
    
    
    
    
    </script>
    
    
    
    </head>
    
    <body>
    
    
    
    <div id="pictrueContainer">
    <div class="pictureOdd"  id="tile0x0" onclick="toggleTiles(this.id);" > <img src="picUpload/pic1.jpg" alt="1" /> <a href="#" class="link_style">Listing_11.jpg</a> </div>
    <div class="pictureEven" id="tile0x1" onclick="toggleTiles(this.id);" ><img src="picUpload/pic2.jpg" alt="2" /> <a href="#" class="link_style">Listing_21.jpg</a> </div>
    <div class="pictureOdd" id="tile0x2" onclick="toggleTiles(this.id);" ><img src="picUpload/pic3.jpg" alt="3" /> <a href="#" class="link_style">Listing_22.jpg</a></div>
    <div class="pictureEven" id="tile0x3" onclick="toggleTiles(this.id);" ><img src="picUpload/pic4.jpg" alt="4" /> <a href="#" class="link_style">Listing_23.jpg</a></div>
    <div class="pictureOdd" id="tile0x4" onclick="toggleTiles(this.id);"><img src="picUpload/pic5.jpg" alt="5" /> <a href="#" class="link_style">Listing_24.jpg</a></div>
    <div class="pictureEven" id="tile0x5" onclick="toggleTiles(this.id);"><img src="picUpload/pic6.jpg" alt="6"/> <a href="#" class="link_style">Listing_25.jpg</a></div>
    <div class="pictureOdd" id="tile0x6" onclick="toggleTiles(this.id);"><img src="picUpload/pic7.jpg" alt="7" /><a href="#" class="link_style">Listing_26.jpg</a></div>
    <div class="pictureEven" id="tile0x7" onclick="toggleTiles(this.id);"><img src="picUpload/pic8.jpg" alt="8" /> <a href="#" class="link_style">Listing_27.jpg</a></div>
    <div class="pictureOdd" id="tile0x8" onclick="toggleTiles(this.id);"><img src="picUpload/pic9.jpg" alt="9" /> <a href="#" class="link_style">Listing_28.jpg</a></div>
    <div class="pictureEven" id="tile0x9" onclick="toggleTiles(this.id);"><img src="picUpload/pic10.jpg" alt="10" /> <a href="#" class="link_style">Listing_29.jpg</a></div>
    
    
    </div>
    <div id="outsidePictrueContainer">
    <img src="picUpload/pic11.jpg" />
    </div>
    </body>
    </html>

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok if this helps i want to take this animations script here

    Code:
    var foo = null; // object
    
    function doMove() {
      foo.style.top = parseInt(foo.style.top)+3+'px';
      setTimeout(doMove,5); // call doMove in 20msec
    }
    
    function init() {
      foo = document.getElementById('title'); // get the "foo" object
      foo.style.top = '0px'; // set its initial position to 0px
      foo.style.zIndex='100';
      doMove(); // start animating
    }
    and when two divs are selected i want to integrate that script into here, not sure how though

    Code:
    var selectedCount = 0;
    var firstSelectedDiv;
    var secondSelectedDiv;
    
    function toggleTiles(tile)
    {
        switch (selectedCount)
        {
            case 0:
                selectedCount = 1;
                firstSelectedDiv = document.getElementById(tile);
                firstSelectedDiv.style.opacity = '0.5';
    			firstSelectedDiv.style.filter ="alpha(opacity='50')";
                break;
            case 1:
                selectedCount = 2;
                secondSelectedDiv = document.getElementById(tile);
                if ( secondSelectedDiv == firstSelectedDiv )
                {
                    alert("Must Select Two images");
                    selectedCount = 0;
    				firstSelectedDiv.style.opacity = '1.0';
    			firstSelectedDiv.style.filter ="alpha(opacity='100')";
    
                } // end: if
                else //
                {
                    secondSelectedDiv.style.opacity = '0.5';
    				secondSelectedDiv.style.filter ="alpha(opacity='50')";
                    toggleTiles(null);
    
                } // end: else
                break;
            case 2:
                var swapTileContents = firstSelectedDiv.innerHTML;
                firstSelectedDiv.innerHTML = secondSelectedDiv.innerHTML;
                secondSelectedDiv.innerHTML = swapTileContents;
                alert('swapped');
                firstSelectedDiv.style.opacity = '1.0';
    			firstSelectedDiv.style.filter ="alpha(opacity='100')";
                secondSelectedDiv.style.opacity = '1.0';
    			secondSelectedDiv.style.filter ="alpha(opacity='100')";
                selectedCount = 0;
                break;
        }
    }
    Thanks if anyone has suggestions..

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
    
    body {
    background-color:#f2f2f2;
    }
    
    
    
    #pictrueContainer {
    position:relative;
    width:300px;
    text-align:center;
    margin:10px;
    border:1px solid #666666;
    background-color:#FFFFFF;
    padding-bottom:3px;
    }
    
    #outsidePictrueContainer {
    width:300px;
    
    margin:10px;
    border:1px solid #666666;
    background-color:#FFFFCC;
    padding-bottom:3px;
    }
    
    .pictureEven {
    height:75px;
    width:295px;
    background-color:#CCCCCC;
    border:1px solid #000000;
    margin-top:3px;
    text-align:left;
    position:relative;
    }
    
    .pictureEven img {
    height:75px;
    width:75px;
    background-color:#CCCCCC;
    border-right:1px solid #000000;
    border-bottom:0px;
    border-left:0px;
    border-top:0px;
    }
    
    .pictureEven img:hover {
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    opacity:.50;
    cursor:pointer;
    }
    
    .pictureOdd {
    height:75px;
    width:295px;
    background-color:#CCCCCC;
    border:1px solid #000000;
    margin-top:3px;
    text-align:left;
    position:relative;
    }
    
    .pictureOdd img {
    height:75px;
    width:75px;
    background-color:#CCCCCC;
    border-right:1px solid #000000;
    border-bottom:0px;
    border-left:0px;
    border-top:0px;
    }
    
    .pictureOdd img:hover {
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    opacity:.50;
    cursor:pointer;
    }
    
    .link_style {
    position:relative;
    vertical-align:top;
    left:60px;
    top:27px;
    font-family:"Courier New", Courier, monospace;
    font-size:12px;
    color:#333333;
    
    }
    
    </style>
    
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (13-March-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     if (zxcsrtfin[0]==zxcsrtfin[1]) return;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  this.opacity(this.data[0]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else  this.opacity(this.data[0]);
     }
    }
    
    
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcSwapPanel(zxcobj,zxcspd){
     zxcobj=(typeof(zxcobj)=='object')?zxcobj:document.getElementById(zxcobj);
     var zxcp=zxcobj.parentNode;
     zxcp.spd=zxcspd||1000;
     if (!zxcp.ary){
      zxcp.ary=[];
      zxcp.mark1=zxcES('A',{});
      zxcp.mark2=zxcES('A',{});
      var zxcclds=zxcp.childNodes;
      for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
       if (zxcclds[zxc0].nodeType==1){
        zxcclds[zxc0].clone=zxcclds[zxc0].cloneNode(true);
        zxcES(zxcclds[zxc0].clone,{position:'absolute',zIndex:'1',left:zxcclds[zxc0].offsetLeft+'px'});
        zxcOpacity(zxcclds[zxc0].clone,50);
        zxcclds[zxc0].soop=new zxcSwapPanelOOP(zxcclds[zxc0]);
       }
      }
     }
     if (!zxcp.ary[0]){
      zxcp.insertBefore(zxcp.mark1,zxcobj);
      zxcp.ary[0]=zxcobj;
     }
     else if (zxcp.ary[0]!=zxcobj){
      zxcp.insertBefore(zxcp.mark2,zxcobj);
      zxcobj.soop.swap(zxcp.ary[0],zxcp.mark1);
      zxcp.ary[0].soop.swap(zxcobj,zxcp.mark2);
     }
    }
    
    function zxcSwapPanelOOP(zxcobj){
     this.obj=zxcobj;
     this.p=zxcobj.parentNode;
     this.to=null;
    }
    
    zxcSwapPanelOOP.prototype.swap=function(zxcobj,zxcmark){
     clearTimeout(this.to);
     zxcES(this.obj.clone,{},this.obj.parentNode);
     zxcBAnimator('top',this.obj.clone,this.obj.offsetTop,zxcobj.offsetTop,this.p.spd);
     this.to=setTimeout(function(zxcoop){return function(){zxcoop.end(zxcobj,zxcmark);}}(this),this.p.spd);
    }
    
    zxcSwapPanelOOP.prototype.end=function(zxcobj,zxcmark){
     this.p.insertBefore(this.obj,zxcmark);
     this.p.removeChild(this.obj.clone);
     this.p.ary.length=0;
    }
    
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
     for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
     if (zxcp) zxcp.appendChild(zxcele);
     if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
     return zxcele;
    }
    
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     zxcobj.style.filter='alpha(opacity='+zxcopc+')';
     zxcobj.style.opacity=zxcobj.style.MozOpacity=zxcobj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    
    
    
    
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    
    
    <div id="pictrueContainer">
    <div class="pictureOdd"  id="tile0x0" onclick="zxcSwapPanel(this);" > <img src="picUpload/pic1.jpg" alt="1" /> <a href="#" class="link_style">Listing_11.jpg</a> </div>
    <div class="pictureEven" id="tile0x1" onclick="zxcSwapPanel(this,50);" ><img src="picUpload/pic2.jpg" alt="2" /> <a href="#" class="link_style">Listing_21.jpg</a> </div>
    <div class="pictureOdd" id="tile0x2" onclick="zxcSwapPanel(this);" ><img src="picUpload/pic3.jpg" alt="3" /> <a href="#" class="link_style">Listing_22.jpg</a></div>
    <div class="pictureEven" id="tile0x3" onclick="zxcSwapPanel(this);" ><img src="picUpload/pic4.jpg" alt="4" /> <a href="#" class="link_style">Listing_23.jpg</a></div>
    <div class="pictureOdd" id="tile0x4" onclick="zxcSwapPanel(this);"><img src="picUpload/pic5.jpg" alt="5" /> <a href="#" class="link_style">Listing_24.jpg</a></div>
    <div class="pictureEven" id="tile0x5" onclick="zxcSwapPanel(this);"><img src="picUpload/pic6.jpg" alt="6"/> <a href="#" class="link_style">Listing_25.jpg</a></div>
    <div class="pictureOdd" id="tile0x6" onclick="zxcSwapPanel(this);"><img src="picUpload/pic7.jpg" alt="7" /><a href="#" class="link_style">Listing_26.jpg</a></div>
    <div class="pictureEven" id="tile0x7" onclick="zxcSwapPanel(this);"><img src="picUpload/pic8.jpg" alt="8" /> <a href="#" class="link_style">Listing_27.jpg</a></div>
    <div class="pictureOdd" id="tile0x8" onclick="zxcSwapPanel(this);"><img src="picUpload/pic9.jpg" alt="9" /> <a href="#" class="link_style">Listing_28.jpg</a></div>
    <div class="pictureEven" id="tile0x9" onclick="zxcSwapPanel(this);"><img src="picUpload/pic10.jpg" alt="10" /> <a href="#" class="link_style">Listing_29.jpg</a></div>
    
    
    </div>
    <div id="outsidePictrueContainer">
    <img src="picUpload/pic11.jpg" />
    </div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    jcdevelopment (06-20-2008)

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Geez, thank you.. i cant believe you did that, you even added notes and why things do what they do. I hope good things happen to you from now on, haha. Thank you very much!!!

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    not that beggers should be choosers, but the main part of this application was making it easy for these people. I need to know where you control the on clicks. I need when the user clicks on the div and the second one, it stays at 0.5 opacity until they switch. Here was the code originally that did it.

    Code:
     if ( secondSelectedDiv == firstSelectedDiv )
                {
                    alert("Must Select Two images");
                    selectedCount = 0;
    				firstSellectedDiv.style.opacity = '1.0';
    			firstSelectedDiv.style.filter ="alpha(opacity='100')";
    
                } // end: if
                else //
                {
                    secondSelectedDiv.style.opacity = '0.5';
    				secondSelectedDiv.style.filter ="alpha(opacity='50')";
                    toggleTiles(null);
    
                } // end: else
    dont worry though if its a hastle, i just didnt know if there was something that controlled it. Thank you so much!!!


  •  

    Posting Permissions

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