There is a feature in Chrome - you can right-click on a tab and select "Pin Tab", then tab is moved to the left corner and looks like an icon with text.
So there is the question: how can I highlight this tab? Maybe there is some API?
For example, gmail can highlight this tab when new mail message is come.
Thank you.
You can't blink the tab, just the tab title:
<script>
function blinkTitle() {
if(!window.oldtitle) window.oldtitle = document.title;
if(document.title == ' ') {
document.title = window.oldtitle;
} else {
document.title = ' ';
}
}
function startBlink() {
window.blinkinterval = setInterval(blinkTitle,200);
}
onload = function() {
document.onblur = function() {
setTimeout(startBlink,2000);
}
document.onfocus = function() {
clearInterval(window.blinkinterval);
document.title = window.oldtitle;
}
}
</script>
Here's an HTML page that changes the page's title after 10 seconds:
<html>
<head>
<script>
function blinkPinnedTab()
{
var title = document.title;
var newTitle = "New Message";
window.setTimeout(function()
{
document.title = newTitle;
window.setTimeout(function()
{
document.title = oldTitle;
}, 1000);
}, 1);
}
window.setTimeout(function() { blinkPinnedTab(); }, 10000);
</script>
<title>Yo, Yo!</title>
</head>
<body>
Hello!
</body>
</html>
To see the "highlight animation" do the following:
Load the page.
Pin the tab.
Switch to a different tab. (Because if the tab is the active tab, nothing will happen.)
Within 10 seconds of loading the page, the tab will be "highlighted".
You have to do steps 2-3 within 10 seconds to see the effect. If you didn't, then just reload the page and quickly switch to a different tab.
EDIT: I still think that charles.art.br's answer is just as good (actually, it's better). There's very little difference between the code samples we both gave. I honestly don't know why his answer wasn't accepted.
Related
So I have a website where I can select links and click a button to open them all at the same time. When I do that Firefox takes me to one of the newly opened links automatically.
I wanted to stop this behavior, so I looked and looked, and eventually found this option:
browser.tabs.loadDivertedInBackground
Now, when I set this to true, newly opened tabs never automatically take me to them. So if I click an ad on a site that normally opens in a new tab and takes me to it, now it doesn't happen. I also tried this code:
<p><a href="#" onclick="window.open('http://google.com');
window.open('http://yahoo.com');">Click to open Google and Yahoo</a></p>
This code opens 2 links at the same time. I was thinking maybe opening multiple links at the same time somehow overrides Firefox. But no, the links opened and I was not automatically taken to any of the new tabs.
Also must be said that I'm having this problem in Firefox 75 and 74. But when I try it in Firefox 55.0.2, I don't have the problem. In Firefox 55.0.2 the "browser.tabs.loadDivertedInBackground" actually works even on the website where I have the problem (I can't share the site because it's behind login).
This appears to be the code responsible to open multiple links on the website I have an issue with:
$(document).on('click', '.statbtn', function () {
var me = $(this);
var isAnyRowSelected = false;
$('.row-checkbox').each(function () {
var t = $(this);
if (t.is(':checked')) {
isAnyRowSelected = true;
$('select[name="status[' + t.val() + ']"]').val(me.attr('id'));
}
});
if(isAnyRowSelected == false){
bootbox.alert("No Orders Selected");
}
});
$(document).on('click', '.openlink', function () {
var me = $(this);
var isAnyRowSelected = false;
$($('.row-checkbox').get()).each(function () {
var t = $(this);
if (t.is(':checked')) {
isAnyRowSelected = true;
console.log();
var win = window.open(t.data('link'), '_blank');
if (win) {
win.focus();
} else {
bootbox.alert('Please allow popups for this website');
}
}
});
So I tried everything I could think of. Many changes to the about:config, restarting my browser, unticking the "When you open a link in a new tab, switch to it immediately" option in Firefox. But nothing works. When I open links from this one site using this specific button, I always get automatically taken to one of the newly opened tabs.
Here is a similar-ish problem - https://www.reddit.com/r/firefox/comments/bnu6qq/opening_new_tab_problem/
Any ideas why this happens and how to fix it? I mean, a website shouldn't be able or allowed to override Firefoxe's native setting, right?
Okay, because I don't wanna be an ass, here is the solution.
$(document).on('click', '.statbtn', function () {
var me = $(this);
var isAnyRowSelected = false;
$('.row-checkbox').each(function () {
var t = $(this);
if (t.is(':checked')) {
isAnyRowSelected = true;
$('select[name="status[' + t.val() + ']"]').val(me.attr('id'));
}
});
if(isAnyRowSelected == false){
bootbox.alert("No Orders Selected");
}
});
$(document).on('click', '.openlink', function () {
var me = $(this);
var isAnyRowSelected = false;
$($('.row-checkbox').get().reverse()).each(function () {
var t = $(this);
if (t.is(':checked')) {
isAnyRowSelected = true;
console.log();
// var win = window.open(t.data('link'), '_blank');
setTimeout(() => window.open(t.data('link'), '_blank'),1000);
// if (win) {
// win.focus();
// } else {
// bootbox.alert('Please allow popups for this website');
// }
}
});
if(isAnyRowSelected == false){
bootbox.alert("No Orders Selected");
}
});
Basically, adding a "setTimeout" fixed it. For some reason Firefox needed the delay to process things correctly, I guess, I think. Before the delay, the actions would happen instantly, and I'll just guess that Firefox couldn't "catch up" to it in order to apply the exemption of not navigating to new tabs. But a timeout delay fixed it.
And for anyone that may run into this with a similar issue, it also required an edit in Firefox in "about:config" to set this to True.
browser.tabs.loadDivertedInBackground
That's all folks :)
I'm going to show "New message..." in title every second when browser tab is inactive or user is in other tabs. I used this:
<script>
var mytimer;
function log() {
document.title = document.title == "" ? "New message..." : "";
}
$(window).focusout(function () {
mytimer=setInterval(function () {
log();
}, 1000);
}).focusin(function () {
clearInterval(mytimer);
});
</script>
when user leaves current tab it starts to work but when it comes back to the tab it doesn't stop. Any idea what is wrong with that?
Solution:
I just changed focusout method to blur and focusin to focus and started to work in Firefox. In IE and Chrome works properly.
You are not setting the setInterval to myTimer.
mytimer = setInterval(function () {
log()
}, 1000);
Added a fiddle;
Focus the output window by clicking on it, and unfocus by clicking another frame.
Edit: Tested and working in chrome,firefox,ie, and opera. Flashes back and forth between original title and New Message like on irc.
$(function(){
var title = $('title').html();
var thread = null;
$(window).focusout(function () {
var i = 0;
thread = setInterval(function(){
if(i % 2 == 0 || i == 0){
$('title').html("New Message..");
}else{
$('title').html(title);
}
i++;
},500);
}).focusin( function(){
clearInterval(thread);
$('title').html(title);
});
});
So I am making a website and everything is nicely done but I don't know that many things with javascript.
I was searching for something that will help me with this and found some similar things but it doesn't work in my case.
This is the problem/idea:
User is on my site and the page name is eg. Hello ( tag)
Then the user clicks on the other tab in the browser but doesn't close my website.
When that happens my page title changes to eg. You went ?
When he clicks on my tab again title changes back to default one.
So if someone can help me with the code and explain it a little bit.
Thank you.
You need to make use of the onblur and onfocus events for the window object.
So something like this (this is native javascript, no jquery).
<script>
window.onblur = function () { document.title = 'you went?'; }
window.onfocus = function () { document.title = 'you came back'; }
</script>
$(window).focus(function() {
document.title = 'defult title';
});
$(window).blur(function() {
document.title = 'you went?';
});
You can use :
window.addEventListener('blur',function(){
alert("please Came Back");
document.head.title = "your tilte"
});
window.addEventListener('focus',function(){
alert("Hi");
document.head.title = "your tilte"
});
best for me is use:
window.onload = function() {
var pageTitle = document.title;
var attentionMessage = 'Come Back!';
document.addEventListener('visibilitychange', function(e) {
var isPageActive = !document.hidden;
if(!isPageActive){
document.title = attentionMessage;
}else {
document.title = pageTitle;
}
});
};
I want to know how to change the title of the browser and set it to a blinking text when the user opens another tab or just minimizes the browser.
For blinking the title:
var title = document.title;
var intv = window.setInterval(function () {
document.title = document.title === '' ? title : '';
}, 500);
// call this to stop the blinking
function stopBlink() {
window.clearInterval(intv);
document.title = title;
}
As for doing it on tab switch or minimize, maybe running the code on window.onblur would work but I'm guessing it can't be done.
I want that when a user clicks on any external link (identified by either particular id or class) on my site then he should get a popup with a counter of 10 seconds, after 10 seconds the popup should close and the user should be able to access the external URL. How can this be done? I'm able to show a warning like below but I don't know how to add timeout to it, also this is a confirm box, not a popup where I can add some div and more stuff for user to see until the counter stops.
$(document).ready(function(){
var root = new RegExp(location.host);
$('a').each(function(){
if(root.test($(this).attr('href'))){
$(this).addClass('local');
}
else{
// a link that does not contain the current host
var url = $(this).attr('href');
if(url.length > 1)
{
$(this).addClass('external');
}
}
});
$('a.external').live('click', function(e){
e.preventDefault();
var answer = confirm("You are about to leave the website and view the content of an external website. We cannot be held responsible for the content of external websites.");
if (answer){
window.location = $(this).attr('href');
}
});
});
PS: Is there any free plugin for this?
I've put together a little demo to help you out. First thing to be aware of is your going to need to make use of the setTimeout function in JavaScript. Secondly, the confirmation boxes and alert windows will not give you the flexibility you need. So here's my HTML first I show a simple link and then created a popup div that will be hidden from the users view.
<a href='http://www.google.com'>Google</a>
<div id='popUp' style='display:none; border:1px solid black;'>
<span>You will be redirected in</span>
<span class='counter'>10</span>
<span>Seconds</span>
<button class='cancel'>Cancel</button>
</div>
Next I created an object that controls how the popup is displayed, and related events are handled within your popup. This mostly is done to keep my popup code in one place and all events centrally located within the object.
$('a').live('click', function(e){
e.preventDefault();
popUp.start(this);
});
$('.cancel').click(function()
{
popUp.cancel();
});
var popUp = (function()
{
var count = 10; //number of seconds to pause
var cancelled = false;
var start = function(caller)
{
$('#popUp').show();
timer(caller);
};
var timer = function(caller)
{
if(cancelled != true)
{
if(count == 0)
{
finished(caller);
}
else
{
count--;
$('.counter').html(count);
setTimeout(function()
{
timer(caller);
}, 1000);
}
}
};
var cancel = function()
{
cancelled = true;
$('#popUp').hide();
}
var finished = function(caller)
{
alert('Open window to ' + caller.href);
};
return {
start : start,
cancel: cancel
};
}());
If you run, you will see the popup is displayed and the countdown is properly counting down. There's still some tweaks of course that it needs, but you should be able to see the overall idea of whats being accomplished. Hope it helps!
JS Fiddle Sample: http://jsfiddle.net/u39cV/
You cannot using a confirm native dialog box as this kind of dialog, as alert(), is blocking all script execution. You have to use a cutomized dialog box non-blocking.
You can use for example: jquery UI dialog
Even this has modal option, this is not UI blocking.
Consdier using the javascript setTimeout function to execute an action after a given delay
if (answer){
setTimeOut(function(){
//action executed after the delay
window.location = $(this).attr('href');
}, 10000); //delay in ms
}