Our project uses a variety of libraries (Kinetic Js, jquery, buzz.js, etc..), we have a lot of animations going on and some sounds playing simultaneously ,our purpose is stop all the JavaScript processes when a user change the tab or the window of the browser, losing focus.
We know that the onBlur and onFocus gives us the ability to detect that change and with one setTimeOut function we can stop it. We want to know if there is a more efective way of doing that or a more low level solution.
Thanks in advance.
These days, there's requestAnimationFrame() http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html
Article with info about browser support, and how to emulate in browsers that do not support it: http://paulirish.com/2011/requestanimationframe-for-smart-animating/.
Related
So I have this vanilla JavaScript code that is running very slow when on certain older mobile devices (like iPhone 5) but runs flawless on newer devices (like iPhone 7). And I'm not talking about load speed, but the actual JavaScript functionality. I'm using a few addEventListener to handle basic stuff like showing and hiding divs, including an overlay div with transparent opacity. When I click the button which has the addEventListener linked to it, it takes sometimes up to two seconds to show and/or hide the divs. Sometimes it won't even do it and I'll have to click the button again. I won't share the entire JS file here, but I can assure it's pretty basic. What I want to know is if there's someway to track the execution speed of the JavaScript code... Like, I'm not sure if it's something in the actual JS code, or it's slow because the brownser is taking a long time to rendering it. Any help is welcome! =)
2 ways that are available:
The developer tools in Chrome, but Firefox is more useful for tracking performance:
Also, try performance.now(), never used it but heard about it. Maybe that will help.
EDIT: You could also check how it runs via breakpointing. You can breakpoint in Chrome and Firefox I believe.
To give context, my team is building a rich text editor in the browser that needs to persist state to a server between sessions. The editor's state can obviously change from updates to the document that include keydown events, but we should also account for updates to the editor's stage that are triggered by undo/redo events.
Unfortunately the browser has no native undo/redo events (ref). One proposed hack floating around seems to be to stop propagation for keydown events that maps to undo's keyboard shortcut in addition to disabling the context menu. However, this still leaves open the ability for the user to navigate directly to Edit -> Undo in the application's menu bar, which will directly trigger a document.execCommand('undo') and doesn't fire an event. As a result we wouldn't know to send an update to the server.
Here's a W3C thread on this issue. As of the writing of this, it appears that a solution is still in the works...
When Quill, another browser text editor, ran into this issue their team seemed to advise: "disable the native undo/stack", which is what Facebook's Draft.js actually does. Given that seems to be what we're working with, does anyone know of a way to disable/substitute the browser's native undo/redo stack? Obviously, this is an aggressive solution, but, as of the writing of this, that seems to be the only option.
In the meantime, the answer to this question probably buried somewhere in the Draft's code. If no one beats my team to it, I'll report back on what Draft seems to be doing. Thought it was at least worth documenting this issue.
Likely the best solution is to listen for a debounced onChange event from the contentEditable element. This doesn't allow for custom behavior regarding undo, but it should solve the main issue. Also adding a beforeunload event to alert the user to potential unsaved changes should handle additional edge cases.
I caught myself wanting to make a cross-tab sound controller and i have done some research on this, but i can't really find a good way to go about controlling the sound for all elements in all open tabs.
Does anyone know of any way with jq, js, or anything else that can run in a browser that can be used to controll the volume of all open (and new) tabs?
The use-case would eks be muting all tabs with one button, adjusting up or down the total "browser volume" in one place, and such.
I haven't been able to find any support for this so far, so does that mean it really is impossible after all?
Edit:
The main thing is that this needs to be "cross-tab" and not just a way to adjust a single audio player / audio source playing in a single tab. Say you have 5 tabs with Youtube open and i want to be able to mute / lower volume / raise volume of all those tabs from one single tab.
It depends what you mean by "In the browser". I think that you will only really be able to accomplish this as a browser plug-in or extension. That may not be what you're looking for, but browser extensions can implement that functionality.
See: https://developer.chrome.com/extensions/samples and look at the chrome sounds sample. That might give you a good place to start.
I did find a solution for lowering the volume on one given tab. You could simply repeat it for each tab.
Check this please: Javascript: control Google Chrome's open tab audio volume control
I am developing a website using RWD principles and it is supposed to self adjust and work in both desktop and in tablets, and eventually in Mobiles as well.
I know in Android development we can catch a long tap event and do some actions.
But my question is that, is it possible to do it in HTML/HTML5 and Javascript?
Basically looking for a predefined event which gets fired on long press on html elements.
I have gone through This and understood all the alternatives suggested. Looking if anything new has been introduced in HTML5.
Might check out pointer.js from Mozilla. Apparently somewhat standardizes the touch/ mouse events into a single event type. Probably better than using timeouts, I'd imagine.
I would like to use the jquery slideUp effect when the user navigates away from the page just to make the page look cool as it closes.
I assume that I should use the onunload event but how can I delay the page closing long enough for the effect to run to completion.
One of the options that came to mind is effectively hijacking the page closing function, storing it in some variable and then executing it once I had run my effect but I have no idea how I would do that.
Any suggestions or alternative ideas are more than welcome
what you're looking for is the onbeforeunload event.
just a warning though... it should be really quick... or your visitors are probably going to hate it no matter how cool it looks
as to preventing the page from navigating away before the animation is done, that's a bigger problem... any animation is going to rely on setTimeout/setInterval and the page won't wait for those to complete before leaving.
Doing anything but closing the window when the users ask to is breaking a contract with the user. The browser window is not yours, it's the users, and no matter how cool the effect, it will inevitably annoy most of your users.
The onbeforeunload event is very restricted in what it can do. It must return a string, which is then used to prompt the user for a confirmation about leaving the page. It won't work for cool animations.
As far as I know, the only way to stop a user from leaving a page is the onbeforeunload event, which isn't cancelable. Instead, you return a string from that method, the browser prompts the user with a Yes/No dialog, life goes on. 276660 has more info about this.
I don't think you're going to have much luck with this one.
why not, instead of making a "cool" effect when a user simple want to go away from your website (even if the user closes the browser/tab the unload event will be fired) and annoying the simple user with that ... preventing him/her to return again...
...do that "cool" effect when a user reaches your website for the first time? as a normal intro effect?
I did that as a simple idea, you can see it here: http://www.balexandre.com/jmfc
I would agree 100% with Jonathan Fingland's answer, and add this.
In IE, (I'm not sure what versions support this, I know IE6 did) you can use some propriety meta tags to achieve fades etc when leaving the page. However, this is limited in browsers (IE only), so you're stuck for cross browser use.
You may find loading new content via AJAX would give you better control of effects and transitions, as well as reducing the annoyance factor to the user which can result from trying to hijack the browser actions in such a manner.
I would look at using a form of slider as mentioned above (see for instance http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials),
or simply loading content panes in response to user clicks.
The only way I've found for delaying the window to close, is using an alert. If this is an acceptable compromise for your case, it will really delay the window destruction in memory, and allow your page timers to execute (of course, if user does not close the alert popup earlier than your animations finalize).
I recently used this approach so i could call a flex method through FABridge (which would otherwise be destroyed before the flex method call finishes). I'd like to hear your comments on this.