5 Replies Latest reply on Nov 20, 2013 2:45 PM by elainecc

    Refer to an object in Edge from an onclick="" in a .html file loaded into an iFrame in the animation

    TomsTwin Level 1

      HI, I am trying to figure out the Edge hierachies by stumbling my way through coding reference attempts. I've hit a wall...

       

      How can I refer to an object and a global function in my Edge animation from an onclick=""  located in an .html file loaded into an iFrame created within the master/parent Edge animation. Here's what I have...

       

      My main index.html is an Edge animation. One object <div> is a box created within Edge. I have added an iFrame with the Edge code:

       

      sym.$("MenuPanelScreen").html('<iframe src="list_images_cemetery.html" width="267" height="670" sandbox="allow-same-origin allow-scripts allow-top-navigation"></iframe>');

       

      That .html file which loads into the iframe within the animation contains thumbnails in <a> tags and contain onclick="" statements that should call a function within the Edge file.

       

      Eventually, I want the statements to read something like... onclick="changePic('Dragon.jpg', 'The Dragon', 'Saint and Worm')"

       

      However, I had no idea how to reference the changePic() function in the Edge animation. So, just to figure out how to reference the parent animation from an html in an iFrame, I change the onclick="" statements to...

       

      <a onclick="alert('Try to hide Nameplate'); sym.$('NamePlate_sym').hide();" >  <img src="gallery/TheyGaveUpTheirDead.jpg" width="80" alt="Angel and Worm" /></a>

       

      I first wanted to see if I could hide an Edge Symbol or div/element from the child html. I tried the following...

       

      onclick="alert('Try to hide Nameplate'); sym.$('NamePlate_sym', window.parent.document).hide();"

       

      I tried a few other variations that I won't bore you with. Can someone help me with the proper reference to effect an Edge element?

       

      Furthermore, I eventually wnat the onclick="" statement to reference a global function on attached to the Edge stage in the compositionReady event of the stage. The function is...

       

      window.changePic=function(myFileCurr, myLabelCurr, myDescriptionCurr) {

      alert("in changePick");

        document.getElementById("myImage").src="gallery/"+myFileCurr;

        document.getElementById("myImageLabel").innerHTML=myLabelCurr;

        document.getElementById("myImageDescr").innerHTML=myDescriptionCurr;

      }

       

      I hope someone can point me in the right direction. Please forgive my ignorance. i am just getting back into coding and learning the intricacies of Jscript and jQuery. Thanks!