So I have this Chrome Extension that loads some content off the internet. Basically the user clicks on the popup icon, then some JavaScript in the background page loads some page, parse an image from it and puts it into the popup.html page. The problem is that the popup.html is not resizing to fit the actual size of the content. I saw a couple of similar questions here on StackOverflow, each one answered with "put <!DOCTYPE html> on top of your popup.html page" which in my case is not working. The size of the popup remains very small (about 1cm square).
Previously I had some CSS style that fixed the width & height but I noticed my content is not always the same size, so I would like the popup.html page to automatically resize itself to fit the content.
I know that in the very worst case I could parse width and height of the image and set it as CSS but I feel like there is a more elegant solution.
Thanks
I was able to dynamically resize the popup with a little bit of jQuery.
$('html').height($('#menu').height());
Where #menu is just a div that wraps all of the content. body didn't properly resize, so I couldn't use that.
Apparently just changing the height of html is enough.
I managed to solve the problem. So apparently if I load a content into popup.html the popup won't resize automatically. There is no way it will. So I tried to modify the CSS of the page after loading the content to display, but also this wasn't working. Then I found out that there should be no hidden content in the page when dynamically resizing it. When I loaded the content from the web, I hid the whole page in an hidden div, then through JavaScript I accessed the element of the page that I was interested in, grabbed it and put into a visible container in the popup page. To solve the issue I just had to "delete" through document.getElementById('myHiddenDiv').innerHTML = "" the content of the hidden div and magically the popup resized :-).
Related
This is a problem which only started today with zero code changes to the pages CSS, so i have a suspicion that Recaptcha changed its code, but i cant see anyone else being affected by this.
When i click on the "I'm not a robot" for a recaptcha thing on my website, the popup that gives the "Select all images with x" response is being positioned on the wrong side of the captcha box and this is causing half of it to be hidden because it goes over the screen on low resolutions.
The other problem i found, is that if you scroll the webpage down, and click on a recaptcha element that requires you to scroll, the popup no longer appears next to the element.
So my question is, can i force a style onto this popup? it has no class or element ID.
Also is anyone else having this problem, or experienced it before?
The reCaptcha uses an iframe to load. Google doesn't give much for customization of their module. Try adding the data-size="compact" attribute to the loading div. It is the only other option they offer. Trying to enforce styles on the module gets really messy, really fast.
<div class="g-recaptcha" data-size="compact" data-sitekey="your_key"></div>
There is another option, use the css transform to scale the iframe.
https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
<style>#media screen and (max-height: 575px){
#rc-imageselect, .grecaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;-webkit-transform-origin:0 0;}
</style>
Target the entire iframe of popup with css (However the recaptcha does not assign any id or class to the iframe parent div so it will only work if you have only 1 frame in the page)
div iframe{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
I have a payment page that build from main page and third party iframe.
Under the iframe there is a relative div.
My problem is that sometimes the iframe add some warnning messegase at the bottom of it and override the relative div. see links for screen shots: pic1 and pic2
what should I do in order to make my div position will adjusted to the Iframe?
You can´t do this, as the iframe is from another source. So it´s not possible to look at it´s contents, due to cross-domain poilicies.. Your only option is to make the iframe smaller (so a scrollbar gets displayed) or move your "hint" further down.
I guess it´s illegal anyway to modify a payment processors site, by overlaying other content, that suggest, it is part of the payment processors process!
I solve it just by leaving enough space between the iframe and the button, so if the warning messages appears, the button is very close to the messages.
This works perfectly fine:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
});
</script>
That is, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"
and have the page coded this way:
<body>
<div id="pg"></div>
<script type="text/javascript">
document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title></head><body>test me now</body></html>";
</script>
</body>
FancyBox opens but no text is displayed. (The text "text me now" is displayed in the #pg div element. Notice it is assigned to the DIV's innerHTML at the end of the page.)
Basically, I want to know if there is a way dynamically initialize a DIV's innerHTML property and display it as a FancyBox type iFrame? (The content of the iFrame will have a button that prints the iFrame's document.)
TIA
UPDATE: 07/28/12
As #arttronics suggested, I put together a jsFiddle
To summarize, ultimately the objective is to be able to click a button contained inside a FancyBox that prints the entire contents of the FancyBox without opening another window. (I want to use FancyBox as a report viewer for content parsed by Javascript.)
I assume that I need to display content using FancyBox's iframe player, but I could be wrong.
The jsFiddle shows:
The FancyBox is able to display text that validates as an HTML page using the inline player. The text can either be referenced via href or content.
However, when the player is an iframe and the content comes from href, then the FancyBox container is empty. If the contents comes from the content attribute, FancyBox shows a 404 error.
Simply comment and uncomment the jsFiddle code to see what I mean.
Any ideas for how I can meet my objective are appreciated and will get an up vote!
TIA.
Update: 07/31/2012
This new jsFiddle example: Iframe report viewer works but not in FancyBox
As you can see, I've tried several ways to display the iframe in FancyBox. And while FancyBox does display the contents of the iframe, the printing feature breaks.
I think one method for solving this problem would be to write the content of the myContent var to the FancyBox after it is loaded, but I can't (A) find the right DOM node to write to, and (B) I can't get FancyBox to display an iframe using its iframe player when the iframe src="about:blank".
Any suggestions? Or do you see a way to fix the jsFiddle example?
Do you really expect that <iframe src="#myID"></iframe> would open an element having id myID into iframe?
If you want to print content of the fancyBox, then you can add print button - http://jsfiddle.net/s3jRA/
Updated demo - http://jsfiddle.net/qVrLr/ - for creating and updating contents of iframe
As is often the case, I was looking at things backwards. The solution (with caveats) is this, rather than display a div element using the iframe player, hide an iframe in the html and display it using the inline player.
See this working example: jsFiddle
This solves the problem of being able to print dynamic content without opening another window. Additionally if the text overflows the FancyBox, the entire contents are still printed. (That's something I could not get to happen when I printed the FancyBox and changed the various page elements visibility styles to hidden).
Major Caveats
I've tested this in IE 8 and it works, however I still cannot get this to work in Chrome.
One reason for trying this approach was my assumption that I would be able to include within the dyanmic page content an #media print style. That technique does not work (in IE anyway) for some reason. However, inline styles do work as do HTML markup tags (notice the <strong> tag in the jsFiddle example: var myContent). So something is strange.
If you have a look at Apple's Mac page on their website. http://www.apple.com/mac/
Their "body" displays an image in the center while the page is loading. After the page is fully loaded, their content fades in. If you use Chrome or Safari and open the Element Inspector, you'll see their body gets the class="loaded revealed" when the page is loaded. And that triggers the content to fade in. If you remove the classes, the content will fade out.
I'm looking for something similar to this for my website. I don't want the whole entire content to not display, I still want to display the header and footer. So basically I want the div#content_area to slide down on document ready... The only problem is, they don't use any kind of display:none; for their body. They're a bit more careful about that, because if the JS file fails, the content will still display.
How can I make this? They way they do it must be lightweight because anybody can write something like
$(document).ready(function() {
$('div#content_area').attr(class, loaded revealed);
});
All I need to do is add the .slide() function and hide the content until the page loads.
Setup your DIV of content right where you want it... setup the image you want to be a placeholder right over the top (with absolute if possible/necessary).
In CSS use the z-index property to keep the image above the other.
What you do then is make the IMG a display:none; property, and then as they page is loading you can turn it on with jQuery... so with JS the placeholder shows and sits above... without JS, the image placeholder is invisible, and the user simply sees the content DIV as it loads.
That make sense?
Have found out that Apple has all it's elements opacity set to 0. And on the body load, it adds the classes to the body and uses some basic CSS like this
div{
opacity:0;
}
body.loaded div {
opacity:1;
transition:etc.etc.;
}
Here's my version, http://jsfiddle.net/dqUaX/1/
What's great about it is:
Opacity is considered a CSS3 attribute so if a browser is outdated the content won't hide.
I am actually using jQuery to set the opacity to 0 so even if the user has a css3 browser, but has JavaScript disabled, the content will still display.
Since you'll need CSS3 to hide the div, I used a giant DATA URI for the background image so it doesn't have to load.
Pretty awesome no?
You must put the script before the end of the <body> closing tag...
If you visit here: http://www.egyptevakantie.nl/dahab, click on the "andere plaatsen" tab, and then click on an image it brings up a magnified image, courtesy of the jQuery lightbox plug-in.
However, if you do the same here http://www.egyptevakantie.nl/dahab?rhys=yes (essentially the same site except for a couple of stylesheets and one or two minor html changes, none of which are in close proximity to the images) the lightbox fails. Instead of overlaying the content the lightbox is appended to the bottom of the page, where it is also displayed weirdly.
So far in debugging I've managed to work out that the plug-in still calculates the correct left and top values for where to place the lightbox, but by the time the dhtml is generated the top value has changed completely.
Does anyone have any idea why this is happening?
I think you are missing the jquery lightbox stylesheet file.
in the first page there is a reference to this css file:
/css/jquery.lightbox-0.5.css
but on the second link there is no reference to this file.
this css file is included in the jQuery lightbox download located here:
http://leandrovieira.com/projects/jquery/lightbox/
If image is appended at bottom page, for sure postion:absolute is not set.