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
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 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
When I go back to the home page(Either by Clicking on the home page icon or using back button) the constructor/ready methods are not beings called meaning that page is not loaded. It is loaded only once i.e either on refresh or when I enter the url again. Why is this happening?
Yes, a page loads one time. If you want a way to check if page is now in view, you can try adapting the _visibleChanged observer from the Shop app.
I'm using a tabbed application. I want to have a page control in one of my tab views. When I place the page control and link it to another view controller, I can change pages like I want too, but the tab bar disappears completely from the bottom. How can I keep my tab bar to stay even in a different page control view?
Assuming you're doing this in storyboard:
Option-drag from the tab view controller to the target view controller.
A pop up will appear - make sure you pick the 'View Controllers' option under 'Relationship Segue' rather than anything under 'Manual Segue'.
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.