Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC:

Recreating accessibility options 6 years 1 week ago #4996

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
I have a learning object where I've used a pseudo element to display a background image. This obviously breaks the colour change accessibility options (Remove Background Images, Invert, Black on Yellow).

I'm trying to figure out if it's possible to recreate these features, or to add some additional rules depending on which option has been clicked.

As a very rough proof of concept I put this together, which essentially does what I need: codepen.io/anon/pen/GxqZMV

However, I can't get this to work in an XOT object - it just doesn't seem to acknowledge any of the clicks to the colour change options in the same way.

Am I missing something obvious here? Is it even possible to change/add to the colour change options in this way?

Please Log in or Create an account to join the conversation.

Last edit: by Neil Pollock.

Recreating accessibility options 6 years 1 week ago #4997

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 231
  • Thank you received: 86
Hi Neil

I don't know exactly how you are putting this code in your Xerte project but at a guess I think the colour changer dialog doesn't exist at that point so it can't find the elements to attach your new code to.

The dialog doesn't get created until the colour changer button is clicked for the first time so you need to link your code to this first click. Try something along these lines to set it up:
var setUp = 0; // this makes sure that the change function is only set up once, even if colour dialog is opened several times
$x_colourChangerBtn.click(function() {
  if (setUp == 0) {
    setTimeout(function(){ // this just makes sure the dialog contents is ready
      $('#colourChangerOptions input[type=radio] name=colourChangerRadios]').change(function() {
        console.log(this.value); // put your code here - value will tell you which radio button is selected
      });
    }, 0);
    setUp = 1;
  }
});
The following user(s) said Thank You: Neil Pollock

Please Log in or Create an account to join the conversation.

Recreating accessibility options 6 years 1 week ago #4999

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
That makes sense, and a quick test seems to work.

Thanks!

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Moderators: alimcnronm
Time to create page: 0.070 seconds
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search