I designed my own styles for MediaElements.js and everything works fine but the progress bar.
I want to show the progress as a filled background but can't get it aligned to the left. Despite whatever styles I try to apply, the result shows the progress bar centered:
This happens to time-current and also to time-loaded elements. They should be both aligned left after the play/pause button. Internally it is done by transform: scaleX() which seems to be related to the problem.
Here is the jsfiddle.
Related
I found a carousel (https://codepen.io/paulnoble/pen/yVyQxv) that has some awesome transitions and thought it'd be nice to integrate into a project I'm working on: https://joshrodg.com/halloffame/
My code is here: https://codepen.io/joshrodgers/pen/MWBPXBx
The responsiveness of the design needed to be adjusted slightly because to me having the content split (left, right) doesn't quite work that well on smaller screens (like phones) - it'd make it almost impossible to read. So, my idea was just to remove the right-side content all together.
I have that working and it looks exactly as I expect, except one thing...
Basically, there is vertical paging on the right-side of the slideshow. When you click on the next circle it rotates forward to the next slide, when you click on the previous circle, it rotates backwards to the previous slide. On a desktop screen (larger than 900px) the paging area stays on top of the rotating images, which makes the slideshow rotation look really nice. On my iPhone, and I'm guessing on other small screens, the rotating images appear to rotate on top of the paging area and then it re-appears.
I'm sure this is a simple tweak, but is there a way to keep the paging area on top while rotating through the images on a desktop and smaller screen like an iPhone?
This is also an issue on the original carousel, so I'm not sure how to fix it.
The paging area does have a z-index: 1 but for some reason the images still rotate on top of the paging area. I even tried setting it higher: z-index: 1000, but that didn't seem to do anything.
Anyone have any ideas?
Thanks
Josh
After looking into this a little more, I was able to find a solution!
My carousel__control div is what was controlling the vertical pagination, this was in carousel container and rightfully so, as it was controlling the position of everything inside. However, this also caused the issues I described, not really sure why.
All I did to fix this was move carousel__control out of the carousel container - basically right above it in the document. Then had to set my margins to match and adjust it's position. I couldn't keep the margin: auto and top: 0. Once I adjusted those two properties, everything started working as expected.
I have updated the pen here: https://codepen.io/joshrodgers/pen/MWBPXBx
Thanks,
Josh
I'm trying to make the height of xtermjs dynamic. I've looked around but the solutions don't seem to solve my issue. I played with CSS but the problem doesn't seem to be there. I'm also using the xterm-addon-fit.
As an example I created this sandbox to show the issue. I've added a dragging pane that has a somewhat hard to see black bar in the bottom. When I drag it, the xtermjs component doesn't resize.
In the image below, the black box with numbers (xterm) should be inside the orange box after we resize the orange box.
I've used a component to make it easier to test, but it happens if we resize the window in other ways.
What am I missing here?
As explained by #jerk, if we fit when the resize happens, it fixes the issue.
This codesandbox with an extra hook makes it work. Although now to test it, you have to drag the console pane up and down instead of using the custom component.
// It resizes xterm when the height changes
useEffect(() => {
fitAddon.fit();
}, [height]);
Notice the auto scroll stops. Depending on the scenario, you might want to scroll to the bottom.
I am using scrollreveal.min.js on my WordPress site.
Scroll reveal works just fine, but when I attempted to hide the vertical scroll bar that appears during animation (for the section) with
overflow-y:hidden;
the scroll bar was hidden for the element, but animation on scroll no longer worked for each item.
Also, one other question, in order for overflow-y:hidden; to work I have to comment out my overflow:auto; is this necessary or is there a way those can work together?
Overflow-y:hidden as per w3 schools "The content is clipped - and no scrolling mechanism is provided". This means that the content is cut off, as in, you can't scroll anymore. Kind of like an image when it's cropped, you can't scroll in a cropped image. You'll want something like this instead: Hide scroll bar, but still being able to scroll
What is a good way of getting stacked progress bars to animate smoothly without flickering?
I'm currently using Bootstrap, changing the width styles (using Knockout).
Example: https://jsbin.com/lewuzewupo/2/edit?html,console,output
My problem is, if you watch that long enough, the green bar on the right flickers. This is seemingly because the animations cause it to get pushed to the right when the middle dark blue bar appears and disappears.
(I have tried everything I can think of to ensure that at no point in time do the total of the stacked bars exceed 100. If I stop using the progress-bar class and use my own that results in a similar look, but with no animation, then there is zero flickering and the bars are stable, always totalling 100.)
So is there a workaround for the problem in Bootstrap, or an alternative way of creating stacked progress bars that look as nice as the Bootstrap ones and animate smoothly?
[edit: added debugging to prove my percentages always total 100]
I think I've come across this kind of thing before - it's down to the 'complete' text. Basically it's not working out the widths quite right. 2 ideas.
Remove the 'complete' text and it should be ok.
Attempt to only display complete after a certain time and the values have dropped to a particular ratio.
Sorry can't be of more help.
I am having some problems with getting the slider to display right. I have it setup and working, however, I need the slider to slide behind my nav bar on the top of my page. It goes right over the top and that prevents the site from being used. Someone please help! I have tried changing z-index to a different number to get this to work. Any ideas?
http://test.mountaintopwebdesign.com/