I have a problem with my site, it's based on Joomla 2.5.16
I will try to explain my problem as good as possible.
On my site i have a zipcode checker, were people can check the availability of fiber to the home.
The zipcode checker works with a iframe, in combination with a javascript code that i put in the header.
The Javascript code determines the height of the iframe. as you can see at www.nederlandkiestvoorglasvezel.nl/glasvezel-vergelijken the height of the iframe is wrong. it seems like something be overwritten the javascriptcode.
Cause when i test the iframe and the javascriptcode outside Joomla, de zipcode checker works fine. you can see it here: http://www.nederlandkiestvoorglasvezel.nl/iframeTest.htm
However, seem to have received to be erroneous data, yet overwritten the same code in your Joomla site the correct value, I see no reason after another everything after passing the following:
Parent reveived message!: 440
So I hope someone can tell whats the problem, i have tried several opties and got help from my hosting but we can't fix it.
Regards,
Rutger
I hope it's as silly as this. Look at the height you've set in the iframe with something like firebug. You'll notice that the height property is set to {"s":"__cb","f":"oauth2relay368429625","c":0,"a":[40,false],"t":"852486603","l":false,"g":true,"r":"oauth2relay368429625"}px.
You should probably fix that, and then it'll work :)
Edit - more details. This chunk of code is causing it:
// Listen to message from child window
eventer(messageEvent,function(e) {
console.log('parent received message!: ',e.data);
document.getElementById('internetdealerframe').height = e.data + 'px';
},false);
Since you're passing around more than just a number, the entire string is being used as a height.
Edit #2
It doesn't look like you're actually passing a valid height anywhere in those postMessage calls - The first one that has any kind of 'height' in it contains the following: !_{"s":"/I0_1387279282212::_renderstart","f":"I0_1387279282212","r":"I0_1387279282212","t":"24007401","a":[{"height":20,"width":90,"title":"+1"}],"g":false}. And I'm thinking that you don't actually want the iframe to be 20 pixels high.
Thanks for your answer, but i dont get it,
Cause at my test iframe, outside Joomla, de height works.. as you can see at, http://www.nederlandkiestvoorglasvezel.nl/iframeTest.htm
Related
I'm a complete beginner in the development side of things and would greatly appreciate any help.
I have the following code that refreshes an entire page when the browser is resized:
$(window).bind('resize',function(){
window.location.href = window.location.href;
});
However, I want the refresh to be targeted at particular iframes with unique id's instead of the whole page.
Again, thank you in advance for any help.
Use:
$(window).resize(function(){
document.getElementById('FrameID').contentDocument.location.reload(true);
});
And consider using classes instead of IDs if you have multiple iFrames.
I am having issues with the Facebook social widget and I was hoping this would fix it. Your code was helpful (a good start).
That said, it did not work.
I will post a solution if I find one. Facebook really needs to update their widget. It really is problematic with responsive sites (mobile devices). Considering they created React code, it really is not very well written.
jQuery seems a better solution since I did not have an id to target) but the problem is deeper within the iframe.
// refresh facebook iframe on page resize (did not work)
$(window).resize(function(){
$('.fb iframe')[0].contentDocument.location.reload(true);
});
//--- other ways to reload iframes---
//reload 1 iframe
$('#iframe')[0].contentWindow.location.reload(true);
//reload all iFrames
$('iframe').each(function() {
this.contentWindow.location.reload(true);
});
//Another way to reload all iFrames
$('iframe').attr('src', $('iframe').attr('src'));
Update...
I found these two well-written pages on the subject. Hopefully, it works.
How to make the Facebook Page Plugin fully responsive
Making The Facebook Page Plugin Responsive
UPDATE
The code above is nice, but they did not have it ready to rock and roll. The showed examples for their site and I almost got it working, but there is still a bug in my code.
so...
This is totally cheating, but I was looking at the source code and opened the iframe location from Facebook and it actually worked (it seems allowed). So far it seems to work with other profiles too (so long as you grant permission first).
I just hardcoded the iframe vs using their JavaScript code. It also works 1000x times better/faster this way and it is already responsive. It is nuts I had spent so much time with trying to fix Facebook's code. Using a straight URL link in the iframe loads way faster (geezzz).
Here is an example of what I used for the final URL (I cleaned up the unneeded parameters.
https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FYOURFACEBOOKUSERNAME&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500
Again, keep in mind for this to work, you need to create a social box at Facebook first, so that you can grant permission. I tried to do it with my personal username and since I have never created one before, it did not work. Again, this is theory, but that makes sense.My actual site is using another client and I also tested other clients. It seems to work fine.
No promises it will work on a live site. It is possible Facbook blocks users that do not use it via the script, but we will see. I am guessing Facebook may use scripts in the code to check for location source, so this way may fail over time (don't know yet). Also, it is possible I am missing a needed key that Facebook genarates from the script thatI failed to notice (or removed). I was careful when I cleaned it up, and I did not want to include more than needed. We will see.
Anyways, try your own tests via the source code please. I need to work on other more important stuff, and this works and seems to be a simple very effective solution. I will have more time later if it fails. The client wont know and again, it is faster and seem to work better.
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>
ONE MORE UPDATE.
It seems to be working, but I still need to send a refresh to the URL in the paramaters for the width. Also, note the maxium width for the social widget is 500px (so if you have a need for one bigger, it wont go more unless you use some kind of transform in CSS).
Here is the final code.
Funny about all this, I am back full circle. I am using some of the code we talked about above and some new code I figured out and wrote.
:)
Also noteworthy, I noticed the StackOverflow console is giving me an error.
Please ignore it. The error has something to do with the iframe reference calling Facebook which StackOverflow does not like. As far as I can tell, there is no error.
If I am wrong, let me know.
// Fixes Facebook iFrame on page resize (Responsive)
$(window).resize(function() {
$('#fb-iframe').attr('src', "https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=" + $('#fb-iframe').width())
});
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>
I have a page that has multiple iframes in it:
parent
|___iframe1
|___iframe2
|___iframe3
iframe1 has a form with some hidden values. I need ( at least ) one of those values on iframe2
Here's my code
<script type="text/javascript">
alert(parent.frames[0].document.getElementById("UserID").value);
</script>
The first time the site loads, this page works fine. I get my testing popup. iframe1 is a bunch of tabs that reload iframe2. When the user ends up navigating back to the tab that includes my script I get a null reference for parent.frames[0].
I'm pulling my hair out trying to fix this and would appreciate any assistance.
I can get this to replicate 100% of the time in Firefox & IE. With Chrome & Safari it's less so. Not in that the value is null less often, but MORE often than not the information is not accessible and I'm just not sure what I'm doing wrong.
Edit for ease of visibility: These frames are ALL on the same domain, same protocol & port.
While I AM implementing the use of easyXDM so that I can pass some data to another site, I have this issue if I include easyXDM or not.
Thanks!
It looks like it's due to the onLoad as suggested by ddr2. If you post this as an answer I'll be happy to flag it as the proper one.
I'm kinda bummed I didn't think of that :(
I"m wondering if anyone can give me some insight into a really strange IE9 issue I've been struggling with.
I'm finishing up production of a site for work - it works well in ff/chrome/ie7/ie8 with no script errors.
On IE9 the last step of the application causes the entire tab to whitescreen with no script errors or warnings. (changing the document mode to ie8 will fix the problem but is obviously unsuitable for production)
Unfortunately the site pretty complex with a ton of ajax, and in-page scripts so I can't really post the relevant code easily. I'm more trying to figure out how to diagnose this.
I've checked the IE error logs and they are empty. Web developer tools tells me nothing. The site is not using any plugins (Flash/Silverlight, Ect. ) just javascript w/jQuery.
There is a PDF being displayed in an iframe around the step where it fails - but a nearly identical pdf is displayed in the previous step (using the same method) without problem. The code fails around a call to the jquery UI window but I can't seem to get the exact line.
If anyone has a clue how to try to diagnose this further I'd really appreciate it. I can keep hunting for the bug but I've never seen this kind of behavior before and just am not sure what I am looking for.
Thanks for all the input on this. Sorry I got completely overwhelmed by a few projects at once so I wasn't able to post updates on the debugging steps.
It took forever but I finally realized that everything was crashing when I closed the dialog containing the first PDF.
One of my helper functions was opening the dialog and automatically destroying the contents on close. Normally this works fine as I'm either removing a div containing the page fragment, or the iframe.
In this situation I had a page fragment loaded into the dialog which contained some buttons and the pdf iframe. I called the .remove() method on the parent element containing the iframe rather than the iframe itself. For some reason this seems to work fine in every other browser - but in IE9 it pretty much kills the page rendering without any warning or message.
I strongly suspect that the culprit is the adobe plugin but I'm not entirely sure.
Here is the fix-
Html:
<div id="container">
<iframe src="loremipsum.pdf"></iframe>
</div>
Javascript:
//Ruins my entire week
$("#container").remove();
//Works as the pdf is removed directly
$("#container").find("iframe").remove().end().remove();
I ran into the same issue on IE11 while trying to remove an iframe in a div with AngularJS. Removing the iframe first would just cause the same issue, so I navigated the iframe src to a new page (about:blank) first, then removed the div which worked. Hopefully this helps someone with a similar problem.
Pseudo-code below:
$ctrl.iframeUrl = 'about:blank'; // change the iframe url here
$timeout(function(){
$ctrl.removeIframe(); // remove the iframe here
});
As a thing to try - see what's in the IE9 DOM viewer after it whitescreens. There's a decent chance that most of the stuff is there and just not rendering properly (or having something else rendered over it). At the very least, knowing whether it's losing a ton of stuff out of the DOM or not should give you some useful data.
I am having a webview which dispalys large amounbt of data. I want to scroll Webview progmatically. I know window.scrollto() method is there but ,god knows why, it is not working. Can anybody guide me step by step how to do this ? I am sure there is some minor problem. Pl. guide me.
simplest possible way i am aware about is adding url?param=value#id technique. I am not sure is you are looking for this but it works nicely. This is called fragment identifier
I think that you may have a syntax error. Its element.scrollTo(x-coord, y-coord) :)
Sample code would be useful if you have some for us.
Is it the actual window that has a scroll or is it some element inside the window that has a scroll.
You should try to alert your x-coord and y-coord just before you call scrollTo() to see if there are actual values there.
I have some strange behavior going on with safari, im using the jQuery.GridLayout plugin and css for styling.
Just for some context, this website layout is a simple header followed by the content which are a collection of blocks (each block is a div) positioned by the javascript and rearranged every time the window is re-sized.
When I direct safari to the website url all the blocks overlap to some degree (like 50%) but as I re-size the window if they have to move, automatically all goes to the correct place and only breaks if I refresh the page.
So it seems that loading the page is messing it up either because something fails to register or because something does not happen until I re-size the window.
As anyone experienced such behavior within safari?
It works perfectly in firefox and opera, its an valid html 4.01 transitional page and the css is also validated (wc3 wise that is).
I know that publishing the code is invaluable to sort this kind of issues but this is a production project and I'm obliged not to it.
Either way I appreciate any advice on were to start looking?
How do one goes about debugging this issues in safari?
Thank you.
Safari fires DomReady before linked resources are loaded. This race condition regarding calculating sizes of elements defined in CSS can usually be avoided by loading your CSS resources before any JavaScript (eg: make sure the tags appear in the before ANY tags (which are blocking, but give a change for CSS to load asynchronously). Worse case scenario, move your blocks to the last element in , leaving your tags above.
CSS concatenation of multiple files (if you have them) is also recommended.
If you aren't able to post the actual code of the page for us, you might find your solution while trying to reproduce the problem without your specific content. In the past, I've solved some of my own problems while trying to generate a page that shows the problem to post on IRC / SO. If you are able to reproduce the problem without your content, post it for the community, and an answer will be much easier to find.
My shot-in-the-dark guesses lead towards:
You may find that one of your content blocks is causing the issue.
You may find that a different library you are using is causing the issue.
Some javascript code for your layout may be running before everything is ready / filled in. From my memory, Safari is quick to display pages before images are loaded for instance.
Perhaps you need to specify the an exact width/height of some of your Grid Containers.
Small update:
(new update at bottom)
http://www.howtocreate.co.uk/safaribenchmarks.html
And also something that is working is this small script:
<script language="JavaScript">
// CREDITS:
// Automatic Page Refresher by Peter Gehrig and Urs Dudli www.24fun.com
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http:
//www.hypergurl.com
// Configure refresh interval (in seconds)
var refreshinterval=20
// Shall the coundown be displayed inside your status bar? Say "yes" or "no" below:
var displaycountdown="yes"
// Do not edit the code below
var starttime
var nowtime
var reloadseconds=0
var secondssinceloaded=0
function starttime() { starttime=new Date() starttime=starttime.getTime() countdown()
} function countdown() { nowtime= new Date() nowtime=nowtime.getTime() secondssinceloaded=(nowtime-starttime)/1000
reloadseconds=Math.round(refreshinterval-secondssinceloaded) if (refreshinterval>=secondssinceloaded)
{ var timer=setTimeout("countdown()",1000) if (displaycountdown=="yes")
{ window.status="Page refreshing in "+reloadseconds+ " seconds"
} } else { clearTimeout(timer) window.location.reload(true) } } window.onload=starttime
</script>
I find it odd that a refreshing script solves the issue in safari, but if i manually refresh the page the page havoc ensues...
########UPDATE##########
Well I finally got some more time to work on this and after doing some reading a rather obvious thing came to my mind, let the content load and then format it, so for now all of my js sits between </body> and </html>.
Its not perfect since now you can catch a glimpse of the content without being properly placed when the page first loads.
Maybe ill try calling the js a second time after a few ms have passed of loading.
I know this was proposed a bit upper the thread I just needed time to get my hands dirty thanks all, Ill keep updating till I get it solved in a more proper fashion :)