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

Page 1 of 3

Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Developing a triple iframe rolling refresh, inc. on change of state (http://www.codingforums.com/showthread.php?t=281274)

Ace.....

11-06-2012 06:49 PM

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?

Logic Ali

11-06-2012 07:45 PM

Quote:

Originally Posted by Ace..... (Post 1289392)

I've spent hours on this........ I must be doing something stupidly wrong. :(

Yes - developing a script without using the error console

Ace.....

11-07-2012 09:34 AM

Quote:

Originally Posted by Logic Ali (Post 1289420)

Yes - developing a script without using the error console

Wow!
I didn't even know it existed.
Thank you for that response. :thumbsup:

Ace.....

11-07-2012 03:53 PM

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. :)

Ace.....

11-07-2012 05:10 PM

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?

xelawho

11-07-2012 05:40 PM

it sounds like you would probably use a callback

Ace.....

11-07-2012 08:47 PM

Quote:

Originally Posted by xelawho (Post 1289770)

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?

xelawho

11-07-2012 08:58 PM

Quote:

Originally Posted by Ace..... (Post 1289828)

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?

Ace.....

11-08-2012 12:49 PM

Quote:

Originally Posted by xelawho (Post 1289833)

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.

Ace.....

11-08-2012 03:54 PM

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

xelawho

11-08-2012 06:39 PM

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>

Ace.....

11-08-2012 07:51 PM

Quote:

Originally Posted by xelawho (Post 1290124)

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. :)

.

xelawho

11-08-2012 08:07 PM

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 :confused:

Ace.....

11-09-2012 02:25 PM

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 (Post 1290147)

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 (Post 1290147)

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 :confused:

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.

xelawho

11-09-2012 03:05 PM

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.

All times are GMT +1. The time now is 05:28 AM.

Page 1 of 3

Show 40 post(s) from this thread on one page