5250

Ajax with slide effects onready witout using a toolkit

Question:

I'm really not that good at Javascript and that, so I need another bit of help. I want to be able to do a quick bit of AJAX using PHP then when the ajax response is finished show the response in a div and SLIDE it down nicely.

The basic AJAX side of it is no problem. But I want to be able to have it slide nicely without using any framework like jQuery or MooTools. Mainly for learning, but there are other reasons. So, any help on a very simple way od doing so would be handy. I can't really find much online. If I have to use jQuery then I guess I can, I have played about with it but I'm not a fan of Javascript at the best of times...

So yeah, pretty much any advice/tips/thoughts/help would be really handy!

Answer1:

I guess the basics would be something of a timeOut() in combination with increasing the height until it is full height:

<ol><li>set the display of the element to none</li> <li>get the full height of the element, something like:<br /><strong>document.getelementById('IDofElement').style.height</strong></li> <li>set the height to 0 and the display to something like block</li> <li>set a <strong><a href="http://www.w3schools.com/js/js_timing.asp" rel="nofollow">timeOut()</a></strong> and increase the height in the called function, activate a new timeOut() if the element is not already full height.</li> </ol>

The only real disadvantage of not using a library would be that you would have to test in a lot of different browsers and perhaps make modifications according to the browser used. Libraries have already solved that problem for you.

Answer2:

Personally, I'd just use JQuery. If you want to see how they do it, then download the developer version of the library and look at the code.

If you're not a fan of javascript, then use a library, it means you have to write less.

Recommend

  • JS (Moo Tools) Slider Not Working in FF and Chrome
  • JQuery JSON Undefined
  • How to split string in XML
  • How to access global variable value in multiple template tags
  • Why do I get a “connection is already open” error during a MySQL update statement?
  • Retrieve Greek letters from MSSQL database with PHP
  • How to get index of clicked element in Mootools
  • Visual Studio: Real time method call trace?
  • How do I convert a ResultSet in a List of Hashtable?
  • Creating A C# & XNA 'Monster Dash' Like Game
  • Excluding multiple values from the array
  • Mootools accordion with a Next button inside each pane
  • byebug, next into application code only
  • Random access image (picture) file
  • Finding for convolution kernel if many 0's for FFT?
  • Get or convert Week of year to ISO week
  • How to distribute Java-based software?
  • Can my PDF ping my server when it is opened?
  • XSLT foreach repeating nodes to flat
  • Access user's phone number on iOS 7
  • netsh acl setting (need alternative method - registry settings?)
  • how to set variables in a php include file?
  • Possible to “watch” both HAML and SASS at the same time?
  • Row to Column conversion in Talend
  • Custom preprocessing in caret
  • GAE: Way to get reference to an HttpSession from its ID?
  • calculate gradient output for Theta update rule
  • Is it possible to open regedit and navigate to straight to a specific key using process.start?
  • Unable to install Git-core+svn by MacPorts
  • Django simple Captcha “No module named fields” error
  • PHP buffered output depending on server setting?
  • Could not find rake using whenever rails
  • Recording logins for password protected directories
  • How can I estimate amount of memory left with calling System.gc()?
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • Is there any way to bind data to data.frame by some index?
  • How can i traverse a binary tree from right to left in java?