Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
  • Page:
  • 1

TOPIC: Change the width of sound audio bar and transcript

Change the width of sound audio bar and transcript 1 month 3 weeks ago #6834

  • brenowers
  • brenowers's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 4
  • Thank you received: 0
Hi there,

We have a XOT where we have the audio (via the 'sound' function rather than narration) and transcript appear above the main content area on slides. The problem we're facing is that their width is based on the width of the image that is being used on each individual slide, which is usually different, so the audio bar and transcript width are never the same (screenshot attached). Would anyone be able to suggest a way around this?

(We'd quite like to keep the page types the same)

This is my first post here, forgive me if I should have posted in another category.

Best,
Brendan
Attachments:

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

Change the width of sound audio bar and transcript 1 month 3 weeks ago #6838

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 630
  • Thank you received: 169
Hi
there's probably a bit of css or script you could use but can you share a link to an example so that we can inspect and suggest a solution?
HTH
Ron
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/

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

Change the width of sound audio bar and transcript 1 month 3 weeks ago #6839

  • brenowers
  • brenowers's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 4
  • Thank you received: 0
Hi Ron,

Thanks for the response. Here is a playground link: xerte.cahss.ed.ac.uk/play.php?template_id=1595
from slide 2 onwards.

Best,
Brendan

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

Change the width of sound audio bar and transcript 1 month 3 weeks ago #6840

  • brenowers
  • brenowers's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 4
  • Thank you received: 0
I should also say I am using JS insertBefore{} to display the transcript and audio above the content.

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

Change the width of sound audio bar and transcript 1 month 3 weeks ago #6841

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 630
  • Thank you received: 169
Hi Brendan
as well as that you have custom css controlling width and various layout elements etc and the problem is the size of the audio player including it's controls etc is controlled dynamically. That said try the following:
1. Add an optional styles property to the LO icon e.g. the first icon in the tree
2. Add the following css
/*set the audio player to 100% width*/
.mejs-container {
    width: 100% !important;
}
/*prevent the volume slide from wrapping*/
.mejs-controls div.mejs-time-rail {
    max-width: 80% !important;
}
Personally in your example I would also set the transcript div to fill the width and so also add the following:
/*set the transcript width to 97%*/
#transcript{
 width:97% !important;
}

HTH
Ron
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/
The following user(s) said Thank You: brenowers

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

Last edit: by ronm.

Change the width of sound audio bar and transcript 1 month 3 weeks ago #6842

  • brenowers
  • brenowers's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 4
  • Thank you received: 0
Hi Ron,
Thanks for taking a look at this. I have applied both of these and got what we're looking for :)
Many thanks!
Brendan

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

  • Page:
  • 1
Moderators: jjs
Time to create page: 0.049 seconds
Copyright © 2020 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search