Alpha Software Mobile Development Tools:   Alpha Anywhere    |   Alpha TransForm subscribe to our YouTube Channel  Follow Us on LinkedIn  Follow Us on Twitter  Follow Us on Facebook
Devcon 2020 Goes Virtual! LEARN MORE >

Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

pop-up 'Loading' animation

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    pop-up 'Loading' animation

    I'm using Alpha's navigation menu component to navigate between different A5W pages. When the user clicks on one of the menu buttons I'd like a pop-up "loading" animation to appear and then disappear once the page is loaded.

    Can I do this in javascript? ...if so, how? The navigation component has an 'onclick' event but I'm a javascript novice.

    Thanks in advance.
    Mike Brown - Contact Me
    Programmatic Technologies, LLC
    Programmatic-Technologies.com
    Independent Developer & Consultant​​
    Tags: None
    #2
    Re: pop-up 'Loading' animation

    Are you using the Web Component named Navigation System?

    In the docs... search for A5.msgBox.show and for A5.msgBox.hide

    If this is the component you're using... and depending on how you're using it... it seems you only need the A5.msgBox.show... since the new page gets loaded over the navigation system... and so the msg go away.

    If it didn't go away... you'd use A5.msgBox.hide in the onInitialize or onRender events of your loading component to shut down the msg.
    Last edited by Davidk; 02-18-2014, 11:03 AM.

    Comment

      #3
      Re: pop-up 'Loading' animation

      Yes, I'm using 'Navigation System'....and your suggestion worked great! Thank you!

      Followup question...

      This is the code I used for the OnClick Javascript: A5.msgBox.show('Please wait...','<div style=\'padding: 20px;\'>Loading page</div>','none',function() {});

      Instead of the "Please Wait" & "Loading Page" I want my wait image to show (it's an animated GIF) and for the popup box to be transparent. Not sure how to write that out in javascript though.
      Mike Brown - Contact Me
      Programmatic Technologies, LLC
      Programmatic-Technologies.com
      Independent Developer & Consultant​​

      Comment

        #4
        Re: pop-up 'Loading' animation

        You bet... since the A5.msgBox.show parameters for the Message Text AND and HTML follow standard HTML (ya just gotta love those Alpha guys... they just make this stuff fun) you can use an <img> tag. That's cool.

        Put your animated GIF into the A5Webroot... or your published folder, etc and feed that image into the <img> tag.

        In this example I've got my image in an images folder under A5Webroot...

        Code:
        A5.msgBox.show('<img src="images/largeredwait.GIF">','','none',function() {});
        And the image html can go into the Message Title parameter or the HTML parameter... so you could have a "Loading..." message plus the GIF if you wanted.

        Code:
        A5.msgBox.show('Loading...','<img src="images/largeredwait.GIF">','none',function() {});
        Here it is running...

        http://www.youtube.com/watch?v=3lj_j-TIQ0U

        Comment

          #5
          Re: pop-up 'Loading' animation

          Works great but only in Internet Explorer ....my GIF doesn't render in Chrome. Tried two different images. Strange.
          Mike Brown - Contact Me
          Programmatic Technologies, LLC
          Programmatic-Technologies.com
          Independent Developer & Consultant​​

          Comment

            #6
            Re: pop-up 'Loading' animation

            Under Chrome I'm finding the same thing... but it was working... but only after a load and then a refresh... 'cause the gif was loaded. It's a timing thing.

            As a test... change your Navigation Target from blank to a value... just put in the word test... so that you're page will open in a new tab.

            Once your new tab is open, click on your Navigator tab... and the gif will be there.

            Under Firefox... you can see the broken image icon... and then it changes to the gif. So it's working a bit faster or slower, depending on your perspective

            So... the solution is to pre-load the gif. The Navigation System Component runs off an A5W page... right? Load the GIF in there... hidden... so that it's all ready to go. To give you an idea of where this should go I've copied the top of the a5w page.

            Code:
            <!DOCTYPE html>

<html>
<head>
<!-- must use in order to make XP Themes render -->
<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<img src="ezgifsave.gif" style="display:none;">

            What I also found was... loading the GIF like this... the system is looking for the gif in the published folder. In my case I'm publishing to a folder named Test. So... with the img tag set as it is above... the system is looking for my gif in a5webroot/test/ezgifsave.gif

            So... it's a little different (I think) than in the Navigation System property where you set the message.

            Just for the heck of it, here is a snip of the Chrome Network traffic when the message is loading. The GIF load is being cancelled because the next page is pending (I think).
            Attached Files
            Last edited by Davidk; 02-18-2014, 03:29 PM.

            Comment

              #7
              Re: pop-up 'Loading' animation

              Interesting....

              I set the target to 'Test' and sure enough the GIF loaded correctly on the first page. I put in the "preload" you suggested but unfortunately that didn't solve the problem. I see my GIF in the WYSIWYG page in the A5W editor so I know it's there. Maybe, as your network traffic shows, it's being canceled before it gets the chance to fully render (even with a preload)?
              Mike Brown - Contact Me
              Programmatic Technologies, LLC
              Programmatic-Technologies.com
              Independent Developer & Consultant​​

              Comment

                #8
                Re: pop-up 'Loading' animation

                It's the Navigation System A5W page you're adding the gif to... right? Not the a5w page you're calling from the menu. There is no cancelling of this gif because it belongs to the page that is loading... the navigation system page itself.

                Comment

                  #9
                  Re: pop-up 'Loading' animation

                  Originally posted by Davidk View Post
                  It's the Navigation System A5W page you're adding the gif to... right? Not the a5w page you're calling from the menu. There is no cancelling of this gif because it belongs to the page that is loading... the navigation system page itself.
                  Yes. It's an A5W page with the navigation component at the top along with some xbasic code to display a session variable.
                  Mike Brown - Contact Me
                  Programmatic Technologies, LLC
                  Programmatic-Technologies.com
                  Independent Developer & Consultant​​

                  Comment

                    #10
                    Re: pop-up 'Loading' animation

                    I do believe the image load is being cancelled because the next page is loading. Here's a pretty good explanation.

                    http://stackoverflow.com/questions/1...eveloper-tools

                    However... the pre-load does work, I think. Here's another video. I was wrong about the path for the img tag. Both the A5W page and the Navigation System message must point to the same image, to the same default path.

                    Again... I'm publishing to a folder named Test... so all my stuff is published to A5Webroot/Test

                    When you use <img src="largeredwait.GIF"> then, by default, for me, the gif will be loaded from A5Webroot/Test

                    So, make sure your gif is in your published folder... and don't include any folders in the img tag.

                    http://www.youtube.com/watch?v=WWQt-NtvYmQ

                    Comment

                      #11
                      Re: pop-up 'Loading' animation

                      I publish straight to the A5webroot on my machine. The image is there and the preload script entered. Just doesn't want to work in Chrome. Works great in IE however. I think it's a browser issue.

                      Thanks for the help.
                      Mike Brown - Contact Me
                      Programmatic Technologies, LLC
                      Programmatic-Technologies.com
                      Independent Developer & Consultant​​

                      Comment

                        #12
                        Re: pop-up 'Loading' animation

                        I'm running it in Chrome, Firefox, and IE... all good.

                        Open the Navigator in Chrome, then right-click, Inspect Element. Click the Network tab. And now refresh. You'll see the "preloaded" GIF has been loaded. Now click your Menu button to run your a5w page. It's going to be fast, but do you see another GIF being loaded... probably be in red since it gets cancelled.

                        The best way to do this is to start a screen recorder, and then go through this process so you can capture it and play it back and stop the playback when stuff starts to happen.
                        Last edited by Davidk; 02-19-2014, 11:38 AM.

                        Comment

                          #13
                          Re: pop-up 'Loading' animation

                          I don't have any more time to work on this particular issue....I have to move on. The text message will have to do. Thank you for your help.
                          Mike Brown - Contact Me
                          Programmatic Technologies, LLC
                          Programmatic-Technologies.com
                          Independent Developer & Consultant​​

                          Comment

                          Previous template Next
                          Working...
                          X