WordPress.org

Ready to get started?Download WordPress

Forums

Advanced iFrame
[resolved] Dynamic Height Reload (68 posts)

  1. ehouben
    Member
    Posted 1 year ago #

    Hi there,

    I'm thinking of installing your plugin, but I have question about functionality. I'm trying to capture buddypress groups inside a wordpress static page using iframes (same domain). The problem with other iframe plugins is the fact that the buddypress activity stream relies on AJAX to expand/retract when one of the following takes place;

    New activity is posted
    Read more/Load more is clicked

    In these cases the height of the iframe cannot adjust dynamically, causing older content to drop below the frame border. I'm aware of certain scripts on stackoverflow that will solve the problem, but i'm looking for a plugin that can handle this. So my question would be: Can Advanced Iframe dynamicaly resize height when the iframed page expands?

    http://wordpress.org/extend/plugins/advanced-iframe/

  2. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    The resize is only done when an onload event does happen. And this is then the inner page gets a new url. When an AJAX call happens this does not happen right now.

    Can you point me to the scripts that do this? I can then add this to the next version of the advanced iframe.

  3. ehouben
    Member
    Posted 1 year ago #

    Thanks for your quick reply. Don't see many plugin authors that resolve all their support issues like you do. As for the scripts, i'm afraid i spoke out of turn. I'm sure i came about some solutions when browsing the web (using onclick? pageloaded? events), but i'm unable to find them again. I don't have enough knowledge to filter the working solutions from the unsolved ones.

    Anyway, I'm sure someone will find a workaround one of these days. For now, you've answered my question so i'll mark this as resolved.

  4. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    Can you modify the page in the iframe? Because then you can simply call the javascript function of the advanced iframe when the ajax call has finished.

  5. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    I'm thinking about something like catching all onclick events. But then there would have to be a timeout as well because Ajax call take some time.
    But the onclick solution would catch stuff like expanding divs...

  6. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    hi, I just did a few test yesterday an it is possible to catch the AJAX events in the iframe. I already have a version where the resize works nice.
    do you want to test it?

  7. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    Do you want to test it?

  8. andrewbootlegger
    Member
    Posted 1 year ago #

    I'd like to test it on a site I'm interfacing with.

  9. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    Cool,

    I have upload it to
    http://www.tinywebgallery.com/dl.php?file=advanced-iframe
    This is then version 3.1 already.

    Look for the setting "Resize on AJAX events". There you have to enter a number. This is the timeout the resize is called. 0 should be fine for most cases because I catch the call after the callback is executed which normally does the replace.
    I added this timeout for e.g. pages which do some scroll down when loaded.

  10. ehouben
    Member
    Posted 1 year ago #

    I will also be testing it. Can hardly believe how quick you came up with a solution. If it works, your plugin will finaly bridge the gap between buddypress and wordpress.

  11. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    Be ware that both page must be on the SAME domain.
    If it does not work please tell me which Javascript framework is used on the page you want to include. Because maybe they overwrite this as well.

    Best,
    Michael

  12. ehouben
    Member
    Posted 1 year ago #

    Right now it's not working. I'm testing on a single domain using the follwoing shortcode:

    [advanced_iframe securitykey="key" src="source" resize_on_ajax="tried 5 to 5000"] with the option 'Resize iframe to content height' turned on.

    jQuery framework

  13. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    o.k. - I'll setup an example page with jquery only and test there. I only took a quick look in the jquery sources and they seem to overwrite my stuff. So I might have to hook into jquery somewhere...

    My test page was using the XMLHttpRequest object directly...

    Btw. it is best to use only [advanced_iframe securitykey="key"] and set the defaults in the administration.

  14. ehouben
    Member
    Posted 1 year ago #

    Ok, I'll wait for your update then. Thanks for your quick support. I'll limit the use of shortcode parameters in the future.

  15. andrewbootlegger
    Member
    Posted 1 year ago #

    Thanks. I tried it out on my end and it didn't work. It maybe worth noting the site I'm using in the Iframe is on another domain, but I am using the XSS workaround.

  16. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    Have you extracted my code that intercepts the AJAX call and added it to the remote site?
    Because this has to be done here.

    But as mentioned before. My current solution does not work with jquery sites because jQuery does overwrite theis calls as well.

    I'll try to find a jquery (jquery on the page you want to include) compatible solution as well.

  17. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    Hi, Just a quick update. I have a working solution for jquery for my testpage already. I now have to make everything nice and configurable because the jQuery solution and the direct solution is very different.

  18. ehouben
    Member
    Posted 1 year ago #

    Cool! Can't wait to test it.

  19. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    So - I have uploaded the new version under the link above.

    You now also have an new option for jquery. So you can switch between direct XMLHttpRequest and jQuery on the included site.
    Now at the onload event the ajaxComplete event handler is set.

  20. ehouben
    Member
    Posted 1 year ago #

    Just tested this and I have to say I'm impressed. The iframe now resizes perfectly on the activity stream 'load more' (which is realy the most important). It does not resize when an activity comment box appears, nor when a single activity item is expanded because 'read more' is clicked. I'm guesing these functions may not use jquery?

  21. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    Can you provide an url? maybe the "read more" is not an AJAX call but only a hidden area is shown there. Then maybe a solution could work which hooks on all clicks as well.

  22. ehouben
    Member
    Posted 1 year ago #

    http://www.humania.nl/emotie/woede/
    iframed page is everything up to the second tab set (i.e. group header and activity stream).

  23. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    There comes a "Sorry" page...

  24. ehouben
    Member
    Posted 1 year ago #

    My fault; membership enabled. Let me just switch that off for you ;)
    Should be fine now.

  25. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    The read more is AJAX as well. The resize is fired but there you have a fade in effect (can be seen nicely in chrome).
    So after the replacement the final height is not reached.

    You can now use the timeout in the configuration to delay the resize for a few milliseconds. Start with 1000 or so ;).

  26. ehouben
    Member
    Posted 1 year ago #

    Thanks, that solves the read more issue. Now the only thing that is not working is the drop down for replies/reactions. I'm guesing these use hidden areas. To see them, you will have to be logged in. I added a login box to the top of the test page, and made a temp account for you.

    UN: temp
    PW: mdempfle

  27. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    There is no AJAX event at this.

    When I try this and open the last "reactions" the load more link is still there. This is strange because the resize is not called as expected.
    Which browser do you use?

    With jQuery all click events can be catched as well. This would be a different solution.

  28. ehouben
    Member
    Posted 1 year ago #

    I'm using Chrome. For me, when i click the last reaction on the activity stream, it pushes the load more button below the border. The reply box itself is also half below the border.

  29. mdempfle
    Member
    Plugin Author

    Posted 1 year ago #

    You are right. In chrome the same happens to me.

    So catching all clicks and then do the resize as well should work...

  30. ehouben
    Member
    Posted 1 year ago #

    I'll wait for an update then. Thanks again for the amazing support you are offering on this subject :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.