Change content only when the user is looking on my page - javascript

I remember that facebook did something similar,
Lets say you loaded facebook.com, browsed around a bit and then opened a new tab to read some news, meanwhile you had updates to your facebook feed, but they would not be automatically displayed when you switched back to the facebook tab, only when you switched to the facebook tab they would then fire the event for fetching the feed updates.
How is this done?

It can by done by detecting in javascript if the browser window gained focus.
Dynamic changes on the page or ajax calls are probably done only when the browser window has focus. More about detecting browser window focus in javascript:
Is there a way to detect if a browser window is not currently active?

Related

Is there anyway to detect when a user goes to their homescreen and back into their browser?

I need to be able to detect when a user re-opens their browser after they go to their homescreen by clicking the home button on a mobile phone.
Is there an event I can subscribe to or something?
EDIT: To make this extremely clear, I am looking for a solution based in the web, not a mobile app. I need a js event or something to detect when my website is reopened.
The unload event can be monitored to check if the page has been closed dues to navigation away from the page or specific user action has been take to close the page.
The beforeunload evemt is similar to unload but it may be possible to ask if the user wants to stay on the page. If you want to debug when this event occurs I would suggest saving a message in local storage and logging (or otherwise alerting) it in debug code when the page is loaded again.
The blur event can be used to see if the page has lost focus by checking the relatedTarget property of the event object - if focus has been transferred off page it will be null.
None of these can implicitly check if the user actually went to the home screen and came back, and I would consider it a security breach if you could tell exactly. The blur event can at least tell if the page has lost focus, but will fire in a desktop environment if the user clicks on, say, the address bar.

How do I prevent browsers from blocking the pop-up window that I've created?

I created a simple JavaScript function to display my pop-up window once it loads. But it keeps on being blocked by Firefox and Google Chrome and I have to somehow enable it on the Firefox and Chrome to display the pop-up.
Are there any alternatives for this?
I have a player on the pop-up window so I have to use a pop-up to let the player play automatically. The problem is that if I put it on the page itself, once the user clicks another page the entire page reloads and the player automatically stops for a few seconds until the whole page reloads and I have to prevent this from happening.
The general rule is that popup blockers will engage if window.open or similar is invoked from javascript that is not invoked by direct user action. That is, you can call window.open in response to a button click without getting hit by the popup blocker, but if you put the same code in a timer event it will be blocked. Depth of call chain is also a factor - some older browsers only look at the immediate caller, newer browsers can backtrack a little to see if the caller's caller was a mouse click etc. Keep it as shallow as you can to avoid the popup blockers.
Please take a look at dthorpe's answer here. It covers your question.
You could try putting the player on the original page, and using something like History.js to control page changes (you could have the main page body in one wrapper div that changes, and leave the player outside of it).
Otherwise, you could try (assuming you meant a HTML5 <video> or <audio> player) downloading the data to localStorage/cookie/[other persistent storage mechanism] and have it seek everytime you change a page.
It will be hard to stop browsers from blocking your pop up window, because any way to do so is inherently exploitable; however, if you call the function to open another window from an onclick event, you may be able to circumvent some popup blockers. Also, some popup blockers allow popups when using the https protocol, although not many have this feature, and https can be hard to implement for the average website, if you don't have physical access to the server.
One other option is to open the other page in another tab (like this w3c example; you can 'click' the link with javascript).
You might also want to look at this post, as it is somewhat similar.
I only just discovered you asked this question.
Here's the answer in full.
Basically, you can simply create the popup immediately as the user event is fired, then fill it with content (your player, for instance) as you have it available.

Browser's "Previous" button location change?

Is there a way to change where "previous" button in browser goes?
The problem is the following:
User enters page
User clicks thumbnail image
Large image appears in popup window (lightbox) and URL CHANGES from http://example.com/ to http://example.com/this-image-link/
I click "Previous" button in browser and URL CHANGES from http://example.com/this-image-link/ to http://example.com/ but POPUP doesn't disappear (and page doesn't refresh).
How would I make it go back to http://example.com/ and close my popup after clicking "Back" in browser?
I suggest you do some reading on manipulating the browser's history. Those links will certainly give you a good intro:
History API
MDN Manipulating the Browser History
This JS Library should also help you, if you want to overcome cross-browser limitations and evade JQuery, as suggested above.
History.js
Try using the jQuery Hashchange plugin. Registers the hash change event for all browsers.
http://benalman.com/projects/jquery-hashchange-plugin/

Keep Chrome extension popup open while navigating to a new page

I'm developing a Google Chrome extension with a popup (it's a browser action), and it changes the location of the page, which makes the popup disappear. How can I make it stay between page reloads?
You can't. browserAction popups are closed on any activity outside of the popup. You could potentially use Desktop Notifications though.
You'll need to use Background Page, and pull information from it every time you load the popup. Background pages run whether or your extension is currently being used or not.
Not sure if this helps, but from the FAQ:
Can extensions keep popups open after the user clicks away from them?
No, popups automatically close when the user focuses on some portion of the browser outside of the popup. There is no way to keep the popup open after the user has clicked away.
I had to implement a workaround for this as well. In my case, I was trying to use auth0's loginWithPopup. When the popup closed, it returned focus to the chrome window instead of the extension which caused the extension to close before authorization fully completed. I worked around it by opening a new window which acts as a barrier of sorts to prevent chrome's focus from going back to the window the extension was opened from. Anyway, just wanted to put it out there in case it helps someone in the future.

Popup a message upon exiting a webpage

We'd like to have a message popup when a visitor to specific webpages leave those webpages. So we could tie some Javascript to the links on those webpages, but then we can't control if the user exited the webpage by typing in a URL, using a bookmark or just closing the window...
I assume we have limited options if the user tries closing the browser window... but I do know it's possible because Google Docs' Documents offers the chance to cancel closing the window if you have unsaved work while closing the browser.
What are my options? Can I have Javascript called upon going to another webpage? Can I control the text in the popup when trying to close the window?
I'm using jQuery, so if there are good solutions implemented with jQuery that's perfectly fine.
Yes.
https://developer.mozilla.org/en/DOM/window.onbeforeunload
jQuery UI Dialog OnBeforeUnload
There is onunload event you can bind to, first example:
http://www.codetoad.com/javascript/miscellaneous/onunload_event.asp

Categories