How to cycle to

How to Cycle Through Classes on an HTML Element

Say you have three HTML classes, and a DOM element should only have one of them at a time:

Why? There is a number of reasons. Changing a class name gives you lots of power to re-style things in the DOM, and state management like that is a cornerstone of modern web development. But to be specific, in my case, I was wanting to do FLIP animations where I’d change a layout and trigger a tween animation between the different states.

Because this is programming, there are lots of ways to get this done. Let’s cover a bunch of them — for fun. I tweeted about this issue, so many of these solutions are from people who chimed into that discussion.

A verbose if/else statement to cycle through classes

This is what I did at first to cycle through classes. That’s how my brain works. Just write out very specific instructions for exactly what you want to happen:

I don’t mind the verbosity here, because to me it’s super clear what’s going on and will be easy to return to this code and “reason about it,” as they say. You could consider the verbosity a problem — surely there is a way to cycle through classes with less code. But a bigger issue is that it isn’t very extensible. There is no semblance of configuration (e.g. change the names of the classes easily) or simple way to add classes to the party, or remove them.

We could use constants, at least:

But that’s not wildly different or better.

RegEx off the old class, increment state, then re-add

Find the index of the class, then remove/add

A bunch of techniques to cycle through classes center around setting up an array of classes up front. This acts as configuration for cycling through classes, which I think is a smart way to do it. Once you have that, you can find the relevant classes for adding and removing them. This one is from Christopher Kirk-Nielsen:

Christopher had a nice idea for making the add/remove technique shorter as well. Turns out it’s the same…

Variations of this were the most common idea. Here’s Jhey’s and here’s Mike Wagz which sets up functions for moving forward and backward.

Cascading replace statements

Speaking of that replace API, Chris Calo had a clever idea where you chain them with the or operator and rely on the fact that it returns true/false if it works or doesn’t. So you do all three and one of them will work!

Just cycle through class numbers

If you pre-configured a 1 upfront, you could cycle through classes 1-3 and add/remove them based on that. This is from Timothy Leverett who lists another similar option in the same tweet.

Use data-* attributes instead

Data attributes have the same specificity power, so I have no issue with this. They might actually be more clear in terms of state handling, but even better, they have a special API that makes them nice to manipulate. Munawwar Firoz had an idea that gets this down to a one-liner:

A data attribute state machine

You can count on David Khourshid to be ready with a state machine:

You’ll almost surely want a function

Give yourself a little abstraction, right? Many of the ideas wrote code this way, but so far I’ve move it out to focus on the idea itself. Here, I’ll leave the function in. This one is from Andrea Giammarchi in which a unique function for cycling through classes is set up ahead of time, then you call it as needed:

I heard from Kyle Simpson who had this same idea, almost character for character.

There were more ideas in the replies to my original tweet, but are, best I can tell, variations on what I’ve already shared above. Apologies if I missed yours! Feel free to share your idea again in the comments here. I see nobody used a switch statements — that could be a possibility!

David Desandro went as far as recording a video, which is wonderful as it slowly abstracts the concepts further and further until it’s succinct but still readable and much more flexible:

And here’s a demo Pen with all the code for each example in there. They are numbered, so to test out another one, comment out the one that is uncommented, and uncomment another example:

How to cycle through images on click?

I am trying to get an image to cycle through other images (and loop) when clicked (no timing involved). I have it working for one image with this code:

My problem is that I’m unsure how to place a second image and have it cycle through different images. I’ve tried duplicating both the JavaScript and HTML and changing the «VCRImage» on the second to another name, but with no luck.

2 Answers 2

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

I hope you find this answer helpful, and consider accepting it.

Looking at your code I did a couple modifications to get this running for you. At first they may seem a bit drastic, but if you take the time to understand them you will see the benefits.

I commented the code where there may be confusion. If you have any questions, please leave a comment.

HTML:

CSS:

JavaScript:

Update: To make the images work off their own alternate image sets I created a data-altimage property on the element. This attribute’s value is set to a comma delimited set of image sources that the image will use when clicked.

