Basically I just wanted to know how to change the looks of the right click menu using css. I haven't tried anything because I have no clue were to start.
Thanks in advance
unfortunately, you can't change the right click menu style using CSS, but you can disable it and create one from scratch using HTML, CSS and Javascript
you can handle the right click event (context menu event) by adding this code:
document.addEventListener('contextmenu', function(e){
e.preventDefault();
});
This part e.preventDefault(); will disable the default behavior of the right click and the context menu will no longer appear, now you need to add a function and new style for your styled context menu
If you are still not sure how to make this here's a tutorial for the complete thing you want to achieve https://www.sitepoint.com/building-custom-right-click-context-menu-javascript/
Related
I am working on alpha.dubaiexporters.com.
http://alpha.dubaiexporters.com/aboutus.aspx
Upon resizing the browser, the blue button panel comes and after clicking on it, it shows the navigation side bar.The issue is that after clicking somewhere else, it does not disappear.
I don't seem to find the issue here. The home page is not creating any problems. Rest pages do.
You can add to end of your code when you activate the menu and
$(".container").on("click", function(){
$(".menu-btn").click();
});
And inside the menu-btn.click() add a $(".container").off(); so it toggles the behaviour.
I have a word press navigation bar which has 2 buttons Home and Contact. When hovering on the contact page there is a sub item called number. How do I stop the user navigating to the parent link? and only allow them to selected number and navigate to that page.
The quickest way would be to create that parent menu item with a URL of #/ which will prevent the click. It will append #/ to the url in the browser, but other than that nothing else will happen. Note that the slash at the end will prevent the page from scrolling to the top when clicked which is especially useful if you have a sticky menu.
If you want to prevent the URL from changing in your browser you can add some Javascript to prevent the click event for links with a href of #/ like this bit of jQuery...
$('a[href*=\\#\\/]').click(function (e) {
e.preventDefault();
});
As Jaxon said in the comments, you could then use CSS to change the cursor on those parent items (to default perhaps).
If you felt this method was too "hacky" you could use a Walker to actually override the output HTML, but depending on your implementation that feels like overkill to me for such a small effect. Plus, once you strip the a tag out you could run into other issues with your menu if your dropdowns require that tag to work properly.
You can try these steps in the wordpress console.
https://connectnc.com/clients/knowledgebase/112/How-to-make-menu-item-unclickable.html
I'm experiencing a frustrating problem with MaterializeCSS dropdown links created on Wordpress Menus. I can see the link when I hover over the top level items, e.g. About FAIRDOM, but I can't click any of them. I know it's an issue somewhere perhaps in having a hidden element above that may be catching the click event, but I can't see where. Anyone with any idea of where the issue is in this site http://beta.fair-dom.org/ ?
MaterializeCSS built their dropdowns "mobile-first". Essentially, what that means for you is that the JS that powers the dropdowns explicitly disables the href on click for all dropdowns. This is a because, on mobile, a user cannot hover and can only touch.
However, if you're still wanting to get around this, you can try out the following (assuming you're using jQuery):
<script>
$('.dropdown-button').click(function() {
window.location.href = $(this).attr('href');
}
</script>
Try sticking that just before you close the body tag,
In my flex app I have custom tooltips on buttons that hide and show based on user context.
The problem that I dealing with is that when I call my showTips() function I only want to show tooltips on the buttons that visible in the view. So buttons that on a un-selected tab (tabNavigator) should not show the tooltips.
For some reason all tooltips are showing.
Is there a way to detect if a button is not in current view, like on a un-selected tab?
If you gave us some code I could check this out, but would this work?
if(button.parent.visible) { showTip(button);}
Instead of custom coding for each button, make use your tabnavigator's creation policy is set to "auto".
Check this link for more details
http://livedocs.adobe.com/flex/3/html/help.html?content=layoutperformance_05.html
When I click the button, it should popup my module, when i click outside it will hide or remove it. This is the code I have:
private var Showup:IFlexDisplayObject;
Showup = PopUpManager.createPopUp(this, samplemodule, false);
Showup.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, Removewindow);
private function Removewindow(e:FlexMouseEvent):void
{
PopUpManager.removePopUp(Showup);
}
My problem is, in samplemodule I have lot of buttons. When I click any button the corresponding module should load to middle portion.. but it does not load.
Please tell me the mistake or an alternative option!
Please add
mouseDownOutside="PopUpManager.removePopUp(this)"
tag inside you samplemodule (Popping canvas) main Display object as tag.
This will remove the popup when you are moving outside the popup and clicking.
Not quite sure what you are having trouble with, the close or the centering of the popup. I think it is the centering. If so, try adding:
PopUpManager.centerPopUp(Showup);