We've had an interesting request from a client. They'd like their users to have two windows/ tabs open (one content, one form) which the user switches between.
Parts of the content (which is large) relate to parts of the form (which is also large).
So they'd like the following:
www.example.com/content.html#info1 links to www.example.com/form.html#question1
www.example.com/content.html#info2 links to www.example.com/form.html#question2
www.example.com/content.html#info3 links to www.example.com/form.html#question3
etc. etc.
The problem is if a user links from the content to the form - and then goes back to the content - any other links on content.html will either open another window/tab (if no target reference is used) or if a target reference is used form.html will be reloaded losing form data.
The ideal situation follows:
The user is looking at content.html and clicks a link
Another window or tab opens showing form.html
The user fills in that part of the form and goes back to content.html
The user clicks another link on content.html
The window or tab showing form.html scrolls to the correct anchor point.
I'm not even sure if this is possible but I'm interested in people's thoughts on this problem.
This can be done with basic JS - but rather than writing out the event handlers to listen for that - I just simplified the concept here:
http://jsfiddle.net/fMfgk/
The key is in the name parameter of window.open - keep that the same and you can keep referencing the same window.
Related
I have a back button that is suppose to lead me users back to a page in the history. But the issue is that when you right click and open in a new tab when the user clicks on the back button it does not work.
To clarify i have a page with products and there are buttons that go to the checkout page. On that check out page there is a back button using history.back(). but after testing opening the buy button on a new tab makes the back button unusable.
I need a way to prevents this please thank you.
I don't think there is a function for that, but I see two possibilities:
document.referrer (like APAD1 suggested in the comment section):
The referrer property returns the URL of the document that loaded the current document, hence if you do document.referrer, you will only get the URL from the page where you clicked the button to load the current page.
If you want to be able to not only go to the previous page but also remember the pages loaded before the previous page, then see next option
window.localStorage and document.referrer
Since document.referrer only remembers the previous document's URL, you can use window.localStorage to store the history. You can create an array as a localStorage item and add new URLs as you go forward and remove Urls as you go back to a previous page inside the new tab
More info:
- document.referrer
- document.referrer
- Window localStorage Property
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.
I have an application where you can display 2 kind of content.
There are 3 "main content" pages, which have the urls:
/ (root)
/favorites
/timeline
There is also a settings popup. It goes on top of the "main content". I should be able to deep-link to this setting popup directly. Opening that link directly (like, from an email) should lead to the content displayed for the root / in the background with the settings popup opened in the foreground.
When the settings popup gets closed, it should not affect main content that was under the popup. Url should take back its previous value (the one of the main content: one of / /favorites or /timeline)
Usecase: being somewhere, opening the settings popup, and then closing it.
Be on /favorites
Click on /settings link
Settings popup should open
Click on close button in settings popup
Settings popup should close and url should be /favorites
I'm having trouble implementing this. I've tried to use history.goBack() but it is actually not what I want. On close I don't want to go back, but I actually want to push a new /favorites entry into the history.
Also, using goBack means that if the user comes directly from link /settings, then there's nowhere to go back because there's no back history entry...
I'm also trying to see how I could use history.push() but it seems a bit unnatural to me (and very tightly coupled!) that my settings popup could have to do something like history.push("/favorites") to close itself...
Any idea on how to solve this problem in an idiomatic way?
I'm creating single HTML5 page using bootstrap. I have some menu items like services, portfolio etc. When I click on one of these menu items, it scrolls down and display that particular section but it does not change the url.
for example:
suppose if I opens website, index.html will open. now if I click on "portfolio" link, it scrolls down and display the section "portfolio" but it does not change URL like index.html#portfolio. It remains index.html
refer: www.nuabikes.com/#/home
when you open this site, click on one of the menu item and check the url, it changes automatically. And also when page is scrolled down the URL changes automatically.
I want to add this feature in my page.
When you change the content with Javascript and you want the change to reflect in the address. Its called routing, check it up.
Basically you have three options:
Use a framework such as angularjs or ember who does the routing for you more or less
Us a Jquery plugin that does some this. Such as http://www.asual.com/jquery/address/
Handle the change yourself. See this for reference: Updating address bar with new URL without hash or reloading the page
I have a registration system on my website which uses the common activation email trick.
This email simply contains instructions and a link to the activation page on my website.
So suppose I registered on the site, opened a new tab to check my emails and then clicked on the link, which will open in another new tab, resulting in two tabs open on the site (of which one is btw still telling them to o check their mail).
Is there a way to get the link in the email to open in the first tab on my website? (Or open a new tab if the previous one was closed or moved to another domain).
Thanks for any help/suggestions!
You can name your current window/tab with a JavaScript assignment:
<script type="text/javascript">
this.name = "mainWindow";
</script>
Then you use that name as value for the target attribute in links, like
<a href="nextPage.html" target="mainWindow">...
If mainWindow does not yet (or no more) exist, it will open in a new tab.
Update
The above stuff does not solve the OP's problem, because for links opened from emails, the target attribute will usually not be transferred from MUA to browser (except maybe for webmailers, but we cannot rely on this). So I was thinking of some kind of landing page which uses JavaScript to achieve the desired effect:
If target window/tab `mainWindow` has already been opened, focus it, perform activation there, and close ourselves.
If target window/tab does not exist, perform activation right where we are.
If this worked, you would only see a second open tab for a moment (case 1), before it closes itself. Yet it is not possible to "close ourselves", as I learned here and here - so in the end there would be a superfluous tab left, which should have been avoided. Seems like it cannot be done, sorry!