I have made an Accordion Menu like what have been explained here. The problem is that when you clicking on the menu items, browser will try to jump (and scrolling) to the target to be sure that the target is visible in the view port. Is there any solution to prevent the jump, except something like this?
$("a[href^=#]").on("click", function(e) {
e.preventDefault();
history.pushState({}, "", this.href);
});
js source: Fighting the jump
There is no other way than using JavaScript.
You could also listen to the hashchange event, save the actual scroll position at the time of the event firing and jump back to it after the event.
But those are the only possible solutions one could think of.
Related
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/
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,
i want to open a popup window when user leaves tab or closes browser, the available option with me was window.open, but with that, it asks for popup blocker, if it is not enabled, i tried every possible ways to ignore popup-blocker but in vain, i tried onunload, onbeforeunload, but it does not works, i also tried to use modal dialog, before the tab/browser, i used it in onbeforeunload event, but it shows a browsers alert message, which i dont want, my simple requirement is, i need a popup window (if possible) or modal dialog, on the close of tab/browser, but should ignore popup-blocker, i guess with modal dialog, i dont need to worry about popup-blocker, because that wont be the new window, but how i would be handling it, while user closes tab/browser. If any of the above option is not possible, can anyone help me with any other possible alternative, or helpful articles.
Edited Question
i used the below script and with that i can open a new popup window on link click, without popup-blocker interfering in it
$('a[href=http://www.google.com]').click(function(){
window.open(this.href);
return false;
});
then why its not possible for the closing events.
You can't - because that's what popup blockers do: they block popup windows (i.e. calls to window.open or invocations of target="_blank" links) unless it is directly in response to a user mouse action.
Opening popups when a browser window is closed was a common tactic of "pop-under" ads in the early 2000s, and it irritated users, that's why Firefox and IE6's popup blocker block them, and there is no way around it for you unless you ask the user to disable their popup blocker on your site (and I think you'll find most of them will have no idea how to do that).
What are you trying to accomplish anyway? What is the content of this popup that you want the user to see? What other approaches have you tried?
Exact duplicate of your previous question....
I'll post my answer for it here as well though...
Popup blockers are designed to prevent this behavior.
I would suggest using a modal window instead of an actual browser window. I don't think that these get blocked because they are opened within the page itself.
As for the event... You could do something like...
window.onbeforeunload = function whatever() {
//Do code here for your modal to show up.
}
If you are just trying ot give a warning or something you could do
window.onbeforeunload = function showWarning() {
returnString = 'Whatever you want your message to be....';
return returnString;
}
By returning something in the onbeforeunload statement it will show a confirm box with your message in it.
Popup blocker will not block the opening of popups if the javascript code which opens the popup is executed on user's direct action like click, keypress, drag, etc.
In an accessible flex app, the user can navigate through the control by using the TAB key.
The flex app pops up on top of the html page aftert the user activate a particular link, and is loaded using swfobject.embedSWF.
It works well in most cases, but there are some instances where either or both these happen:
a) The flex app loads ok, the "flex focus" is set on the intro text label to read out loud, but pressing tab seems to still cycle through the links on the page behind. (Now Fixed, see Edit 2)
b) The focus worked well and pressing tab cycle through the controls ok, but after going through them it then tabs out of the flex app and onto the address bar.. it becomes a nightmare to even try to get back to the flex app without clicking on it.. which isn't exactly accessibility friendly.
Is there any way to prevent these from happening?
EDIT: The target browser is IE. Seems to be the most used with Jaws
EDIT: I managed to fix problem (a). The trick was to call focus on the swf object, but after a slight time out - must be something to do with flash/js ready state.
setTimeout(function(){
document.getElementById('swfobject').focus()
},25);
Problem (b) is still an issue though...
In your mx:Application component, add an event listener for the keyFocusChange and add this code :
protected function application1_keyFocusChangeHandler(event:FocusEvent):void
{
event.preventDefault();
focusManager.getNextFocusManagerComponent(event.shiftKey).setFocus();
}
b) Try to place some focusable element after swf in html. When focus leaves flex app, see if onfocus handler of that element gets called. If it is, you can refocus flex app from there or redirect it where you want.