Back to Blog
Change tab browser5/20/2023 ![]() ![]() While working in Chrome, you can use a tab shortcut to shift through open tabs easily and efficiently. If you want to use another one, you can replace all occurrences of it in the code (4x).Depending on your career or industry, you may use internet browsers like Google Chrome to accomplish your work or personal tasks you aim to complete. I have chosen the name previewTab freely. Let previewTab = (window.previewTab & ()) || window.open(url, "previewTab") open tab or switch to tab if already exists The function can be implemented via two simple lines of code: // the URL to open in the new tab WordPress Preview Tab Demo by WebDEasy ( CodePen. If you click again and the tab is still open, the browser switches back to this tab and reloads the URL. ![]() When you use the backend preview on WordPress it opens in a new tab. user leaves the tabĭocument.addEventListener('blur', (e) => ) Automatic tab switching like in the WordPress preview In contrast, the focus event is triggered when an element or the tab (document) is refocused, i.e. The blur event is triggered when an element or the entire tab (document) loses focus, i.e. Generally, the blur and focus events are often used in conjunction. We register the blur event on the global document variable. ![]() If you want to switch from jQuery to pure JavaScript, this offers some advantages and you can still use all the great features. Everything you need is hidden in this code. To detect the tab change we use pure JavaScript without jQuery etc. Of course, you should keep everything within limits so that it doesn’t get out of hand.įor serious sites this might be less appropriate… but if you want to prove your skills or it just fits to the theme of the site, why not! Advertisements Detect tab changes with JavaScript If your visitor (luckily for you) returns to your site, you could greet him with a great animation. There is (almost) always potential for optimization: With these Code Snippets for WordPress you can still tune your page properly!Īnother field of application is the playing of an animation. But since we know when a visitor is on the tab of our website and when not, we can pause the calculations in the corresponding time period, as long as this does not affect the expected result.īy limiting these background activities, especially users with weaker computers or smartphones can be relieved. If you perform complex calculations with JavaScript, this will put a strain on your visitors’ browsers. I’ll also show you how to build the well-known WordPress preview feature yourself, so that the browser automatically switches tabs. If the user is inclined to leave the page, he can be “pulled” back to your page with a funny, nice or helpful hint. A little gimmick that can provide that special something and can also lead to some people being surprised.īesides a fun effect, changing the page title can also attract the user’s attention to your page (again). The page title can be changed as desired and can display funny or helpful information. These include limiting background activity and playing an animation on your website.Ī nice feature that you can build by detecting the tab change is also this one: Advertisements Display a different tab title when switching tabs (demo function) There are some features where it can be useful to be able to see the tab change of a visitor. And you can find out how to do this here! By detecting the tab change in the browser you can conjure up some cool functions. ![]()
0 Comments
Read More
Leave a Reply. |