I just want to keep the drag event of seekbar, and I don't want users to click on it to adjust the video schedule.
I've tried to do this:
this.player.controlBar.progressControl.seekBar.disable()
this.player.controlBar.progressControl.seekBar.handleClick = () => {}
But none of this is helpful.
Please help me. I've tried my best.
Using only CSS, putting these 3 lines in your html seems to solve it:
<style>
.video-js .vjs-progress-holder .vjs-play-progress { display: none; }
</style>
myPlayer.controlBar.progressControl.disable();
this worked for me.
Related
I try everything on this and other forum to do it and not ask people..
But nothing happened! haha
I would like to know if someone here know how to change the background colors on Henson template on Squarespace ? (So also all the texte of the page).
I try this in the CSS section but it didn't worked.
#collection-5e827250f835166c09c3dcbe
{background-image:url("https://static1.squarespace.com/static/5c3a93e22487fd34bb34eaa9/t/5ea1dd8bda93e023950c5bcf/1587666340724/Background.jpg");
background-size:cover;
background-position:center;
}
And i try this in the injection code :
<style>
#collection-5e827250f835166c09c3dcbe {
background-color:#000;
}
</style>
Thank you in advance,
hope someone can help me!
The Henson template has a "title-card-overlay" that, if enabled, makes it non-obvious to change the initial background color of a the page.
To change the background color of a specific page, add the following CSS via the CSS Editor/Custom CSS:
#collection-57ae1156e3df28c4ce90ea48 .main-content {
background-color: #000000;
}
#collection-57ae1156e3df28c4ce90ea48 .title-card-overlay {
background-color: #000000;
}
Of course, in the above code, change the collection ID 57ae1156e3df28c4ce90ea48 to the ID of the page in question.
I want to disable sticky toolbar which appears on top of page when page is scrolled. How it can be done ?
I resolve this problem by CSS
.ck.ck-editor__top.ck-reset_all {
z-index: var(--ck-z-modal);
position: sticky;
top: 0;
}
.ck.ck-sticky-panel__placeholder {
display : none !important;
}
.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: unset;
}
The fact that the toolbar appears in the wrong place when the editor is in an overflowed container is a bug that we are aware of. But in this case, I'd recommend you to not use the classic editor at all. If you want to have more control over where the toolbar goes, e.g. the DecoupledEditor (demo) allow controlling the toolbar. This editor type doesn't do anything with the toolbar itself – it just creates it and it's up to you where you're gonna insert it.
Another option would be implementing your own custom editor, but that'd be necessary only if you wanted to make even more customizations
I'm having same issue with the classic-editor, the position of the .sticky_panel is changing on the event of focus in the .editor_editable.
at some point when it's not visible within the display and click inside it goes all up to first element .
CSS only:
ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: absolute !important;
}
In my editor build, I did a hack like this:
const stickyUpdateInterval = setInterval(() => {
editor.ui.view.stickyPanel['_checkIfShouldBeSticky']();
}, 100);
editor.on('destroy', () => {
clearInterval(stickyUpdateInterval);
});
This is just a crude hack that will update sticky balloon all the time.
If you know exactly in which overflow container your editor will be mounted, you can do something more clever, like listen to scroll events and update only then (this is what CKEditor is doing for the window, BTW, that's why it's not working when you put it in a container).
I have spent some time trying to get the CKEditor Classic component "sticky toolbar" to work nicely in Angular with a scrolling pane and there are 2 issues I had to overcome.
The position of the toolbar when sticky this defaults to the top
of the browser page (view port) - so (in Angular) you need to
configure this setting in the HTML template :
[config]="{ui:{viewportOffset:{ top: 58, right: 0, bottom: 0, left:
0}}}"
Making the editor respond to scrolling. This was a more difficult
one to resolve for me. The solution I have is (thanks to panta82
above) is to catch the scroll events and call a function in the
editor to check if the toolbar should be sticky or not .. it's
called checkIfShouldBeSticky :)
Here is a working sample in StackBlitz
I faced the same issue,
if you have header then below css will also help
#media only screen and (max-width: 767px) {
.ck-sticky-panel__content {
top: 180px !important;
}
}
#media only screen and (min-width: 768px) {
.ck-sticky-panel__content {
top: 128px !important;
}
}
document.getElementById('main')?.addEventListener('scroll', () => {
setTimeout(() => {
// eslint-disable-next-line no-underscore-dangle
editor.ui.view.stickyPanel._checkIfShouldBeSticky()
}, 100)
})
I am using chart.js lib on a programmable device i need to add an image as background to my chart, if that is not possible how can i change background color to black?. I cannot use Jquery as it is not supported by the Platform.
Thank you
Thank you!
I didn't think to CSS, i added an image too in a similar way
canvas {
background-image: url(backgroundimage.jpg);
}
You can style the canvas element. Something like this will work
canvas {
background-color: black;
}
Fiddle - https://jsfiddle.net/w1yhp03h/
Here is the fiddle. I've put a Select box as sample. It seems that it can't be shown inside modal. How can be it solved?
...................................................Update.....................................
To solve this, I've added this CSS:
.bootstrap-select.btn-group .dropdown-menu.inner {
position: static;
}
Now, the Select-Option are showing, but it seems that the dropdown taking the real space which increasing the height of popup. But, I expect dropdown will cross the popup window if the height of dropdown is much. How can I make it?
Updated Fiddle
See the updated jsFiddle: http://jsfiddle.net/mijopabe/gj9axc18/5/ You need to add this to your CSS:
.modal { overflow: visible; }
.modal-body { overflow-y: visible !important; }
I also took the liberty of including the plugins corresponding CSS file from a CDN:
//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css
I made a vertical carousel which consists of images that when clicked should be visible fullscreen. But the problem is i'm not able to figure out how to make sure the fullscreen images are preloaded or something and works like the thumbnail images(getting preloaded).
I'm not sure what approach to follow for preloading the fullscreen images using css background and how to make sure the images fadeIn or just some transition when i click on the thumbnail in the carousel.
Please have a look at the following link where my code is uploaded.
http://www.lluvia.me/slideshow/carousel.html
If its convenient,feel free to check the script by checking the source.
Help would be appreciated. Thanks!
Found this post and figured it might help you, Preloading images with jQuery
Try and post some of the code in your body for future reference. :)
Quick and easy:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
Or, if you want a jQuery plugin:
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();
Alternatively, if you want to stick purely with CSS check out this page: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/ You can just have the background image be positioned off screen then come on screen when needed.
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }