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.
Related
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!
Is it possible to have clickable elements? Such as list elements? While using iScroll? Currently it seems like short of a button, or maybe a link I can't click on an element to make it do something. I had a similar issue with inputs as well. But with enough searching I was able to find a solution that helped me get to a place I could work with inputs. Now I have a need to have a scrollable ui while having the ability to click on something thats not a button or a link, such as a li contained within specific uls.
So I am wondering if there is a way of having iScroll tell the difference between a click or tap rather vs a scroll, and as such have it do the action desired.
Many single page websites provide a navigation which moves the current snippet of a document to another one. An example is the site of backbonejs: http://backbonejs.org/
When you click left on a menu point you will see this one in the document.
Another example is the navigation bar of easel.io: https://www.easel.io
Is there a HTML5 API which does this for me or do I have to use js with click handlers?
You don't need any API, that's pure HTML. You have to use anchor tag like this
on
and then you'll have a target element with the id pointed by href
<p id="Events-on">...</p>
I'm trying to figure out a way of clicking an Anchor link TEMPLATES
on the top of my page without having the browser scroll to the point of my anchor.
Sounds redundant huh?
Wait.
My anchor link is inside of a overflow: Hidden text box where clicking the Anchor link
at the top of my page should only raise the anchor in the Overflow text box displaying it's
content, like having a new webpage. From a layout perspective the browser must always be at the top of the page where my form is.
Anyone have a clue?
Thanks
UPDATE:::
Oh spoke to soon, looks like the Css and Javascript - Show and Hide method would be more adequate.
Found here: http://webdesign.about.com/od/dhtml/a/aa101507.htm
Thank internet!
It is very easy do so. What you are trying to do is to have a parent div/view which would act as the main div and all the other divs/views will be loaded or unloaded within it dynamically or so as its children. It would better to employ a design pattern such as "MVC", but it can be done via JQuery straight up. If I was to tackle something like this, I would have a "navigation view" and then content views so when a user clicks on the desired navigation link, that particular view will be loaded or scrolled in. (Of course, you need to experiment and line your depths as desired for the content views).
This is how Flash is programmed. This is a very high level explanation, and I hope it gives you somewhat of an idea about getting it going.
In the snap you can see that after clicking the Add application link, this dialog box in the left hand side is appearing. This dialog box is a .jsp page. I don't have the access to the css files that this jsp is calling.
Now my question is :
I want to pull it down for some pixels, without using the css. Is it possible? if yes then how ? As you can see that due to its appearance in that position the back ground links are not visible.
The links and the form field(search for a text) are not key board accessible. How to make them keyboard accessible?
if u don't have access to .css, then in your present jsp, put style to that modal window if it is having a div. as,
In <div ... style="margin-top: 100px;">
aligning the layers definitely need some style, else browser cannot identify it
I want to pull it down for some pixels, without using the css. Is it possible?
It /might/ be (the specifics would depend on how it was implemented), but CSS is very much the right tool for this job.
The links and the form field(search for a text) are not key board accessible. How to make them keyboard accessible?
That depends on why they aren't keyboard accessible.