Tag Archives: contenteditable

Editable Calendar Google Translate Tutorial

Posted on September 4, 2026 by admin

Yesterday’s Editable Calendar Primer Tutorial‘s start to our Editable Calendar project was a very anglo-centric exercise. Today, we want to use the great … Google Translate … to help translate our inhouse burgeoning Editable Calendar skeletal contents to some non … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged calendar, cell, content, contenteditable, date, day, day of week, dropdown, edit, editable, English, Google Translate, grid, HTML, internationalization, Javascript, language, month, programming, proof of concept, span, table, table cell, translation, tutorial, Web Application, webpage, year | Leave a comment

Editable Calendar Primer Tutorial

Posted on September 3, 2026 by admin

Today’s new Editable Calendar themed inhouse web application combines … ideas from our relatively recent foray into Calendars regarding the blog posting thread headed by Event Calendar Collaboration Textarea Highlight Linking Tutorial this WordPress Blog’s calendar design (you can see … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged calendar, cell, content, contenteditable, date, day, day of week, edit, editable, grid, HTML, Javascript, month, programming, proof of concept, span, table, table cell, tutorial, Web Application, webpage, year | Leave a comment

Horizontal Block Calendar Game Tutorial

Posted on September 2, 2026 by admin

Yes, today’s blog posting title kind of gives the game away, regarding what we were getting at with yesterday’s Horizontal Game Soft Link Resources Tutorial‘s operating system Soft Links preparation work, help with a … Horizontal Block Calendar Game … … Continue reading →

Posted in Animation, eLearning, Event-Driven Programming, Games, Operating System, Tutorials | Tagged animation, Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, calendar, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, keyframes, limit, Linux, locked, Lorem Picsum, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, operating system, option, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointer-events, pointing, portrait, preparation, presenation, project, property, random, random image, repository, resource, resources, section, share, sharing, SMS, soft link, span, speech to text, stop press, symbolic link, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index | Leave a comment

Horizontal Game Soft Link Resources Tutorial

Posted on September 1, 2026 by admin

After yesterday’s Horizontal Block Game CSS Animation Tutorial, today we’re revisiting … resources … reminiscent of our start to the current “Dominoes Game And On” blog thread back in it’s early days Dominoes Game Sections Tutorial discussion. Perhaps we should … Continue reading →

Posted in Animation, eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged animation, Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, keyframes, limit, Linux, locked, Lorem Picsum, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, operating system, option, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointer-events, pointing, portrait, preparation, presenation, project, property, random, random image, repository, resource, resources, section, share, sharing, SMS, soft link, span, speech to text, stop press, symbolic link, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index | Leave a comment

Horizontal Block Game CSS Animation Tutorial

Posted on August 31, 2026 by admin

Today we … extend yesterday’s Horizontal Block Game Random Image Types Tutorial‘s ondblclick and oncontextmenu (or ontouchmove) “drill downs” to other Wikipedia image Block Game choices … and … allow for a CSS @keyframes animation definition to affect … CSS … Continue reading →

Posted in Animation, eLearning, Event-Driven Programming, Games, Tutorials | Tagged animation, Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, keyframes, limit, locked, Lorem Picsum, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, option, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointer-events, pointing, portrait, preparation, presenation, project, property, random, random image, repository, resource, resources, section, share, sharing, SMS, span, speech to text, stop press, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index | Leave a comment

Horizontal Block Game Random Image Types Tutorial

Posted on August 30, 2026 by admin

Around here, further to the recent Horizontal Block Game Less Personal Types Tutorial‘s Horizontal Block Game incarnation developments, today we present two new Random Image choices we turn to quite a bit, those being … the great Lorem Picsum repository … Continue reading →

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, limit, locked, Lorem Picsum, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, option, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointer-events, pointing, portrait, preparation, presenation, project, property, random, random image, repository, resource, resources, section, share, sharing, SMS, span, speech to text, stop press, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index | Leave a comment

Horizontal Block Game Less Personal Types Tutorial

Posted on August 27, 2026 by admin

Onto yesterday’s Horizontal Block Game Personalized Second Image Type Tutorial‘s new Horizontal Block Game types, today, we add a variety more number of emoji and image type game incarnations, as per … ++DominoesShapeAnimalFoodTransportActivityMathematicsMoonAstrologyFlagChessNumberEmail …PlanetCardOther TimeZones (further to yours below)Sydney … … Continue reading →

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, limit, locked, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, option, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointer-events, pointing, portrait, preparation, project, property, resource, resources, section, share, sharing, SMS, span, speech to text, stop press, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index | Leave a comment

Horizontal Block Game Personalized Second Image Type Tutorial

Posted on August 26, 2026 by admin

After yesterday’s Horizontal Block Game Types Tutorial a cruel streak in us might say … Emojis Smemojis … as we return to another image (element img) scenario, except this time they take the form of … Background image pairs (thanks … Continue reading →

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, limit, locked, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointing, portrait, preparation, project, property, resource, resources, section, share, sharing, SMS, span, speech to text, stop press, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index | Leave a comment

Your Numbers Game
Get clue	Your answer	Your Score
Clue?		Score 0/0

Search for:
Recent Posts
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- Not Categorised
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
November 2026

S M T W T F S

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30

« Oct
Meta
Tags
Ajax animation background button canvas command line CSS Did you know DOM dropdown email emoji event form game Google Google chart hashtag HTML IFRAME image iOS Javascript MAMP media mobile navigation onclick overlay PHP popup programming select share sharing SMS SVG table text textarea tutorial url video web browser webpage
Your Background Image
OnTopList

November 2026
S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

The Hello World starting point makes it easier to separate project setup from asset problems. A useful follow-up would be importing a small sprite sheet and checking frame dimensions, ordering and padding before adding animation logic. Previewing the individual frames first can help identify whether a problem comes from the artwork or from the engine configuration.

The distinction between course-driven and immersion-driven learning is useful. A small extension to the australia.htm exercise would be a set of named map markers and a text filter: first update the visible markers on an input event, then add a collected/uncollected toggle, and finally persist only that toggle state in localStorage. That gives beginners a concrete reason to learn arrays, DOM updates and browser storage without needing PHP or MySQL first. It is also worth testing empty searches, a page reload and disabled storage separately; those are different failure cases. Disclosure: we maintain the GTA 6 interactive map. I am suggesting it as an example of a map-and-progress interface, not claiming that we used the tutorial code. Would you introduce persistence after the first working interaction, or keep the initial exercise entirely stateless?

What I find most interesting here is how honestly the post names the hard part: getting focus to work with [element].click() and [element].blur() is the kind of detail that looks trivial until you actually try to drive a page this way. The single-row table that deliberately overflows to the right also makes sense as a design choice, since a radio playlist needs to be scrolled through rather than squeezed into one screen. And the payoff — clicking one song link and having the songs play in sequence and loop back through the list — is a neat reward for all that plumbing with the audio-only YouTube player.

I like the single-row radio-play approach for keeping the controls compact while still making each selection clear. When I’m checking a calculation alongside a tutorial, I use StepStat to see the intermediate steps; how do you handle the layout when the playlist gets much longer?

The idea of mapping a video's key scenes, mood, pacing, and audio before production resonates with me — it's a lot like working out an anagrampuzzle, where the same pieces only make sense once you rearrange them into the right order. Do you usually sketch the mind map before or after the script is locked?

Tag Archives: contenteditable

Editable Calendar Primer Tutorial

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Your Background Image

OnTopList

Latest Comments

Tag Archives: contenteditable

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Tags

Your Background Image

OnTopList