Search code examples
javascriptjquerygoogle-dfp

Any alternatives to jQuery's slideUp, slideDown, animate functions?


I'm creating a footer ad format to run in Google DFP, but jQuery won't work within it (long story). So I'm trying to find some alternate ways to accomplish the same tasks - namely the slideUp, slideDown, and animate functions. Does anyone know of some alternatives? Thanks!


Solution

  • Check this link that works with javascript:

    http://www.switchonthecode.com/tutorials/javascript-sliding-panels-using-generic-animation

    Example:

    HTML:

    <div style="position:relative;
               width:150px;
               height:170px;
               top:0px;
               left:0px;">
      <div id="exampleHeader1" 
          style="position:absolute;
                 width:150px;
                 height:20px;
                 top:0px;
                 left:0px;
                 background:#3b587a;
                 text-align:center;
                 color:#FFFFFF;"
          onclick="slideExample1('examplePanel1', this);">
        ^^^
      </div>
      <div id="examplePanel1" 
          style="position:absolute;
                 width:150px;
                 height:130px;
                 top:20px;
                 left:0px;
                 background:#a6bbcd;
                 overflow:hidden;">
        Content
      </div>
    </div>
    

    Javascript:

    function slideExample1(elementId, headerElement)
    {
       var element = document.getElementById(elementId);
       if(element.up == null || element.down)
       {
          animate(elementId, 0, 20, 150, 0, 250, null);
          element.up = true;
          element.down = false;
          headerElement.innerHTML = 'vvv';
       }
       else
       {
          animate(elementId, 0, 20, 150, 130, 250, null);
          element.down = true;
          element.up = false;
          headerElement.innerHTML = '^^^';
       }
    }