How to: Cycle to work – or school – with confidence

How to: Cycle to work – or school – with confidence

Few things in life offer almost complete benefits, but becoming a cycle commuter is one decision that has very few drawbacks. For the wider world, the cycle commuter helps to reduce traffic fumes and congestion.

For family, teachers and employers, the cycle commuter often spends less time stuck in traffic or on trains and buses and is more productive once reaching work or school. And for cycle commuters themselves, adopting the habit of riding their bike each day will make them healthier, fitter and happier. So what’s stopping everyone?

Actually, I can understand when any novice commuter might feel nervous about mixing with cars and general road traffic. Many people tend to think that cyclists are at the mercy of other road users.

However, the roads are considerably less hazardous for competent cyclists who know what they’re doing. Other road users may command bigger vehicles but there is still a lot cyclists can do to influence the way others behave towards them. The more confident you are on the road, the safer you’ll be. So here are some simple steps you can take to make your cycle commute a safe and pleasurable experience.

Pick your route

The first thing to do is pick a route that you enjoy and doesn’t overwhelm you. The beauty of a city or town landscape is that there is a myriad of rat-runs, cycle paths, park routes and backstreet passages that you can take to avoid traffic and make your journey more pleasant.

Don’t mix with other road users and their queue-induced pent-up frustration on the main road just because that’s the only way you know. Nip down a side street and do some urban exploring – you might just find a gem of a route.

Try Cycling UK’s Journey Planner for a range of routes or take a look at our Cycle A-way to find cycling maps and guides for your area.

Take control

It’s a virtuous circle: the more you ride a bike, the better your bike control, the safer you feel, the more you enjoy cycling, so the more you ride your bike.

The cycling games and exercises you might have done as a youngster for a cycling proficiency award are just as valid now – take every chance you can to improve your handling techniques. In particular, practise looking over your right shoulder, signalling and moving out. At the weekend, consider taking your commuting bike on some gentle off-road trails with loose surfaces to get a feel for more advanced bike control.

Stay away from the kerb

This is a hugely important piece of advice and one that many young or nervous riders find counter-intuitive. Any cyclist who is riding tight to the side of the road is actually more, rather than less, likely to have an accident.

They might run up against the edge of the pavement and come off their bike. Drivers are more likely to chance their luck and try to overtake a kerb-crawler in gaps that aren’t suitable. And the area near the kerb is where broken glass and other dangers lurk. Ride a good 3ft or 1m from the kerb and be confident that drivers will treat you with respect.

Lorries

Lorries are one of the biggest dangers for cyclists in city environments, and if you’ve ever sat in a lorry cab you’ll see why. From their seat, lorry drivers are faced with incredibly large blind spots, extending 6ft in front of the vehicle and running down a large portion of the vehicle’s sides.

Meanwhile, current cycling infrastructure points cyclists right down these blind spots, meaning many riders creep down them to get to the head of the queue of traffic. Until we have more direct vision lorries on our streets, the easiest and safest thing is to treat HGVs and buses with the utmost respect, stay behind and refrain from sneaking down their side.

Side junctions

After left-turning lorries, another common cause of collisions are vehicles entering the main carriageway from side roads, particularly on the left. Sometimes a driver simply won’t see a cyclist coming and pull out. To combat this, the cyclist can do a couple of things:

Parked cars

Parked cars are a lesser known but frequent danger for cyclists, with unwitting motorists opening their doors into the path of a rider. Look through the back windscreen of a parked car as you approach to see if anybody is inside, and give parked cars a wide berth in case a door does swing open.

Cycle lanes

Choose your cycle lanes wisely and don’t feel constrained by a couple of lines painted on the tarmac — some cycle lines simply aren’t fit for purpose. Drivers are required to give cyclists as much room as they would a car when they overtake in all circumstances (Rule 163 in the Highway Code). However, many seem to think as long as they’re not driving in a cycle lane, that’s OK. If a cycle lane looks particularly narrow, ride on the outside line demarking it — that way drivers will have to give you proper room.

