Tombola is a webapp – a web page that behaves like an application – designed to help teachers, lecturers and trainers to ask questions of everyone in their lessons and seminars.
Categories
Category: Web technologies
Categories
JavaScript userscripts
Problem
I was playing a browser-based game that required me to perform an action at 04:00. And I wanted to be asleep at 4am.
One thing I want all budding web developers to remember is this- your application front end is running on someone else’s computer. In what is effectively a debug environment. Developers need to ensure there is no trust between the client and the server (the other way around is fine, however).
Because the code is not compiled, it is even easier to dig into the code- the HTML and JavaScript -and make changes.
But I didn’t need to go that far.
Using Firefox, and hitting Ctrl-Shift-K, brings up the Web Console. From here, we can look at messages, errors and warnings, but we can also issue commands in JavaScript.
Solution
[code lang=”js”]setTimeout(function() {document.getElementsByName("act_use")[0].click()}, 120*60*1000);[/code]
Let’s break it down. First, I need to trigger something in the future. That calls for setTimeout() (setInterval() if we wanted to keep triggering again and again).
setTimeout() takes two arguments, which we might call what and when. what needs to be a function- not the result of a function, but a reference to a function, and if you won’t be using it elsewhere, you might as well inline it, as above. The when is the delay time in milliseconds.
The function body will contain all the instructions we want to carry out. I wanted to simulate a button press on a button element. So the next step is to get a reference to that element. Looking at it, I could see it hadn’t got an id attribute, but it did have a unique value for its name attribute. So that indicates use of document.getElementsByName(). Note that it is “Elements” and not “Element”, because name isn’t necessarily unique on a page. So it returns an array, of which I wanted just the zeroth element- so my call needs the index [0] suffixed to it:
[code lang=”js”]document.getElementsByName("act_use")[0][/code]
This expression should now be a reference to the button element. And what did I want to do with it? Click it. Luckily, there is a function available to us, click(). We can just tack that onto the end, and that’s all our function needs to do.
There’s not much to say about the delay, but note how I have used an expression, not just a literal. That’s to allow me to edit it more easily in future. The 120 is the number of minutes, and I can change it directly, as opposed to working out how many milliseconds it would be.
So, leaving my computer awakw, and the browser open, I issued the command in the Web Console, and came back down in the morning to find it had worked like a charm. Itch, scratched.
If you want to explore this further, might I recommend you take a look at GreaseMonkey or TamperMonkey, for permanent scripting you can apply to pages you visit?
Categories
Clouds – animation example
Here’s a demonstrator I coded up for one of our web development classes, to illustrate some animation techniques.
Give it a try, put some clouds in your browser to while away your tea break.
Note how the clouds towards the top of the screen are larger, fewer in number, and faster moving than at the bottom of the screen, roughly simulating the wider field of view nearer the horizon. There’s a CSS gradient to try to sell the illusion too. This distribution is controlled by feeding output from the pseudorandom number generator into a function, giving a skewed distribution where larger numbers are more common than smaller numbers.
Controls are at the foot of the page. They are faded in and out using the CSS transition property, whilst the cloud animations are done using the velocity.js library. I hand-drew the clouds (PNG format, for the variable transparency needed for compositing). I apologise in advance for some of the iffier ones.
I was first introduced to Scalable Vector Graphics (SVG) through Inkscape, the excellent free vector graphics drawing application. It’s available for Windows, Linux and OS X, so please give it a try. You can get it as a portable app, runnable on a Windows machine from a USB memory stick, incredibly handy to have when working on other people’s machines (so if you’ve never visited PortableApps.com, maybe now’s the time!).
Image elements, on the web, are square. Which is fine in many situations, and suits the image content. But often that content is irregular or at least non-rectilinear in shape. Take, for example, a red ball against a transparent background. To our eyes, the content, the important visual information is actually circular. If we try to wrap text around it, the browser is unaware, and can only conform to the image element boundary.
There’s always more than one way to do it, but take a look at this method for wrapping text around non-square image content for web pages. It’s the same image file of a circle, but now the text appears to follow the contours of the visually important object, not the <img> element:
