I'm trying to create a popup menu with some kind of navigation inside it. For this, I'd like to mimic the style of the UINavigationController on iOS. If you're not familiar with it, it creates a hierarchal menu with sliding pages, like this:
(source: apple.com)
I'd like to make something similar in HTML and JavaScript. The elements I'd like to take from iOS design are
the sliding animation that occurs when going between pages.
the back button that appears once navigation has occurred
I need something that doesn't involve page refreshes or moving between pages, but the menu only needs to be one level deep. Has anyone created this type of menu in JavaScript? I'd prefer vanilla JS, but it's not a requirement.
Build an hash from that menu, then iterate trough it like this.
At first you display the first level of the hash.
When the user clicks a link navigate in the hash at that position, fetch all it's children's and populate another instance of the menu behind the visible one.
Then it's a simple job of moving the new menu to a side so that it's visible.
And repeat...
As for the back button, you just fetch the parent of the current position i the hash...
Related
I am trying to design a website. I decided to work with this template from templatemo.
I am currently trying to add a reference to a specific part of the website (e.g. Contact) in the "normal text area". I tried to just add a href in the text, like this:
Contact me via the <a href="#contact_form" >Contact Form</a>
This does not work properly. If I click on the reference, the whole layout is somehow messed up. I assume this is because the click on the link does not trigger the javascript function for the "changing the slide" properly.
My question is now:
How can I trigger the javascript functions, for "changing the slide" to a specific part of the page in regular text areas?
This animation is already implemented and works properly (e.g. it is triggered when clicking on the buttons in the navigation bar). However, I have no clue how to use the same animation for jumping to a part of the page outside of the navigation bar.
I hope you understand my problem.
Thank you in advance for your support!
Ideally, you would have to modify the page contents in the respective location in the HTML file. The way this file is constructed is that you have a ul list with li elements that indicate each page, and each li element is given a numerical value that represents its position in the list (e.g. 1, 2, 3, ...). Make sure to edit and add any new pages in this part of the markup. If you want to adjust or trigger any page transitions, edit the data-no value in the <a> tag in #tmNavbar to the position of the page in the list.
If you want to trigger the transition from elsewhere in the website, I would recommend just clicking on the respective nav-item using Javascript. For example,
$('.nav-item').get(i).click() /* i is the data-no value` */
I am trying to implement "Anchor Jumping" functionality using JavaScript and Angular 2 in my application, Means user can jump across the section within a page.
As per the client requirement, User can jump(Navigate) the section using of pressing Ctrl+Shift+Left/Right Arrow key.
Here, I add one snap to clear out the question as below.
As an example, Suppose first time focus on Menu and user press the Ctrl+Shift+Right Arrow at that time focus should be go to next element item(i.e. Breadcrumb section or any section).
I am very confuse about, How to manage the dynamic loading content? (How can I count this dynamic content in my section?)
Please suggest any idea to achieve this functionality.
What you need is a focus manager. I wouldn't bother writing one from scratch, Angular Focus Manager is one example of how to solve this problem. It also incorporates Mousetrap.js, which adds shortcut directives.
Your dynamic content can always be wrapped in something (even a div) that has its focus managed.
I hope this helps!
Trying to piece together js knowledge as I go here. But I have a website that will be relying on a tabbed (just 2) concept to flip between the companies two services.
So when navigating to the page, they user will be directed to Company1 and I would like to have a tab of Company 2 on the right. It will be the same domain, just domain.com#company2.
When they navigate to Company 2 directly (via domain.com#company2) I would like the tab on the right to link to Company 1.
So basically, it looks like js is the only way to do this. Something that could read the active id and style the tab accordingly.
The main function would be based on click. So if you click the tab, it switches to the non-active companies tab.
The tab itself will remain the same, all I need to change is the href.
Thanks in advance guys!
I think you could use CSS float :
$("#tab1_id").click(function(){
$(".2tabs_class").css("float","left)
})
$("#tab2_id").click(function(){
$(".2tabs_class").css("float","right)
})
Make sure 2 tabs are inside a div
I'm making a website where you have a pretty thin vertical bar all the way to the left that has the main menu on it. This is the only contents you have on the website. Then, when you click a menu item, another bar pops up to the right of the main menu bar. This is the sub-menu. Then you can click on the sub-menu, and the last menu appears. When you click an item on this menu, you get a big box to the right of the last menu that contains the contents of the page. This box often contains a picture gallery or a list of videos (like when you search YouTube).
But, I want this to be very responsive, so I need to cache the menus in localStorage. And so I want to use a kind of MVC pattern. And trying with Spine.js, I loaded the menus into a model MenuModel. Now, I don't want to load in all 1000 menu objects that are available at once, so I need a way to preload just the ones I need.
As I see it, Spine.js isn't a good fit. Am I doing something wrong, or isn't Spine.js made for loading menus etc. like I do here? I mean, no record is ever added client side, neither modified or deleted. Only fetched from the server and stored in the model. Is Spine.js more for apps where you actively change records and syncronize with the server than what I need?
Is it a better idea just to write my own classes?
Not sure about Spine.js but you can do something like in Backbone by creating a model Menu.
Each Menu has reference to parent menu (apart from the one which is on the top).
Whenever you fetch menu items, you store them in local storage.
Whenever user clicks on a menu item, you first check if it's stored in local storage. If yes, show them from local storage else fetch them from server.
Saying that you'll have to think of a strategy to find out when to update your local storage.
I'd like to help the site visitor navigate a page on my site. For this I'd like to have a javascript auto navigation that will place the pointer on different page elements. Is there a way in javascript to place the pointer on the desired page elements: div, button, span...?
Similar question asked here : Move Mouse Cursor Javascript
Basically your options are using the method in the linked post, or using libraries like http://amberjack2.org/ to visually guide your users around the page / site.
you can not move the pointer using javascript. you can only set the focus to an element of your choice.