I want to completely disable full screen functionality.
I removed fullscreen button like this.
videojs('videoPlayer', {
controlBar: {
fullscreenToggle: false
}
});
But on double click it still goes to full screen.
How to disable double click?
Darius Oleskevicius helped me with the answer on videojs github page: https://github.com/videojs/video.js/issues/5604
The current dblclick handler doesn't take into consideration whether fullscreen toggle is disabled. It is on by default and there is currently no settable option to disable it. As of now, you could try and cancel out dblclick listener on tech (see below).
player.ready(function() {
player.tech_.off('dblclick');
});
Also if you use reset function, you have to again remove dblclick event listener.
As of Video.js 7.5.0, there is an an option to turn it off directly
videojs("my-player", {
userActions: {
doubleClick: false
}
});
You can use CSS to initialize the various control-bar objects
to exist or not.
See, for example: https://github.com/videojs/video.js/issues/2507
So, for your case, just use:
<style>
.video-js .vjs-fullscreen-control { display: none; }
</style>
EDIT:
Ok, I figured out what's up with the "double-click" !
I still run all my video pages, using version 5 of videojs.
Version 5.11.9, to be exact.
And, it turns out that double-clicking on a video back then, did NOTHING.
So, bottom line, if you truly 'want to disable 'double-click-to-fullscreen',
it can be done. Just use 5.x, rather than 6.x or 7.x
Having said all that, I now have to consider this a bug in 7.x (and 6.x).
The code inside videojs SHOULD be testing whether the fullscreen-control
exists or not, and if not, the double-click should NOT be going to fullscreen.
The list of versions is here: https://github.com/videojs/video.js/releases
Just I added controlsList="nofullscreen" attribute. But playing the video on click on the center of won't work. So I added onclick="vd.play()" attribute. <video id="vd" src="video.mp4" onclick="vd.play()" disablePictureInPicture controls controlsList="nofullscreen"></video>
Related
Good day
I was wondering if it's possible to hook a Javascript onto a PXAction button. normally you can use the ClientEvents Property but with a button, these are not exposed.
The problem I am is every now and then there is a delay between the client and the server and the client will click the button a second time. I have server-side code to help stop this by disabling the button but I want to add a javascript to see if I can prevent it completely.
The code I want to add:
<script type="text/javascript">
var submit = 0;
function CheckDouble() {
if (++submit > 1) {
alert('This sometimes takes a few seconds - please be patient.');
return false;
}
}
</script>
Any ideas or workaround I can maybe try?
I believe the PXJavaScript control is what you are after.
I used this link to help get my head wrapped around how to use the control. We had a need to trigger something off with Java Script and the PXJavaScript control got us to the end result we needed.
Dynamically Change Button Color
Let me know if this helps?
Robert
I'm writing a Primefaces 5.1 portlet.
It consists in a unique page containing a panelMenu, and I need that it starts with any panel collapsed everytime a user change page (on page loading).
But, if I open a panel, then change page, it will start showing that panel still opened.
I wasn't able to find any option to achieve this goal (e.g. collapsed=true, ignoreCookie=true or something similar).
The only solution I found was the following Javascript code:
PrimeFaces.widgets.myPanelMenu.collapseRootSubmenu(PrimeFaces.widgets.myPanelMenu.headers);
The problem is that this code will collapse any opened panel (so on page loading user is able to see panel menu collapsing animation) but it seems it doesn't store this state in its cookie/localstorage... the result is that on any page loading user can see this animation.
I'm sure it doesn't save its state, because the only way to "solve" the problem is to manually re-open and re-collapse the panels... then, on following page change, these menus start closed (and there is no animation).
I also tried to use PrimeFaces.widgets.sideMenuPanel.saveState() after collapsing, but with no success.
Do you have any idea about?
Thank you...
I found a solution to the problem.
If you read my discussion with Kukeltje (comments on my question), you will find that latest Primefaces' versions will solve the problem.
Otherwise, if you want to avoid upgrade or modify sources, and you need a quick fix based on Javascript only please read the following part of the answer.
It directly works on the component's state using JavaScript.
First of all you need to have a variable reference to your component:
<p:panelMenu model="#{menuBackingBean.menuModel}" widgetVar="sidePanelMenu" />
Then you should add the following JS code on document ready:
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
// following line is commented because it never should be necessary is not necessary (unless unexpected situation I never verified)
//clearSidePanelMenuPreferences();
// 2. Call the "clear preferences" actions on click on two tpe of links: first level are the panel link (used to open/close the menu) and second level are the destination links
// We need to fork also on the first level links to be sure it works after user clicks there then exit from the page in another way
panelMenu.headers.children("a").click(function(){setTimeout(clearSidePanelMenuPreferences, 500)}); // setTimeout is necessary because this event should be fired after preferences are written
panelMenu.headers.siblings().find("a").click(function(){clearSidePanelMenuPreferences();});
The function called to clear preferences are the following:
function clearSidePanelMenuPreferences() {
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState(); // store this information
}
Hope it helps
Please check this block of code
PF('myPanelMenu').headers.each(
function(){
var header = jQuery(this);
PF('myPanelMenu').collapseRootSubmenu(header);
header.removeClass('ui-state-hover');
}
);
I prefer to do this in order to execute this method only once and keep the menu option selected.
$(document).ready(function() {
if(location.pathname == "/cotizador/" || location.pathname == "/cotizador/faces/login.xhtml"){
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState();
}
});
I have a single AppBar declared in default.html for use throughout my application.
On some of the pages I need to show the App Bar and in some of the I need to hide the AppBar.
So far, my efforts to find the methods to hide and show the AppBar have met a dead end.
The documentation on MSDN says:
AppBar.hide method :
Hides the app bar on Windows and the secondary command menu on Windows Phone.
So, that method only hides the AppBar for Windows and not for a Windows Phone project.
I have also tried giving display:none as a CSS style, to no effect.
Any help will be appreciated :)
AppBar.Hide hides the secondary command bar on Windows Phone, not the main AppBar. If you want the entire AppBar to go away then this isn't the right property.
The easiest way is to declare the AppBar on pages that you want to show it and to leave it out on pages that you don't want it, but you should be able to hide it by disabling the AppBar on pages that you don't want it on.
I just modified the appbar-commands.js file in the HTML AppBar control sample as follows and the appbar hides and shows as I click the hide and show buttons:
// These functions are used by the scenario to show and hide elements
function doShowItems() {
document.getElementById('commandsAppBar').winControl.disabled = false;
//document.getElementById('commandsAppBar').winControl.showCommands([cmdFavorite, cmdCamera]);
document.getElementById('scenarioShowButtons').disabled = true;
document.getElementById('scenarioHideButtons').disabled = false;
}
function doHideItems() {
document.getElementById('commandsAppBar').winControl.disabled = true;
//document.getElementById('commandsAppBar').winControl.hideCommands([cmdFavorite, cmdCamera]);
document.getElementById('scenarioHideButtons').disabled = true;
document.getElementById('scenarioShowButtons').disabled = false;
}
I also confirmed with the single-page navigation model navigating between two pages. If you aren't seeing the appbar hide and show when disabled and enabled then make sure you are calling the code to disable / enable the appbar. The PageControl's ready function may not be called when returning to a cached page.
You'll have to do it with C#, You can simply just type.. (If your appbar is called ApplicationBar)
ApplicationBar.Visibility = Visibility.Collapsed;
This will instantly hide the AppBar! If you want your HTML Page to perform this action, it will be much complicated.
Cheers
I think you can try below step in your code.
Add a event listener for appbar beforeshow
In code of before show Check a condition with specific page name
Like : if (WinJS.Navigation.location.match("test.html"))
According to you condition you can Disable your appbar.
All the best..!!
How do I stop my Google Chrome extension's default action to auto-focus the first link in my popup.html? I know I could probably do some roundabout hack with JS or change the :focus CSS, but I think this is throwing off something else I'm trying to do and I'd prefer to stop the root cause of it.
The easiest (and javascript free!) way is to simply add tabindex="-1" to any element which you don't want to receive automatic focus.
Perhaps auto-focus was intended for a convenience, but often it does a disservice. Since I see no way to stop the root cause, I found some roundabouts. One is using JavaScript. Chrome puts auto-focus after a short delay after displaying the popup. It's possible to unfocus it with blur() but unfocusing it too late will flash it momentarily, and trying to unfocus too early will do nothing. So to find the right time to unfocus is not easy, and this solution tries to do this several times during the first second after the popup is displayed:
document.addEventListener("DOMContentLoaded", function () {
var blurTimerId = window.setInterval(function() {
if (document.activeElement != document.body) {
document.activeElement.blur();
}
}, 200);
window.setTimeout(function() {
window.clearInterval(blurTimerId);
}, 1000);
});
Another pure HTML solution is to add tabindex="1" to the body tag.
Wrangling the initially focused element with a tabindex attribute is probably the best way to go, using:
tabindex="-1", as suggested by Paul Ferret to prevent an element from getting focus
tabindex="1", as suggested by link0ff, to specify which element should start with focus
If your situation is more complicated and you do want to bring in some javascript, I'd recommend using link0ff's solution, except, instead of trying to guess when to blur with timeouts, listen for the initial focus in event:
function onInitialFocus(event) {
// Any custom behavior your want to perform when the initial element is focused.
// For example: If this is an anchor tag, remove focus
if (event.target.tagName == "A") {
event.target.blur();
}
// ALSO, remove this event listener after it is triggered,
// so it's not applied to subsequent focus events
document.removeEventListener("focusin", onInitialFocus);
}
// NOTE: the "focusin" event bubbles up to the document,
// but the "focus" event does not.
document.addEventListener("focusin", onInitialFocus);
I don't believe the focus event is cancelable, so you can't just suppress the event.
Another easy alternative (which preserves "tabbability") is to just add an empty link () before your first actual link. It will invisibly "catch" the auto-focus from Chrome, but any users who want to tab through the links will still be able to do so normally.
The only minor downside of this approach is that it introduces a second "dead tab" when looping; that is, users will have to press tab three times to get from the last link back to the first, instead of just twice.
tabindex="-1" worked for me. I was adding autofocus to an input and it didn't work until I used this tabindex="-1" attribute for each link before the input.
Strange to say the least.
This is the best solution to the problem. The tabindex="-1" solution harms user experience, and as opposed to #link0ff's solution, this one removes the focus instantly.
This element should be the first focusable element in the DOM:
<button class="invisible-button"></button>
This simply removes the button once it's been focused:
function removeAutoFocus(e) {
if (e.target.classList.contains("invisible-button")) {
e.target.style.display = "none";
document.removeEventListener("focus", removeAutoFocus);
}
}
document.addEventListener("focus", removeAutoFocus, true);
I need to have total control of the perspective menu.
I already hacked into the platform to disable the CONTEXT menu:
private void disablePerspectiveToolbarMenu() {
PerspectiveBarManager perspectiveBarManager =
((WorkbenchWindow) PlatformUI.getWorkbench().getActiveWorkbenchWindow()).getPerspectiveBar();
if (perspectiveBarManager!=null){
ToolBar toolBar = perspectiveBarManager.getControl();
Listener[] listeners = toolBar.getListeners(SWT.MenuDetect);
if (listeners != null){
for (Listener listener : listeners){
toolBar.removeListener(SWT.MenuDetect, listener);
}
}
}
}
But i need also to control the default contents of the PERSPECTIVE MENU. There is one option that is always present that gives access to a Perspective List Shell. I need to remove that option from the menu.
It's a shame that the perspective menu is totally out of user control. I just need to have the perspectives added to the menu, and nothing more!
Thanks.
There are 3 potential options to get rid of Other:
Set the
org.eclipse.ui.IWorkbenchPreferenceConstants.SHOW_OTHER_IN_PERSPECTIVE_MENU
preference to false in your RCP app. This can be done by including a plugin_customization.ini file with your product definition.
Patch the workbench in your RCP app.
Have a look at
org.eclipse.ui.internal.PerspectiveBarNewContributionItem
and
org.eclipse.ui.actions.ContributionItemFactory.PERSPECTIVES_SHORTLIST
Don't include the default
perspective bar in your RCP app.
Instead, create a perspective bar
using org.eclipse.ui.menus, a
toolbar, and the openPerspective
command.
I did some research and the solution did not work as I expected it. Finally I found my mistake.
To set the property in the plugin_customization.ini I tried:
org.eclipse.ui.IWorkbenchPreferenceConstants.SHOW_OTHER_IN_PERSPECTIVE_MENU=false
but this is not the correct notation!!! Please see the correct solution I added finally to the plugin_customization.xml
org.eclipse.ui/SHOW_OTHER_IN_PERSPECTIVE_MENU=false
So the name of the interface or the class specifying the property ist not part of the notation!