keyboard navigation with pure css3 - javascript

Is there a way to add keyboard navigation to links with just css3, without js or any js library? specifically, I have created a pure css3 lightbox effect with a bunch of images but I want to navigate between images using left and right keys without clicking anywhere on the screen and use escape to get the effect of "cancel" button (similar to Close)

What you are asking for is literally impossible with Cascading Style Sheets , You can animate your sequences for timing or do stuff like animating , transitions with CSS but you cannot do what you want to do with CSS only!.
Reasons
Cascading Style Sheets were made for making the visual elements of the page and not the UX
Css has no method for interaction with Keyboard.
You can either add a little bit of javascript for making this happen . But as you don't wanna use javascript you are stuck !
Checkbox hack
With checkbox radio box something like this is attainable but then again the focus initially
requires to be brought . which can be done using autofocus attribute ..
So this fiddle should solve your issue.
http://jsfiddle.net/darkyen/NUtnX/
But i want to warn you before hand any "blur" will cause this to fail. so the better javascript code varient is listed below
JavaScript Code
The javascript code for achieving what you want will contain very minimal javascript
Say your markup is
So you can simply assign a lil javascript
(function(){
var slide = 0, // Current slide
max = 10, // Maximum Number of slides
ele = document.getElementById("show");
document.addEventListener('keydown',function(e){
e.preventDefault();
e.stopPropagation(); // To stop more event stuff and default behaviour
key = e.keyCode; // To find out what key is this
if( key === 39 ){
// Right arrow
// Aha we incremented the value!
slide++;
slide %= (max+1);
// Increase the value of slide by 1 and keep em in limits
}else if( key === 37){
slide = (--slide >= 0)?slide: ( slide + max );
// Will decrement the slide value by 1 and if they are less then 0 then will cycle it to the last slide
}
ele.className.replace(/slide[0-9]/gi,'slide'+slide);
// wasn't hard now was it ?
});
})();
The minimal javascript above will do the task of changing your slides or you can always see the source code of impress.js

Related

Forcing Spell Check on programmatically created content

I have deduced that the spell check function, as handled by most browsers, only works when the user inputs text and then moves to the next word. I have also deduced that you can "query" the spellchecker by simply move the cursor through a word (i.e clicking the first word and then scrolling down).
I have a tool that takes input text and then produces it in an altered form for the user to see. I want the output text to be subjected to the spell checker.
I am aware of the fact that I could use a javascript spellchecking tool, but I'd like to avoid that if I can get the native tool to work (in large part because users can then define their native spell checker however they'd like).
Two specific questions:
1) Is there any easy way to trigger the spell checker to query every word in an element? Setting spellcheck to "true" does not do this.
2) I think my next best option is to programmatically run the cursor of the list of words, is there a good approach for doing this?
I have the same question. I solved this by focussing on an element and a timeout. It's cerainly not the (best) way to go, but it does it's job.
What it does: it get's the elements (all elements have the not-focussed class on them). While looping through (in reverse, bottom->up), it waits 20 miliseconds in order for the spellchecker to execute.
function enableSpellcheck()
{
setTimeout(function () {
var items = $(".not-focussed").reverse();
if(items.length > 0)
{
var target = items[0];
$(target).focus();
$(target).removeClass("not-focussed");
enableSpellcheck();
}
}, 20);
}

Increment when element becomes visible?

I am working with the skrollr plugin.
I have a set of arrows. One points down and the other up. When you click the down arrow it takes you to the next section/chapter of the animation. Right now it works great. But my issues is lets say the user does the following:
He/she scrolls half way through the page(lets say section 5). They then decided to see how much of the animation is left. So they click the next section arrow.
This user will be put to section 2 even though they are at section 5 because I have no way to detect when the user hits each section so I can update the arrow #hrefAnchor.
What I was thinking is adding an interval/ event listener that would detect when the section is visible on the DOM and update the arrows to take you to the previous and next sections.
Does anyone know how I can approach this idea?... and will work in ie >= 9
If you're willing to modify the Skrollr library, something I had done was add:
else if(prop === 'javascript') {
eval(val);
}
as an option in skrollr.setStyle which allows then for you to add a hook for arbitrary JavaScript code on elements like each section here using data-XXX="javascript:myFunction();" and I believe Skrollr will even still interpolate numbers in your arguments for you.
If you have control of what gets executed when "next" is clicked, can you check the scroll value at that time to determine which section it is between and switch on that to send them to the appropriate section? Essentially, rather than trying to keep the target current at all times which is wasteful/difficult/error prone, just calculate it when it matters - when the click occurs.
If you give your element a class like "visible", you could select all the visible elements by using jQuery:
$(".element.visible:last-of-type").on("click", function() {
});