Riding with children

Any sensible parent will want to be there when their child first cycles on the road. The Highway Code allows two cyclists to ride side by side. Parents should ride on the outside, but be courteous to other road users and go single file when you need to. In fact, single file most of the time isn’t a bad idea anyway, as it allows your child to concentrate on what they’re doing.

When you do go single file, make sure you cycle about 2 metres behind and 1ft or 30cm further towards the centre of the road than your child. Just as at ‘meet the teacher evenings’, it’s time to act as their human shield!

How are cycle to work savings made?

Cycle to work operates as a ‘salary sacrifice’ employee benefit. This means that you agree to give up part of your salary in exchange for a benefit – in this instance the benefit is a bike and/or accessories. The salary sacrifice is taken from your gross salary (before tax) which means that you will pay less Income Tax and National insurance.

Watch the video:

How does salary sacrifice create a saving?

The saving is achieved by paying for the bike and/or accessories directly from your gross salary (before tax). This means your income tax and national insurance are based on your salary less the cost of the bike and/or accessories. This means that your income tax and national insurance are calculated on the reduced amount of salary. Hence, the amount of tax and national insurance you pay is less.

Normally, when you get a bike the process looks like this:

When you get a bike via salary sacrifice the process looks like this:

The graphic below visualises this:

As you can see, by going down the salary sacrifice route you will lower the amount of income that you can be taxed on and thus make a significant saving on the cost of your new bike and/or accessories.

An up-to-date overview of rates of tax can be seen on the Government’s website. However, to save you opening another tab we can confirm that normal rates of tax are 33% for a lower rate taxpayer and 43% for a higher rate taxpayer. This means that most scheme participants save between 33-43% on the cost of their bike and/or accessories during their initial hire period.

It’s important to remember that the cost of the commuting package will always show up on your payslip as the gross (or RRP amount) rather than the net (or ‘with-savings’) amount.

An example of this is shown below:

It’s also important to remember that an Ownership Fee will be due at the end of the Hire Period. This is to avoid tax liability and to ensure ownership of the bike is smoothly and effectively transferred from Cyclescheme to you.

Cyclescheme always recommends that employees choose our ‘Own it later’ option, as this ensures savings are protected and enables you to get another bike or accessories package if you wish. As the ‘Own it later’ option will cost either 3 or 7% of your packages original value your total savings will end up being between 26 and 40% depending on the cost of your bike and/or accessories and the rate of tax you pay.

Helping hand ✋

Savings can be affected by various factors, you can read a note about this within the How much will I save on the cycle to work scheme? answer.

To learn more about Ownership Fees head over to our answer What is an ownership fee?.

For a personalised savings figure that includes ownership fees, visit our calculator and enter your details.

You can search to see if your workplace is signed up using the search box on Cyclescheme’s homepage.

Thanks for the feedback There was a problem submitting your feedback. Please try again later.

How to: cycle in traffic

How to: cycle in traffic

1. Start with good road positioning

Make sure your road position is not too close to the kerb

Keeping away from the gutter makes you more visible to drivers and helps you miss slippery drain covers, potholes and debris at the side of the road. Also, if someone does overtake you too closely, you have more space on your left to move into.

You may need to ride further out from the kerb if you don’t want a driver to overtake you because it would be unsafe to do so. Some traffic-calming features built out from the kerb, or mid-road refuges for pedestrians, for example, don’t leave enough room for a car to pass a cyclist safely.

Moving into the centre of the lane should mean that drivers stay behind you instead of trying to squeeze past. Some people call riding in the middle of the lane (that is, where motorists normally drive) ‘taking the lane’, or the ‘primary position’.

2. Keep an eye on what’s around you

Road awareness is an important skill to develop

This means looking ahead for rough surfaces, drain covers, road humps, vehicles parked in the lane, potholes and puddles (which can hide potholes). Looking all around also helps you prepare for junctions, roundabouts, traffic lights and so on, and anticipate potential problems. This helps you avoid having to swerve, brake abruptly or make sudden manoeuvres that other road users don’t anticipate

