I'm trying to hit this result: i have 2 div with their tab-index order in the same page, and when for example i'm navigating in the first div and i reach the last tab-index of that div, my focus don't go on the next div but restart from first tab-index of that div. Is this possible?
Example:
<div class="main">
<div class="container1">
<input tabindex="1"/>
<input tabindex="2" />
<input tabindex="3" />
</div>
<div class="container2">
<input tabindex="1" />
<input tabindex="2" />
<input tabindex="3" />
</div>
</div>
Can you post your code?
Are you using tabindex="0" on all of them or are you setting a specific order by using tabindex-"1", tabindex="2" etc.?
My suggestion without seeing your code is that you are trying to put tabindex on an element that doesn't allow it.
Use tabindex="0" on elements like <div>, <span>, <p> that are not keyboard focusable. They will not work with tabindex="1" etc. If you are going to do this though you should specify a role="button" etc. on that element to let a screen reader know what the purpose of the focus is for example if the user is blind.
It's hard to answer this question for you without seeing the code.
Hope this helps! If you need more help, please post your code and I'd be glad to help more.
<div role="button" tabindex="0">A button</div>
<div role="link" tabindex="0">A link to somewhere</div>
Related
I Try to find a solution for a client but i wont get out.
The problem is that i cant edit the HTML, so i try to get a work-around with Javascript
<!-- This section must be hide in CSS or something -->
<div class="coupon-container">
<input class="input-text" type="text" id="coupon_code" name="coupon_code" value="">
<div class="btn-apply">
<button type="button" title="Toepassen" class="button-coupon medium" onclick="discountForm.submit(false)" value="Toepassen"><span><span>Toepassen</span></span></button>
</div>
</div><!-- end of section Hiding CSS -->
</div>
This is the
HTML code and i want to add a
onclick="new_function();
OLD CODE
<div class="coupon-container">
NEW CODE
<div class="coupon-container" onclick="new_function();>
Is this possible? Keep in mind that i need a Javascript, so i cant edit the HTML directly from CMS.
I Hope you guys can help me out.
Kind regards
You can do this.
document.getElementsByClassName("coupon-container")[0].setAttribute("onclick", "new_function();");
I have a chat, which has a textarea part for typing. Works good.
I open a modal, the textarea still remains above, due to z-index. However it doesn't get focus when I click with the mouse. Looks like it's disabled.
It doesn't work also if I open the chat after I opened the modal.
Any ideas?
The chat window has absolute positioning.
For some reason that I don't know, Boostrap don't permit do that.
I make some think like this using Bulma ( a pure css lib ):
<div class="container" id="app">
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<!-- Any other Bulma elements you want -->
<table>
<tr>
<td>Jhon</td>
<td>Hi</td>
</tr>
</table>
<input type="text" class="input" />
</div>
<button class="modal-close"></button>
</div>
<textarea style="position:absolute;z-index: 9999" name="" id="" cols="30" rows="2"></textarea>
<br /><br /><br />
<p>
<button class="button" id="showModal">Show</button>
</p>
</div>
OBS: Bulma don't have JavaScript code, and you should make the transition of classes yourself.
JavaScript:
$("#showModal").click(function() {
$(".modal").addClass("is-active");
});
$(".modal-close").click(function() {
$(".modal").removeClass("is-active");
});
http://codepen.io/edgardleal/pen/GWWKoO?editors=1010
I am using Foundation CSS and need some help on the sections object. I have a tabbed section on my page
<div class="section-container tabs" data-section="tabs">
<section id="section1">
<p class="title" data-section-title>Step 1</p>
<div class="content" data-section-content>
<input type="text" id="firstname" placeholder="First Name">
</div>
</section>
<section id="section2">
<div class="content" data-section-content>
<input type="text" id="phone" placeholder="Phone">
</div>
</section>
What I am trying to do is have a next button on section1 that would take me to section 2 by using this
<button class="small button" id="next1" onclick="document.getElementById('section2').className ='active';document.getElementById('section1').style ='padding-top: 49px';document.getElementById('section1').className ='';document.getElementById('section1').style ='';"> Next </button>
This however is not working. What happens is that by clicking the button it takes me to section 2 for a brief section and then brings me back to section 1. Any help on how I can nail this.
Few things are missing and others not understood.
You need to give the focus. with focus(); so it takes you there.
You cannot change className if your element has no class attribute. You need to create it first or leave it empty in html.
To change style via javascript, you need to call the rule and then give it a value. element.style.paddingTop='49px';
To set focus on something else than form element or links, you may add the attribute tabindex="0" to the element your want to catch focus state.
a few change to your code , so you can experiment some of the things i say. http://codepen.io/gcyrillus/pen/pCikI
I wish you success in learning :)
I have a form that uses tabindex to logically traverse through the input fields in the form. However, within my form there is a jQWidgets grid that also applies tabindex to its elements. As my input fields are nested within div's, the tabindex order is being messed up so instead of traversing in the correct order, when using the Tab button, the focus jumps about the page.
Can anybody see of a way, either using HTML or Javascript (jQuery), to prevent this from occuring?
I have tried nesting the grid further down the DOM but this had no affect...
The structure of the HTML must remain the same for all of the input fields
You can see this here: http://jsfiddle.net/TN7xL/1/
Or alternatively, here is a sample of my code (I have stripped out all irrelevant id's and classes):
<form>
<div class="row">
<div class="column">
<div>
<label for="foo">Foo</label>
<div>
<input type="text" id="foo" name="foo" tabindex="1" />
</div>
</div>
<div>
<label for="bar">Bar</label>
<div>
<input type="text" id="bar" name="bar" tabindex="2" />
</div>
</div>
</div>
<div class="column">
<div>
<label for="name">Name</label>
<div>
<input type="text" id="name" name="name" tabindex="3" />
</div>
</div>
<div>
<label for="surname">Surname</label>
<div>
<input type="text" id="surname" name="surname" tabindex="4" />
</div>
</div>
</div>
</div>
<!-- THERE ARE MORE ROWS AND COLUMNS IN MY FULL SCRIPT -->
<div id="grid" class="row">
<!-- THE FOLLOWING IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
<div tabindex="0">
<div tabindex="1">GRID HERE</div>
</div>
<!-- THE ABOVE IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
</div>
<div class="row">
<div class="column">
<div>
<label for="field">Another Field</label>
<div>
<input type="text" id="field" name="field" tabindex="5" />
</div>
</div>
</div>
</div>
</form>
My aim is to effectively ignore the tabindex's that are set by the jQWidgets grid, but I cannot see a way to do this...
Just because you don't know what jqWidget tabindex is set, I use this strategy:
1- I give my tabindex order to every input that I introduce,
2- I give them a "tabindex" class,
3- I remove every tabindex that is not what I have introduced after every jqWidget initialization.
<html>
<input type="text" class="tabindex" tabindex="2" />
<div id="split"> ... </div>
<script>
$("#split").jqxSplitter(settings);
// Delete every tabindex introduced by jqWidgets
$("[tabindex]:not(.tabindex)").removeProp("tabindex").removeAttr("tabindex");
This solution works pretty well with almost every jqWidget component.
In grid or in every loop situation you can use knockout with data-bind "attr: {class 'tabindex', tabindex: $index}"
Known Bug:
If you have a Navigation Bar, tab jumps from it to address bar.
my 2 cents
N
You may remove the auto-generated tabindex by using the jQuery's removeAttr method. http://api.jquery.com/removeAttr/
After looking into this, it is clear that the only solution is to get rid of the tabindex's on any elements within the grid. I therefore implemented the following code to select any element within the grid (when it is initiated) that has a tabindex set, and then I remove it.
ready: function(){
// Remove any tabindex's set by the grid
$('#grid [tabindex]').removeAttr('tabindex');
}
$(document).ready(function(){
$('input').removeAttr("tabindex");
});
I made little jquery script for checking if input box value bigger than 5 .but I have 2 tag with an id and only one of them works.
<div id="register">
<form id="register">
<input id="first" type="text" /> <a id="first" ></a> <br />
<input id="second" type="text" /> <a id="second" ></a>
</form>
$('input').keyup(function(){
if($(this).val().length<5)
{
$('a.first').text("Please fill");
}
if($(this).val().length<5){
$('a.second').text("Please fill");
}
});
But it shows only first <a id="first"></a> tag. Second tag not visible
You just need to change your <a>'s to use classes:
<div id="register">
<form id="register">
<input id="first" type="text" /> <a class="first" ></a> <br />
<input id="second" type="text" /> <a class="second" ></a>
</form>
</div>
The jQuery selectors you're using:
$('a.first')
$('a.second')
Are looking for an <a> with a class. If you were trying to look for an <a> with an id, they would need to be as follows:
$('a#first')
$('a#second')
change the ID of register , its not correct to have two identical ID's in the same page ,
after that everything should be working fine
cheers
Agreed with not having duplicate id's. Easier to keep track of, and cleaner code. My two cents :), after having to refactor a chunk of code at work recently that had duplicate id's that failed to work in IE. Lesson learned!