Get Enyo app in iFrame to Trigger Height Resize in Parent Page

See this page which is running an Enyo app inside an iFrame wrapped in the main sitewide two column template

http://www.himalayanacademy.com/view/

I have a thread going over at EE you can look at for more details:

http://www.experts-exchange.com/Software/Internet_Email/Web_Browsers/Q_28009655.html

But I'm not getting anywhere and Stack Overflow discussions on this are not getting us solutions either.

Problem is simple: the Enyo app does ad AJAX call to our data base for a list of words and definitions. It can be a lot of data = very long height required to see all.

We need the parent page to dynamically expand/collapse vertically when the Enyo App in the iFrame height changes. In this case I have set the parent page div class="app" to 20000 px high which is a bad hack. It works until the user scrolls down to click on a "see also" word, triggers the Enyo app AJAX to search the database and e.g only returns 2 records. The parent window is "stuck" in the scroll position, apparently goes "blank" to the user's perspective unless he scroll back up and the results of the last AJAX call to the database are there, at the top of the iFrame/parent div.

I have removed the 20000px on our staging server and you can see this working (or rather, not working) here at

http://dev.himalayanacademy.com/view/lexicon

As you can see there, the initial app UI only takes up about 300 pixels vertically and then the parent page height never changes when we click on a letter (click "e" because that has few entries) I've been testing various ideas there with no results.

At EE we got this snippet that might help:
$(window).resize(function(){
$("#id_of_content_div").height($(window).height()-$(".app").height());
});
but I'm not getting anywhere with implementation. I tried adding
$(window).resize(function(){
$(".article-wrapper").height($(window).height()-$(".app").height());
});
where article-wrapper is the div in the parent wrapper that holds the iFrame... but it does work.

Over at SO, there's a thread on this subject, but it's only dynamic on page load, nowt in response to a "run-time" ajax call.

http://stackoverflow.com/questions/7024574/get-and-set-iframe-content-height-auto-resize-dynamically-easy-solution-expandin

We are using RevIgniter for page assembly (think MVC clone of CodeIgniter using LiveCode instead of PHP) and I think the best long term solution will be to use the Enyo's renderInto method to drive the app directly into our page without using an iFrame.

But we do use a lot if iFrames and today I am looking for the way to get the containing div of the parent page to respond dynamically to runtime changes of the height of the enyo app.

Any ideas?




Comments

  • edited January 2013
    I may have a solution which will require me to add a JS command that is defined in the parent window holding the iFrame that contains the Enyo app.

    I have this function in my app which processes results returned from the database, and renders the data onto the page
    
      processSearchResults: function(inRequest, inResponse) {
    	    if (!inResponse) return;
    	    this.$.wordList.destroyClientControls();
    		if (!inResponse.error) {
    		    enyo.forEach(inResponse.entries, this.addDefinition, this);
    		} else {
    			this.$.wordList.setContent(inResponse.error);
    		}
    	    this.$.wordList.render();
    	  }
    
    Now what I need to do is have the enyo app fire off this command:
    parent.alertsize(document.body.scrollHeight)
    immediately after the rendering.. I tried just sticking in but I'm not getting any alert message sent up
     this.$.wordList.render();
    parent.alertsize(document.body.scrollHeight)
    the parent page snippet is very simple, I want to try to trigger a height change:
    
        function alertsize(pixels){
        document.getElementById('webapp').style.height=(pixels+50);
    }
    	
    
    	#webapp {
    		width: 100%;
    		height: auto;
    	}
    
    
    
    
  • Edited previous comments -- when posting code, use BOTH the pre & code tags around it. Using the "C" button in the editor will do that for you if you select the text first.
Sign In or Register to comment.