3. Building up a sense of anticipation

All road users have the capacity to do things you might not expect

You can’t control what anyone else does, but you can keep an eye out for pedestrians who aren’t looking where they’re going, dogs not on leads, children kicking a football by the side of the road or drivers with a mobile phone to their ear. Once you’ve registered something or someone with the potential to cause a problem, it is wise to stay on the alert so that you can react as necessary.

4. Make your intentions clear

Try to give other road users an indication of what you’re going to do

Check behind, then signal giving plenty of notice before making your manoeuvre. Manoeuvre only when it is safe. Maintain a position in the lane that stops vehicles undertaking you closely on your left.

If you’re nervous about looking behind and/or taking one hand off the handlebars to signal, it’s a good idea to practise this in a safe, traffic-free environment.

5. Make eye contact

Try to make eye contact with other road users, particularly at junctions, side roads and on roundabouts

Making eye contact may help you work out if the driver has seen you or not, but it’s wise to avoid making assumptions about how attentive they are. Certainly, if you don’t see any reaction assume they haven’t seen you and be ready to brake or steer as necessary.

6. Never undertake a lorry

Cycling to work is a safe way to commute to work, but always watch out for left-turning lorries as they pose a significant risk to cyclists

Many lorries have blind-spots on their passenger side, which means if you are cycling on their left, the driver may not have seen you in their mirrors and make a manoeuvre that puts you at serious risk.

This means you should take great care when approaching the rear of lorries and, as a general rule, not undertake them. However, the road layout might mean this is sometimes difficult to avoid. For example, if you are riding in a lane designated for buses, cycles and taxis, and the traffic in the outside lane is stationary or barely moving, you may find yourself passing a lorry on its left-hand side anyway.

Similarly, you might find that a lorry starts to overtake you, but in the end pulls up at traffic lights alongside you before completing their overtaking manoeuvre. If this happens, it might make sense to move past and in front of the lorry at the lights, making sure if possible the driver has seen you. This can be better than remaining invisible to the driver on the inside of the lorry by the kerb.

When in the vicinity of a lorry, or approaching one from the rear, always assess the situation carefully. Remember it is unwise to assume that a lorry driver has seen you if you have ridden up or find yourself on the left-hand side of the vehicle. Similarly, lorry manoeuvres can be deceptive: just because you haven’t seen anything to suggest that a lorry is about to turn left, it doesn’t mean that it won’t.

7. Watch out for car doors

Give plenty of space around parked cars just in case someone opens the car door without looking

When approaching a parked car, check behind first to make sure it’s safe, then move out, leaving at least a door’s width when passing just in case someone flings opens a door into your path (an obvious hazard if you’ve just seen the car being parked). While you can’t always see whether there’s anyone in a car on the side you’re intending to pass, it’s worth having a look as you approach, if at all possible.

Encourage others to do the Dutch Reach.

8. Stay visible when riding your cycle in the dark

Make sure you know the law on lighting up

Legally, cyclists are required to have working lights on the front and rear of their cycles, switched on between sunset and sunrise; white at the front and red at the rear. It can, however, be sensible to use your lights in daytime if visibility is poor (in fog, for example) too. If you plan to cycle at night, you are well advised to carry a spare set with you in case your first set fails.

9. Keep your hands on the brakes

If you can’t get your hands to your brake levers quickly, you might not be able to stop in time if you need to. Cycle with your hands covering your brake levers

Make sure you are ready and able to use your brakes, and that you know how to use them safely. It is usually best to use both brakes at the same time and apply pressure evenly. Take extra care if it is wet, icy or there are damp leaves on the ground, for example.

10. Consider cycle training

Bikeability isn’t just for kids

Whether you’re a beginner or an experienced cyclist, you can benefit from cycle training delivered by a professional instructor. Instructors help you learn more about cycling safely in today’s road conditions, help build your confidence and explain anything that you’re not sure about – getting on an off your bike, changing gears, braking in various conditions, you name it.

#