I was trying to disable the loading spinner, as it hangs on some browsers.
I found an existing solution, which definitely works. This line:
data-setup="{"children": {"loadingSpinner": false}}"
Problem is this code addition changes the skin of my player.
Spinner disabled, new skin: http://thinkmad.com/s/projects/little-racer-dancing/
Old skin:http://thinkmad.com/s/projects/parachute-youth-count-to-ten/
Both still have:
class="video-js vjs-default-skin"
Anyone know how to fix this so all my skins are consistent?
Alex
In your video tag you have data-setup="{"children": {"loadingSpinner": false}}" change this to use single quotes ' around your data-setup attribute like so
data-setup='{"children": {"loadingSpinner": false}}'
your code is closing the attribute with just {
When I use single quotes instead of double quotes, the progress spinner returns and the original problem persists:
http://thinkmad.com/s/projects/little-racer-dancing/
I'll also mention this is a video that is 720p but on the page I've resized it to 640x360. Not sure if that matters.
Related
We are trying to build an music playing interface on a Vue page that plays in a bottom player as described here:
https://vuetifyjs.com/en/components/bottom-sheets/#music-player
But the playlist and other controls are in the main page. But the problem is that these elements get 'blocked' or deactivated or something, there is no way to interact with them. Just like in this example.
Input elements stop working and scrolling on the main page works only by grabbing the scrollbar on the side.
#clicks are still registered, however, and scrolling on some other components work.
I think I have tried every API setting and combination in the docs, like attaching it to different dom elements, or hide-overlay, and persistent, but nothing seems to work. The same principle seems to apply to other dialogs that take focus in vuetify.
https://vuetifyjs.com/en/api/v-bottom-sheet/
Does anyone have experience with this or know a workaround for it? It would be greatly appreciated!
This is intended behaviour. Your best bet is hide-overlay in combination with persistent
<v-bottom-sheet
hide-overlay
persistent
></v-bottom-sheet>
I face the same issue and solve that with the "retain-focus" property
try this <v-bottom-sheet :retain-focus="false"></v-bottom-sheet>
I've coded this website: https://feetup.com/
All works fine, except that in safari the fixed header at the top hides under the content when scrolling. This happens only the homepage. I tried everything I could find online to fix it, without success.
Any suggestions are welcome!
I tried two ways and it works for me, you can try and pick the most suitable way for your site:
Disable overflow: hidden on .hero-index, the header still remains when it is outside of the hero element.
Bring the <header> outside and put it above the <div class="... feetup-hero hero-index">
I had a problem with the Masonry plugin causing to only function when the viewport is being changed, meaning the masonry boxes were invisible until you would resize the browser window. After that the boxes are not olny visible but also Masonry works as expected.
I resolved this problem by using regular CSS again for styling, and not LESS CSS anymore as I had intended.
But what would I be able to do to use both? (It doesn't seem like it's a simple 'reorder how the scripts are being loaded' kind of thing)
Funnily when I use jsFiddle and implement LESS CSS there, there is no problem. Maybe somebody can tell me what jsFiddle does to fix the issue?
https://jsfiddle.net/rcygo5fy/
code
"Solution": Since a solution would be a hassle with the code and compiling the CSS on every load is very heavy, especially client-side, the best solution is to leave LESS completely out of the end result and only use it for development but a LESS-to-CSS-rendered file for actual usage. With CSS the Masonry timing problem goes away.
Whenever I click inside a tooltipdialog, this border shows up around it.
Is there an easy way to remove this?
EDIT: After trying in different browsers, it seems to affect only Chrome, the outline doesn't appear in Firefox or IE.
I faces the similar issue when i started working on Dojo. To fix this basically you need to add the following css for dijit's dijitTooltipDialog class
.dijitTooltipDialog {
outline : none
}
See this for example.
I'm developing a website using jQuery UI, and there are several elements on my site that appear to be incompatible when viewed on touchscreen devices; they don't cause any errors, but the behavior is not what it should be.
The elements in question are sliders and rangesliders as defined by jQuery UI; on the touch screen, instead of registering a touch as picking up a handle and a drag as dragging the handle across the slider, it just slides the whole webpage to the side of the screen. It does work if you tap the handle and then tap the location on the slider where you want the handle to end up, but this is very slow and not ideal. Any ideas?
I tried downloading the jqtouch plugin and then attaching .touch([...]) to all calls to slider() and rangeslider(), but that didn't work.
UPDATE: I found this "patch" on the jQuery UI website
http://bugs.jqueryui.com/ticket/4143
that says it facilitates slider on iPhone, but now for another question: how do I incorporate this "patch" into my code? Do I just include it at the beginning of the code like a plugin?
This library seems to offer what you're looking for:
https://github.com/furf/jquery-ui-touch-punch#readme
It also has some example use code (simply add the plugin):
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$('#widget').draggable();
</script>
Just wanted to add some new info about this. Touch-punch will work fine for Ipads and Android devices. But the slider will not work on Windows mobile devices, as far is I could test(with the latest versions of jquery ui & Touch punch)
The fix is quite simple, just add the following CSS-rules to the .ui-slider-handle:
-ms-touch-action: none;
touch-action: none;
Hope this helps
As #dazbradbury suggested, the touchpunch library can help translate the mouse events to touch events. The parameters in .draggable() limit the movement of the slider so it can't be moved beyond its slider parent.
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({
axis: "x",
containment: "parent"
});
</script>
EDIT: If you are already using a Jquery UI slider, you only need to include the touchpunch library. Do not call .draggable() for the .ui-slider-handle because it will overwrite the existing functionality.
I had the same problem. I developed an elaborate slider UI building on jQuery UI's slider only to realize it doesn't work at all on mobile. I tried the suggestions listed here but since I have a custom solution that's only based on jQuery UI Slider, it did not work.
Just use noUiSlider.
It does all the elaborate features (and much more) as the one I built on top of jQuery UI slider. It works beautifully on mobile devices and is easy to style too.