I built a WordPress plugin for my company's customers and one of the options uses an iframe. A customer pointed out an interesting issue to me. When the page loads, it doesn't load at the top but loads just above the iframe (please see: http://salondshayn.com/wp/staff/jude-hair-stylist-hairdresser-scottsdale/). The same thing happens on my test site, and in all browsers I've tested (i.e., chrome and firefox).
I've narrowed it down to the iframe, but it may also have something to do with the way WordPress treats iframes. This question is similar, but the answer given is to set display: none; which doesn't work because I need the iframe's contents to display.
Any suggestions?
Use the scrollTo function and put this bit of javascript at the end of your page.
I took this from Scrolling an iframe with javascript?
var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(xcoord,ycoord);
}
If jQuery is involved, you can use this:
<script type="text/javascript">
$(document).ready(function () {
window.scrollTo(0,0);
});
</script>
I'd extend the scrollTo issue pointed by #stevepowell2000 and suggest that you examine all the scripts of that iframe, much probably there's a scrollTo going on there.
I found this in the iframe source, but am not sure if it's related or not...
$("#siteMasterPage").live('pageshow', function(event) {
var currentArea = $('#hidCurrentArea').val();
if (currentArea === "business") {
setTimeout(function() {
$.mobile.silentScroll(30);
}, 10);
}
});
If that's indeed the case, the matter would be how to prevent that, because applying a second scroll will probably look weird.
I ended up finding (two weeks later) the answer to this question. I took it from Nate's answer here - iframe on the page bottom: avoid automatic scroll of the page
I used:
<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" href="..."></iframe>
It seems to have completely eliminated the scrolling issue.
Here was Nate's quote:
Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.
Related
I'm trying to add a google maps autocomplete input to my ionic app. It works pretty well except when I scroll. As shown on the image:
So I tried different things like changing the position of .pac-container but it doesn't solve the problem.
When I inspect the page, it seems that the results container loads at the end of the page, so it's not easy to make the block stick to the input bar.
I already searched everywhere and didn't fidn any suitable solution ? Does someone have an idea how to do it ?
(It's actually just a simple code like this:
function initialize() {
var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
options
);
}
initialize();
jsfiddle
Thanks
I have the same problem. My solution was:
$('#inputContainer').scroll(function(){
//Set new top to autocomplete dropdown
newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight();
$('.pac-container').css('top', newTop + 'px');
});
This update the dropdown position when container scrolls.
I just encountered the same problem when I was implementing the Autocomplete on a form inside a scrollable modal. If you only have one Autocomplete object then the solution is relatively easy.
First make sure that your element's parent has a relative position.
Then you need to select the .pac-container and append it to the parent.
$("#autocomplete").parent()
.css({position: "relative"})
.append(".pac-container");
Finally set the .pac-container left and top position to be below your element. This needs to be done in a stylesheet with the !important declaration to ensure it overrides the inline styles set by Google's code.
// these values will need to be calculated based on your layout
.pac-container {
top: 40px !important;
left: 0px !important;
}
This obviously wont work if you have multiple Autocomplete objects on a single page. Luckily I figured out a way to handle that scenario and recently published it in a jQuery plugin designed to make autocompleting address forms a breeze.
I got the solution check the example no issue with position bug when scroll
function initAutocomplete() {
//....codes...
//....add this code just before close function...
setTimeout(function(){
$(".pac-container").prependTo("#mapMoveHere");
}, 300);
}
https://codepen.io/gmkhussain/pen/qPpryg
In my case, I had to set the css as html,body{overflow-x:visible;} to make the pac-container fixed to the input field.
I was now able to reproduce the problem, the solution is simply adding position: relative to your wrapper box and position: absolute to your #autocomplete input.
I got the solution checking the example provided by the Google team.
I've updated your fiddle to match the solution, but it goes like this:
Your updated CSS:
.box {
position: relative;
height: 200vh;
}
#autocomplete {
width:350px;
position: absolute;
}
Since my input field is inside "ion-content", I implemented Nicolas Pennesi
's answer with ion-content's method:
onScroll($event) {
// his code here
}
I have a left-hand navigation within my iFrame, with two items, switching between two pages. Sometimes there's a white flash, sometimes there isn't.
Some of the methods I've tried so far:
<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';">
Did not do the trick.
jQuery('#jobs-frame').load(function(){
$(this).show();
});
jQuery('#primary a').click(function(){
//alert('hello');
jQuery('#jobs-frame').hide();
});
Also did not do the trick.
Any other method I've tried out has appeared to be outdated. What's puzzling me is that these above 2 solutions have many comments/feedback saying they work, but in Chrome - the only browser I've tested this in so far - I am still having this issue.
I had a similar problem with iframes that were dynamically generated. On Chrome, toggling visibility removed the white flash, but there was still flickering. On Safari, toggling display actually introduced a related iframe repaint bug.
What ended up working for me was toggling opacity:
<iframe style="opacity: 0;" onload="this.style.opacity = 1;">`
If you want to avoid the 'white flash', don't navigate using links to HTML pages, but put both pages into 2 <div>s and switch between them (this also allows for pretty animations).
Chris Coyier offers a very elegant solution that is better than putting visibility attributes. He has a good explanation why it is better but the short answer is "users with JavaScript turned off will never see that iframe" if you use visibility.
Here is his code. Put it in your <head> and make sure you combine the window.onload function with yours, if you already have one.
(function () {
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
It works by inserting a CSS on the page, which makes all iframes invisible, so the whiteflash is not visible as well. When the window loads, the CSS is removed and all is well.
We should all thank him for this nice article, not me :).
just give style="background-color: #000000;" to html tag
I'm using the facebook like button on my site, via an iframe.
Now you have to specify a width of the iframe. Due to various languages of the like button, this means that I have to set the width to at least 70px.
Now i want the like button to be aligned to the far right of my site, now i can do this by adding "text-align:right" in the css style of the iframe. The iframe shows on the right, but not all the way on the right.
This happens because of the iframe width, its 70px, and for example the english like button is only 55px.
Now what i want: To align the actual content of the iframe to the right of the actual iframe.
http://pastehtml.com/view/1dnwtbh.html
Here i have build an example. Its aligned on the right of the div ive build, but because the iframe is larger than the actual like button, its not perfectly aligned to the right. I want to like button to be aligned to the right in the iframe.
I hope you guys can help
css rules only apply to the iframe element, not the contents of the iframe, because it is another webpage entirely.
You 'might' be able to use javascript to add a css stylesheet to the iframe page with:
var cssLink = document.createElement("link")
cssLink.href = "style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['frame1'].document.head.appendChild(cssLink);
But I'm not sure if that will work on all browsers.
Your best bet is to call the page with AJAX.
That way you can modify the contents of the page before you display it
An example jquery AJAX function might look like this:
$.ajax({
type: "GET",
url: "facebookURL",
dataType: "html",
success: function(html) {
processData(html);
}
});
function processData(fbData) {
$('#injectFBLikeHere').html(function() {
return $(fbData).find('#LikePluginPagelet').html();
});
}
Note I haven't test this, only use it as a starting point or a guide
Modifying the contents of an iFrame is typically impossible by modern web standards : http://en.wikipedia.org/wiki/Cross-site_scripting
Because you cannot determine the width of the like button inside of the iframe, you can't resize the iframe to the minimum width to be nested on the right.
The only way I can think of is resizing the iframe, but as you said, you need it to support multiple languages, which I guess then if you used javascript to detect the user's language ( JavaScript for detecting browser language preference ). You might be able to manually style the like button's iframe width depending on the language. I can't think of any automated way to do this, due to cross site scripting.
Here is what to do.
Insert a DIV called #like before you tag, then Put your Facebook code inside as shown below
<div id="like">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/pages/HUE-Architecture/122612441133152" layout="box_count"></fb:like>
</div>
<!-- End Like
Now create the #like CSS that you applied to the above DIV as shown below and adjust as needed.
/* CSS for Facebook like*/
#like {
position: fixed;
top: 300px;
right: -20px;
float: right;
height: auto;
width: 130px;
}
Note: remove any previous CSS that you applied to the i-frame so it doesn't conflict with this one.
Maybe this will work for you:
when you generate code here, set the width to 0.
Like this? http://d.pr/Cbkd
If so, here's what I did via Firebug
.connect_widget_number_cloud,
.connect_widget_connect_button {float: right !important;}
I also changed the iframe width to something like 60px.
I've created this frame busting code, and now for fun, I want to bust it.
This code appears inside an iframe page:
(function() {
if (window!=top) {
//Bust out of iframe below:
top.location.replace(location);
}
})();
And it busts out of the iframe.
I do not want to alter this code at all, but I want a workaround code to put in the PARENT of this iframe, so that the iframe can't detect that its an iframe, thus invalidating this frame-busting code.
In other words, how do I make the iframe think that it IS the top window (meaning window==top)
Any workaround is appreciated!
This is not in itself possible, but there are a number of techniques for disabling the effect of common framebustin techniques - one of them can be read about here.
It works by using the onunloadevent to 'cancel' the url-redirection by setting its location to a document returning a status code of 204.
I want an animation modal (loading please wait) and when the page fully loads it disappears?
Using jQuery:
$(function() { $('#loading').fadeOut(); });
The rest is CSS and an animated GIF.
If you're using jQuery, try something like this:
$(function() {
var reqMgr = Sys.WebForms.PageRequestManager.getInstance();
reqMgr.add_beginRequest(ShowWait);
reqMgr.add_endRequest(HideWait);
});
function ShowWait() {
$("#Loading").fadeIn();
}
function HideWait() {
$("#Loading").fadeOut();
}
Then just have an element:
<div id="Loading">Loading, Please Wait...</div>
Style and position as you want with css, default it to have a display: none; though.
I recommend to write some simple html with your loading message (and may be a page mask to make it grayed) and place it at the beginning of the page. And at the end of page add script to remove that message and mask (see first answer). So users will see this message as soon as they get the html page (also some browsers support rendering of incomplete pages during loading of the page). See the code of this page for additional details.
This is my favorite way to make a modal popup. It does not use any AJAX, it's just pure HTML & CSS: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
You can hook it up to code-behind instead of using hyperlinks (get rid of the opacity attribute and work with div.visble = true/false). Set the modal div visible as default, then when page load completes, set it to visible=false.