How can I make a web-page preview - javascript

I'd like to place a modal window with a description of an external page. But to give the user more information about the page he about to visit I'd like to provide him with a page preview.
I can see the following ways:
render a page with tools like CutyCapt - not working on my hosting :(
make the screenshot with external recources (I found some - all not
for free, I would try to find free tools)
show the page as it is using something like frame (frame tag is not
supported by HTML5).
My questions:
Is there any PHP tools to render a web page to PNG image not so
demanding as CutyCapt is?
May be I missed any worthwhile online tool to render a page to an
image?
I never used "frame" approach earlier so: is there any pros and cons to go deep into
it? Am I right that HTML5 analog of <frame> tag is <iframe>?
Did I missed any other way to do my job?
Thanks!

I once had a function on a page of mine which would load a specific page using an ajax-request and php-curl functions and then would just dump all the contents in a dynamically created <div> (Although I agree that the <iframe> is a better choice for this). But at that time I could not really adjust its size which made it kind of clumsy.

Related

Load External Custom Page and Execute Custom CSS or Javascript on The page

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

Techniques for loading page with several thumbnail images (laravel 5.3)

I have a web site with a section with several small images (about 24) per page. When I visit the page I can see the page being enlarged, text is shown before the associated image and etc. That's not a problem for me, because I know that the web was designed to work this way so that web site visitors could see something before the page is fully loaded. The problem is that, today, people are fighting against this principle to achieve beauty, hiding sections of the page until it is completely loaded is common if not required. I cannot fight this (If I could I would). When I show my website to some developer I can see that he completely embranced this idea of beauty in favor of "old principles".
I never really tried to design a page that has a "smart image loading" so I don't know where to start and that's why I'm here. If you can list me some techniques, plugin and etc that can be used to perform progressive image loads in pages would be helpful.
My page is being loaded by simply returning a view with all the images. I assume that to achieve the smart image loading I will have to get the images and associanted text by returning json from the controller, is that correct? If so, I will have to make a major change in my system. I briefly saw a technique that it sets all the images on the page to an animated gif image and then when the data is fetch from the server (using ajax/json) it substitutes the src atribute of the image, is that a good technique. Again, what the best tecniques are?
You can use jquery and css to display a loading animation before the page completely loads
Tutorial: http://smallenvelop.com/display-loading-icon-page-loads-completely/
Working example : http://smallenvelop.com/demo/simple-pre-loader/
Big Company's website who uses loading animation : https://club.ubisoft.com/
Just a warning: website who uses this technique will look slower, user might even leave the website before the page loads, I personally think the default behaviour of showing text first is still the best.

Prevent dowloading of files

I have made a small web page in which I have some modal windows (jquery.simplemodal). When those windows are showed they should display two pdf files ( downloaded from server ).
<div id="modal1"> - hiden modal window
<embed src="/FileDownload?id=100" width="100%" height="600px">
<embed src="/FileDownload?id=150" width="100%" height="600px">
</div>
<table>
<tr>
<td>
Modal Window 1
</td>
</tr>
</tale>
The problem I have is that when the page is loaded also is downloading all files from server.
From HTML point of view I had read that nothing is possible to do to avoid this.
Can you please tell me if is posible to do that with Javascript ( for example updating src's embed element when the modal window is first displayed )?
On http://stackoverflow.com I have found some topics about changing the properties of an element but nothing is working on me.
JavaScript: Changing src-attribute of a embed-tag
Can i open a modal window from file A and displaying file B on the modal window?
Thank you!
P.S. This is an Intranet application. I want just to avoid downloading 20-40 files (a few MB each ) every time the page is open. The other solution I am thinking is to use a Java applet but I think this would complicate this small project.
Using jQuery. I believe this is what you want to do: only load embed files if you click on the link which pops up the modal?
$("a").click( function (e) {
e.preventDefault();
$("#modal1").append("<embed id='100' src='/FileDownload?id=100' width='100%' height='600px'/><embed id='150' src='/FileDownload?id=100' width='100%' height='600px'/>");
$("#modal1").show();
});
And the Fiddle
The nature of Web browsers is to download files to a cache so that upon the next visit, or during page changes, display times are greatly reduced. As a web developer there is nothing you can do to prevent this. The user can turn this feature off in his own browser if he desires to keep his cache clean, but you and your site cannot. There are ways to impede a viewer from intentionally downloading an image or file such as disabling right clicks over an image, but there are ways for a savvy user to get around these methods as well.
PDF files especially need to be downloaded to speed up viewing. If this is turned off, the user experience will be so slow you will drive people away from your site.
Even if its impossible to completely protect your files, there are a few ways to make it harder to download your original PDF document, we have a few PHP scripts that may help you that you can find inside our desktop publisher (available in GPL and commercial).
Its free to download and you can grab the scripts even if you don't use the rest of the product. If you download it and as you publish your document you can expand advanced settings and tick "sign and obfuscate" and you should get the scripts necessary to protect your files.
http://flexpaper.devaldi.com/flexpaper_flip_zine.jsp

How to keep audio playing while navigating through pages?

I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/

How does Analytics and Usability software do this?

I have been using analytics software for a while, and I've been asking myself how can such software copy a webpage completely to then place it in an iframe and overlay it with images and info.
An example:
A major problem I encountered is copying the webpage.
In particular, copying the webpage the user is currently viewing! (account panel, form journeys, etc...)
I guess this could be achieved by sending the html with the usability data, but I see this as a major performance problem...
Any comments on the subject? This would be very interesting! =)
Further findings:
I discovered that sending the HTML over GET, could be made mode efficient by using client-side compression. Although I'm still not 100% convinced by this!
I think they don't actually copy the whole page for your visitors, all of what they need, is to track the mouse location (x and y coordinates) and a url of the current page being shown,
then they will make use of these information to show you all kind of information (where the user was looking, what have been clicked, ... etc).
AFAIK the google analytics "hot links" widget doesn't copy the page at all -- it just shows it in an iFrame with stuff overlaid on it. (in google analytics' case, they can also modify the page display by sending instructions to the analytics JS embedded in the page.)
The above looks like a whole different kettle of fish though -- you sure it is html and not a screenshot?

Categories