Develop Reference

prevent tabbing on the icon when filling some input-fields in blazor

I'm working on a project where you can insert your working hours, in which you have to insert start- & end times. But after you put in the start time and tab to go on, it does focus first on the icon, which comes from the
<input type="time">
I want that the tabbing only hits the input area, not the icon next to it.
This is the current state:
example input field:
<div class="text-section">
<label for="startTime"
class="text label without-margin">#((MarkupString)loc["StartTime"].ToString())</label>
<div class="property-container-three">
<div class="property-icon">
<div class="icon solid start" tabIndex="-2">#Icons.Startzeit</div>
</div>
<input class="input-text nomargin centerInputContentVertical"
type="time"
id="startTime"
#ref="startTimeElement"
#bind-value="blazorStartTime"
#onblur="HandleStartTimeSet">
</div>
</div>
I already tried everything with tabindex:"-1", it just makes no difference. Also I'm just able to modify this icon due css, which goes like:
input[type="text"], input[type="date"], input[type="number"], input[type="search"], input[type="time"], input[type="datetime"], input[type="password"], [type="email"], select, textarea {
padding: 8px 12px;
height: 38px;
width: 100%;
}
I do not have any more ideas or approaches...

After some googling I found, it is a known issue with Edge... see this answer, it states that Microsoft do not plan to fix it; but the link they mention is dead.
I can only replicate this bug on Edge. And it seems MS won't solve it...
You can target it with CSS: idea from here
input[type="time"]::-webkit-calendar-picker-indicator` {
display: none:
}
Perhaps setting display: none will be enough and maybe adjusting padding/margin for it too?
Unfortunately, there is currently no stable CSS way to change the tab-index; and currently no way to change the HTML attributes.
The current CSS equivalent for tab-index is -moz-user-focus but this is non-standard and the documentation stresses that you "should not use this".
Similar things exist for grabbing the pseudo element with JavaScript like this question, but again this is for computedStyles which is back to the CSS issue again.
Maybe in future this sort of feature will be introduced and there will be a working answer for it....

Change background color of every other row

I'm trying to replicate the default settings of ag-grid which paints every other rows background in a slightly different color. But when I try to reorder columns clicking on headerColumn the background colors doesn't reorder.
This is my current approach that isn´t working
cellStyle(params) {
let backgroundColor = #FFFFFF;
if (params.node.rowIndex % 2 === 1) backgroundColor = #E04F00;
}
https://plnkr.co/edit/bHLEmECLNby3obIT, this example shows the desired behavior.
Is there a way to acces and change those default colors?

I found out that the default themes of ag-grid already did what I wanted, the thing is that the theme I'm using has two colors that are very similar, what I really needed was to change that default color.
I was able to achieve that by overriding theme's variable
.ag-theme-balham {
--ag-odd-row-background-color: #E04F00;
}
.ag-theme-balham .ag-row-odd {
background-color: var(--ag-odd-row-background-color);
}
I followed their documentation, first here https://www.ag-grid.com/javascript-grid-styling/, that took me to https://github.com/ag-grid/ag-grid-customise-theme, where I discovered which variable I should edit.

Checking the working example you are showing here, each .ag-row div has an additional class .ag-row-odd or .ag-row-even. So basically those classes mimic the behavior you could achieve by using .ag-row:nth-child(odd) and .ag-row:nth-child(even).
What might be happening in this case is that when you reorder the .ag-row elements the classes are not being updated, instead just moved around. What that would represent is something like this:
<!-- Default //-->
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<!-- Sorted //-->
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
So in this case what I would recommend is either to change the styles to:
.ag-row:nth-child(odd) {
background-color: #fcfcfc;
}
.ag-row:nth-child(even) {
background-color: #ffffff;
}
If that's not an option than you should review the script that reorders the .ag-row elements as it's probably not changing the classes accordingly.
UPDATE
I think I found your issue. I checked this example
And while inspecting elements I saw that when you reorder, each row has these two attributes.
<div row-index="3" aria-rowindex="7"></div>
From what I was able to determine even if you change your sort parameters, those two attributes don't actually change. So if you base your row styles on them, like you do with the row-index parameter, you'll never get a correct order, because sometimes you get:
<div row-index="3" aria-rowindex="7"></div>
<div row-index="5" aria-rowindex="9"></div>
<div row-index="7" aria-rowindex="11"></div>
As this is not incorrect, the styles are applied, but not in the order you would prefer. The script is doing its job as intended, it's just that your condition for the colors is not working.
The solution to this I think would be 100% css and for you to remove the cellStyle definition, because I think the problem lies there.

CSS is going to be the easiest solution to this. I don't see your html, but essentially you will want to reference the html table's rows, and then add a css nth-child(even) and nth-child(odd) to them. Here is an example:
p:nth-child(odd)
{
background: #ccc;
}
p:nth-child(even)
{
background: #fff;
}
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
And here are some more examples from w3:
Depending on what your specific code looks like, there may be different ways of doing this. I noticed you have js in your question, but since there was the css tag, I gave a css answer.

Is there an equivalent to the "alt" attribute for div elements?

Screenreaders will read whatever string is set to the "alt" attribute. The use of this attribute is specifically for image tags.
If I have a div like so:
<div id=myCoolDiv tabindex="0"> 2 <div>
Is there a way to have a screen reader pickup an attribute to read a string the same way an alt tag is used?
So for the div listed below, the screen reader will say ie: "shopping cart items 2"?
I tried using aria-label but the screenreader won't pick it up:
<div id=myCoolDiv tabindex="0" aria-label="shopping cart items"> 2 <div>

You can just put a title tag in the div which will do the same as an alt tag like so:
<div title="I AM HELLO WORLD">HELLO WORLD</div>
"I AM HELLO WORLD" will be printed once you move your cursor around it on a browser

There are two ways (which can be combined) to have screen reader to read alternative text:
Anything with ARIA role img can (MUST) have alt attribute. See WAI-ARIA img role.
<div role="img" alt="heart">
♥︎
</div>
UPDATE: In 2017 the WAI-ARIA document was changed and the following text does not apply anymore. See comments below.
However this should be used only in case the element really represent an image (e.g. the heart unicode character).
If an element contain actual text, that just need different reading, you should set ARIA role to text and add aria-label with whatever you want to be read by the screen reader. See WAI-ARIA text role.
<div role="text" aria-label="Rating: 60%">
Rating: ★★★☆☆︎
</div>
Do not mismatch it with aria-labeledby which should contain ID of an related element.
You can combine the previous two cases into one using two ARIA roles and adding both alt and aria-label:
<div role="img text" alt="heart" aria-label="heart">
♥︎
</div>
When more ARIA roles are defined, browser should use the first one that is supported and process the element with that role.
One last important thing is that you must set page type to HTML5 (which support ARIA by design).
<!DOCTYPE html>
Using HTML4 or XHTML requires special DTD to enable ARIA support.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">

Try role="listitem" or role="group" and aria-labelledby="shopping cart items". See Example 1. The 2 is text content which should be read by screen reader already with the attribute read as context to the content. Refer to this section.
UPDATE 2
Add aria-readonly=true role=textbox if you use an input. If there are doubts whether to use aria-label or aria-labelledby, read this article. In the documentation for JAWS and testing it myself supports the fact that aria-label is ignored. Furthermore, semantics are very important when accessibility is your concern. Using a div when you could use an input is not semantically sound and like I said before, JAWS would accept a form element more readily than a div. I assume that this "shopping cart" is a form or part of a form, and if you don't like it's borders, input {border: 0 none transparent} or use <output>* which would be A+ as far as semantics are concerned.
Sorry, #RadekPech reminded me; I forgot to add that using aria-labelledby needs visible text and that the text needs an id which is also listed as the value(s) of aria-labelledby. If you don't want text because of aesthetics, use color: transparent, line-height: 0, or color:<same as background>. That should satisfy visibility as far as the DOM is concerned* and still be invisible to the naked eye. Keep in mind these measures are because JAWS ignores aria-label.
*untested
EXAMPLE 3
<span id="shopping">Shopping</span>
<span id="cart">Cart</span>
<span id="items">Items</span>
<input id='cart' tabindex="0" aria-readonly=true readonly role="textbox" aria-labelledby="shopping cart items" value='2'>
UPDATE 1
For JAWS, you probably have to configure it a little:
Click the Utilities menu item.
Then Settings Center.
Speech and Sounds Schemes
Modiy Scheme...
HTML Tab
In this particular dialog box, you can add specific attributes and what is said when an element is tabbed to. JAWS will respond to form elements easier because they can trigger the focus event. You'll have an easier time doing Example 2 instead:
EXAMPLE 1
<div id=myCoolDiv tabindex="0" role="listitem" aria-labelledby="shopping cart items"> 2 <div>
EXAMPLE 2
<input id='semantic' tabindex="0" role="listitem" aria-labelledby="shopping cart items" value='2' readonly>

In case you use Bootstrap Framework there is a quick and easy solution. You should use sr-only or sr-only sr-only-focusable Bootstrap's CSS classes in a span element where your screen-reader-only text will be written.
Check the following example, a span element with class glyphicon glyphicon-shopping-cart is also used as cart icon.
<div id="myCoolDiv">
<h5>
<span class="glyphicon glyphicon-shopping-cart"></span> 2
<span class="sr-only sr-only-focusable" tabindex="0">shopping cart items</span>
</h5>
<div>
Screen Reader Output: "two shopping cart items"
provided by Fangs Screen Reader Emulator Addon for Firefox
You can find the above working example in this: Fiddle
As suggested by Oriol, in case you don't use Bootstrap Framework then simply add the following in your CSS file.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}

According to the text alternative computation algorithm of the W3C and the
Accessible Name and Description: Computation and API Mappings 1.1 you definitely should use aria-label.
That being said, it does not work with Jaws. Text alternative is only computed for elements having an ARIA role.
The remaining option is to use a link that will go to your cart page, using both title and aria-label to satisfy anyone:
2
You can also use a transparent 1 pixel option:
2 <img src="pixel.png" height="1" width="1" alt="shopping cart items" />

No, there is no equivalent to an alt attribute for <div> elements.
For what you are trying to do, an ARIA-based solution is overkill. Not only are you bumping into screen reader compatibility problems, you are applying ARIA attributes where they are not needed (and arguably do not belong if on something like a <div>).
Instead, consider using an off-screen technique (such as this one from The Paciello Group or this one from WebAIM). Content hidden using this technique will still be read by screen readers but will be visually hidden.
From reading your question, I think this is what you are after.
I made a pen demonstrating this technique. It may be easier to test in the full-page version.
Edit: Added HTML and CSS from the example, but please note that both the specs and browser / assistive technology support change over time, so if you are reading this in a year you should continue to use the links above to verify this CSS is still the current best practice.
HTML
<div tabindex="0">
<span class="offscreen">Items in shopping cart: </span>2
</div>
CSS
.offscreen {
position: absolute;
clip: rect(1px 1px 1px 1px);
/* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

Accessibility (Screen readers) can be achieved through role and aria-label tags on div. This can be very useful while using svg.
<div role="img" aria-label="I can speak the text">
<svg>...</svg>
</div>

Try:
HTML
<div id=myCoolDiv tabindex="0"><span class="aria-hidden">shopping cart items</span>2<div>
CSS
.aria-hidden {
position: absolute;
left: -100000px;
}
This will announce the text inside the span. And the Parent div will not lose visual focus. Aria-hidden class will hide the span from the visible screen area but will read it as its inside the div that has focus.

You can create a class such as screen-reader-text with the following css:
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute !important;
}
Then, in your code, you can just add a <span> with the screenreader text as so:
<div>
I am a div!
<span class="screen-reader-text">This is my screen reader text</span>
</div>
See an example over here: https://jsfiddle.net/zj1zuk9y/
(Source: http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/)

Use an image inside the div that has the label as its alt attribute. That way, those without screen readers just see the number and an image, whereas those with readers will hear the whole sentence:
<div>
<img src="http://tny.im/57j" alt="Shopping cart items" />
2
</div>
Seen as:
2
Read as: "Shopping cart items: 2"
The alt attribute exists for images because there is no way to "read aloud" the content of the image, so the provided text is used instead. But for the div, it already contains text and images. Therefore, if you want it to be read by a screen-reader, you need to include the text and alt text in the content of the div.

load some content from txt and add to html markup

Have some markup
<div class="container">
<aside class="left">
<div class="item"><p>lorem ipsum</p></div>
</aside>
<aside class="right">
<div class="item"></div>
</aside>
</div>
<button>load more</button>
css
aside {
display: inline-block;
width: 40%;
border: 1px solid red;
margin: 2%;
vertical-align: top;
}
.item {
border-bottom: 1px solid black;
}
I need to load some html content from .txt file when clicking button and add that markup inside both aside. In .txt file markup like this
<div class="item"><p>lorem ipsum1</p></div>
<div class="item"><p>lorem ipsum2</p></div>
<div class="item"><p>lorem ipsum3</p></div>
<div class="item"><p>lorem ipsum4</p></div>
I want "drag" and paste first div with class .item to aside.left, second div with class .item in aside.right, third div with class .item in aside.left and so on...
Is there any solution? I don't know how paste .item divs in both columns..
Thanks for any help
Here is JsFiddle DEMO
upd: I'm only use css+html+some jquery, I dont know any things on php or server technology.. but programmer who work with my markup says that I need to demonstrate how content will be added on click.. So I dont know is this my work, or this is programmer need to do.. I need your answer about this..
If that helps, here is LINK you can see site. In bottom you can see arrow, onclick on that there need add content in columns..
P.S. Programmer works with Yii framework.

Since you already seem to know about AJAX (you added the tag), I think you have your answer there.
You can just use AJAX to get any chunk of data from the server and add it to the page.
Since you are working together with a server-side programmer, I think each of you could build their own part independantly.
All you need is an API that you can use, to which you can specify the offset of items to load, so you could call /getitems?offset=12&count=4 to get the next 4 items from item 12.
You can then just make a simple page that returns dummy data. getitems.php can just return the same constant items every time, and all you need to do is add those items at the bottom of your list.
At the same time, the PHP programmer can actually implement that page so it returns the same data. He can make it in such a way that it also works for non-AJAX request, so he can easily test it without needing your front-end code.

jQuery slideToggle() poor performance and/or freezes IE8

I am experiencing very poor performance with the .slideToggle jQuery function in IE8. Its either choppy or it completely freezes the browser. Works great in firefox chrome opera etc.
I think it might be related to my DOCTYPE attribute? I am not sure. However, I have tried many solutions mentioned around the this site and others but none of them have worked so far, that includes making sure none of the sliding elements are set to position: relative.
Here is the script and html. Basically when the user clicks a button on a radio list contained in an upper div that upper div collapses and the lower div opens up with more buttons. They are hidden initially hence the check against .css('display'):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
function btnList_Type_Click() {
$('#btnList_Type_Div').slideToggle(200, null);
if ($("#btnPanelTwo").css('display') == 'none') {
$('#btnPanelTwo').slideToggle(200, null);
}
if ($("#btnList_Date_Div").css('display') == 'none') {
$('#btnList_Date_Div').slideToggle(200, null);
}
}
<div id="btnPanelTwo" class="lightPanel" onmouseover="page.cursor('pointer')" onmouseout="page.cursor('default')"
style="height: 36px; width:320px; margin-left:20px; margin-top:0px; display:none;">
<span style="font-size: 13pt; left: 14px; top:10px;">Step 2: &nbsp&nbsp Choose Date Range:</span>
</div>
<div id="btnList_Date_Div" style="margin-left:60px; width:320px; height:325px; display:none;">
<asp:RadioButtonList
ID="btnList_Date" runat="server" style="margin-left: 35px; margin-top:12px;"
Width="226px" AutoPostBack="False" Font-Size="11pt"
</asp:RadioButtonList>
<asp:TextBox ID="txt_StartRange" class="textbox" runat="server" style="margin-left: 46px; margin-top:10px;"
Height="22px" Width="98px"></asp:TextBox>
<asp:TextBox ID="txt_EndRange" class="textbox" runat="server" style="margin-left: 5px; margin-top:10px;"
Height="22px" Width="98px"></asp:TextBox> <br />
<asp:Button runat="server" ID="btn_Submit" class="button"
Style="float:right; margin-top:40px; margin-right:56px;" Text="Submit" OnClick="btn_Submit_Click" />
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txt_StartRange" >
</asp:CalendarExtender>
<asp:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="txt_EndRange" >
</asp:CalendarExtender>
</div>
</div>
EDIT Here is the rendered HTML as requested:
<DIV style="WIDTH: 320px; HEIGHT: 36px; MARGIN-LEFT: 20px" id=btnPanel
class=lightPanel onmouseover="page.cursor('pointer')"
onmouseout="page.cursor('default')"><SPAN
style="FONT-SIZE: 13pt; TOP: 10px; LEFT: 14px" id=btnPanel_Text>Step 1:
Select a Type of Report:</SPAN> </DIV>
<DIV style="WIDTH: 320px; MARGIN-LEFT: 60px" id=btnList_Type_Div>
<TABLE style="MARGIN-TOP: 12px; MARGIN-LEFT: 35px; FONT-SIZE: 11pt"
id=ContentPlaceHolder1_btnList_Type>
<TBODY>
<TR>
<TD><INPUT id=ContentPlaceHolder1_btnList_Type_0
onclick=btnList_Type_Click(); value=1 type=radio
name=ctl00$ContentPlaceHolder1$btnList_Type><LABEL
for=ContentPlaceHolder1_btnList_Type_0>Label0</LABEL></TD></TR>
<TR>
<TD><INPUT id=ContentPlaceHolder1_btnList_Type_1
onclick=btnList_Type_Click(); value=2 type=radio
name=ctl00$ContentPlaceHolder1$btnList_Type><LABEL
for=ContentPlaceHolder1_btnList_Type_1>Label1</LABEL></TD></TR>
<TR>
<TD><INPUT id=ContentPlaceHolder1_btnList_Type_2
onclick=btnList_Type_Click(); value=3 type=radio
name=ctl00$ContentPlaceHolder1$btnList_Type><LABEL
for=ContentPlaceHolder1_btnList_Type_2>Label2</LABEL></TD></TR>
<TR>
<TD><INPUT id=ContentPlaceHolder1_btnList_Type_3
onclick=btnList_Type_Click(); value=4 type=radio
name=ctl00$ContentPlaceHolder1$btnList_Type><LABEL
for=ContentPlaceHolder1_btnList_Type_3>Label3</LABEL></TD></TR>
Label4
Step 2: Choose Date
Range:
Label1
Label2
Label3
Label4

Ok, I ran your page through profiler, and it actually doesn't look that bad. Javascript execution is within the range of reasonable (245ms). Your problem is reflows (takes around 1073ms) to reflow your page fully within your sliding animations. See screenshot.
There are a few things you can do to improve this. First of all, remove margin from your btnList_Type_Div element, as well as padding. JQuery Animation framework is written quite poorly. When you call slide function, it actually runs 5 different animations at the same time, 2 for margins, 2 for padding and one for width or height of your element. Having margins on your element (even though they are not getting animated in your case) is not great for animation. This should improve your reflows quite significantly (in my test it went down from 1073ms down to 217ms).
Second thing I would suggest, get rid of table around your radio buttons, it's absolutely not required for your layout, a few divs will do the trick just fine. If, for some reason, you have to have a table, at least write it out correctly (declare cols with width on each one, set table-layout: fixed style on it, etc.). Tables are quite expansive to reflow, since they have to recalculate the width/height of every cell every time.
Last thing I can suggest (if everything else fails), nest your div inside another one, and then set position: absolute on it. This will take it out of context, which means that nothing else on the page needs to reflow when you change the settings on your div.
Edit:
Oh and one more thing, even though you set your DTD to XHTML Transitional, and Transitional is more forgiving then Strict, you should still try to follow XHTML format, like closing br and input tags, setting the case correctly on tag names, etc. All of this can affect performance greatly as well.
Edit 2:
Since you didn't post the whole source of the page, including all javascripts and css files, I can't really profile it correctly. More than that, my computer might be more powerful than yours, and might still not be able choppiness in the performance of the animation. I suggest you try to profile the page yourself. For that, you will need to install DynaTrace Ajax. Run it, start profiling for IE, it will open default version of IE installed on your machine. Navigate to your page, at that point I suggest setting a mark, just so it would be easier to find, then click on your radio button (and perform whatever other actions you want to profile). Close your browser, and in DynaTrace, you should see a new session on the right, expand it and navigate into PurePaths view. Find the mark you set (should be Mark 1 by default) and then look around it for click events and rendering activities. Once you found something that looks like it's taking longer than it should (duration), you can click on it and expand all child actions until you find what is causing an issue. Now by tweaking HTML, you should be able to profile it each time, till you get close to the result you are looking for.
P.S. If you set position:absolute on your div, you have to wrap it into another div, with position:relative on it, as well as height. Setting absolute positioning will take your div out of context, and parent div will have a height of 0px, unless you set it manually yourself.