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.
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 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.
I'm not familiar with HTML but I need to do a simple modification to an existing code. I've got an HTML document which can be modified in Word (you can enter text passages).
If you access the document with an Webbrowser, it does automatically refresh every 5 seconds in order to show the latest modifications other users did in Word. The only problem is that it does not scroll down to the latest text passage someone entered.
Currently, I'm using this code for refreshing the page:
<meta http-equiv=refresh content=5>
Is there anything I could simply add in order to make the page scroll down to the bottom every time it refreshes automatically?
Thank you very much!
Try this...
For HTML Part...
<body onload="goDown()">
For the javascript part...
Add jquery.js on the HTML file..otherwise the javascript code won't work..
function goDown(id) {
var div = document.getElementById(id);
$('body').animate({
scrollTop: document.body.scrollHeight
}, 800);
}
This will automatically scroll to the bottom of the page on refresh.
You can add any time delay instead of 800... as per your requirements..
<html>
<script type="text/javascript">
function openWin(url) {
window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=200, left=300, width=870, height=650");
}
</script>
Content 2
Content 3
</html>`
this is my code to open to javascript popup. but when i click content 2 only one popup should open ` but here instead multiple popups are opening. and also parallely content 3 window should open in a diff window.
You don't want to supply javascript on the href attribute, instead use onclick.
Content 2.
Also, you are missing some necessary tags in your HTML document. You are missing the required body tag for example. You can check your document for syntax and to some extend semantic errors by using the W3C HTML validator.
I will be using shopify's system so i am restricted to how and which pages i can edit.
I have one page that is an app but i want that page, on loading, to show a popup disclaimer before they can see the page.
I am told that i can't edit the app page itself but i can add javascript code in the common site footer to check current url and if it equals this certain page, then create a popup.
I have created a page that holds the disclaimer information so i would like the popup window to load this pages' content.
I believe i can load the content using this div tag
div id="popupinfo" pages.disclaimer.content div
I do not know how to add the if statement to check if current url = site.com app.html then div id="popupinfo" pages.disclamier.content div
This site uses their own language called Liquid, hence the double brackets..but any code to pull the content of an html page would work i am sure.
Can i please have some assistance in how i am to
check current page
if page = xxx
best way to create a popup window where the user has to click as yes or ok button
then display the regular page
Thanks in advance!
Brocour
It's only possible to open a pop-up window upon a user-action, for example a 'click' action.
if( document.URL === "myPage.html" ){
// Disclaimer alert
if (confirm('Do you agree to this Disclaimer?')){
// Redirect
window.location = "myNewPage.html";
} else {
// Do nothing
}
}
Try something like this:
<html>
<head>
</head>
<script type="text/javascript">
function poponload()
{
popupwindow=window.open("","mywindow","location=1,status=1,scrollbars=1,width=100,height=100");
popupwindow.moveTo(0, 0);
}
</script>
<body onload="javascript: poponload()">
This is the page
</body>
</html>
You could use the code in this example i made.
$(document).ready(function(){
$('#open_popup').click(function(){
popupwindow=window.open("http://google.com","mywindow","location=1,status=1,scrollbars=1,width=600,height=500");
})
})