New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Widgets improvement: iframes auto height #3042
Comments
This would be awesome if it worked and was included. Perhaps going with the window.postMessage and falling back to hash tag communication could be an improvement. Check out http://archive.plugins.jquery.com/project/postmessage - it purports support for "postmessage is tested on Safari 4, WebKit (Nightlies), Chrome 4, Firefox 3, IE8, IE7 and Opera 10.10." It could solve your Chrome issues. |
Hello, Owen! Thank you for reply, but this jquery plugin for working requires Jquery both in the widget's iframe and on the client's site, and we can't guarantee this. Anyway, webkit issue not with postMessage or location hash polling - as i see, this code can't correctly calculate iframe's height. I have some ideas how to fix it, i will try it today in my free time. Sorry for my bad english |
I fixed webkit issue (new JS files attached) and now it work correctly if FF, IE 9 and Chrome. I not tested it in ie <9 and other browsers. |
Very cool. I hope this can be included in piwik as the iframe widget embedding at the moment with the variable row count feature requires either a very tall iframe or risk truncation. |
We can consider include it in Piwik. How exactly should it be used? can you please post a screenshot of a tall iframe example? Also is the code under GPL license? please confirm. Thanks! |
Hi, matt! In my project i am using piwik to automatically provide detailed statistics for my users. I wrote article about it: In user's presonal page i want to show widgets, but i need to add a few widgets in a column. By default, on the piwik widget's page it create html code with iframe's height 350px: But it's too little, and many widget's can't show all content in this little place. Now we can do 3 things: add additional height to iframes (for example, setup height to 600 px - but if user will choose 500 rows to show - it will be too little height anyway, and if i will place widgets in column it will be too big white place between widgets) Next way is change scrolling="no" to scrolling="yes" - user will can to see all the widget's content, but with scrolling And the last way is the adding iframe auto height feature. I created the demo-page with all three ways: You can see, that the problem with default height, how it works with scrolling and with auto-height. |
About the GPL - i have answer from author of this code (i little modified it, so now code have two authors - me and Kazi Manzur Rashid, http://kazimanzurrashid.com) He said:
So i think you can release it under GPL license with no problems. |
Thank you for the details! this looks cool and I didn't know it was possible to do this. I found this blog post about it: http://css-tricks.com/cross-domain-iframe-resizing/ the big problem with this solution is that it breaks the hash tag functionnality on the host website. This is not so good. There are other solutions pointed out in the comments, maybe these would be better? Regarding the integration I see it done this way:
Let me know if you can test the other solutions to do iframe resizing without breaking the back button. Thanks! |
Hi, Matt! I will try postMessage solution today in my free time If could be good solution in modern browsers, and it will break hash tag only in old browsers (i.e. IE7) About your way of the integration - it will be great. |
Attachment: new files |
I modified my code using postmessage, and now it works better in modern browsers. I can't test it in ie7 and other old browsers cos i don't have it. May be somebody can test it, i am very grateful for it. May be, you can improve my JS code, it may be not optimal cos i'm not JS coder, but it works. New Frame.js, FrameManager.js, postmessage.js and iframe.tpl included. You need modify widget's code: now it need FrameManager.js and postmessage.js to working, and you need add
|
Attachment: js files and iframe.tpl |
I improved my js code - now it's more clean and better. See js.2.rar and demo page: http://ultra-stat.ru/test.html |
Thanks it looks really good!! Code review:
|
@iskander thanks for the last patch - any update on the possible changes to make it into core? it would be great to have it for the next release planned in 1 week ! cheers |
No reply yet from Iskander, but we are still interested to commit this change to SVN :) |
see #10460 |
We can add iframes auto-height feature to our widgets - it will be very userful.
I created an Proof-of-Concept patch for Piwik to add this feature. It works good in FF and IE9, and works buggy in Chrome.
You need to upload js files from archive to js folder, and add this line in head section of plugins/Widgetize/templates/iframe.tpl:
After that, get some widget code and modify it:
Add:
And in iframe code add some id (it may be md5 from widget's url, for example), and this:
You can see how it works on this test page:
[http://ultra-stat.ru/test.html]
Try to expand the search engine's keyword list and look, how will change iframe's height, for example.
My code based on this solution: [http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx], and it need some improvements, because it dosn't work correctly on WebKit, but it's great proof-of concept, i think.
Sorry for my bad english
The text was updated successfully, but these errors were encountered: