scriptaculous

Django has been updated to 1.3, and in fact ever since 1.2.5, it has extended the scheme to pass a Cross Site Request Forgery protection token to XMLHttpRequests. The Django folks helpfully provide an example for jQuery to apply a specific header to every XHR. Prototype (and thus Scriptaculous) have to comply to this scheme, yet I can't find a way to tell prototype to add the X-CSRFToken header. The best would be to do it once in a way that applies it across the app (like for jQuery). Is there a way to do that? This is a wild guess but you could try extending the base AJAX class... Ajax.Base

I have some elements on a page which are draggable. These same elements have a click event which navigates to another page. I'm trying to determine the best way of preventing the click event from firing if the user is dragging but still allow the click event if not dragging. Anyone have any ideas of the best way to accomplish this? I solved this by using something like the following: new Draggable('id', { onStart: function() { dPhoto = $('id'); Event.stopObserving('id', 'click'); }, onEnd : function() { setTimeout("Event.observe('id', 'click', function() { location.href = 'url'; });", 500); },

I have an IFrame on my page pointing to a page containing list of <li /> elements. The <li /> elements are Draggables created using Scriptaculous library . The question is how do I drag the elements OUT of the IFrame, and drop them on the page containing the IFrame? Is there any library available which supports cross frame dragging & dropping? I don't know about jQuery, but Scriptaculous definitely doesn't support this. Check this interesting implementation , it was done using PrototypeJS and Scriptaculous I find this workaround interesting since it actually uses two iframes that contain LI

I would like to make a modal window using prototype and scriptaculous. I was wondering if there is any site that has a tutorial or if anyone could kinda give me some idea where to start. (I don't want a prebuilt one) thaddeusmt In addition to Control.Window, here are some others I have found: http://okonet.ru/projects/modalbox/index.html (very nice, and free) http://prototype-window.xilinus.com/download.html (looks pretty good) http://dzone.com/snippets/javascript-dialog-box-based (not packaged, just a code snippet) http://www.nickstakenburg.com/projects/lightview/ (slick! but not free) More

I'm developing a website with Ruby on Rails and I have a div with some content. After clicking a link I want that content to get replaced with some other stuff. This works fine with replace_html and rjs. However, I'd prefer there to be a slight fade/appear (crossfade?) transition between the old and new content. Also the div will be resized a bit so it'd be cooler if this did a grow/shrink effect. I was thinking Scriptaculous must have something like this built in, but I sure can't find it if they do. By the way there is a great example of this if you have a Basecamp account: login and click

I am using scriptaculous to perform a slidedown effect using the following code: Effect.SlideDown('dom_element_id'); I then hide the button which initiates this effect using: $('button_id').hide(); The issue is that the button is hidden before the animation effect is complete, I would like it to hide after the animation effect is complete. I could not find a callback parameter for Effect.SlideDown . Jonathan Fingland You can pass the afterFinish option to pass a callback to be run after the effect has been completed. Effect.SlideDown('dom_element_id', { afterFinish: function () {$('button_id')

I'm using JavaScript to hide an image and show some text thats hidden under it. But, when the text is shown if you scroll over it, it fires the mouseout event on the container, that then hides the text and shows the image again, and it just goes into a weird loop. The html looks like this: <div onmouseover="jsHoverIn('1')" onmouseout="jsHoverOut('1')"> <div id="image1" /> <div id="text1" style="display: none;"> <p>some content</p> <p>some more content</p> </div> </div> And the javascript (It uses scriptaculous): function jsHoverIn(id) { if(!visible[id]) { new Effect.Fade ("image" + id, {queue:

Does anyone know of crossbrowser equivalent of explicitOriginalTarget event parameter? This parameter is Mozilla specific and it gives me the element that caused the blur. Let's say i have a text input and a link on my page. Text input has the focus. If I click on the link, text input's blur event gives me the link element in Firefox via explicitOriginalTarget parameter. I am extending Autocompleter.Base's onBlur method to not hide the search results when search field loses focus to given elements. By default, onBlur method hides if search-field loses focus to any element. Autocompleter.Base

I need to add prototype and then add scriptaculous and get a callback when they are both done loading. I am currently loading prototype like so: var script = document.createElement("script"); script.src = "http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"; script.onload = script.onreadystatechange = callback; document.body.appendChild( script ); I could do this by chaining the callbacks, but that seems like poor practice ( I don't want a silly chain of 20 callback methods when I need to load more scripts). Ideas? I propose you to use some small loader which will chain and do