Letting the users continue from where they left in embedded PDFs? - javascript

I have PDFs that I have stored in my google drive and embedded into my site. I wanted the site visitors to be able to continue reading from where they left off when they reload, or when they leave the site and comeback. I tried to get the scrollTop value but that returned zero.
Either the page number or the scroll position would work just fine. Is there anyway to achieve this at all? Because I haven't found anything on the internet about this.

You need to store the scrolling state. To do you could use url fragments. Look at this post for more info and code working example

Related

Possible to make webpage URL the same as an iFrame URL?

So I have an iFrame which I am using to load the other pages for my website. To make the website seem like it has no load time and very smooth I have made a main page, with an iFrame in the middle to load the actual pages of the website that contain all the information. I have buttons using JS to change the SRC of the iFrame so that it acts like a normal nav bar.
I am curious to know if it is possible to make the URL on the browser, the same as the URL in the iFrame. Because right now when a user is on the website, they aren't switching to different pages, meaning they can't go back or forward in history because they never left the page in the first place. This can be troubling to most users if they want to link their friends to something, or just go back a bit.
Is there a way to do this in jQuery or JavaScript? Or even better, purely in HTML or CSS?
Thanks in advance.
EDIT: After googling a bit of what charlietfl has said, I am now wondering if it is possible to save a website into states, which I can then give web URLs to? I just skimmed through a few pages without reading them thoroughly so I'm not exactly sure what it was talking about when it mentioned states, but maybe there is something else out there that is capable?
You can try url hash like the gmail uses #inbox . It has the same functionality as you wish. It serves you the browser back and forward actions. You have to add more Javascript to handle those hashes. But i am not sure about its effect on seo (if you are only concerning about it).
For more details please go through these links
Gmail like URL scheme
Browser History Manager

Disable reverse image search on website?

I have a site with user profile pictures. I would like to protect the identities of the users, but Chrome (and other browsers) default to allowing reverse image searches on the jpeg images. Is there a way to post pictures while preventing reverse image search on them? What actually causes this option to appear on the right click menu on some images and not on others?
You may consider disabling the right-click menu on the image to prevent them from accessing any options "copy, search etc.". This is primarily a deterrent.
<img oncontextmenu="return false" src="http://placehold.it/350x150">
Any savvy user, though, will be able to do whatever they want with the image. Once it has been loaded in a browser the user owns the image locally.
If you publicly publish an image on the internet, it can be downloaded and reverse searched. Be it with chrome right click or a more manual way.
There is no way you can prevent that. At most you will be able to make it a few seconds longer to reverse search the image.
I have a site with user profile pictures. I would like to protect the identities of the users, but Chrome (and other browsers) default to allowing reverse image searches on the jpeg images.
That's novel, but once an picture is delivered to any client, they can do whatever they want with it. They have the file. They could access the image from their file system and simply do a manual reverse search.
Is there a way to post pictures while preventing reverse image search on them?
No, there is essentially no way to prevent this from happening. If someone can see the picture, they have it. There are ways to deter them, but any person slightly inclined to get the picture will find a way, be it disabling JavaScript, accessing browser cache, or simply taking a screenshot.
What actually causes this option to appear on the right click menu on some images and not on others?
That option shows up because the browser has the option for it. Since the browser is a client-side tool, you can't directly control it. No matter what you try to tell the client-side, the client can simply ignore your directions.
The safest way to protect your users is to not expose these images to the public net. Secure them behind some kind of authentication scheme on a private network and make sure to serve them over https.

How can I get links to a redirect page to show up in the browser's history?

A website contains a "random" link, which loads a url that returns a 307 redirecting to the url we want. It works fine: click it and you load a random page. The problem is that each time you click it, the browser assumes you're loading the same page: so if you're on the homepage, then you follow the random link 5 times, then you press back, you'll be taken all the way back to the homepage, with no way to find the random pages you were just looking at. I want to modify this behavior so that users can access previous random pages via the back and forward buttons.
I don't own the website, so I can't just change the redirect code.
Here's what I've tried, all of which has failed.
Predicting what would be redirected to. While somewhat possible, there would be no way to avoid failure in up to .1% of clicks, and it would react very poorly to unexpected events, like a page that's published a day late, let alone a sit structure change.
Loading the 307 page via ajax. The request stops at readystate == 2 and I can't access the location header.
Cancel the click event and instead set location.href = random_link.href. This has no effect - the new page still doesn't go into history.
Have the new page call history.pushState. This successfully adds the page to history, but I can't find a way to distinguish between new pages and ones being opened via the back button, so the history quickly becomes very corrupted.
Keeping my own history in localStorage. As above, I can't tell when the back button is being used.
I'm working on a solution that I'm pretty sure will work, involving loading the page in an iframe over the existing page and using a background process and messaging to work around the fact that content injections from chrome extensions can't access window.parent from within iframes. And using the history API to reflect the current iframe's URL in the address bar, and get the back and forwards buttons to apply to the current iframe where appropriate.
While I'm pretty sure the last solution can be made to work, it's a hideously complex and heavyweight approach to what seems like a simple problem. So I thought I'd ask you guys before I continue: any other ideas?
Have you tried storing the locations in localStorage, then hi-jacking the back button ?
I am sure you know how localStorage works, for hi-jacking the back button you can refer to this : Is there a way to catch the back button event in javascript?
T.

What is the best way to show two external web pages side by side?

I want to show an English wikipedia article on the left side of the page and then show the Spanish version of that wikipedia article on the right side of the page.
Is there a way to do that with html, javascript, ajax, etc.?
I know I could use iframes, but it would be nice to have them scroll together (you scroll one, and the other scrolls... or just have one scroll bar for both) and follow links together (if a link is clicked on one page, the appropriate translated page goes in the other side(if it exists)).
Iframes are good to display pages from another domain and let users browse them within your page. However, there really isn't a way to detect click events within the content of an iframe if it is from another domain. This article explains why.
You basically have to find what page the iframe loaded, right? Even if you were to add an onload event on the iframe to check what page was loaded, even this is not allowed, I'm afraid.
An interesting concept. IF you are sure you want to load two webpages then iframe is your option. However, for the functionality that you desire, you have to use a custom scroll on one of the pages and traverse the second page by the same amount. Here is a sample for a single page custom scroll. Just use the same concept for the other page too.
Update : You can perhaps, have a look at this. The content stored in the databases can be access MediaWiki as far as i know. Use this to get the data specific to your link.

reload an iFrame with the scrollbar set to a specific coordinate

I was wondering how could I reload any website using javascript and set it in a way that when it reloads the scrollbar is looking scrolled down to a certain position. I'm unsure as to how to look for this in Google honestly so I haven't digged up much =/.
I think it has to be somewhere in the instruction to reload it and so far I have:
document.getElementById('life').contentWindow.scroll(0,0); //doesn't work
document.getElementById('life').contentWindow.location.reload();
although the first one gets me:
Permission denied to get
property Window.scroll of
http://www.google.com.
If the website in the iframe is from a different domain than the current page, you won't be allowed to affect it at all with Javascript. This is an intentional property of Javascript to prevent XSS.

Categories

Resources