What happens programmatically when you switch browser tabs? - events

I'm having a weird issue with fancybox in chrome where my scrollbar isn't appearing until I switch to another chrome tab and switch back. I'll figure it out myself -- I'd just like to get to a starting point by knowing, in as specific a sense as possible, what exactly happens when your browser switches tabs?
Things like:
What loses/gains focus?
Any other events fired off?
How is chrome different from other browsers in this sense?
Sorry if this question is a bit open ended -- I did my best to qualify it in a way that made it possible to be answered concretely.

Related

How to detect support of immediate scroll events with Modernizr?

I use ScrollMagic to trigger animations on each section of a web page. This works great for desktop and for some browsers on mobile.
However there are some mobile browsers (older versions of Safari and Chrome (on ipad)) that don't play these animations until the scrolling event is finished. I know there are ways around that. However instead, I would like to simply turn off these animations when not supported.
Is there a way to detect that with Modernizr? Or would I have to target specific browsers and its versions?
You wouldn't detect parallax animation. That isn't a browser feature, that is something that you can use browser features to accomplish.
In this case you would you be looking to detect if you are reflow the page during a scroll, or if it waits until after the scroll event fires. There is currently no detect for this, and creating one would get pretty greasy.
I believe what you are seeing is the result of the scroll event not firing as you scroll on certain browsers. I cannot think of a way to simulate this with javascript (triggering a scroll event will obviously only trigger one scroll event, so there isn't anything to gain there). As a result, I am not confident that you would ever be able to accurately detect this.
I completely agree with Patrick's answer, but would like to add that it is indeed possible to have immediate scroll events on the mobile versions of chrome and safari, you are talking about.
The issue you're describing is related to all iOS devices before version 8.
Before then the mobile browser engine did not trigger "true" scroll events while scrolling, but only once scrolling had come to a full halt (so after the inertia stopped). Even the execution of javascript was suspended, so you couldn't just run a loop to check the scroll position.
Long story short: There are ways around it using containers for scrolling and requestAnimationFrame.
The easiest way I found to get scroll events for pre iOS8 devices is iScroll.
I would recommend to check out this: http://janpaepke.github.io/ScrollMagic/examples/advanced/mobile_basic.html
and this:
http://janpaepke.github.io/ScrollMagic/examples/expert/mobile_advanced.html
So getting back to your original question: How to detect when you would even need those workarounds.
You'd need to check if the you're on iOS version 7 or lower, which, to my knowledge, can't be done with modernizr, as it is a feature detection library.
So check out this thread to learn more: Detect iOS version less than 5 with JavaScript

Firefox non-focused tab loading priority?

I have combed google for this, and come up blank.
Firefox has a feature where the tab you have focused will load much faster than non focused tabs. Now, I find this an absolute hell, and I was wondering what I can do about this.
Is there a configuration option or something that I can mess with to stop firefox from dropping the priority on non focused tabs?
Try browsing to about:config and changing browser.tabs.loadInBackground to false.

Creating a Typing Assist in Firefox addon

I want to create a typing assisting addon to my Firefox such that whatever the user is typing currently appears on a small window on the right hand side bottom in bigger fonts.
This will help slow typists to type at a faster rate.
For example, when the user is on yahoo sign-up page and text box name, a small window should appear on the bottom right corner and should display the text he is entering in larger fonts. In this manner, the user can keep typing without moving his head up.
I have no experience with firefox addons, so I would like to know whether this project is feasible. If it is, then I would like to know whether it's possible to do with only JavaScript; or if I will have to use jQuery.
It will be much appreciated if you can provide some guidance in this matter.
Sure it's feasible. You never have to use jQuery and it's not very useful when writing an add-on anyway, since you don't care about differences between browsers.
I suggest you start with https://addons.mozilla.org/en-US/developers/ , try to get a page-mod running, make it handle keystrokes and display them in a <div> on the web page it's running in.

tab overflow exception in my brain - strategies and ideas for dealing with too many tabs in web browser

A common problem I find myself dealing with is having way too many tabs in my browser. Part of this I know is just trying to do too many things at once. I tell myself to focus focus on one task at a time and try to close tabs I'm not using. Nevertheless, I still often find myself with over 20 tabs open at a time, just because apps that I use in the course of the day that I don't want to keep opening and closing and have them be in different positions.
I have not seen any great ways in either Chrome or Firefox to deal with tab overload. I had a couple ideas of possible UI enhancements to deal with this. I know there's a couple of tab grouping/organization extensions for Firefox and Chrome, but I've tried most of them and haven't found them all that helpful. One feature that would be nice is if it automatically grouped tabs by category/domain (so for example all my finance-related websites automatically open in the same group).
That said, how do you manage large number of tabs, and do you have any ideas of browser enhancements for dealing this this?
(Another pet-peeve of mine is that Chrome doesn't have MRU (most recently used tab switching), which is a huge pain for me when I'm working with two pages and having to switch back and forth between them. But that's sort of a different topic)
http://www.azarask.in/blog/post/tabcandy/
Tab candy in firefox 4 beta
http://tabsugar.com/
same thing for chrome
I've had your exact problem. With tab candy I've had up to ~90 tabs open at once with no issues at all, except memory use :)
I just use a combinatioin of tabs and windows, with each window containing a logical grouping of tabs. In both FF and Chrome, I can drag tabs between windows to reorgaize them as desired. Also, on Linux or OS X, you can use multiple workspaces, each with one or more browser windows. I dunno -- maybe Windows 7 has workspaces too now?

Firefox's scrollbar is practically invisible - how to change

how to edit Firefox 'basic page style'
for all sites
with a Stylish script
to set scrollbar to a higher contrast color.
I can't see the thing its terrible.
is there any other way to do this?
The scrollbar is an operating system feature, not a feature of your website. Its look-and-feel are controlled by the user, not the webpage. IE provides a way to change scrollbar colors but it was heavily abused in the early days and is now considered a generally bad idea. In short, if you are trying to manipulate scrollbars from a webpage you're going to have to code a 'fake' scrollbar in Javascript or forget about it.
If you are trying to change only your own system then you may find some possibilities in creating user chrome, greasemonkey script or persona. I'm not sure what is possible there.

Resources