Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts

    loading image for blockui on form submit

    Hey guys,
    I am trying to use the blockui jquery plugin 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 the blockui message, 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 the blockui.

    You can see this working in action here (as well as view my source):
    click here . Just upload an image to see the issue I am
    describing.

    Thanks for any help.

    -Kyle
    Last edited by xxkylexx; 08-20-2008 at 04:46 AM.

  • #2
    New Coder
    Join Date
    Aug 2008
    Location
    Yorkshire, England
    Posts
    19
    Thanks
    0
    Thanked 1 Time in 1 Post
    I was having a similar issue, again with a file upload, but using my own few lines of jquery - not the blockui plugin

    I had a quick look in the code for the thickbox plugin (which i've used in other areas of the project), which has an animated gif on a 'greyed out' screen before a modal window pops up.

    The code was preloading the image:

    eg

    PHP Code:
    /*javascript*/

    //preload
    var myPic = new Image();
    myPic.src "../path/to/gif/";

    //display
    ....."<img src='"+myPic.src+"' />"........; 
    This displayed the image in all browsers, yet it failed to animate in IE.

    It's not a high priority part of my project at the moment, so I'll be revisiting it a bit later.....and i'll probably start by taking a more in depth look at the thickbox code.

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok great. I've found a magic combination here.

    Javascript preloading the images works for FF, and IE6, but not IE7.

    DOM message loading 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.

    Code:
    <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>

    Not the best solution, I'm sure ... but it works.

  • #4
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    /*javascript*/

    //preload
    var myPic = new Image();
    myPic.src = "../path/to/gif/";

    //display
    ....."<img src='"+myPic.src+"' />"........;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •