I want to practive, and even best-practice, with Html+JS+CSS.
I use a one page client-only Sudoku page.
My Sudoku markup is basically a <table>, with <td>.
(I'm open to suggestions to improve this).
My requirements :
Have a cell under focus (the keyboard notion of focus) (highlighed with css to a yellow background)
Navigate through cells with arrow keys (plus Home etc).
type-in an integer value sets that value to the currently focused cell
I use an input button inside each cell.
The Javascript works fine.
My only problem is with the display.
When a cell has the focus, it's highlighted display doesn't cover the whole TD, rather only the visual space included in the input button. I have some space around the button that isn't 'yellow'.
I don't think I could go up in the CSS selection, to select the parent of the input, could I ? Such as :
input:focus '?? how to go up ??' td { background-color:yellow;
I tried a few tricks, like having always 5 characters in each button display (5 spaces when empty, changing the middle character when set), but nothing is visually satisfying.
Even worse, it is clearly against best-practices to alter the content for the sake of visualizing. That's what the MVC distinction between Html/Css/Js is for !
I already searched this site for answer, I found close but distinct questions and answer.
I'm hoping someone could help improve my page ... and my markup skill :-)
It is not possible to construct a css selector which matches a parent node dependent on a (pseudo-)class of child node.
Basically you have two options to choose from:
Try to fill the td with the input completely using height and width rules in your css.
Set 'focused' and 'unfocused' class on your tds with javascript using the onfocus and onblur events of the inputs.
Could you not use a dash of jQuery to set a .focused class and then apply some style to it?
Related
Do hidden input fields have a physical location within the page?
I know this question probably sounds dumb (I definitely feel like it for asking), but recently I created a website with a lot of hidden fields (created with JavaScript DOM), and I noticed there is a huge, empty area at the bottom of the page.
I checked the code and I can't find anything that could cause this problem.
var hiddenfield = document.createElement('input');
hiddenfield.setAttribute("type","hidden");
hiddenfield.name = "hiddenfield";
hiddenfield.id = "hiddenfield";
hiddenfield.setAttribute("value", document.getElementById("select1 4").value);
formNew.appendChild(hiddenfield);
I edited in some code to show the way I created the hidden fields.
No, input type="hidden" fields aren't causing this. Possibly some css style or width and height settings.
They do have a location, try to change hidden in text from the developer console and you will see it's position. They are just collapsed. The don't influence layout in any way.
If you are using <input type="hidden"> then as Patrick answered they will not influence layout. As in this example explained by Patrick.
BUT if you are hiding your input fields using visibility:hidden then YES it will take the space. See THIS example.
As according to W3
"visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout."
You can hide your fields using display:none. According to W3
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there
I am trying to get rid of HTML validation completely. This question would help if I had all inputs inside some forms. But I don't, as with angularjs I only need a form if I want to know if all fields in some set are valid. Moreover, HTML form elements don't stack, so I'm using ng-form only.
I actually don't care if the form gets validated or not; I only want to get rid of the red border in Firefox just like in this question. Is there a way how to style the glowing red to zero size or transparency or whatever? In Firefox I can't see it.
Alternatively, is there a possibility to teach angularjs work with some other attribute name rather than required, so that HTML5 doesn't jump in to visually destroy my page?
You can use :
:invalid {
box-shadow: none;
}
:invalid
Migrating OP's solution from the question to an answer:
Actually, there's a simpler possibility: As I'm using no HTML forms at all and I need some top-level container anyway, it can be a <form novalidate> instead of a <div>. Too simple to be seen.
Is there any alternative to <div>? My website is losing "accessibility" because I cannot set focus on a <div>. What control should I use in order to replicate <div> and still hold focus?
This is what my HTML looks like:
<div style="height:70px; overflow:hidden" id="divMsg">
<div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
<div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
</div>
You can add tabindex to make it focusable; however, this is usually not enough. If you want the element to be clickable, you will also need to add a keydown or keypress handler so that the user can activate it using ENTER, similar to a A link. Otherwise the user will be able to tab to it, but may not be able to do anything with the link after.
If you are trying to create a clickable element, it is sometimes simpler to start with a A tag, and then style it so that doesn't look like a link. A elements respond to both keyboard and mouse and fire onclick for both, so you don't have to do additional keyboard input handing like you do with a DIV.
Finally, if you are making a DIV or A that visually looks like a button or some other control, add the appropriate ARIA role so that a screenreader will call out the appropriate element type - eg.
Complete Transaction
Just give it a tabindex attribute.
If you are specifically looking for accessibility, try out the new HTML 5 tags like <article>. So for example a textreader knows what to read, and your page is much better structured.
Check out this site.
To answer your exact question, it depends why you are using the div; I'm guessing for layout. The tab ordering is dependent upon more than tabindex, as defaults and overflow affects positioning and focus.
To be more specific, you won't use a div to latch onto for tabindex. Rely upon JavaScript and a unique ID; <div class="content" id="page1">
This will also provide you an anchor so you could use http://index.html#divMsg to link focus to the exact place in your HTML document. Note you have only one div ID and reuse the same div class twice in your example.
If this is all new to you the article on difference between ID and CLASS may be of interest to you
Links (element a) and form elements (input text and alike, file, radio and checkbox, submit, image and type button, select, textarea, button element, etc) are focusable by default.
Thumb rule: if an element does something, it should be a link or a form element part of a form. (OT: I guess I've a problem with conjugation here but can't find exactly what - english isn't my mothertongue)
Think twice (at least :)) before using the tabindex attribute: it'll work for a while in your project and then you make some modification elsewhere and suddenly all is broken. And it'll break again, again and again.
For testing with Safari, you'll need to modify Preferences: this browser (maybe also Chrome?) only cycle by default through form elements and not links. Users of keyboard cycle through every focusable elements I guess, like in IE and Firefox.
To learn further, Web Content Accessibility Guidelines 2.0 (WCAG 2.0) have Sufficient Techniques (and "Failure(s)" also) about keyboard use.
I'm working with an <input> field and I'd like to style part of the field as the user's typing in a different color. For example, let's say the <input> has a style declaration of color: red; and I want to change part of it to color: blue;. Is there any way this is possible?
If there isn't (as I suspect), any creative ideas on how I can simulate this effect while still preserving semantic mark-up?
Your suspicions are correct: styles will apply to the whole input only.
As styles can apply to the entirety of an element only, a solution will require at least one element per required colour.
Consider the division of the input field with respect to the point at which the user is making changes. There are three sections of the input:
that before the point at which changes are being applied
that after the point at which changes are being applied
that at the point the changes are being applied
You cannot achieve this with a single input element. And as the point at which the changes are being applied can change, the portions of the 'input' wrapped by the three elements will also change. JavaScript is required for a solution.
You should initially include a regular input element and forgo any of the required colouring. Use JavaScript to replace the input with a suitable container element. This can be styled to mimic an input element.
As changes occur, use JavaScript to identify the above-mentioned three divisions. Wrap them in suitable elements (spans would be ideal) and colour as needed.
Consider the following starting point for the generated replacement markup:
<div class="input">
<span class="nonEdited before">foo</span>
<span class="edited">fizz</span>
<span class="nonEdited after">bar</span>
</div>
Use click, keydown and keyup events to figure out the three divisions for the input and to apply wrap the three portions of the faked input as required.
As others have said, you can't do this with styles and static markup.
You could probably do it with a Flash-based form.
But, if I had to this, I'd use jQuery to overlay divs, with the colorized text, atop the <input>.
Algorithm:
Use a normal <input> with whatever default styles are desired. The contents of this input will never change except by user action.
jQuery monitors that <input>. When it detects trigger word(s), it adds a <div> after the input and fills it with the trigger word(s) -- styled as desired. Probably one <div> per word or phrase is best.
jQuery then positions the new <div>, absolutely, directly over the trigger word(s).
Getting the trigger word(s) offset within the <input> might not even be necessary, because the previous words could also be in the overlay <div> -- either styled defaultly or with visibility: hidden.
But, if only the trigger word(s) are desired in the overlay, then using a fixed-width font, like Courier, will help with the sub-positioning.
Take care that the overlay does not interfere with the user trying to mouse or key to certain parts of the <input>. IE, probably don't want to cover any more of the <input> than necessary, and set a click() handler to relay focus.
Alternate, user friendly and simpler approach:
Rather than try to do funky, non-user-expected things to the input, take a page from Jakob Nielsen and from sites like StackOverflow.
Just have a plain ol' <input>, but underneath it, show the formatted text as it comes in.
You can achieve this with (a lot of effort and) a div with the contentEditable attribute present. This is how most web-based WYSIWYG editors achieve rich formatting of inputs. See here for more info: http://ajaxian.com/archives/on-browser-wysiwyg
You can keep differently styled divs side by side in a container overlapped by a transparent input. Modify the widths of the styled divs on the basis of your input entry.
For example, to color input background for leading and trailing spaces:
<div class="bckg-container">
<div id="bckg-leading" class="bckg spaces">
</div>
<div id="bckg-middle" class="bckg">
</div>
<div id="bckg-trailing" class="bckg spaces">
</div>
<br style="clear: left;" />
</div>
<input id="inpt" type="text" placeholder="Add leading/trailing spaces" maxlength="20" />
The three divs inside the container will change their width with input change.
Check the working example in jsfiddle http://jsfiddle.net/TalhaAwan/ywyw4qq5/
You might be able to do it with some edit in place javascript (if it's not possible in pure html/css):
http://www.appelsiini.net/projects/jeditable/default.html
That jQuery plugin doesn't use html input fields so it could be possible to style different parts of the input. It has a couple of hooks for callbacks which you could use to style the input. Hope that helps as an idea.
You can have a label mocking that input and the real input to be hidden, then you can do a lot of things beteen label tags (e.g. colored spans).
Is there any way to make sure that a table and cells it contains have a border only when the cells are not empty?
If all the cells of the table are empty, then no border should be visible.
See the empty-cells CSS property.
The only way to do this with pure CSS relies on a very modern browser. You'll need to use CSS advanced selectors to accomplish this. For example, you can use tr:empty to find the cells with no children elements in them, for plain text you'll need to do some more.
Unfortunately, these only exist in CSS3, so if you can't use javascript, or touch the markup, then you'll only be able to accomplish in the very latest browsers.
To learn more about CSS3 selectors Click Here
Give the empty cells one class name and the non-empty ones another. One class specifies a border, the other without.
To the best of my knowledge, this isn't within the capabilities of CSS, the best option I can think of is to apply classes dynamically either through server-side code while populating the data, or through JavaScript once the page has been loaded into the browser.
It looks like the empty-cells property suggested by strager might do the trick. If it doesn't do what you need, I would look at using some clever javascript library like jQuery. You can probably set a hook to update the border style of the cell to be getBorderStyle(this) When the content of this cell change.
Look at the jquery "change" hook here: http://docs.jquery.com/Events/change
If you select all your cells (which you can do using a css selector) and add a change hook to run some function you write called updateBorder() or some such, you should be good. I imagine it would be something like this:
$("table.someClass td").change(function() { updateBorder(this) })
Rendering of cell borders is partly dependant on if you are collapsing borders or not. If they are not collapsed border are not show by default if there is no cell content. This can be switched by using the CSS property empty-cells.
If you are collapsing borders you loose the abillity to control border display based on the presence of cell content.