SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript wait message

    my web page has lots of javascripts in it. It takes longer time to execute when page loads . I want to display a image till the time javascript execution ends.

    basically , the image has a text , "Please wait ,javascript execution in progress..".


    How to do it ?

    I won't mind if there is a Jquery solution also.

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think a clear image, with a background of the message as an image that's positioned out of view but brought in to view with javascript might be a nice way to go with this. You could use an animated image similar to how facebook does it as well. Their image makes it obvious the page is loading
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Markdidj View Post
    I think a clear image, with a background of the message as an image that's positioned out of view but brought in to view with javascript might be a nice way to go with this.
    Nothing understood. trying to understand in steps.

    you want to use clear image ? did you mean transparent image ?

    with a background of the message as an image that's positioned out of view

    very much confused here . This seems you are saying no clear image now....nothing understood here.

    Will it be possible if you could show me a small snippet to illustrate this concept. I am not getting you.

    You could use an animated image similar to how facebook does it as well. Their image makes it obvious the page is loading
    facebook....Yes. I have a face book account . Which page you are talking about ? Login page ? I'll do a check and find the experience browsing it.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anybody have any alternative suggestion ?

  5. #5
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Clear image as in a transparent gif yes.

    Have a look at the site in my sig. I have a timer, it'll say "livescript reload is off" with a small image to the left. The small image is actually a long image of 10 states, but you can only see one of those states. I move the background image (the 10 states) left one unit (or image) at a time. I think Facebook does the same and Google's clock works in the same way, the hands are 1 long image.

    It's a better way as you don't need to preload the images, or do an image swap.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Markdidj View Post
    Clear image as in a transparent gif yes.

    Have a look at the site in my sig. I have a timer, it'll say "livescript reload is off" with a small image to the left. The small image is actually a long image of 10 states, but you can only see one of those states. I move the background image (the 10 states) left one unit (or image) at a time. I think Facebook does the same and Google's clock works in the same way, the hands are 1 long image.

    It's a better way as you don't need to preload the images, or do an image swap.

    How do we implement this ?

    Is there any library/package available in the net ? I don't mind whether its a image loading or a simple CSS layer . All I want to display a message that some...." javascript task is going on ..please wait"


    I call a function at the time of page loading .

    page load onload="somefunction()"

    somefunction() is taking longer time to execute so I want to display a message to the user to wait. It could be CSS layer or It could be Image ...I don't bother much really.


    IS there any package / library available which could help in this regard ?

    Can I do it using JQuery ?

  7. #7
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sample project (jQuery) is attached. It is fully working example but not a finished product.

    This is something that i am building for my own "specific" needs. You'll need to modify it a bit per your needs. Unzip and execute default.htm. It has every thing that you'll need to set it up or change per your needs.

    If you modify/update, please post back so that some one else may benefit from it also.

    Enjoy!
    Attached Files Attached Files
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Mod , could you please approve the attachment .

    it says attachment pending approval .

    i can't download the attachment.

  9. #9
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can now download it from the following location:
    http://www.itplate.com/components/jMessage-Original.zip
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you please explain the meaning of these RED parameters you used

    Code:
    //onload
    			jMessage('loading page...', '', true, false);
    			jMessageHideInterval(5000);

    I don't want to put Interval = 5000 , because I don't know how much time my javascript will take to finish.

    In my page load I call a function. onload="somefunction()"

    function somefunction() {


    // This takes long time to execute


    }




    Now, If I use your code here this way ...

    function somefunction() {
    jMessage('loading page...', '', true, false);

    //my lengthy code here



    // HOW DO I STOP THE LOADING message now ?
    }


    If I use your code as in the above . how do I stop the loading when the javascript task is completed. I can not put Interval = 5000 to stop as I don't know how much the task will consume.

  11. #11
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function somefunction() {
     jMessage('loading page...', '', true, false);
     //my lengthy code here
     
     // HOW DO I STOP THE LOADING message now ?
     jMessageHide();
    }
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  12. #12
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jMessage('loading page...', '', true, false);
    The first boolean is to show the processing - animated image when true.

    The second boolean is to make the message sticky when true. User will need to click X to close the message.

    default.htm has all the examples.

    Please open jquery.alerts.messages.js and scroll towards the bottom to look at the global functions that you can utilize, here is the list:

    Code:
    //short cut
     jMessage = function(message, showNearThisObject, blnProcessImage, blnSticky, callback) {
      $.messages.message(message, showNearThisObject, blnProcessImage, blnSticky, callback);
     }
     jMessageOK = function(message, showNearThisObject, blnProcessImage, blnSticky, callback) {
      $.messages.messageOK(message, showNearThisObject, blnProcessImage, blnSticky, callback);
     }
     jMessageError = function(message, showNearThisObject, blnProcessImage, blnSticky, callback) {
      $.messages.messageError(message, showNearThisObject, blnProcessImage, blnSticky, callback);
     }
     
     jMessageHide = function() {
      $.messages.messageHide();
     }
     jMessageHideInterval = function(interval){
      setTimeout('$.messages.messageHide()', interval);
     }
    Again, this is some thing that i am developing for my own specific needs. I am already working on the changes as i get time. For your needs, either you can use this as is or build upon it.
    Last edited by tahirjadoon; Jun 27, 2010 at 21:33. Reason: "your needs"
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  13. #13
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or you can do some thing simple, put a div tag on the page with a message and the animated image. Once you are done loading your stuff, just hide it using jquery or simple javascript.

    jQuery:
    Code:
    $("#divID").hide();
    jScript:
    Code:
     
    document.getElementById('divID').style.display = "none";
    Last edited by tahirjadoon; Jun 27, 2010 at 21:15. Reason: removed # from getElementById
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...


Bookmarks

Posting Permissions

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