Ok great. I've found the magic combination here.
Javascript preloading the images works for FF, and IE6, but not IE7.
DOM message works for FF, but not IE7 or IE6
Doing it the normal way before, but loading the image in a
display:none; div, it works in all 3 browsers.
<script type="text/javascript" >
//blockui upload form
$.blockUI.defaults.overlayCSS.backgroundColor = '#ffffff';
$(function() {
$('.upload-form').submit(function () {
$('div.upload-box').block({
message: '<img src="/images/ajax-loader.gif" alt="" /
><h1>Uploading...</h1>',
css: {
border: 'none',
background: 'none'
}
});
});
});
</script>
.....
<div style="display: none;">
<img src="/images/ajax-loader.gif" alt="" />
</div>
On Aug 21, 8:10 pm, Mike Alsup <[EMAIL PROTECTED]> wrote:
> I'd try preloading the image, either via script or by making the
> blocking message a hidden div. The "Dom Element as Message" example
> on this page uses existing markup as the message:
>
> http://www.malsup.com/jquery/block/#page
>
> If that doesn't work then I'd return false from your submit handler
> and resubmit the form via script in a setTimeout callback. That may
> give the browser enough of a breath to position and render the image
> correctly.
>
> Mike
>
> On Aug 21, 11:22 am, xxkylexx <[EMAIL PROTECTED]> wrote:
>
> > Anyone else with any ideas? Hoping the author of the plugin will chime
> > in. I see he is fairly active on here.
>
> > -Kyle
>
> > On Aug 20, 12:30 pm, xxkylexx <[EMAIL PROTECTED]> wrote:
>
> > > Tried both, which both did not work :-/ . It has something to do with
> > > the submit function-- as when I use click(), it works fine.
>
> > > -Kyle
>
> > > On Aug 20, 12:19 pm, Joe <[EMAIL PROTECTED]> wrote:
>
> > > > Hmm, very strange. If you inspect the element in firefox it shows the
> > > > <img> tag as not displayed. If you "preview" the image by mousing
> > > > over the src attribute in the image tag, then it shows up in Firebug.
> > > > After this, it is cached and then shows up when I upload. Very very
> > > > bizarre. I've usedblockUIfor many things and never had this issue.
> > > > Maybe explicitly make the image display: block or apply it as a
> > > > background image to the h1 or another tag.
>
> > > > Joe
>
> > > > On Aug 19, 9:41 pm, xxkylexx <[EMAIL PROTECTED]> wrote:
>
> > > > > Hey guys,
> > > > > I am trying to use theblockuiplugin in order to block a div that
> > > > > contains my file uploader while the file is in the process of
> > > > > uploading (form is being submitted).
>
> > > > > I have successfully achieved this, however, I want to display a cool
> > > > > little animated loading .gif in theblockuimessage, but am having
> > > > > issues getting it to load, and animate in some browsers (ff and ie6).
>
> > > > > I think the problem is that the image isn't getting enough time to
> > > > > load or something before the submit begins. I am using a javascript
> > > > > submit() to handle submitting the form, and then trigger theblockui.
>
> > > > > You can see this working in action here (as well as view my
> > > > > source):http://new.imagenerd.com/. Just upload an image to see the
> > > > > issue I am
> > > > > describing.
>
> > > > > Thanks for any help.
>
> > > > > -Kyle
