Do It Yourself HTML Textarea Editor Shortcut Key Tutorial
If you are using a laptop and following our thread of “Do It Yourself HTML Editor” blog postings, you may benefit from today’s progress on our web application. We allow for the linking of yesterday’s Cursor Positioned HTML dropdown helpers, introduced with Do It Yourself HTML Textarea Editor Cursor Tutorial as shown below, to a keyboard shortcut in the order …
- Ctrl key (or Mac equivalent) (separated please) to the key letter starting that HTML element you are selecting via a dropdown eg. <p></p> could have a shortcut key Ctrl_P … or if already used …
- Alt key (or Mac equivalent) (separated please) to the key letter starting that HTML element you are selecting via a dropdown eg. <span></span> could have a shortcut key Alt_S
A strong advantage using these (Cookie’able) shortcuts is that you might be able to swing it to have the cursor stay where you want it in the HTML textarea element more often.
We would like to thank this wonderful webpage for some direction with this work, which was more involved than we thought it would be, and maybe too long in code changes to encapsulate here. In which case, it would be better to examine the HTML and Javascript you could call do_away_with_the_boring_bits.html and which changed from yesterday for shortcut key functionality in this way, mainly regarding the organization of document onkeyup (keyboard) event logic. And, as per usual, here is a live run link for you to try this yourself, we hope?!
Previous relevant Do It Yourself HTML Textarea Editor Cursor Tutorial is shown below.
Do It Yourself HTML Textarea Editor Cursor Tutorial
If you do lots of text editing perhaps you take the “cursor” for granted. But just as the stylus on a vinyl record makes the music in relation to its position, the equivalent of our text editing “cursor” is that it defines where to place the next typed character. It’s been around, as a concept, and survived, more to the point, for a long time now, as it has been around regarding much database SQL query design too. But today, for us, we are giving it some attention, because we want to …
- read off the HTML textarea “editor” element’s data its cursor position … and also …
- set the cursor position of the HTML textarea “editor” element after modifying its contents
That ability means that we now have the ability to offer the user of this HTML textarea “editor” the chance to use “helper” (like shortcut) HTML (select element) “dropdown” options to optionally speed up the creation of the HTML code. We realise this “flies in the face” of a basic belief we have that it is good to hand code your HTML to learn it better, but the real fact is that the quicker your success, the more you’ll want to try out other HTML ideas, and that makes these ideas worthwhile. These HTML drop downs are structured to mandatorily have the …
- HTML element type … as for <p></p> … mandatory … and optional, for properties like …
- id
- class
- title
- style
- src
- href
- value
… as well as several other property combinations, presented in combination with the HTML type whether that is apt, or not. Now, we may fix this perhaps, but we also see that it can serve a purpose to teach the HTML with trial and error thoughts as well. We see “trial and error” as an incredibly important idea here. Hand coding HTML by trial and error, sometimes, particularly in combination with a web browser Web Inspector product, are a potent mix to finding out how the client side of web applications work. Pretty obviously, looking at books and search engine information, as a conduit to websites like W3schools helps a lot too.
Below are the two main functions new to the logic to get a cursor position …
function wherearewe(ota) { // thanks to http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field
// Initialize
var ipos = 0;
if (document.selection) { // IE Support
// Set focus on the element
ota.focus();
// To get cursor position, get empty selection range
var oselis = document.selection.createRange();
// Move selection start to 0 position
oselis.moveStart('character', -ota.value.length);
// The caret position is selection length
ipos = oselis.text.length;
} else if (ota.selectionStart || ota.selectionStart == '0') { // Firefox support
ipos = ota.selectionStart;
}
// Return results
//alert(ipos);
return ipos;
}
… and then to set a cursor position …
function setwherearewe(ota, wota) { // thanks to http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field
if (ota.setSelectionRange) {
ota.setSelectionRange(wota, wota);
} else if (ota.createTextRange) {
var range = ota.createTextRange();
range.collapse(true);
range.moveEnd('character', wota);
range.moveStart('character', wota);
range.select();
}
// Return cursor position
ota.focus();
//document.title=ota.value.length + ' vs ' + wota;
return wota;
}
… you can see with the HTML and Javascript you could call do_away_with_the_boring_bits.html and which changed from yesterday for textarea cursor functionality in this way. Please feel free to try it out yourself at a live run link.
Previous relevant Do It Yourself HTML Primer Tutorial is shown below.
Do It Yourself HTML Primer Tutorial
It is because of yesterday’s generic HTTP Cookie thoughts we had when we presented Job Search Grid Game Cookie Tutorial, as shown below, that makes us feel okay using “Do It Yourself” in the blog posting title “Do It Yourself HTML Primer Tutorial”. Without the use of cookies what we do today is probably not worth the bother because we …
- want to get you programming in HTML and Javascript and CSS, if you are curious, and have never done it before, and want to taste that incredible feeling programmers get when they “see something working” … so …
- we get you to draft up some HTML and Javascript and CSS in an HTML textarea element … and we’ll talk more about the limitations here later on …
- click or tap the “Try your HTML and Javascript and CSS Above” button … then …
- see the results of your work to the right in a light blue area … and …
- notice up the top middle a new (and/or updated) HTML (select element) dropdown with some datetime flagged previous “HTML Edit” sessions you can recall … that’s HTTP Cookie functionality at work
The thing is about hand coded HTML, and we think you learn more by hand coding your HTML, at least in the early days, you are going to need a few goes at things to get things going, and yet, like most programmers, you’ll be curious to know “does it work yet?” (sound familiar to “are we there yet?” to you?), so remember those “worthwhile coming back to” datetime stamps, is our advice … gratuitous, as always?!
Now about those restrictions to use. Alas, within the web page “head” section … between <head> and </head> … the …
- good news is that all the CSS styling … between <style> and </style> … seems to be fine, but, alas, the …
- bad news is that the Javascript scripting … between <script type=’text/javascript’> and </script> … does not work, as of this first draft … not with code between <script type=’text/javascript’> and </script> between <body> and </body> … but event logic defined within <body> and </body> such as onclick= works (but no “body onload please”, nor “body anything else” either … just plain straight “body” please)
Be that as it may, you can still see a lot happening with this arrangement, and be like us, perhaps, still in wonder at that feeling of “look at that, it works!”.
So, that’s the go, and you can try it out via this live run link and/or peruse the code behind this (just HTML and CSS and Javascript) “Do It Yourself HTML Editor” you could call do_away_with_the_boring_bits.html yourself.
Previous relevant Job Search Grid Game Cookie Tutorial is shown below.
Job Search Grid Game Cookie Tutorial
Yesterday we got to a point with a web project we were working on called the “Job Search Grid Game” (and thanks here to Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1 for the inspiration) and we ended up with a game that could use Content Management System ideas whereby the user could control the content of the game. Guess you might categorize this functionality as “personalization”.
That “personalization” only lasted as long as that web browser session lasted, and there was no recourse to recall any of that user “personalized” game data settings again, but today we’ve started, by using this project as the “guinea pig” project to start down the road of seeing whether the use of HTTP cookies might assist to extend functionality for …
- only users who tailor their game via that “Management” link down the bottom of the game … and who …
- use this new live run link (rather than the old live run link) … because there are checks to see that …
- functionality occurs if the calling HTML has code such as <div id=dcookies_okay><input type=hidden id=cookies_okay value=”></input></div>
We’ve tried thoughts that are quite “generic” by nature here, but we have to better monitor web browser cookie usage limits, as we go further down the road, but we …
- in a web browser address bar URL such as http://www.rjmprogramming.com.au/HTMLCSS/job_search_grid_game.htm that bold part is combined with a reworked date and timestamp to be the “name” of the cookie … and only if …
- the web browser address bar URL must contain a “&” to attract any attention as a candidate for the creation of a new cookie … which, if never encountered before …
- placed on a dropdown “cookie” list of game configurations that indicate the date and timestamp for reference purposes … and, as for all web browser scenarios …
- cookie logic only works while the user has not cleared the Browser History at their web browser
… and that HTML (select element) dropdown is placed, in “overlay” style …
- position:absolute; top:0px ; left: 300px;
- opacity: 0.7;
- zIndex: 56;
- method=GET
- action=./job_search_grid_game.html
… the Javascript logic for which has been placed into some external Javascript you could call cookie_get.js that we are going to place at http://www.rjmprogramming.com.au/ (document root) for maximal access purposes, and which is called by the job_search_grid_game.htm via …
<script type='text/javascript' src='../../../../cookie_get.js'></script>
… which is like saying any webpage out from document root to four subfolder hierarchy could all access this external Javascript with the same codeline between <head> and </head> as above, and that external Javascript uses a setTimeout function call to separate its logic from any clashes with document.body onload event logic, or any jQuery document ready logic.
Now the HTML and Javascript could be called job_search_grid_game.htm and changed from yesterday for HTTP Cookie functionality in this way.
We hope you get something out of these “early days” HTTP Cookie thoughts, that we may apply to some of our game web applications.
Previous relevant Job Search Grid Game Tutorial is shown below.
Job Search Grid Game Tutorial
We are always on the lookout for a good quiz or game. But what if that idea is “sort of” … both? Well, we just had to give the dog a bone! But we digress.
This is where we have to thank Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1 profusely. This book is full of wonderful brain games that combine puzzle feels with game feel and quiz feel. We normally like to shape a game based on another we stumble across, and add our own content, but, alas, the content here for today’s game is so good, it makes my brain hurt thinking of another set to make it work. And that is where we “value add”. Not with the “default content” of the game, but to value add to the experience we CMS it. So what does “CMS it” mean? Well, “CMS” stands for “Content Management System”, and we use the principles of CMS to encapsulate all the variable aspects we can think of about this game … within reason and present that in an HTML form …
… our usual “suspects” for such goings on. So should the information not be too long, this should allow the user to set their own content for the game … all you young and old Einsteins out there.
However, if you find today’s game interesting and/or stimulating, rest assured Helene Hovanec has filled a book full of puzzles and quizzes and challenges like this, and so we would recommend you get out there and buy Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1.
Within the HTML and Javascript job_search_grid_game.html code you will find lots of calls to Javascript’s eval method to get a CMS job done, but not involve a serverside language … does not compute … whatttevvvvvvvver.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
