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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 43
  1. #1
    New Coder
    Join Date
    Nov 2012
    Location
    France
    Posts
    78
    Thanks
    20
    Thanked 0 Times in 0 Posts

    Developing a triple iframe rolling refresh, inc. on change of state

    3 iframes in a container page.
    It should be simple to refresh iframe2 from iframe1 etc.

    I've spent hours on this........ I must be doing something stupidly wrong.
    None of my reload scripts will fire.

    Here is the containing page:

    Code:
    <body><div id="container1">
    <iframe name="iframe1" id="iframe1" src="iframe-1.html" width="32%" height="100%"></iframe>
    <iframe name="iframe2" id="iframe2" src="iframe-2.html" width="32%" height="100%"></iframe>
    <iframe name="iframe3" id="iframe3" src="iframe-3.html" width="32%" height="100%"></iframe>
    </div></body>
    Everything seems okay with it.
    The css provides me with full size iframes:

    Code:
    #container1 {
      overflow: visible;
      text-align: left;
      top: 0px;
      width: 100%;
      position: absolute;
      height: 100%;
      font-weight: normal;
      font-family: Arial,Helvetica,sans-serif;
      font-size: 100%;
    }
    Here is iFrame1 script with the different attempts to reload iframe2:

    Code:
    function reload_page_2()
    {
    parent.getElementById("iframe2").contentWindow.location.reload(true)();
    
    //if (parent.frames.iframe2) {parent.frames.iframe2.location.reload();}
    
    //var f = parent.getElementById('iframe2');
    //f.contentWindow.location.reload(true);
    }
    
    function store_pg_1()
      {var pg_1 = document.getElementById("styled").value;
      localStorage.pg_1_text=pg_1;
      reload_page_2();}
    store_page_1 works perfectly (onClick the textarea value is stored), but iframe2 does not reload via the script.

    Can anybody see what I'm doing wrong?

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Ace..... View Post
    I've spent hours on this........ I must be doing something stupidly wrong.
    Yes - developing a script without using the error console

  • Users who have thanked Logic Ali for this post:

    Ace..... (11-07-2012)

  • #3
    New Coder
    Join Date
    Nov 2012
    Location
    France
    Posts
    78
    Thanks
    20
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    Yes - developing a script without using the error console
    Wow!
    I didn't even know it existed.
    Thank you for that response.

  • #4
    New Coder
    Join Date
    Nov 2012
    Location
    France
    Posts
    78
    Thanks
    20
    Thanked 0 Times in 0 Posts
    I fixed the loading problem (I was missing .window):

    Below are the scripts that should enable:
    • text to be entered in iframe1
    • onclick localStored
    • auto-reload iframe2
    • retreive and display text
    • auto-translation occurs
    • delayed storage of translated text (to allow time for translation)
    • auto-reload iframe3
    • retrieve and display translated text.


    BTW it doesn't fully work, as I believe the delay is not truly a delay to the script:

    Code:
    function store_pg_1()
    {var pg_1 = document.getElementById("styled").value;
     localStorage.pg_1_text=pg_1;
     reload_page_2();}
    
    function reload_page_2()
    {parent.window.frames['iframe2'].location.reload();
     setTimeout(function() {store_pg_2();},5000);}
    
    function store_pg_2()
    {var text = document.body.innerText;
     localStorage.pg_2_text=text;
     reload_page_3();}
    
    function reload_page_3()
    {parent.window.frames['iframe3'].location.reload(); }
    I now need a way to pause the script.
    At the moment the storage of pg_2_text is prior to translation.
    (I can confirm this with an onClick to reload iframe3, which then retreives the translation).

    Progress though.

  • #5
    New Coder
    Join Date
    Nov 2012
    Location
    France
    Posts
    78
    Thanks
    20
    Thanked 0 Times in 0 Posts
    To get around the the need to pause the script until the translation is complete I tried the code below, but it was a fail:

    Code:
    function reload_page_2()
    {parent.window.frames['iframe2'].location.reload();
    if(document.loaded) {store_pg_2();} else {
        if (window.addEventListener) {window.addEventListener('load', store_pg_2(), false);} else {window.attachEvent('onload', store_pg_2());}}
    }
    I think the document is already loaded.
    Maybe it starts to re-load, but maybe not.
    Google is just writing in the translation maybe.

    Does anybody have any ideas on how to pause the script until the translation is complete?

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    it sounds like you would probably use a callback

  • #7
    New Coder
    Join Date
    Nov 2012
    Location
    France
    Posts
    78
    Thanks
    20
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    it sounds like you would probably use a callback
    I've had a look around re: callback.
    It seems that you need to understand (first) what is actually happening.

    In reality, I don't know what event is occurring & ending.

    Obviously I know that my text has been sent to google, and that it is returning (modified).

    Clearly a change of state is: triggered - not finished - finished.

    But worse than that.... the page first loads fully ie. one state complete; and then there is a pause while the text is sent to google (ie. the first state is still stable). Then the returned translated text is written in.

    If we know what the final state is, then we might compare it to the the 1st state - which is page loaded and original text written in (if any, cos iframe2 is originally empty, but it will gradually acquire text, as it is typed into iframe1).

    What we can be certain of, is that the 2nd completed state, is going to be different to the 1st completed state.

    Perhaps it's possible to monitor the sending to google of the original text.
    Ie. English arrives in iframe2. It is then sent, or called, to google.
    This 'data transmission' might then allow the 1st state to be logged.

    The 2nd state (different) could be compared to the 1st, but can we determine, when the return text has fully arrived?

    I think once we understand how javascript can recognise these events, then the appropriate function can be fired.

    Does anybody understand these events?

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Quote Originally Posted by Ace..... View Post
    but can we determine, when the return text has fully arrived?
    that would be where your callback would come into it. How are you sending the text to be translated? Maybe you can post some more code, or a link?

  • #9
    New Coder
    Join Date
    Nov 2012
    Location
    France
    Posts
    78
    Thanks
    20
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    that would be where your callback would come into it. How are you sending the text to be translated? Maybe you can post some more code, or a link?
    1. Launch command (iframe container page):
    Code:
    #googtrans(en|fr)

    This anchor doesn't exist on iframe_2.html, however this is the 1st command to tell the browser to send the whole dom to google, once the page has fully loaded (this I assume from logic).

    It tells google to expect it in English, and to Return it in French.
    Code:
    <iframe name="iframe2" src="iframe_2.html#googtrans(en|fr)">
    2. The Header code (on page requiring translation - iframe2)

    Code:
    <meta name="google-translate-customization" content="f3ec1860041f93e1-f800c17a206199a4-g305246f186c2820d-15">
    The above is part one of two sections of code.
    The numbers I presume identify my site, and translation preferences, gleaned from my responses to their form.

    3. The Body code (on page requiring translation - iframe2)

    Code:
    <div id="google_translate_element"></div>
    <script type="text/javascript">
    function googleTranslateElementInit() 
    {
      new google.translate.TranslateElement({pageLanguage: 'fr', includedLanguages: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
    }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    What do we know about the above:

    pageLanguage: 'fr',

    The language of your web site, presumably speeds up the process, so it can offer a visitor french to chinese translation on the fly.

    includedLanguages: 'en',

    These are the languages that appear in a drop box, so you can choose your language.

    layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false

    This is the style of the drop box.

    The Links:

    http://translate.google.com/

    Then click the link

    http://www.google.com/url?source=tra...ite/%3Fhl%3Den


    I'm gonna look for the chrome console log, as it is jam packed with info on what is going on.

  • #10
    New Coder
    Join Date
    Nov 2012
    Location
    France
    Posts
    78
    Thanks
    20
    Thanked 0 Times in 0 Posts
    I have run chrome with logging enabled.

    To keep the log pure to the task, I set the launch page to

    http://www.max-haut-debit.fr/transla...ator_page.html

    I had already blanked the local storage cache for iframe2 & iframe3 by passing the empty textarea thru localstorage to iframe2 which passed it on to iframe3

    As a result, this is what the log shows (I deleted the old logs):

    Step 1
    Therefore as chrome loaded: iframe2 & 3 loaded, and their scripts fired with almost no data.

    Step 2
    I pasted some english text using ctr+v into textarea.
    onClicked the text.
    The text was localstored
    iframe2 reloaded, retrieving the text, and displaying it in english.
    The text was then sent to google.
    It was returned in French, and displayed.

    Step 3
    Step 3 already started probably milliseconds after onclicking the text.
    iframe3 had reloaded retrieving the blank local storage.

    This is the problem area, pausing the rolling reload, until translate has done its biz

    Step 4
    I onclicked iframe2, causing the translated text to go to localstorage.
    iframe3 reloaded, retrieving the French text.
    The text was sent to google.
    It was returned in English, and displayed.

    Step 5
    I quit chrome, and copied the log to temp.
    I copied the log to pastebin.

    This log should only contain the tasks described above:

    http://pastebin.com/016QNsSz
    Last edited by Ace.....; 11-08-2012 at 03:57 PM.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I am wondering about the need for local storage here, which has growing support but not below IE8. Also your interface is a little unintuitive - you can pass the value of the textarea to the iframe onkeyup and do it that way. Here's one way, anyway. Main page:

    Code:
    <html>
    <head>
    </head>
    <body>
    <textarea name="styled" id="styled" onkeyup="translateIt(this.value)"></textarea>
    <iframe name="theframe" width="500" src="translated.html"> </iframe>
    <script type="text/javascript">
    function translateIt(text) {
    parent.frames['theframe'].googleTranslateElementInit(text);
    }
    </script>
    </body>
    </html>
    iframe page:
    Code:
    <html>
    <head>
    <meta name="google-translate-customization" content="f3ec1860041f93e1-f800c17a206199a4-g305246f186c2820d-15"></meta>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js"></script>
    </head>
    <body>
    <div id="google_translate_element"></div>
    <div id="thetext"></div>
    <script type="text/javascript">
    function googleTranslateElementInit(txt) {
    document.getElementById("thetext").innerHTML=txt;
      new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages:'fr',layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
    }
    </script>
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    Ace..... (11-08-2012)

  • #12
    New Coder
    Join Date
    Nov 2012
    Location
    France
    Posts
    78
    Thanks
    20
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    I am wondering about the need for local storage here, which has growing support but not below IE8. Also your interface is a little unintuitive - you can pass the value of the textarea to the iframe onkeyup and do it that way.
    Yes, you are absolutely right.
    I used onclick purely so that I could control events.

    The system is primarily set up as a test bed for the scripting.

    My idea was ultimately to use the 'Enter' key, to act on the finalisation of a paragraph: Type a paragraph - have a look (how did it turn out) continue, or have another go.

    Onkeyup may be more akin to the google translate page, where characters are sent individually, building a paragraph that is ultimately translated.

    But either way, the thinking was that, the final processes would inform the final design.

    Re your suggested code..... it looks like you have discerned the key commands.

    I was working with what was auto-available (from ignorance of the detail).

    This enlightenment, means I need to spend a bit more time understanding what is happening - but at least I know now, where to look.

    The log file has proved definitely to be good educational material, even for the uninitiated (who are prepared to go thru each line a couple of times).

    Thanks very much for your interest in this project.

    .

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    yes. there is a problem though - there doesn't seem to be a way to auto select the language - and therefore have an automatic translation - on first page load (if you have done this already you would have to clear your cache to see what I am talking about). You would think that the autoDisplay parameter might do something, but from what I can tell setting it to true, false or even removing it completely seems to have no effect at all

  • #14
    New Coder
    Join Date
    Nov 2012
    Location
    France
    Posts
    78
    Thanks
    20
    Thanked 0 Times in 0 Posts
    The good news is that the system now only requires the removal of one "onClick" event handler.
    more on that later.

    Quote Originally Posted by xelawho View Post
    there doesn't seem to be a way to auto select the language - and therefore have an automatic translation - on first page load (if you have done this already you would have to clear your cache to see what I am talking about).
    On the above, I noted that your code did not use the anchor link
    Code:
    <iframe name="theframe" width="500" src="translated.html#googtrans(en|fr)"> </iframe>
    It's purpose is to auto-select the 'from & 'to' languages.
    With this added & using google chrome, I have seen no problems.
    I cleared the cache, but the scripts & display functioned as expected.
    For no other reason that this, I believe the anchor link must solve this problem.

    Quote Originally Posted by xelawho View Post
    You would think that the autoDisplay parameter might do something, but from what I can tell setting it to true, false or even removing it completely seems to have no effect at all
    This looks as though it is driven by whether: the text SHOULD be translated, or whether it HAS been translated.

    Once translated, it must be displayed. Based upon an understandable philosophy that is effectively: "Be aware, this data has been modified".
    Therefore the question is only whether it is always displayed, when say a French browser, visits English pages.

    As we are translating, it will always display.

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    ah, I get it now. thanks for explaining.

    can I ask what the purpose of the other iframe is? it seems to want to translate to English? But if the input language is English what is the idea? and why not fire the function on the onkeyup of the textarea the way you do with the first iframe?

    also, this is going to cause you problems:
    Code:
    <body onhaschange="translateIt(document.body.innerText)">
    there is, sadly, I believe, no body onhaschange event, and the equivalent is hard to implement in a cross-browser fashion.

    innerText will get you into trouble, too. innerText is IE only. textContent is more widely accepted, but IE only started recognising it at IE9+

    if you are only looking to translate the text from the textarea, it is much easier just to be getting the value of that textarea, the same as you are doing now.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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