Building drag and drop navigation tabs

I'm working on building a new website purely for learning purposes and I want to try and implement some drag/drop sorting system. I am aware that jQuery provide the sortable UI component http://jqueryui.com/sortable/ but I want to have a go at designing and building the system from scratch (seen as this is for learning purposes).
When it comes to Javascript I have to admit I am fairly novice, so I was wondering if any of you could offer your 2 cents against my current thinking of how the program would work:
An un-ordered list sits at the top of the page (navigation bar), each item is assigned a the class 'draggable x' where x is its current position in the list
An event listener is bound to each li element within the list
When an on-mouse-down is made on an element a variable is set telling which cell has been clicked, this then creates a thumbnail under the cursor (hides the old cell) and allows the user to drag
When the mouse is released the list item is slotted into its new position by updating its class number, whilst decrementing all class numbers behind it
Questions:
1) My main problem with this is, how do I detect when I have passed another li element when dragging? I could assume width n has been passed, but each cell could be of variable length making that solution inappropriate.
2) I am also assuming I am going to need to use AJAX to handle the callback, otherwise I am going to get some undesired page refreshes (right)?
Hopefully this won't receive down votes - I want to stress that I am NOT seeking a solution from you guys, I have used these forums long enough to know that I don't demand code from the community without providing any of my own work! I'd just like some feedback on my initial draft as well as answers to the 2 questions asked above.
Thanks in advance for your time
Alex.
If you are using JQuery you can avoid having to know what order your items are in.
The .index() function will return the position of the item relative to its siblings.
You can then simply keep track of the element you want to move by adding a working class to it on a mouse down even. (I use .draging in my example)
On the mouseup event just find our old item by the class you added. Depending on which element is first compared to the other, insert your working element before or after the element you mousedup on and then remove your working class.
Here is an example
http://jsfiddle.net/V72Le/2/
function swap(dragable, draging) {
//find direction of move then move item based on direction
var from = $(dragable).index();
var to = $(draging).index();
if (from > -1 && to > -1) {
var direction = from - to;
if (direction > 0) {
$(draging).insertAfter($(dragable));
} else if (direction < 0) {
$(draging).insertBefore($(dragable));
}
}
}

Auto Update a piece of text depending on position

Right now i am using the awesome flexible-nav
to display the current subtopic i am at in my post.
Additionally to that I was wondering whether I could take this current // string and display it on top of the page in my actual navigation bar. So that the text would change as i scroll and as the flexible-nav changes.
Thanks in Advance
You need to append some code to flexible-nav.js, I suggest you make modification in expanded one and minify it later.
After the line 208 of flexible-nav.js (i.e. closest && closest.node.addClass('current');) add these lines of code.
var doc_title = closest.node.html();
$("title").html(doc_title);
This code changes Title as you keep on moving down the scroll. I wasn't able to figure out call back function in the script (presuming if they have any) but this should work just fine.
You can add any of jQuery selector of your wish instead of $("title") in the code.

Need invisible/aesthetically pleasing keyboard input for javascript game

I am working on a game-webpage, and I need to know of a way to capture keyboard input, ie up, down, left right and feed that into my location variable but I don't want to use a text box, in my HTML code for input. I'm already using a element to draw my world. Is there any way that when the game is open on a tab, that all keyboard input apart from and the various browser operator keys will will be capturable without having to have the user click on a specific spot on the screen. I've a very limited experience with HTML, and only need a cone of answer as I am building the game in python in a way that it builds itself into HTML.
I am also using a timed loop, and need to be able to have an onkeypress event to be capturable inside the timed loop.
Which element should I use? Which properties of the element?
In order to capture your presses specifically inside your loop, you'll have to store the currently held keys somewhere, and use the document.onkeydown and document.onkeyup to change them.
var heldKeys = [];
document.onkeydown = function(ev) {
heldKeys.push(ev.keyCode);
}
document.onkeyup = function(ev) {
var i = heldKeys.indexOf(ev.keyCode);
if (i != -1) {
heldKeys.splice(i, 1);
}
}
Now inside your loop, you check the contents of heldKeys. You can just loop through it and act on each key.
Remember that the keyCodes won't correspond exactly to "a" "b" etc, they'll be ascii codes. And you may or may not run into browser compatibility issues.

Categories

Resources