I want there to be anchor links on a webpage where when I click on the link, it brings me to a certain part of the webpage.
However, when the user click the back page button, it is now bringing the user to the previous part of the page, instead of the previous page.
How should I implement the link so that it does bring the user to the previous page instead of the previous part of a page?
link
I wonder if you could do something like what is described in the top answer of this post. Put the following into the 'onclick' of your anchor, and it'll scroll to your div of choice, without changing the URL (and hence preserving back-button functionality).
document.getElementById('youridhere').scrollIntoView();
Don't forget to take out the "href=#somepart".
That is how the anchor tags work. Your best bet is to read here and use it to remove your anchor jumps from browser history.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
Related
I know that one type of link you can have is to a place within the page, using <a href="#id_here">.
I recently came across a carrd website, where clicking any of the links appears to take you to a new page, but I believe it's actually linking to an id (after clicking a link, you can see it's /#id rather than /someaddress). But it appears like a separate page, because you can't just scroll back up like usual when you use a link to an id.
I'm wondering how this works; I haven't been able to find anything on Google.
(edit: grammar)
Go to the site, click on the Who can use item in the menu on the 'front page' and have a look at the code through your browser's dev tools (not the source, the elements).
You'll see there are several sections looking like this sort of thing:
<section id="sources-section" class="inactive" style="display: none;">
but the one you clicked looks like this:
<section id="who-section" class="active" style="">
and in that section you'll see the text you can see on the screen.
Basically what they are doing is listening for clicks, and when they get one, use Javascript to set all sections to inactive class and display none style (I don't know why they need both) and set the one clicked to active class and remove the display none.
If you use your dev tools to unset the display none/inactive in another section you'll see that section's text displayed.
They're listening for the navigation to the bookmark in JS. From there, they dynamically set the display value on the other section tags on the page. In other words, this is done with JS and isn't a normal function of the bookmarks feature. If you want to do this, you'd need to make a JS script that hides the rest of the page when you jump to a bookmark.
I have an iframe which simply displays a slideshow of our different products. It's hosted on the same server, it was just easier to use an iFrame.
Each slide contains a link to the current product on the slide, i couldn't use an href on the anchors, so instead i used " onclick='window.top.location.href =...' ". (This also prevents right clicks for the links.)
So my question is can i enable middle mouse clicks (and right clicks) for the links so that we can open them in a new tab, or would i have to go back to using an href.
Note - The reason i used onclick instead of href, was because with href the link would open inside the iframe instead of changing the top page. Is there another way to circumvent this and still keep normal clickability? Thanks in advance guys :)
Why you are not using a tag with target attribute?it will open link in new window.
add target="_blank"
When a link is clicked and the browser redirects to another page the highlighting is maintained when revisiting the original page. This allows the user to know which links she has clicked even after they have left the page. Is it possible to apply this same functionality to a button?
This question already has an answer here:
Why are buttons discouraged from navigation?
(1 answer)
Closed last year.
The community reviewed whether to reopen this question last year and left it closed:
Original close reason(s) were not resolved
From my understanding, buttons are used to carry out functions and links are used to navigate the user to a different page. But what is best practice in terms of opening and closing a modal?
<a id="testModal" href="#">Open Modal</a>
or
<button id="testModal">Open Modal</button>
<button>
Change the <a href="#"> to a <button> and put your event handler on it.
Some more context on which elements belongs where....
Does the Control Take Me to Another Page? Use an Anchor
If, when clicked, tapped, or activated by keyboard or voice (or insert novel interaction method here), the user is whisked to another URL (including an anchor on the same page), then use <a href="[URL]">. Make sure you use the href attribute and that it has a real URL, not a “#” (otherwise you’re probably relying on JavaScript, which is not at all necessary for a hyperlink). If an href points to just a “#”, then you’re probably doing it wrong. If it points to a named anchor as part of your progressive enhancement efforts, then that’s totally valid.
Does the Control Change Something on the Current Page? Use a Button
If, when activated, the user is not moved from the page (or to an anchor within the page), but instead is presented with a new view (message boxes, changes in layout, etc.), then use a <button>. While you could use an<input type="button">, it’s more likely you’ll get into conflicts with pre-existing styles and subsequent developers (like me).
Does the Control Submit Form Fields? Use a Submit
If, when activated, information the user has entered (either by manually typing or by choosing items on the screen) is being sent back to the server, then use an <input type="submit">. This has better live within a <form>. If you need more styling control or have to embed more than just a simple text string, use a <button type="submit"> instead.
Keyboard Considerations
Think of keyboard users for a moment. A hyperlink can be fired by pressing the enter key. But a true button can be fired by pressing the enter key or the space bar. When a hyperlink has focus and the user presses the space bar, the page will scroll one screenful. If there isn’t more to scroll then the user just experiences nothing. Given a set of interface elements that look the same, if some work with a space bar and some don’t, you can’t expect users to have much confidence in how the page behaves.
I think it’s also worth mentioning that events triggered by a space bar only fire when the key is released, whereas using the Enter key will fire the event as soon as you press the key down (prior to releasing it).
I think there are two possible cases.
Your content is only visually hidden in page or visible in page (can be read by screen readers) and can be hash linked, then an anchor tag might be appropriate (this case is not so common, eg: use case is if you are highlighting a paragraph or image on the page as a modal).
In almost all other cases, your modal is loaded on the same page and is in no way navigated using a url link (except through ajax for accessing data possibly, which doesn't count). Hence it is a custom functionality and a button is the appropriate choice.
Sort of by definition, a dialog is something that will pop up over the current window. You're not really leaving the window, it's just temporarily unavailable. Once you're done with the dialog, you typically go back to the window. So in that respect, you don't want to use a link because you're not going to another page. You're doing some action on the current page. Use a button.
When using a screen reader, I will often bring up the list of links (Ins+F7 in JAWS) to see what pages I can link to. I'll also bring up a list of buttons (Ctrl+Ins+B) to see what actions are available on the page. I would expect the action to bring up a modal dialog to be in my button list.
Is there a way to make it so the page doesn't shoot to the top of the site when clicking different links in the navigation bar?
e. So say I'm browsing my site and I'm scrolled down a little bit. Then I click on a link that navigates to a different page on my site. It automatically scrolls to the top. Is there a way to make it not do that.
instead of simply linking to a page, you could link to an anchor on that page using
link text
if that anchor is placed properly on the target page, you will not experience the jump back to top every time you link to another page. hope this helps
If this is the problem I'm picturing:
Change your links to point to <a href="#"> or <href="javascript:void(0);">
If you're going to different pages, you can use a link like:
My Link
Down in the page:
<div id="Section5">
Stuff!
</div>
This is the way that the web works. But still you can do a few work a rounds but each one will take a little work.
First option:
When you click on any link on the page, get the margin of the link from the top, then add it as a parameter to this link, and only then do the navigation. (the format of the line will be like page.html#margin-from-top).
Then in the new loaded page, you can look for this value and do the scroll. (I prefer the scrolling with a little duration).
Second option:
Another idea is to stay always on the same page and only change the content of it. you can do that with a little effects too.
It seems, too, like you might want to use a mooTools ScrollTo affect or possibly even invoke an AJAX method like SWFAddress.
Depending on exactly what you're trying to do, you may be able to accomplish it without using any fancy javascript, but it will depend on the inclusion of labels/etc. on your target page (as has been mentioned before).