Im using the following lib http://davidjbradshaw.github.io/iframe-resizer/ which enables cross site iFrame's to be resized after source page.
Although I encountered the following problem on the mobile device Im not able to solve:
When first loading the page the height of the iFrame is right (the whole loaded page is seen in the iframe). But when pressing a link which height is less then previous page then "resizedCallback" function could not called. So the current page height remain same as previous page. While the height of the current page is too small from previous page. This arises only on mobile.
This can be resolved by calling the parent resize method from second page.
For example your iFrame is like :
<iframe id="paymentForm" src="/payments/onlineDetailsForm" width="100%"
height="400px" onload='resizeIframeWithoutScrolling(this);'></iframe>
And resize methods are :
<script type="text/javascript">
function resizeIframeWithoutScrolling() {
document.getElementById("paymentForm").style.height = (parseInt(document
.getElementById("paymentForm").contentWindow.document.body.scrollHeight) + 1)
+ "px";
}
function AdjustIframeHeight(i) { document.getElementById("paymentForm").style.height = parseInt(i) + "px"; }
Now on second page just add the following script:
<script type="text/javascript">
parent.resizeIframeWithoutScrolling(document.getElementById("secondPageId").scrollHeight);
This script will adjust the size automatically.
Related
My web's important content is at 300 pixels from the top so I want it to open directly at that height giving the user the option to scroll up if they want.
Which is the easier way to achieve this?
I found one alternative. I create an anchor and then make it load directly to it. I didn't want to use anchors but as no one answered me...
<body onload="location.href ='#home'">
<a id="home"></a>
EDIT: Here's what i was looking for!!
<script type="text/javascript">
function Scrolldown() {
window.scroll(0,100);
}
window.onload = Scrolldown;
</script>
I created a script to publish the following html page using Html Service:
<html>
<div id="fixeddiv"></div>
<script>
var div=document.getElementById("fixeddiv");
div.style.position="fixed";
alert(div.style.position);
</script>
</html>
The alert window shows an empty string.
Isn't possible to set a fixed position for a div element?
I just ran into the same thing and the answer appears to be NO. Apparently they're worried fixed divs are a security exposure.
Next thing they'll be wanting to remove the keys from our keyboards too ;-)
I used this to get a 'fixed' effect for a global navbar at the top. It might be of use to you or others.
$(document).ready(function() {
$( window ).scroll(function() {
$( '.fixed' ).css('top', $( this ).scrollTop());
});
});
Note: in GAS the $( window ).scroll() wasn't working for me so I instead created a div block the size of the view port with a scroll bar overflow and used that instead.
I've found another 'solution' for this:
I created 2 divs, fixedHeader and content
<div id="fixedHeader"></div>
<div id="content"></div>
The css code, where we set #fixedHeader to be always on top and for #content we set a padding-top matching the height of #fixedHeader so the elements won't get under #fixedHeader:
#fixedHeader {position:absolute; top:0;}
#content {padding-top:50px; overflow:auto;}
And finally javascript to make #contet match the height of the viewport when document loads:
$(function(){ $("#content").css('height',window.innerHeight); }
Hope it helps
It appears that position:fixed is not allowed due to security concerns: http://code.google.com/p/google-apps-script-issues/issues/detail?id=1840
I may not be using the proper terminology but hopefully I get my question across properly. What I'm wondering is if it's possible to "delay" the "creation" of a specific div, rather than just delay the FadeTo or Show jquery command.
I ask because I'm using the Vimeo API which is completely mind-boggling and frustrating (at least for me - it's a source of endless shame and I wallow in self-pity when attempting any such Vimeo API coding). What I'm trying to do is just delay the autoplay of the iframe code for an embedded Vimeo video. The problem is that I have the div containing the vimeo iframe set to hide for a good three seconds after the page loads before it fades in, but since it's just hidden the video starts playing anyway before the visitor can actually see it. I'm just using &autoplay=1 for the vimeo embed...
So, I suppose the only other solution besides getting this confusing Vimeo API to try to delay the video that way is to be able to just use a jQuery command to delay the vimeo iframe from even loading/being created on the page, until the container div fades in.
If this is possible I will bless my lucky charms. And double points if someone answers in the next few hours! Thanks so much!!!
I just editted my answer and applied it to fit your code you provided:
So what I did here is: 1) load jquery into your page2)when jquery sees your div with id="div" as 'ready', it will fire an alert that says loaded (you can remove this it was just for testing purposes), and then delay the src from loading in your iframe for 2 seconds (2000 miliseconds)
3) So you can change the 2000 to whatever time you want, and make sure the "player_1" matches your iframes id
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document.getElementById('div')).ready(function()
{
alert('loaded');
setTimeout('document.getElementById("player_1").src="http://www.youtube.com/v/82CYNj7noic?autoplay=1"', 2000);
});
</script>
<div id="div" class="div">
<iframe class="iframe" id="player_1" > </iframe>
</div>
Does this work for you?? I hope I've helped!!
I noticed that the Buffer app for chrome does things a little differently with a floating div when the extension icon is clicked. How is this achieved?
I don't believe they do this in a new window since I am not seeing an addition window being spawned.
Basically what I need is a thickbox to be displayed when the icon is clicked.
Any insight on how this is done would be appreciated.
They're using an api from that background page, to listen to the click event for when the browser action button gets clicked.
Here's a link to that API page:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {'file': 'createPopup.js'}, function callBackStub(){})
});
createPopup.js
You're html will be in a string. I personally recommend writing this like this:
var widgetHtml =
'<div id="main"> '+
' <p>some stuff goes here</p>'+
'</div>';
Then as your html grows, you can do a column edit of the beginning quote and end '+
Ok, now what you'll want to do is put your html in an iframe, but without setting a src property. Like this:
var iframe = document.createElement('iframe');
document.documentElement.appendChild(iframe); //fastest way to append to DOM: http://jsperf.com/insertbefore-vs-appendchild/2
iframe.contentDocument.body.innerHTML = widgetHtml;
WHY? So your stuff doesn't take on styles from the rest of the page.
Um, and then you can do a translateX or transition left/right position to slide the element into the page.
I'm using DD_belatedPNG to fix transparent PNGs in IE6; at a certain point I noticed that all fixed PNGs started disappearing a second after the document loaded. Something along these lines: page loads, 1 second passes, the transparency becomes viewable and the PNGs almost immediately disappear. Any clue on what the cause is and how to fix? Thanks!
UPDATE: the elements are still in place, so if one of the PNGs was a link, it is still clickable.
<script src="/scripts/plugins/DD_belatedPNG_0.0.7a-min.js"></script>
<script>
PNG_selectors = ".bbb, #logo, #home_title, .home-image, ..........";
alert("PNGs are going to disappear now");
DD_belatedPNG.fix(PNG_selectors);
</script>
As long as the alert is in place they are there, once OK is clicked, they are gone.
For those who are interested, this was being caused by as script loading stuff from fonts.com... I set it to defer, and it fixed the issue. Sweet!
Can you try calling DD_belatedPNG.fix() only when the page has finished loading, then see if the problem goes away? Attach an event handler to window.onload like so:
<script>
window.onload = function() {
var PNG_selectors = ".bbb, #logo, #home_title, .home-image, ..........";
alert("PNGs are going to disappear now");
DD_belatedPNG.fix(PNG_selectors);
};
</script>