I know that this is not a good practice :-) but I have a request to open a new browser window which is "always on top". It is a small notification/statistics window and not an ad pop up.
I tried with open a new window from main page:
<a href="okence.html"
onclick="window.open('okence.html', 'newwindow', 'width=400,height=320'); return false;"
>Click</a>
The new html file has:
<html>
<body>
<script type="text/javascript" language="javascript">
onblur = function() {
setTimeout('self.focus()', 100);
}
</script>
Test
</body>
</html>
The new window opens, but doesn't have "always on top". Is there any other way? Or maybe browsers don't allow that?
I have tried some suggestions (also set the focus of a popup window every time) but none of them works. New (small) window is opened, but if I click somewhere outside, its gone behind. I want a classic "Always on top" feature, where window stays on screen.
You can't do this. It's a huge security issue if sites could do this! Scammy web sites could keep visitors from de-focusing the window.
Think about it:
What if your e-mail program stuck a pop-up in your face every time you received a new e-mail message? If you don't like it, you will want to minimize it or at least hide it behind some other window. Problem is, what if you can't hide it behind another window? This ruins user experience.
Instead, try:
flashing the title bar (like Gmail when a new Hangouts message is received: title bar flashes from "Gmail - Inbox" to "<name> says..."). Like this: The code is below. Make sure to stop running the snippet when you're done by clicking Hide Results to make sure the snippet stops draining your RAM by flashing a title.
setInterval(function() {
var title = document.getElementById('title');
if (title.innerHTML === "Original Title") {
title.innerHTML = "New Notification!";
} else {
title.innerHTML = "Original Title";
}
},1000)
<p id="title">Original Title</p>
<small>Because Stack Snippets don't have <title> support, I used a p element there. In real development, replace <p> with <title>.</small>
adding a red dot to the favicon, so the user can see there is a notification when they glance on the tab bar. Code:
setInterval(function() {
var flash = document.getElementById('flash');
if (flash.src == "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==") {
document.getElementById('flash').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdklEQVQ4Ed2RQQ6AMAgE+f8zfJ2/qME4zbqV1MSePDQU2FlKGrHt7dMp4YgWeqpBgwHQE5A9r98KT4IBMJNu8AbGTLVrDNSRKbMIc76AZAZpH+YvBrkbO+me1V21a76RSepMzaNr+gsQpsBF2SvrgB4BiN6/8gPOhlAtW0V8NgAAAABJRU5ErkJggg==";
} else {
flash.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==";
}
},1000);
<small>Once again, stack snippets does not support favicons. In real development, change img to link.</small>
<img rel="icon" type="image/png" id="flash" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==" />
What to avoid:
playing a huge sound when a new notification arrives
trying to force user activation (fortunately, most browsers block this)
lastly, opening a popup window.
So popups are not such of a good idea.
Related
I have a page with a few anchors. When a user clicks an anchor, the anchors work, and user is taken to the correct location.
If a user tries to refresh the page, it retains the anchor ID in the URL window and so naturally, when refreshing, it does not go back to the top of the page.
I think it would be more user friendly to go back to the top of the page on a refresh.
How would I achieve this?
My page currently is primarily using bootstrap, css, jquery, javascript, and php.
I think I need to set up some code so that after clicking the anchor, it removes the anchor from the url window, so that if someone refreshes, they'd be refreshing just the initial page state without an anchor, but I don't know how to begin. Or maybe I'm over thinking this and there's some way to always go to top of page on a refresh regardless of anchors or not. I'm not too code savvy.
Right now my code is like this...
An example of one of my anchors:
<a class="hoverlink" href="#firefighter"><li style="float:left; margin-right:1em; color:white; background-color:red" class="appao-btn nav-btn">Fire Fighter</li></a>
One of the elements for example that the anchor will jump to:
<div style="min-height:10px;" name="firefighter" id="firefighter" class="anchor"><p style="min-height: 10px;"> </p></div>
CSS style on my anchors:
.anchor:target { height:200px; display: block; margin-top:-2em; visibility: hidden;}
Actual Results With My Code: Page Refresh Stays At Anchor Location
Desired Results: Page Refresh Goes To Top Of Page
After some searching, I found a solution that almost works for me:
<script>
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
</script>
But it creates a flickering effect that doesn't look the best such as my example site at
https://graceindustries.com/gracetest/Grace%20Industries%20Website%20Design%202019%20Alternate%20Version/documentation.html
Anyone know how to remove the "flicker"?
You can try this (with the .some-anchor is the class for all a tag that points to some destinations within the page).
$('.some-anchor').click(function() {
var target = $(this).attr("href");
$('html, body').animate({
scrollTop: $("" + target).offset().top
}, 1000);
return false;
});
The "return false;" or preventDefault() event method will prevent the page from flickering. As I observed this does not make the # to the URL so refreshing is not a problem.
Other helpful answer: jQuery flicker when using animate-scrollTo
Navigating to page content using URL Fragments (#someLink) in anchor tags is a core part of the HTML specification. The standard implementation in most (if not all) web browsers is to add the fragment to the address bar. The fragment is part of the URL and therefore, when the page is refreshed the browser scrolls to the element with that ID. Most users will be familiar with this behaviour, even if they don't understand how or why it works like that. For this reason, I'd recommend not working around this behaviour.
However, if it is absolutely necessary, the only way to achieve the result you're looking for is to not use URL fragments for navigation and use JavaScript instead, therefore not putting the fragment in the URL in the first place. It looks like the Element.scrollIntoView() method might do what you're looking for. Rather than having
Click me
you'd use
<a onclick="document.getElementById('element1').scrollIntoView();">Click me</a>
or even better, implement this in an external JS file. If you experience issues due to the element not having the href attribute, you could always add an empty fragment href="#".
You can remove the id from the url right after the user click on the anchor tag
history.scrollRestoration = "manual" will set the scroll to the top of the page on refresh
<a onclick="removeAnchorFormURL()" href="#sec-2">here</a>
<script>
history.scrollRestoration = "manual";
const removeAnchorFormURL = () => {
setTimeout(() => {
window.history.replaceState({}, "", window.location.href.split("#")[0]);
}, 100);
};
</script>
window.location docs
location.href docs
location.replace docs
scrollRestoration docs (check it for info on scrollRestoration compatibility)
I am facing some challenge-
Lets consider I have a menu and under that I have 3 links-
About
Contact Us
FAQs
By default home page is About menu item.
Now when I am clicking on "Contact Us" , I want to open a new tab on same browser window. And without closing this if again I am clinking on "Contact Us" from the first tab, this time I do not want to open new tab because I have already an open tab for Contact us, I just wanted to navigate to the same one which is earlier opened.
How to handle this scenario in jsp.
Is there any way to do this. please help me.
you can always put a name in the target so it will always go to the same window/tab
<a href="somerandomurl.com" target="mywindow">Contact Us<\a>
Its not possible to control this on Internet explorer.
You can however change how IE behaves:
-Internet Options
-Tabs
-Always open pop-ups in a new tab
-Open links from other programs in: A new tab in the current window
target="_blank" will always make sure it opens in a new window
http://www.w3schools.com/tags/att_a_target.asp
It will however refresh the page with the same url
You can have the link return a javascript window object and be able to return to the window anytime you want without refreshing the page
var newtab = null;
function openwindow(){
if (newtab==null) {
newtab = window.open("www.example.com");
} else {
newtab.focus();
}
}
<a onclick="openwindow()">click me</a>
This solution will work if someone refresh the parent page also, it will close the child tab if that tab is already open on refresh of parent page.
Javascript:
<script>
var newtab = null;
window.open('', 'business-list', '').close();
function openwindow() {
if (!newtab || newtab.closed) {
newtab = window.open("/admin/business-list.aspx","business-list");
} else {
newtab.focus();
}
}
</script>
HTML:
<a onclick="openwindow()" style="cursor:pointer">Business List</a>
How can I create a link that doesn't show its information at the bottom left or right (this depends on the link's position) when you hovering a hyperlink?
Lets say that we have a link like this:
Users
and we want to hide its information or more precisely its hyperlink information that's displayed at the bottom left corner of the browser, like the example on the image below:
Now, I know this is possible because Stack Exchange network sites itself uses this for the "Welcome Banner" displayed on the front page for the very first time you visit each site.
If you hover any of the links:
Anybody can ask a question
Anybody can answer
The best answers are voted up and rise to the top
You'll see that no hyperlink information is displayed. Check out image below to see "Welcome Banner"
It cannot be done with pure html and css. You would have to use javascript for this. Showing the link of an anchor tag is just how most browsers work. Also the user expects to be able to see where he will be redirected.
But it can be done: you can avoid using an anchor tag. Then have another attribute hold the href - like "data-href". Then bind a click event on the a tag that redirects based on this attribute.
I would however, not do this - as I am uncertain if crawlers would see the link.
This is how it can be done, but note that snippets cannot redirect outside SO :)
var aTags = document.querySelectorAll('span[data-href]');
for(var i = 0; i < aTags.length; i++){
var aTag = aTags[i];
aTag.addEventListener('click', function(e){
var ele = e.target;
window.location.replace(ele.getAttribute('data-href'));
});
}
span[data-href]{
cursor:pointer;
}
<span data-href="http://www.google.com">test</span>
After digging even more deeper, I've found a more simpler and easier solution for it on this w3schools article and also with the help of this question in SO I could manage it to open on a new window:
<button id="anchorID" >Go to page</button>
$("#anchorID").click(function() {
window.open(
'http://www.w3schools.com',
'_blank' // <- This makes it open in a new window.
);
});
Jsfiddle live example: http://jsfiddle.net/6sLzghhm/
Remove the href="whatever" from the link and open link by calling a function. This completely removes the link preview on the bottom left of the page.
HTML-
<a (click)="openUrl('https://google.com')">
JS-
openUrl(url: string): void {
window.open(url, '_blank');
}
The stackoverflows Anybody can ask a question-Link is not a hyperlink. Its a HTML Element (in this case a li-Element):
<li id="q">Anybody can ask a question
</li>
with the CSS cursor: pointer; and a click-Eventlistener.
The easiest answer is just use-
<p onclick="window.open('Your Link')">Blah Blah Blah</p>
Easy!
You can also open more links at a time-
HTML:
<p onclick="OpenTwoLinks()">Google And StackOverFlow</p>
Javascript:
function OpenTwoLinks() {
window.open('https://google.com');
window.open('https://stackoverflow.com');
}
I have created a html page with the following code in between "head" tags:
meta http-equiv="Refresh" content="5; url= contacts.html"
Now when the above code is added to a web page, It waits for 5 seconds and moves the contacts.html page. If you press the "back" button on your browser, the browser will take you to the previous page which is the "intro page" or the page that I have entered the above code.
But I need to stop that from happening(returning back to the intro page when the 'back' button on the browser is pressed). Is it possible to do so? If its possible, then how? o_O
You can use javascript to do this, but JavaScript isn't foolproof because someone could turn off their javascript and bypass your mechanism.
Add this inside your and add onload="preventHistoryBack()" to your -tag in your content.html:
<script type="text/javascript">
function preventHistoryBack() {
for(var i = 0; i < window.history.length; i++) {
window.history.back(i) = window.location;
}
}
</script>
<body onload="preventHistoryBack()">
This will replace the complete history of the browser with your current location. So when the user hits the back button, it will go to the same page as he is now.
I've got a web page that automatically reloads every few seconds and displays a different random image. When it reloads, however, there is a blank page for a second, then the image slowly loads. I'd like to continue to show the original page until the next page is loaded into the browser's memory and then display it all at once so that it looks like a seamless slideshow. Is there a way to do this?
is the only thing changing the image? if so it might be more efficient to use something like the cycle plugin for jQuery instead of reloading your whole page.
http://malsup.com/jquery/cycle/
Here is the JS needed if you used jQuery -
Say this was your HTML:
<div class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
Here would be the needed jQuery:
$(function(){
$('div.pics').cycle();
});
no need to worry about different browsers- complete cross browser compatibility.
If you're just changing the image, then I'd suggest not reloading the page at all, and using some javascript to just change the image. This may be what the jquery cycle plugin does for you.
At any rate, here's a simple example
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
function changeImage(){
document.getElementById('myImage').src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
setTimeout(changeImage, 5000);
};
setTimeout(changeImage, 5000);
</script>
This changes the image source every 5 seconds. Unfortunately, the browser will download the image progressively, so you'll get a "flicker" (or maybe a white space) for a few seconds while the new image downloads.
To get around this, you can "preload" the image. This is done by creating a new temporary image which isn't displayed on the screen. Once that image loads, you set the real image to the same source as the "preload", so the browser will pull the image out of it's cache, and it will appear instantly. You'd do it like this:
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
var preloadImage = new Image();
// when the fake image finishes loading, change the real image
function changeImage(){
document.getElementById('myImage').src = preloadImage.src;
setTimeout(preChangeImage, 5000);
};
preloadImage.onload = changeImage;
function preChangeImage(){
// tell our fake image to change it's source
preloadImage.src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
};
setTimeout(preChangeImage, 5000);
</script>
That's quite complicated, but I'll leave it as an exercise to the reader to put all the pieces together (and hopefully say "AHA!") :-)
If you create two divs that overlap in the image area, you can load one with a new image via AJAX, hide the current div and display the one with the new image and you won't have a web page refresh to cause a the "bad transition". Then repeat the process.
If there's only a small number of images and they're always displayed in the same order, you can simply create an animated GIF.
Back in the dark old days (2002) I handled this kind of situation by having an invisible iframe. I'd load content into it and in the body.onload() method I would then put the content where it needed to go.
Pre-AJAX that was a pretty good solution.
I'm just mentioning this for completeness. I'm not recommending it but it's worth noting that Ajax is not a prerequisite.
That being said, in your case where you're simply cycling an image, use Ajax or something like the jQuery cycle plug-in to cycle through images dynamically without reloading the entire page.