On my website there is a contactform on the bottom of the page. When it is filled in and a user pressed the submitbutton, the page reloads but shows the top of the page. What do I need to adjust so when a user pushed the submitbutton, the page reloads and goes to the bottom of the page?
Thanks!
You have a few options:
Set the hashtag
You can use jQuery and use .scrollTop()
Or native with window.scrollBy(0,9999);
Submit the for through Ajax so you don't have to refresh the page.
Put a named anchor to where you want to go after form sending:
<a name="afterform"><h1>Example: a heading</h1></a>
And then add that as a hash to the form action:
<form action="yourpage.html#afterform" ...
Related
I have a button on a page (page 2) that links to another page (page 1). On page 1 I have a modal. How would one set the button on page 2 to link to page 1, and automatically pop the modal. I understand a normal link would be href='/page1', I have tried href='/page1#modal', but this does not work. I am running jQuery if this would be the route to go - I have seen some solutions around this but very outdated.
If this is even possible, any help or pointers will be much appreciated.
Add #modal part to the href in page2, and check URL on page1 load and if it contains #modal, show modal.
$(document).ready(function(){
if(window.location.href.indexOf('#modal') > -1)
$('#myModal').modal();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
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)
On my WordPress site, I have a notification bar at the top that is displayed to unregistered users. When user clicks a close button, the notification div is simply hidden with display: none;.
The problem is that whenever the user refreshes the page or goes to a different page, it reappears.
My question is, what is the best way to keep this bar always hidden once user clicks the close button? What is good practice in this scenario?
One possible solution is to use local storage:
html
<div>test</div>
<input type="button" value="hide" />
js
$(":button").on("click", function(){
$("div").toggle();
localStorage.setItem("hide", $("div").is(":visible"));
});
localStorage.hide == "false" ? $("div").hide() : $("div").show();
fiddle
I have two html pages: /algorithrms and /algorithms/add written in scala template. The route file contains following lines:
GET /algorithms controllers.Application.algorithms()
GET /algorithms/add controllers.Application.newAlgorithmForm()
I want to add a button in the page /algorithms and when I click that button, it simply redirects to the second page /algorithms/add. I know how to do this in JavaScript. I just want to call an action from the button click and then let the action redirects me to the landing page.
So I added the following code in the first page's html template:
#form(action=routes.Application.newAlgorithmForm()){
<input type="submit" value="Add">
}
It worked, but the landing url is: http://localhost:9000/algorithms/add?
I don't want that question mark. I want to know 1) what I did wrong to cause the question mark to generate and 2) how to remove it?
I do not know if you use Twitter bootstrap, but hyperlinks can look like buttons too, and the redirect to another page sounds to me like a plain hyperlink:
<a class="btn" href="#controllers.routes.Application.newAlgorithmForm()" >
#Messages("add.newAlgorithmForm")
</a>
when you click on a link that goes to same page where the link is, how to keep the view of the page?
By default it goes to the top of the same page.
Regards
Javier
One way to do it is to add # at the end of the href attribute on the links pointing to the current page, either manually or via javascript. I don't think it's a nice way to do it, though...
If you really need this, you could also "disable" the navigation for links pointing to the current page, so that clicking on a link to the current page would have no action...
Something like that should work in jQuery :
$('a.current').click(function(event){
//cancel default click action
event.preventDefault();
}
assuming that the links pointing to the current page have the CSS class current
Can you be more specific? What do you mean with "view of the page"?
Here is a general description of anchors:
If you have a link Link then you need an element on the same page with id="someTarget". When you then click on the link, that element will be scrolled to the top of the element.
EDIT:
Ahm, you are talking about a JavaScript link. In that case you need to have the Javascript retur false so that the default action (namely following the link) is ignored:
<a href="#" ... onClick="myJqueryFunction(); return false;">