I'm developing a Google Chrome extension that makes heavy use of the context menu, and I would like to make certain menu items available only on some domains.
Currently, I am using chrome.tabs.onUpdated and chrome.tabs.onSelectionChanged to check the tab url, and then I add or remove menu items based on a check against a domain list.
Is it possible to just disable the menu items, instead of removing them? I'm hoping for something like this:
chrome.contextMenus.update(id, {"disabled": true});
It's possible now: https://developer.chrome.com/extensions/contextMenus#property-createProperties-enabled
chrome.contextMenus.update('your-id', {
enabled: false
});
Unfortunately you cannot. That would be a neat feature I suppose. Feel free to submit a feature request http://crbug.com (Make sure you mention any valid use cases for it).
An old post but maybe someone will find this answer useful.
As of Chrome 62 the following works (puts cleaner logic on large context menus):
https://developer.chrome.com/apps/contextMenus#method-update
After the menu has been created, update the menu as follows:
chrome.contextMenus.update(intId-or-stringId, {"visible": true});
with toggle:
chrome.contextMenus.update(intId-or-stringId, {"visible": false});
Removing and creating menus will mess the order of the menu (new menus get placed at the bottom). Enabling and disabling still leaves the menu cluttered up. The visible option keeps the original order of the menu intact.
Related
I am trying to only allow people to scroll through a drop-down list using the scroll-bar and prevent them from scrolling, by hovering over the entry at the top of the list.
You can see an example of a drop down list, which allows people to scroll through to the top of the list, by hovering over the first entry by looking at this Codepen.
<!-- https://codepen.io/Joshimoto/pen/qQLyoO -->
It would be great to only allow them to do this, by using the scroll bar, but at the same time not removing their ability to select an option from the list.
Any help or suggestions would be extremely helpful!
I finally found a solution to this, VueSelect actually had a method, which was controlling this functionality.
After reading this GitHub ticket, I was able to disable the functionality using:
Vue.component('v-select', {
extends: VueSelect,
methods: {
maybeAdjustScroll: () => false
}
});
The developers for vue-select might add a prop for this later on, but for now this was the only approach I could find.
I hope this helps!
I've had a search and I couldn't find anything & also it's my first time using the site so hope it hasn't been asked.
I've run into a situation. I'm by no means an experienced website maker. I'm learning as I go. I have a CSS drop down menu that works fine on desktop browsers. When I get into the realm of mobile I encounter a problem, namely that :hoverdoesn't work (obviously).
I found this : http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly but I can't get the ruddy thing to work.
The page in question I'm applying it to is here : http://www.inkslinger.co.uk/calibre/index.html I really can't work this out and its driving me absolutely batty. Any help would be really appreciated.
I had the same problem and found an easy workaround which I have used here
hover example
The Post Natal and Ante Natal options, when hovered over, trigger the drop down, but you may notice that they are NOT links themselves. In my original model they were links, but when I realised this would not work on touch devices, I simply made them into triggers for the drop down boxes, and put the links inside the boxes too. So for you, your 'What we do' link, would not be a link, just a trigger for the dropdown menu, and then in the menu you can have your link to the 'what we do' info.
It is also worth remembering that certain touch devices, such as some iPads, do not like hover states at all, if you find that the hover state won't trigger your dropdown menu, then add 'onclick="return true"' to the list item in question. This will usually make the hover state work like a click.
Hope this helps, what I've written represents about 3 days of poring over my library of reference books.
We had this problem and changed the hover to clicks.
Instead of using hover, which is of course impossible on touch devices, using :active would likely be a good start. Selection something is still possible on touch devices, bind the menu to the active state of a toggle and you're done.
You will have to switch from hover to click event for this case. There's no workaround for that.
You should definitely consider changing your design to have a hamburger styled menu which opens from left for touch devices.
See this demo from the link that you posted. It changes to a different menu style when you open it in mobile device.
http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/
Also if you want to have your top link as a direct link to other page; you can have two separate clicks on the top button for that. First click will open the menu and after the menu is opened you can assign the direct link to it as done in the above demo.
Put this line of code inside your head tag like this:
<head>
<script>document.addEventListener("touchstart", function(){}, true);</script>
</head>
Create for your hover element an active class like this:
element:hover, element:active { Your CSS }
Voila.
Basically, I'm making a google drive-esqe web app, that handles storage of user's notebooks and notes that are created in the app.
For my home screen, the user will see all of their notebooks rendered out and they will be clickable. When a user clicks on the item, the item highlights, as well as checking its respective checkbox (why we have both, I don't know.) and then a menu bar is supposed to appear at the top, giving the user options to perform upon that notebook/note.
The menu bar is par of a app-wide navigational bar, but the menu is strictly for the home page only.
The problem is in the functionality of some of the menu options. The way the app currently stands is that the user may select multiple items, but some menu options will disappear when doing so (e.g. Open will disappear as we only want one note opening at a time). I currently have no idea how to go about designing this. Mainly, I have no idea how to keep track of the number of highlighted items (will provide a snippet for the highlighting below), and no idea how to get the appropriate menu options to appear/disappear when appropriate. Right now, I have a menubar.ejs that holds all the menu titles, and it is included (<%-includemenubar.ejs %>) in the navigation bar that all screens have access too.
MenuBar.ejs
<ul class="menu">
<li>Home</li>
<li>Create</li>
<li>Open</li>
<li>Download</li>
<li>Share</li>
<li>Delete</li>
</ul>
Highlighting:
var itemSelect = function(){
$('.searchResult').click(function(){
$(this).toggleClass("highlighted");
var check= $(this).find('.checkbox');
check.prop('checked', !check.prop("checked"));
}
While this probably not the best way to go about this, its the only way I could think of at the time.
I'm really VERY new to all of these languages etc, so this is a pretty daunting task for me. Any help much appreciated! Hopefully I've provided enough information, but if I haven't, I'll do my best to specify more or add more where needed.
To get all items which are highlighted you can use the jquery selector:
$('.highlighted'); // returns an array of hightlighted items
$('.highlighted').length; // number of highlighted items
The questions a little vague but in terms of designing, try to think of the app in terms of views/contexts, if I have a note open what should be able to see do?
I use a Dojo Enhanced Grid to display various data. With a DropDownMenu I give the user the ability to show additional colums.
But this is a little bit uncomfortable. Because the user has to click for every new colum onto the menu.
Is there a possibility to prevent the DropDownMenu from closing? Or should I use another widget for this?
I'd suggest you look into Dojo dgrid, and the ColumnHider extension. It effectively recreates what you're doing, and is available out-of-the-box, including the feature you're after.
An alternate solution is to use a dijit/TooltipDialog, whose default behavior is to stay open when one of its contents is clicked.
yourGrid.openDropDown(); will open the menu back again, and you would not really notice that it was displayed back again after a close.
I want to remove the "New" option in a entry on the main menu. Its that little right arrow that allows the user to see this menu at all, I'd be okay with completely removing that.
Here is what the element looks like in my sitemap:
<SubArea Id="nav_cases" Entity="incident"
DescriptionResourceId="Cases_SubArea_Description"
GetStartedPanePath="Cases_Web_User_Visor.html"
GetStartedPanePathAdmin="Cases_Web_Admin_Visor.html"
GetStartedPanePathOutlook="Cases_Outlook_User_Visor.html"
GetStartedPanePathAdminOutlook="Cases_Outlook_Admin_Visor.html" />
And based on the sitemap documentation I don't think I can acheive this with the xml.
So I guess I want to know if this is possible? Or is this just part of the framework I can't get at? Is there some clever javascript I can do?
The reason I want to remove it is because these are childen in a parent:child relationship and we only want users to create them from the context of the parent record.
Unfortunately I don't think there is a way to do this (unless you go way unsupported and are not online).
An alternative would be to have JavaScript on the form that immediately prompts the user for the parent record. That's probably the approach I would take.