So I have installed audio.js on my website. All works ok. I want it to change how it looks. Actually, I want that it would appear only as Play button (or play/pause button). Or in other words: I want to hide progress bar and "time passed | time remaining". How can I do this?
audiojs has settings that u can customize the style and markup, please refer to the documentation
If you wanna use default class names, you can overwrite their styles by adding css something like this:
.audiojs .scrubber {
display: none;
}
There is the working source code link: https://jsfiddle.net/qp5xjxb9/3/
Related
I am using the following code to toggle my mobile navigation
html
<p>toggle</p>
I have a function which attaches the proper code/css and just need it to act as a button but not go anywhere (hence the '#').
However I want nothing to show up when it clicks/hover, since the browser usually indicates where the link is going, I don't want that (or anything else) to show
As Michael suggested, why not try using a button instead? Your code would look like this
<button class="toggle-nav"><p>toggle</p></button>
All you'd have to do is change any CSS/JS you have to reference the button instead of an a tag.
You may style the link with pointer-events.
.toggle-nav {
pointer-events: none
}
<p>toggle</p>
I am using video.js 5.7.1 on a single video player within a web page. The video element contains a "captions" track element. When the user clicks the CC button in IE 11, they see a menu containing the following:
captions settings
captions off
english
I would like to completely remove the first menu item "captions settings" so that the menu only shows "captions off" and "english".
I'm sure it's something simple, but I can't seem to find how to disable/remove the "captions settings" menu item. What needs to happen to remove this option from the CC button on the player?
For now, I'm setting the track kind to "subtitles" instead of "captions", to avoid the settings menus entirely.
What I ended up doing was adding the following CSS after the video.js CSS:
/* Prevent CC settings menu item from displaying */
.vjs-texttrack-settings {
display: none;
}
This accomplished what I needed; the captions settings menu item no longer appears on the CC menu. This works in 5.7.1 and 5.8.8.
In case anyone comes here looking to hide all of the caption settings this should work:
.vjs-caption-settings {
display: none;
}
I posted this same question to video js forum on github:
https://github.com/videojs/video.js/issues/3202#issuecomment-202540661
The Videojs folks posted solutions - here is the solution I used based on theirs:
after the player started up, I made that problematic area invisible with css:
$(".vjs-texttrack-settings").css("display","none");
I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.
How can this be accomplished?
Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!
For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:
/* Use an extra class to make sure you only target the
ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
display: block !important;
}
That should override the mdl-layout__tab-panel's default behaviour, which is to hide.
If this doesn't work, just share a codepen and I should be able to help further!
How to make the text/image emerge when you click on the another text/image? For example, a bottom "help" on the top of this website makes appear the image and the text when you click on it. I'm trying to do the same effect with my personal website. Anybody know the way to get it?
Consider using the JavaScript onClick(); event: http://www.w3schools.com/jsref/event_onclick.asp.
Set your the element that you want to show to display:none; then set to display:block; onclick or even use the jQuery fadeIn effect.
I'm not entirely too sure what you're after, but I hope that this is a start.
Set an ID to the element (like ). In your CSS stylesheet, simply add the following:
#hideMe { display:none; }
I know this can be done with custom CSS, but I can't figure out the right way to do it.
I think I can figure it out for all of them if you show me how to do it with just the title.
For example, this is the element I want to remove: <h1 class="page-title entry-title">
I know that {display: none} is the CSS to hide an item, but how can I do it for only a specific page?
the website is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Use h1.page-title { display: none; } to hide the title, this will affect ALL pages that use the same template.
If you want to do it specifically to this post use the following:
#post-28 h1.page-title { display: none; } the post number will lock it to that page only.
Based on that page, the body has classes
<body class="wordpress... singular-page singular-page-28 layout-1c"
28 is the page id of that page, so if you just want a CSS fix for this, you can use the code below
.singular-page-28 h1.page-title{
display:none;
}
note, if you move the wordpress to another webhost, via export/import, you'll need to look at the page_id again if it changed
See this fiddle, if this is the way you want it.
http://jsfiddle.net/Qj4Us/
It simply looks for the targetted URL like "http://myinneryoga.com/strange-exotic-fruit-supplement/" and if found, hides the h1 with class=page-title
Instead of modifying CSS which will affect all pages we can make use of simple plugin. Below are the steps :
Click on Plugins > Add New.
Now search for Hide Title.
Install and activate the plugin.
Now click on Pages > All Pages.
Now edit the particular page where you want to hide the title.
Now, In the right panel you can see an option to Hide title. Check that and publish your changes.