17 Replies Latest reply on Apr 23, 2014 7:08 AM by circlemover

    The Strange Case OF Disappearing Elements!

    circlemover

      For some time I have been using EA to build an entire website using lots of Symbols and animated buttons and also using external js libraries Edge Commons and Edgehero.  I have a few elements with links to other external sites that are coded to load in an new Window. 

       

      Wierldy, when the links are clicked, the new windows open displaying the correct content but when I return to my window with my site some elements have disappeared!  Animated buttons - which are used for the main site navigation - disappear! strangely the elements are not visible but when I hover over their location the links for the navigation are still active and the pointer changes to a pointing finger to indicate that an element is present but not visible!  a ghost in the machine?

       

      Anybody got any clue whats happening?  I should point of that I have not published any files in the project yet and I am working completely in mode=preview so maybe this has a bearing on this matter because I'm linking away from my window in preview mode.  I have a few elements that link to document downloads and these links work fine because the files reside in the same local directory as the main index [page].  This is all I can come up with.

       

      ...as we say here in the UK I'm stumped.

        • 1. Re: The Strange Case OF Disappearing Elements!
          resdesign Adobe Community Professional & MVP

          You might want to try on a server as sometimes the problem occurs only in preview. What browsers have you tested on and does this happens in all of them?

          Let us know what happens.

          1 person found this helpful
          • 2. Re: The Strange Case OF Disappearing Elements!
            circlemover Level 1

            hi Resdesign nice to hear from you again.  So far, I have tested the site in Chrome only.  I'll give the other usual supects a go and report back.  At least, I'm not the first to experience this problem...I must try to publish the site on a server to see if the problem persists...I'll report back for sure.  Thanks again.

            • 3. Re: The Strange Case OF Disappearing Elements!
              resdesign Adobe Community Professional & MVP

              Let us know what happens.

              • 4. Re: The Strange Case OF Disappearing Elements!
                circlemover Level 1

                Ok resdesign its looking very much like a Chrome thing.  Thanks for the sugguestion to check out other browers.  Here's the report:

                 

                Safari: The site does not load very well, render or function as it should.  Clearly doesn't like the EA coding at all! however when the button is clicked on and the url is loaded into a new window, when I return to my site browser window - no disappearing elements.

                 

                Opera: Never used this browser but very impressed.  The site loads and renders very well and like Safar all the elements remain and a new windows open to display the url.  Again no disappearing elements.

                 

                IE:  Amazingly, the browser really worked well and the site rendered perfectly.  Again no disappearing elements when returning back to my browser window.

                 

                One thing I did notice was in every case Safari, Opera and IE all opened a new window when the links where clicked whereas in Chrome a tab opens to load the url and not a new window could this be the problem?

                • 5. Re: The Strange Case OF Disappearing Elements!
                  resdesign Adobe Community Professional & MVP

                  Possibly but I think the option is set by the user. I am not sure you can override that and I am not sure it is related. I will try to find some info about that.

                  Always good testing on several browsers unless you intend your work to be for a particular audience for which you can limit the users to one specific browser.

                  1 person found this helpful
                  • 6. Re: The Strange Case OF Disappearing Elements!
                    Fred Tacon Level 1

                    I am having a very similar issue with a strange twist.  I will try my best to describe this clearly.  I am interested, circlemover, if you ever found a solution for Chrome because it is my problem child as well...

                     

                    I have an Edge composition that is set up like a user interface with a title bar and a set of navigation buttons at the top, and changable content under that.  However, the container div that holds the content fills the entire screen (passing behind the title and nav buttons - important later).

                     

                    I am using sym.createChildSymbol() to add symbols dynamically to the content container (each Module below).  On one particular screen, when I add the symbols, the title bar and navigation buttons disappear.  Similar to circlemover, I can still hover over and click on the buttons, but I cannot see them.

                     

                    Here's the twist.  The content container is scrollable, and when I scroll down so that the content passes behind the title and nav buttons, they suddenly appear.  If I scroll back up, the elements disappear.  Another weird thing is that I have another screen that is set up very similarly with dynamic symbols, and it works fine in all browsers.

                     

                    This is happening in Chrome and Safari, but it works fine in IE and FireFox.  I have not tried Opera.  So, seems like a webkit thing.

                     

                    Unfortunately I cannot share the files, but I am hoping you may have some thoughts.  I have attached a couple screenshots.

                     

                    screen_shot1.jpg

                     

                    screen_shot2.jpg

                     

                    Any help you can provide will be greatly appreciated.  Thanks!

                     

                    Fred

                    • 7. Re: The Strange Case OF Disappearing Elements!
                      Fred Tacon Level 1

                      Update: I found the solution to my issue. If I add this to element that was disappearing...

                       

                      sym.$("element").css("-webkit-backface-visibility","hidden");

                       

                      ...then they are visible all the time.

                       

                      Maybe this can help you, too, if you haven't already solved it.  Thanks!

                       

                      Fred

                      • 8. Re: The Strange Case OF Disappearing Elements!
                        circlemover Level 1

                        Hi Fred

                         

                        Great to hear that you found a solution to your problem and sorry for my late reply!  I never did find a solution to the weirdness with Chrome and I am still working on the site using Opera to preview the work...which is not affect by the disappearing issue for some reason!

                         

                        I will certainly try out your code snippet...but would you indulge me a little here...

                         

                        The disappearing symbols affect in my composition comprise only two elements: a div with a nested graphic image.

                         

                        The div is rounded to make a circle and has both onclick/mouseover event actions.  The mouseover action plays the symbols timeline animation.  The click event loads an EA file into a container using Edge Commons.

                         

                        My question for you is where to place the code snippet?

                         

                        sym.$("element").css("-webkit-backface-visibility","hidden");

                         

                         

                        Do I add the code to the effected symbol's event creationComplete for instance? or to the Stage event creationComplete or compositionReady?

                         

                        or should it be added to the div element with the event onclick/mouseover actions.  I hope this is clear.

                         

                        Any help here much appreciated! Thanks!

                        • 9. Re: The Strange Case OF Disappearing Elements!
                          Fred Tacon Level 1

                          Hi!  I added mine in creationComplete for the Stage so it sets that

                          parameter as soon as it loads.  My divs that were disappearing were not in

                          a symbol, though, so it may be a little different.  Might just have to add

                          a reference to the symbol and then the div.  I am sure you already know

                          that.  One of mine was a div that had several embedded divs and images, but

                          I only had to apply the parameter to the parent div and it fixed them all,

                          so you may just need to do it for the one rounded rectangle and not the

                          image.

                           

                          Hope that helps.  Let me know if you have any other questions or something

                          you want me to look at.  Thanks!

                           

                          Fred

                          • 10. Re: The Strange Case OF Disappearing Elements!
                            circlemover Level 1

                            Thanks Fred for your super prompt reply - I get you  I'll let you know how I get on when I manage to get back to the project and thanks for the kind offer of future help

                             

                            really appreciate your support on this I was completely flummoxed as we say around these parts!

                             

                            Bye for now

                            • 11. Re: The Strange Case OF Disappearing Elements!
                              PEPPERFACE Level 1

                              HUGE thanks, Fred... you've saved me from throwing my computer out of the window!!!

                               

                              I have no idea why it works but it does 

                              • 12. Re: The Strange Case OF Disappearing Elements!
                                Fred Tacon Level 1

                                Hey, PEPPERFACE!  Glad this worked for you.  Yeah, I am not exactly sure why it works either, but I just rolled with it. 

                                • 13. Re: The Strange Case OF Disappearing Elements!
                                  MaximalDesign

                                  Hi. How did you manage to get it work?
                                  I have Symbols wrapped into a div and put the following code to the STAGE (creationComplete):

                                   

                                  sym.$("Symbol_9").css("-webkit-backface-visibility","hidden");

                                  sym.$("PFEILE").css("-webkit-backface-visibility","hidden");

                                  sym.$("#Stage_PFEILE").css("-webkit-backface-visibility","hidden");

                                   

                                   

                                  Symbol_9 is a Symbol inside the "PFEILE" div. In the HTML Code the Div has the ID "Stage_PFEILE".

                                  But it does not work. The symbols are still not visible.

                                   

                                  Any idea?

                                  Thanks

                                  • 14. Re: The Strange Case OF Disappearing Elements!
                                    circlemover Level 1

                                    Hi Maxi - feel your pain!

                                     

                                    Try in Stage creationComplete:

                                     

                                     

                                    sym.getSymbol("Stage_PFEILE").getSymbol("Symbol_9").css("-webkit-backface-visibility","hidden");
                                    

                                     

                                    Alternatively, you might try in Symbol_9 creationComplete:

                                     

                                    sym.getComposition().getStage().getSymbol("Stage_PFEILE").getSymbol("Symbol_9").css("-webkit-backface-visibility","hidden");
                                    

                                     

                                    If this alternative works, then you will need to repeat it for every disappearing symbol in their respective creationComplete.  Fred's solution for this weirdness works for elements on the Stage in creationComplete.  And it might be that the disappearing element may need to be referenced and not just the symbol containing the element and so the pain continues...

                                     

                                    Try in Stage creationComplete:

                                     

                                    sym.getSymbol("Stage_PFEILE").getSymbol("Symbol_9").$("yourdissapearingelement ").css("-webkit-backface-visibility","hidden");
                                    

                                     

                                    or alternatievely in Symbol_9's creationComplete:

                                     

                                     

                                    sym.getComposition().getStage().getSymbol("Stage_PFEILE").getSymbol("Symbol_9").$("yourdissapearingelement ").css("-webkit-backface-visibility","hidden");
                                    

                                     

                                    You may have guessed from all this that I have yet to address the issue and so its on the back burner for the moment...thanks again to Fred and let me know if any of this helps or if you find a better way...

                                     

                                    regards

                                    • 15. Re: The Strange Case OF Disappearing Elements!
                                      MaximalDesign Level 1

                                      i tried everything you said, but it is still not working. The css is added, but the symbols do not appear. See code here:

                                       

                                      Bildschirmfoto 2014-04-23 um 12.19.53.png

                                       

                                      http://cl.ly/image/3f2z3O1F2V0W


                                      For this i added this to the stage Complete:

                                      sym.$("#Stage_Symbol_9").css("-webkit-backface-visibility","hidden");

                                      sym.$("#Stage_Symbol_9_Rectangle5").css("-webkit-backface-visibility","hidden");

                                      • 16. Re: The Strange Case OF Disappearing Elements!
                                        Fred Tacon Level 1

                                        Are you able to share your source file?  I'd be glad to take a look.  It's hard to say what the issue may be without seeing how everything is configured.  Thanks!

                                        • 17. Re: The Strange Case OF Disappearing Elements!
                                          circlemover Level 1

                                          OK Maxi - feeling the frustration

                                          I have Symbols wrapped into a div...

                                          Going back to your orginal post did you use the group option in EA to group the symbols on the stage into a div container? because it would seem to me that its a question of correctly refering the effected symbols in Edge in accordance with Edge API in Stage creationComplete.

                                           

                                          Please accept this further sugguestion;

                                           

                                          Convert to a symbol the container group div in edge and name it, say, wrapper.

                                           

                                          You will now have all your symbols nested within the symbol "wrapper".  The new symbol will appear in the left column below the stage timeline with the name wrapper (names are div id's in edge as you know) and if you double click on it then its timeline will appear and all the nested symbols listed accordingly.  Double click on any nested symbol to access its timeline and elements.

                                           

                                          In Stage creationComplete try refering first to the wrapper symbol then the nested symbol:

                                           

                                          sym.getSymbol("wrapper").getSymbol("Symbol_9").css("-webkit-backface-visibility","hidden") ;

                                           

                                          It maybe necessary to reference further the actual effected element:


                                          sym.getSymbol("wrapper").getSymbol("Symbol_9").$("yourelementname").css("-webkit-backface- visibility","hidden");

                                           

                                          Hope this is of help

                                           

                                          regards