There seem to be some problems with tabindex in several browsers so I want to work around these issues using javascript/jquery. Specifically FF3.5 (Mac) doesn't accept tabindex or focus on links at all. I have jquery 1.3.2 and js-hotkeys 0.7.9 running on my website.
I have 4 forms on 1 page which I can switch between using a link. Now when the page loads I what 1 of the links to have the focus using it's id. Then I want to be able to tab between each link to display each form.
Stripped down code looks like this:
HTML
<nav id="postNav">
<ul>
<li class="Nav1">1</li>
<li class="Nav2">2</li>
<li class="Nav3">3</li>
<li class="Nav4">4</li>
</ul>
</nav>
<form class="postForm" id="post1">
</form>
<form class="postForm" id="post2">
</form>
<form class="postForm" id="post3">
</form>
<form class="postForm" id="post4">
</form>
Jquery
$(document).ready(function(){
$("#postNav ul li a").click(function(event){
var postOptionSelected = $(this).parent("li").attr("class").substr(3);
$("form#post"+postOptionSelected).show();
$("form.postForm:not(#post"+postOptionSelected+")").hide();
event.preventDefault();
});
});
This isn't a Firefox issue. It's a system setting for Mac OS. In System Preferences, Keyboard & Mouse, and Keyboard Shortcuts, there's a Full keyboard access setting that allows users to configure whether they want Tab to enable changing keyboard focus to text boxes and lists only or to all controls. It is set to text boxes and lists only by default.
Safari on Mac OS has a setting in Safari, Preferences, Advanced, Press Tab to highlight each item on a webpage to override this behavior.
I think you forgot the "Form" after "post":
$("form#postForm"+postOptionSelected).show();
$("form.postForm:not(#postForm"+postOptionSelected+")").hide();
Related
Hi I have this div which is skipped when we press tab, other UI elements come into focus but not this one, Which directive do I need to add to this so that it comes into focus when we navigate UI using keyboard
<div class="vertical-menu">
<a ng-class="{active: Page == 'homeview'}" ng-click="Page = 'homeview'">
Home
</a>
</div>
There are html elements without tabindex enabled by default, and the div element is one of these.
To enable it, you must set the tabindex attribute to something >= 0:
<div tabindex="0"> ... </div>
Here you can find more information.
As a preface, I am using PhoneGap. When I click on a Category Title, I have taken that title and set it in sessionStorage. Now, I want to set the "back" button of a new PhoneGap page (which displays some information contained in that category) to that Category Title. The HTML code is shown below. To be specific, I want to change the text of the "a" element within the "header" element.
I guess a part of my question is, does the fact that I am using PhoneGap change how I can access the anchor tag? I've been trying to set the back button text right after the Category has been selected/clicked on. I have tried multiple things like:
$("adviceBodyNavbarHeader a").text(sessionStorage.getItem("catTitle"));
but I can't quite get it working, and it is getting quite frustrating =/
<div data-role="view" id="adviceBody" data-title="Advice Body" data-show="GetAdviceBody" data-transition="slide">
<header data-role="header" id="adviceBodyNavbarHeader">
<div class="navHeader">
<a class="nav-button" data-view="adviceTitles" data-align="left">Back</a>
<span id="adviceTitle" class="navTitle"></span>
</div>
</header>
<ul id="advice-body" data-role="listview">
</ul>
</div>
Your selector is wrong. You try to select a html element called adviceBodyNavbarHeader.
What you want to do is this: $('#adviceBodyNavbarHeader').text(sessionStorage.getItem("catTitle"));
Hope it helps.
Edited my post due to late brain inactivity.
I'm using a basic implementation of Jquery UI Tabs that are working fine but I want to set (or reset) the active tab dynamically based on a user action.
How can I set the active tab based on a querystring value? With my previous tab solution I was able to pass a querystring value and set the active tab when the page loaded. (I had to abandon this older solution due to other technical challenges.)
When the user selects the Save button in my browser application, and the browser page reloads, how can I maintain focus on the tab they were on before they pressed save?
How can I set the active tab when a user returns to the Tasks page of my browser application? For example, all within my web application, if the user browses to the Projects page and then returns to the Task page, how can I reset the tab they were previously on?
Javascript:
$(function() {
$("#tabs").tabs();
});
HTML Example code:
<div id="tabs">
<ul>
<li>Description</li>
<li>Action</li>
<li>Resources</li>
<li>Settings</li>
</ul>
<div id="tabs-1">
<p>Description content</p>
</div>
<div id="tabs-2">
<p>Action content</p>
</div>
<div id="tabs-3">
<p>Resources content</p>
</div>
<div id="tabs-4">
<p>Settings </p>
</div>
</div>
I solved my own jQuery tab issues after additional research and trial and error. Here's a working example. I don't know if this is the most elegant solution but it works. I hope this helps.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.10.1.custom.min.css">
<script language="javascript" type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs({active: document.tabTest.currentTab.value});
$('#tabs a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
document.tabTest.currentTab.value = curTabIndex;
});
});
</script>
</head>
<body>
<form name="tabTest" method="post" action="tab">
<!-- default tab value 2 for Tab 3 -->
<input type="hidden" name="currentTab" value="2"/>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">Tab 1 Content</div>
<div id="tabs-2">Tab 2 Content</div>
<div id="tabs-3">Tab 3 Content</div>
</div>
</form>
</body>
Here's how I answered each of my previous questions.
1. How can I set the active tab based on a querystring value?
I ended up not needing to use a querystring. I added the #tabs-x to the end of my url. For example, if I wanted a link directly to Tab 3 I coded a link as:
localhost:8080/pm/detail?prjID=2077#tabs-3
2. When the user selects the Save button in my browser application, and the browser page reloads, how can I maintain focus on the tab they were on before they pressed save?
I solved this by capturing the click event, getting the current tab index and then setting a hidden forms element "currentTab" to store the current tab value. Then back in the Java Servlet I retrieved the hidden forms elements and reset it when the page reloads.
$(document).ready(function() {
// Set active tab on page load
$("#tabs").tabs({active: document.tabTest.currentTab.value});
// Capture current tab index. Remember tab index starts at 0 for tab 1.
$('#tabs a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
document.tabTest.currentTab.value = curTabIndex;
});
});
3. How can I set the active tab when a user returns to the Project page of my browser application? For example, all within my web application, if the user browses to the Task page and then returns to the Project page, how can I reset the tab they were previously on?
This is solved by setting a session variable in my Java Servlet to store the hidden forms element "currentTab". That way when I return the Project page, I can reset the "currentTab" value the same way I set it in the Save forms action.
I hope this example can help someone else with their jQuery tab issues!
jQuery UI Tabs can take in options. The ones that are particularly useful for your questions are cookie and selected. You can read about the options here.
var currentTab = $('.ui-state-active a').index();
currentTab = $('#divMainContent').find('#sel_tab')[0].value;
Note: Where Sel_tab is hidden field.
onclick on tabs achor link assign value to hidden feild
I have a listview in jQuery mobile where each entry contains several lines of text.
Clicking on the entry is supposed to replace some parts of the text with a <textarea> to make it editable. Clicking on the entry again should again replace the textarea with plain text (now edited).
While editing the text, the user should be able to click around within the textbox to select parts of the text or move the cursor around. To prevent click events from the textarea from bubbling, I use stopPropagation() on the event and that works quite nicely.
However, while this works in Chrome & Safari, both Firefox and Internet Explorer do not move the cursor nor let the user select parts of the text within the textarea.
Is there something I am missing here? (For Firefox, I am using version 19.0.2 on Windows 7, if that is relevant. I have tried using preventDefault or returning false, but that did not work - and why should it?)
I have created a JSFiddle here
The html code is
<ul id="listid" data-role="listview" data-filter="true" data-iconpos="center" data-split-icon="arrow-u" data-theme="c" data-split-theme="b" data-inset="true">
<li><a href="#" id="link1">
<h2>Title</h2>
<p>Here is some item<br />with several lines<br />
<span id="comment1">And this line is supposed to be editable</span>
<textarea style='display: none; width: 95%;' id="textarea1"></textarea>
</p></a>
This does something else
</li>
</ul>
and the respective JavaScript is (loaded on body.onLoad here, but that is just for the JsFiddle):
window.toggled = false;
$("#link1").click( function(e){
var textarea = $("#textarea1").toggle();
var comment = $("#comment1").toggle();
if(window.toggled){
comment.html(textarea.val());
}
else{
textarea.val(comment.html());
}
toggled = !toggled;
});
$("#textarea1").click(function(e){
if(console && console.log){ console.log(e);}
e.stopPropagation();
});
Please ignore the not-quite-so-elegant solution for toggling the textarea.
IE is not happy with the textarea inside an anchor tag. See http://jsfiddle.net/zCfRu/
<a href="#" id="link1">
<h2>Title</h2>
<p>Here is some item<br />with several lines<br />
<span id="comment1">And this line is supposed to be editable</span>
</p>
</a>
<textarea style='display: none; width: 95%;' id="textarea1"></textarea>
I'm having a bad time with the buttons in KendoUI. When I debug with Ripple, I can see the buttons, but when I try on my phone (an Atrix with CyanogenMod7), the buttons just does not show!
Here's the code I'm using:
<div data-role="view" data-layout="listado-layout" id="main-update" data-title="Actualizar Base de Datos">
<ul data-role="listview" data-style="inset">
<li><center><input type="button" onclick="updateDB();" value="Actualizar"></input></center></li>
</ul>
By the way, I'm making an application with PhoneGap, and I cannot see the buttons from the browser or phonegap.
This looks like a bug in Android's browser - a button in a transformed element looses its default styling and has only black text on transparent background and looks like it disappears. As a workaround you can use data-role="button" to use the Kendo UI Mobile styling, like this:
<li><center><input type="button" data-role="button" onclick="updateDB();" value="Actualizar" /></center></li>