Ajax with slide effects onready witout using a toolkit

views:

217

answers:

Ajax with slide effects onready witout using a toolkit

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!

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.

Paddy 2009-10-07 14:27:35

I know, but... I kind of really need to be able to do this without a library if I can work it.

rich 2009-10-07 14:29:42

Then go with the first part of the answer - have a look at the code in the JQuery library and write your own version.

Paddy 2009-10-07 14:34:12

+1 A:

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

set the display of the element to none
get the full height of the element, something like:
document.getelementById('IDofElement').style.height
set the height to 0 and the display to something like block
set a timeOut() and increase the height in the called function, activate a new timeOut() if the element is not already full height.

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.

jeroen 2009-10-07 15:01:46

This seems like a good way to go... shall have a play

rich 2009-10-07 15:27:04

Okay, playing with it it all makes sense indeed. However, I guess it needs to have the height already set in the CSS? Or is there a way for it to set the height variable? Sorry for the questions!

rich 2009-10-07 15:58:28

I normally use jQuery, but I think that **document.getelementById('IDofElement').style.height** can be used to both set and get the height.

jeroen 2009-10-07 19:41:41

I couldnt work out how to get the height of the div when the ajax request was in it without specifiying the height automatically... worked it using this to get the full height BEFORE setting it to 0:var fHeight = document.getElementById('slideDiv').offsetHeight;

rich 2009-11-04 10:45:57

and if needed here is a working version+another question (answered):http://stackoverflow.com/questions/1673336/ajax-response-that-slides-open-a-div

rich 2009-11-09 12:33:43

ansaurus

tags:

views:

answers:

Ajax with slide effects onready witout using a toolkit

related questions