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 acplish the same tasks - namely the slideUp, slideDown, and animate functions. Does anyone know of some alternatives? Thanks!

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 acplish the same tasks - namely the slideUp, slideDown, and animate functions. Does anyone know of some alternatives? Thanks!

• javascript
• jquery
• google-dfp

Share Improve this question Follow edited Aug 13, 2012 at 14:25 gen_Eric 227k4242 gold badges303303 silver badges342342 bronze badges asked Aug 13, 2012 at 14:24 KyleKyle 3311 silver badge33 bronze badges 4

• If jQuery won't work in it, are there other libraries blocking it? If so, which one(s)? – Pekka Commented Aug 13, 2012 at 14:27
• by reffering to jquery library, you can prepare your own code for the above functions. – Shreedhar Commented Aug 13, 2012 at 14:27
• 1 tiy can try mootools, but the question is why is JQuery not working. Seems like if that isn't working, Mootools also won't – PoeHaH Commented Aug 13, 2012 at 14:27
• That was my first post here - great to see so many helpful responses! Thanks for all the quick help guys! Correct, I don't think Scriptaculous / Mootools would work either - I'm looking for simple JavaScript functions (already coded b/c I'm not good enough to figure it out myself) I can add to the code rather than pull in dynamically (with a script src tag). I'd also prefer something small rather than a big JavaScript library like jQuery. – Kyle Commented Aug 13, 2012 at 16:59

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

dom-slider is a vanilla-js implementation of jQuery's slideDown, slideUp, and slideToggle methods that works on elements with unknown heights. Use it just like jQuery:

element.slideUp()
element.slideDown(800)
element.slideToggle(800, 'easeOut') // CSS transition timing function
element.slideUp(300).slideDown(500)

However, its methods don't accept callbacks--instead, you provide the callback with the returned promise:

element.slideUp().then(function() {
  console.log('sliding done!');
})

There are a few other improvements as well. Check out the README for the details.

Check this link that works with javascript:

http://www.switchonthecode./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 = '^^^';
   }
}

Two alternatives:

1. Scriptaculous has such a thing already to go and has not crashed on pages where I have had conflicts.

2. Mootools.

You can have at some Scriptaculous demos.

Why not using Css animations?
I know, it will jump directly to the end in older browsers (< IE10),
but still better than nothing and very lightweight.

What are you actually trying to achieve? I may be able to help you out with your slideUP and downs/ Alternatively, you can use jquery.animate() to reposition and change heights etc, but slideUp and slideDown do work quite well!

Just paste the entire jQuery source file into the script you can edit. I'd add probably a 100 or 200 newlines afterwards to add some visual separation from my code.