My app has a modal dialog with an iframe inside it. I've written my jQuery code such that when the dialog opens, it sets the appropriate 'src' attribute of the iframe so the content loads up. However, during the delay between the dialog opening and the content loading, the iframe appears conspicuously as a white box. I'd prefer the iframe have a transparent background.
I've tried setting allowtransparency="yes" on the iframe. Any ideas? Thanks!
I've used this creating an IFrame through Javascript and it worked for me:
// IFrame points to the IFrame element, obviously
IFrame.src = 'about: blank';
IFrame.style.backgroundColor = "transparent";
IFrame.frameBorder = "0";
IFrame.allowTransparency="true";
Not sure if it makes any difference, but I set those properties before adding the IFrame to the DOM.
After adding it to the DOM, I set its src to the real URL.
<style type="text/css">
body {background:none transparent;
}
</style>
that might work (if you put in the iframe)
along with
<iframe src="stuff.htm" allowtransparency="true">
Set the background color of the source page to none and allow transparency in the iframe element.
Source page (for example, source.html):
<style type="text/css">
body
{
background:none transparent;
}
</style>
Page with iframe:
<iframe src="source.html" allowtransparency="true">Error, iFrame failed to load.</iframe>
Why not just load the frame off screen or hidden and then display it once it has finished loading. You could show a loading icon in its place to begin with to give the user immediate feedback that it's loading.
You need to make the iframe's body transparently. It works for me:
const iframe = document.createElement( 'iframe' );
iframe.onload = function() {
const doc = iframe.contentWindow.document,
head = doc.querySelector( 'head' ),
style = doc.createElement( 'style' );
style.setAttribute( 'type', 'text/css' );
style.innerHTML = 'body { background: transparent!important; }';
head.appendChild( style );
}
Related
Want to apply HTML 5 fullscreen APi to background image of div
<div class="bgimg" style="background-image:url('img/home-1.jpg')" />
<img src="img/fullscreen.png" id="fullscreen-btn">
</div>
I want onclick fullscreen-btn background image of div bgimg ie home-1.jpg should open in fullscreen. I tried below code but not workin Kindlt suggest
<scritpt>
$(function() {
var bg = $('.bgimg');
$('#fullscreen-btn').click(function () {
goFullScreen(bg.attr('style', 'background-image:url()'));
});
});
function goFullScreen( element )
{
if ( element === undefined )
{
// If no element defined, use entire document
element = document.documentElement;
}
if ( element.requestFullScreen )
{
// Spec, supported by Opera 12.1+
element.requestFullScreen();
}
else if ( element.mozRequestFullScreen )
{
// Supported by Firefox 10+
element.mozRequestFullScreen();
}
else if ( element.webkitRequestFullScreen )
{
// Supported by Chrome 15+ & Safari 5.1+
element.webkitRequestFullScreen();
}
// Still no IE support, sorry folks :(
}
Seems to be working for me. You just needed to add the image path in your javascript with quotes around it.
$(function() {
var bg = $('.bgimg');
$('#fullscreen-btn').click(function () {
goFullScreen(bg.attr('style', "background-image:url('img/home-1.jpg')"));
});
});
FIDDLE
I believe, but will admit am not 100% sure, that the fullscreen API can only full screen an HTML element. So that is why it will fullscreen div.bgimg but will not fullscreen the background image of the element. <img> is an HTML element, however, so I would think that would work. Is there any reason you would not want to use that instead of setting the background image of your divs?
If so, you could try to wire up some JS that connects visible divs with the background images (Like what you have now) to invisible images and load those to your fullscreen script instead.
I need to turn the products listed in http://srougi.biz/gb/portfolio_listing/ into non-clickable items, but without loose its overlay effect. And since its a wordpress site, that I can't change the code, my only option is do it with CSS. I've tried to put pointer-events:none and cursor:default in the image, but it lost its overlay effect. I will appreciate your help.
we don't have a option to handle the events in css. use this jquery snippet to fix
$('.isotope-item .thumbnail a').click(function(e) e.preventDefault();
});
To deactivate the links in this case, you need to add some javascript code.
JS: Add this before </body> in the theme file: footer.php
<script>
var thumbnails = document.getElementsByClassName('thumbnail');
for(i = 0; i < thumbnails.length; i++){
thumbnails[i].getElementsByTagName("a")[0].setAttribute("onclick", "return false;");
}
</script>
CSS: Style to remove pointer from link.
.thumbnail a {
cursor: default !important;
}
Is it possible that an iframe can recognize the orientation of its parent website? At the moment the css media query is only working at my parent site.
I tried to fix this issue by sending a post message to my iframe and change the linked css file with javascript:
parent site:
window.addEventListener("orientationchange", function(){
var iframe = document.getElementById("plan_iframe");
iframe.contentWindow.postMessage({orientation: window.orientation}, iframe.src);
}, false)
iframe:
<link id="changing_css" rel="stylesheet" type="text/css" href=""/>
[...]
window.addEventListener("message", function(e){
var newOrientationValue = e.data.orientation;
if(newOrientationValue == 90 || newOrientationValue == -90){
document.getElementById('changing_css').href="css/vertretung_ios_landscape.css";
}
else{
document.getElementById('changing_css').href="css/vertretung_ios_portrait.css";
}
}, false)
This fix is very slow because javascript needs some time to load the file "onorientationchange" and apply the changes.
How does css recognizes the orientation?
In my case, I had control over the parent window. I solved this by putting an additional media query on the parent container's iFrame styles. Turns out that the CSS media query for orientation simply goes by whichever property is greater. For example...
An iFrame of greater height will render in portrait orientation. width: 400px; height: 600px;
An iFrame of greater width will render in landscape orientation. width: 600px; height: 400px;
How does URL fragments interact with CSS? I have a page, say: http://example.boom/is_this_a_bug.html. The code for the page is shown in https://gist.github.com/3777018
When I load the page with the URL like that, the .tab-pane elements are not showed because they overflow their container, and it has an overflow: hidden property.
However, if I load the page by appending a valid fragment (#00) to the URL, then the .tab-pane gets visible, just as if the left:100% was not taken into account. Pressing the button just removes and resets left:100%, and then I get the overflowing tab-panes.
This happens in both Firefox 15.0.1 and Chromium 18.0.1025.168 (Developer Build 134367 Linux) Ubuntu 12.04.
Any ideas why this is happening? Is this a bug, or is documented elsewhere?
Best regards,
Manuel.
When you load a page with a fragment identifier in the URL, if that fragment identifier matches the ID of an element on the page the browser will scroll the page to bring that element into view.
An alternative can be use javascript applied styles.
(function hashStyle() {
if (window.location.hash == '#COLOR') {
var css = document.createElement('style'),
s = document.getElementsByTagName('script')[0],
styles = 'body { background-color: #b0c4de; }';
css.type = 'text/css';
if (css.styleSheet) {
css.styleSheet.cssText = styles;
} else {
css.appendChild(document.createTextNode(styles));
}
s.parentNode.insertBefore(css, s);
}
})();
I have an iframe inside my main page. There is a modalpopup inside the iframe page. So when the modalpopup is shown, the parent of the modalpopup is the iframe body and the main page parent body. Thus the overlay only covers the iframe and not the entire page.
I tried moving the modalpopup from the iframe to the parent windows body element (or any other element inside the parents body) using jQuery. I am getting an invalid argument error.
How do I show a modalpopup from an page inside iframe and it should cover the entire document, parent document as well?
Update:
Since few users are interested in achieving the same behavior .. here is the workaround
The best workaround that I would suggest would be to have the modalpopup in the main page .. and then invoke it from the iframe .. say something like this ..
/* function in the main(parent) page */
var _onMyModalPopupHide = null;
function pageLoad(){
// would be called by ScriptManager when page loads
// add the callback that will be called when the modalpopup is closed
$find('MyModalPopupBehaviorID').add_hidden(onMyModalPopupHide);
}
// will be invoked from the iframe to show the popup
function ShowMyModalPopup(callback) {
_onMyModalPopupHide = callback;
$find('MyModalPopupBehaviorID').show();
}
/* this function would be called when the modal popup is closed */
function onMyModalPopupHide(){
if (typeof(_onMyModalPopupHide) === "function") {
// fire the callback function
_onMyModalPopupHide.call(this);
}
}
/* functions in the page loaded in the iframe */
function ShowPopup(){
if(typeof(window.parent.ShowMyModalPopup) === "function") {
window.parent.ShowMyModalPopup.apply(this, [OnPopupClosed]);
}
}
// will be invoked from the parent page .. after the popup is closed
function OnPopupClosed(){
// do something after the modal popup is closed
}
Hope it helps
If you're using the iframe simply for scrollable content you might consider a styled div with overflow: auto or scroll, instead.
A set up such as this makes it easier to modify the appearance of the entire page since you're not working with multiple documents that each essentially have their own window space inside the page. You can bypass some of the cross-frame communication and it may be easier to keep the information in sync if you need to do that.
This may not be suitable for all situations and may require ajax (or modifying the dom with javascript) to change the div contents instead of just loading a different document in the iframe. Also, some older mobile browsers such as Android Froyo builds don't handle scrollable divs well.
You answered your own question in your update. The modal dialog needs to live on the parent page and invoked from the iframe. Your only other option is to use a scrolling div instead of an iframe.
It is not possible the way you are asking. Think of it this way: an iframe is a seperate window. You cannot (for the time being) move a div in one webpage into another.
I have done this by writing a small code for jQuery see below maybe this can help :
NOTE: Make sure you are doing on same domain
HTML:
<button type="button" id="popup">Show Popup</button>
<br />
<br />
<iframe src="your url" style="width: 100%; height:400px;"></iframe>
JS:
// Author : Adeel Rizvi
// It's just a attempt to get the desire element inside the iframe show outside from iframe as a model popup window.
// As i don't have the access inside the iframe for now, so I'll grab the desire element from parent window.
(function () {
$.fn.toPopup = function () {
return this.each(function () {
// Create dynamic div and set its properties
var popUpDiv = $("<div />", {
class: "com_popup",
width: "100%",
height: window.innerHeight
});
// append all the html into newly created div
$(this).appendTo(popUpDiv);
// check if we are in iframe or not
if ($('body', window.parent.document).length !== 0) {
// get iframe parent window body element
var parentBody = $('body', window.parent.document);
// set height according to parent window body
popUpDiv.css("height", parentBody.height());
// add newly created div into parent window body
popUpDiv.appendTo(parentBody);
} else {
// if not inside iframe then add to current window body
popUpDiv.appendTo($('body'));
}
});
}
})();
$(function(){
$("#popup").click(function () {
// find element inside the iframe
var bodyDiv = $('iframe').contents().find('YourSelector');
if (bodyDiv.length !== 0) {
// Show
$(bodyDiv).toPopup();
} else {
alert('Sorry!, no element found');
}
});
});
CSS:
.com_popup {
background-color: Blue;
left: 0;
position: absolute;
top: 0;
z-index: 999999;
}