I seem to be having an issue with dynamically adding elements and
animating their appearance on the screeen when using Scriptaculous
with Chromium. Everything seems to work just find in IE 8 and FireFox
3.5.5. I am using pre-packaged Scriptaculous animations.
The issue is that the new elements added to the page constitute a new
form, but the buttons on that form are either not available at all, or
else not available for several seconds after they appear. It seems as
though if you attempt to access any of the buttons within that "pause
window," everything becomes unavailable. I assume this has something
to do with the animation process not finishing for some reason.
There are two pre-packaged effects I'm using: Appear and ScrollTo. The
issue appears to be affecting the Appear animation, because without
using it, everything seems to be working fine.
Has anyone else run into this? Code below:
function wllWA_Comment(post, url) {
var target = document.getElementById('wall'+post);
// Do we already have a comment field? If so, bypass it:
var testform = document.getElementById('wallcommform');
if(testform == null) {
// Build form elements
var form = document.createElement('FORM');
form.setAttribute('method', 'post');
form.setAttribute('action', window.location.href);
form.setAttribute('name', 'wallcommform');
form.setAttribute('id', 'wallcommform');
form.setAttribute('style', 'display:none');
// processcom hidden field
var processcom = document.createElement('INPUT');
processcom.setAttribute('type', 'hidden');
processcom.setAttribute('value', '1');
processcom.setAttribute('name', 'processcom');
// WallID hidden field
var WallID = document.createElement('INPUT');
WallID.setAttribute('type', 'hidden');
WallID.setAttribute('value', post);
WallID.setAttribute('name', 'WallID');
// myaccountcommentformfield div
var myaccountcommentformfield = document.createElement('DIV');
myaccountcommentformfield.setAttribute('id',
'myaccountcommentformfield');
// WallCommentText textarea form element
var WallCommentText = document.createElement('TEXTAREA');
WallCommentText.setAttribute('name', 'WallCommentText');
WallCommentText.setAttribute('cols', '52');
WallCommentText.setAttribute('rows', '3');
var myaccountcenterrightbutton = document.createElement('DIV');
myaccountcenterrightbutton.setAttribute('id',
'myaccountcenterrightbutton');
// Submit button
var submitb = document.createElement('INPUT');
submitb.setAttribute('type', 'submit');
submitb.setAttribute('value', 'Comment');
// Cancel button: destroys form if poster changes mind
var cancelb = document.createElement('INPUT');
cancelb.setAttribute('type', 'button');
cancelb.setAttribute('name', 'Cancel');
cancelb.setAttribute('value', 'Cancel');
// Add the hideComment() function to the cancel button:
addEvent(cancelb, 'click', function() { hideComment(); });
// cancelb.setAttribute('onclick', 'hideComment()');
var spacer = document.createElement('DIV');
spacer.setAttribute('style','display: inline; width: 10px;');
spacer.innerHTML = ' ';
// Add an achor to the form to push the window down:
var anch = document.createElement('A');
anch.setAttribute('name', 'commform'+post);
anch.setAttribute('id', 'commform'+post);
// Tuck 'em in, say goodnight:
myaccountcenterrightbutton.appendChild(cancelb);
myaccountcenterrightbutton.appendChild(spacer);
myaccountcenterrightbutton.appendChild(submitb);
myaccountcommentformfield.appendChild(WallCommentText);
myaccountcommentformfield.appendChild(myaccountcenterrightbutton);
form.appendChild(anch);
form.appendChild(processcom);
form.appendChild(WallID);
form.appendChild(myaccountcommentformfield);
// Finally, the target div:
target.appendChild(form);
//window.location = '#commform'+post;
// Scriptaculous effects to animate the form (Effect.appear)
// and scroll to the comment form
Effect.Appear('wallcommform', { duration: 1.2 });
Effect.ScrollTo('w'+post, { duration: 1.2, offset: -10 });
}
}
--
Chromium Discussion mailing list: [email protected]
View archives, change email options, or unsubscribe:
http://groups.google.com/group/chromium-discuss
