I am developing a firefox plugin. I want to show a tooltip which contains the preview of the target page when user mouseover a link.
This is simple, But there is a time requirement. This process should get completed before 1 sec(After user mouseover the link.)
Any Ideas on where to start?
You should create an add-on that scans the content document DOM for anchor tags after the page has loaded (i.e. when the DOMContentLoaded event is received). The old-style way to do this is to use a XUL overlay. Presumably the same thing can be done with the Addon SDK using a content script.
You'd then have to load each link into a hidden iframe (e.g. set the height to zero) and create a screenshot as described here: https://developer.mozilla.org/en/drawing_graphics_with_canvas#Rendering_Web_Content_Into_A_Canvas. Note that the Mozilla Developer site is malfunctioning right now so code samples aren't showing up correctly (at least on the mirror that I am being served). I assume that will be fixed quickly since it's such a serious problem.
As Wladimir says, loading every linked page and making a screenshot will potentially take quite a long time, so if the user mouses over a link before then I would a) display throbber and "Loading..." text instead of the screenshot and b) prioritize the loading of that link so that the screenshot appears as quickly as possible.
With Firefox it's very simple. Just use the following element and the browser will preload your contents. Contents are preloaded in background, once the whole current page is loaded.
<link rel="prefetch" href="/images/nextimage.jpg" />
For more info, refer this page
Related
i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS
I have a list of urls I need to show on a screen for a presentation. After the page have loaded, I want to scroll to the end of the page, and when it's reached load the next one.
The problem is, most of those pages have 'X-Frame-Options' to 'sameorigin', so I can't use iframes. What other options do I have ?
I thought about, maybe, a chrome extension will complete rights over navigation that would handle the whole process...
Thanks ahead.
So, the solution was indeed to build a Chrome extension. Only the software containing the page gives you that much control over it when you don't have access to its code - namely, the browser.
I built a very simple extension using chrome.tabs in the background to open a new tab or update it, injecting a script in the page whenever it's loaded, and using messaging to inform the background when scrolling is finished and it's time to load a new page in the list.
Is it possible to cause Google Chrome to prevent painting... as in, to keep the page exactly the same, no animations or content changes.
The reason I ask is because I have created an extension for people who find it difficult to read webpages when things are animating/flashing/changing/etc.
It currently works by taking a screenshot and layering it over the page (position absolute, with a high value z-index).
But because captureVisibleTab cannot capture the whole page (issue 45209), the screenshot needs to be re-created every time the user scrolls the page.
However the change in iOS 8 Safari to not pause printing while scrolling got me thinking there may be another way around this by trying to emulate the pre iOS 8 behaviour (something I preferred, as Reader View does not always work, or stop animated gifs).
You cannot stop the execution thread, its browser who decides it.
However to prevent CPU Cycles What chrome does is, Pauses the javascript execution thread when window is blurred. But since you are showing captured with higher z-index you window will still be active.
One possible way :
Disable the script for that url when the page is loaded.
You might miss the dynamic content but as you asked "no animations or content changes". Any dom or style manipulations by javscript causes repaint of the page. Disabling it might be one solution. However not pretty sure about how to stop css animations.
I have also seen extensions that can capture full webpage image or pdf. you can capture the full page and show them irrelevant of whatever changing in the background
The client's website has product listings. The prices for the product are pulled dynamically in through an iFrame at the bottom of the page. There is Javascript on the page that automatically resizes this iFrame to the correct height based upon how big the iFrame content is, once it's loaded.
The client is reporting that when printing the page, they cannot see anything from the iFrame where the prices should be - apparently it is not printing in IE, just the main page itself.
I am on a Mac and so can't test in IE, so I'm having a hard time experimenting with this.
Can anyone clarify the expected behaviour in this situation? Is it possible to get IE to print both page and included iFrames by default, and if so, how would I go about doing this? I can only find examples for printing a specific frame from a parent window.
Thanks!
The expected behaviour should be what you're experiencing in other browsers. If the page is printed, the iframe should be printed along with it. It would be difficult to imagine that everyone else got it wrong and IE got it correct in this instance.
Below is a bit of speculation on what the issue might be, but without knowing more/seeing code it's difficult to know the specifics:
This issue could be due to some css that you may have on your page. I've read of similar iframe printing issues where the visibility was set to hidden initially resulting in the iframe not printing correctly. To get around this specific case the user had to set the width and height to 0px. Without knowing more about your site, I can not correctly predict that this is happening.
Another issue may by your dynamic resizing based on the contents of the iframe. A simple test would be to comment that section out and set a generic width and height on the iframe to see if the printing issue still occurs. Perhaps those dynamic styles are not being carried over to the print stylesheet and are not getting applied (therefore not appearing at all).
As a quick suggestion, look into css media types:
print
Intended for paged material and for documents viewed on screen in
print preview mode. Please consult the section on paged media for
information about formatting issues that are specific to paged media.
Helpful link: Print Specification
This was an interesting point, so I did a test using IE8 (on a server, not locally).
I printed in IE8 a web page that included an iframe of something that I built. And it printed some of the contents the first time (the other contents showed up black). The second time I printed, the iframe contents were all black.
However, in my example, the contents in the iframe are changing constantly (images and text that fade in and out) and the css background behind it is black.
This test has the contents of the iFrame on a different host server than the contents of the main page. But to my knowledge, there is a cross-domain policy file working here.
Cross-domain policy issues were my first guess, but it's entirely possible there is some issue with how internet explorer renders the screenshot when it sends it to the printer.
If you are using Javascript, then why not try window.print() function along with print media CSS.
I can't explain why IE isn't working, but maybe you can fix the problem by adding this part of code into the parent page, in order to force each iframe to be refresh :
$(document).ready(function() {
if($.browser.msie) {//Only for IE
$('iframe').each(function() {
$(this).attr('src', $(this).attr('src'));
});
}
});
To get the browser, i use this method.
And i don't use contentDocument.location.reload(true); method to be sure the iframe to be refresh. See SO topic.
Try this Plugin it will solved your problem
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
I've got the same problem with this post:
How to fix flickering in IFrames?
Unfortunately, there's no solution (and I'm afraid of negative ratings too :) ).
I can't provide a page where you can see the behaviour (as it's intranet) - but I'll try to explain it:
When I open an external page via lightbox, I get a disturbing 'flickering' when clicking on links... i.e. I try to open an image gallery located on an internal server - clicking on the "next" link lets the page flicker before moving on to the next page.
If I open any other web page (google, some newspaper, ...) I do not get this behaviour - it's much faster, so it seems like the content of the first page is replaced by the content of the next one. In my image gallery it's much slower: the first page disappears, then the next page appears. I get this flickering only with lightbox-popup, not, if I load the page in another window.
I tried differend JavaScript frameworks (jQuery, Scriptaculous, Standalone) - so I guess it's my image gallery which causes this behaviour... any ideas?
It would be really (!) appreciated... thanks!
Best regards,
Stefan
As Max mentions, source would be useful.
Also, try using Fiddler or Firebug's Net panel to look at the actual HTTP requests that are being made - perhaps your image gallery is POSTing to itself before redirecting to another page?