I have a MvcSiteMap with a MvcSiteMapNode parent that contains child nodes. The parent node has a url and the children nodes have urls. When displayed, when the mouse hovers over the parent node, the child nodes appear below it, however when the parent node is clicked, the child nodes disappear but the webpage does not navigate to to the url of the parent node.
<mvcSiteMapNode title="Im a Parent" url="~/ParentUrl" >
<mvcSiteMapNode title="Im Child 1" url="~/ChildUrl1" />
<mvcSiteMapNode title="Im Child 2" url="~/ChildUrl2" />
</mvcSiteMapNode>
What is causing the page not to navigate?
Edit (example with pictures):
My assumption is that the click event is being hijacked to make the child node dropdown disappear and not being passed on
Hovering over parent node before click:
After click, dropdown disappears, no navigation to "~/ParentUrl"
This really doesn't have anything to do with MvcSiteMapProvider, but it is probably related to how Twitter Bootstrap functions (assuming you are using Bootstrap). Twitter Bootstrap is designed to work with touch devices, so by default the main link is not clickable (since touching it should open the menu, not navigate to the link).
But someone came up with a hack to get it working, assuming you don't want to support touch devices.
I suggest you re-think your design, since touch device support is very important these days. One possible solution would be to use 2 links - one (with a down arrow) to open the menu, and one to navigate to the link.
Note that you can modify the templates in the /Views/Shared/DisplayTemplates directory to output any HTML/CSS you need to get this working as described here.
Related
What should be the best UX for a situation where one set of record cannot exist without another.
Take a scenario in an application where a child can be connected to zero or more parents.
If a user of our application finds himself filling a form to create a child but the parent for the child does not exist yet, what is the best approach to creating the parent and then attaching that parent to the child.
Should the child be created without the parent, but updates can be done to add parent to child, note that this also has its own issues as the page where the addition will occur might also need to create the parent.
Have a link on the child page that says "create parent", and route back the user back to the child page after creating the parent.
Have a button bring up a modal that has the parent form and allow the user to create the parent before returning.
I don't like any one of these three options and I am hoping there are better approach out there.
Sorry for any typos or ambiguity, in bit of a rush, also not sure if this is the right place to ask the question.
Since the records are depending on each other I would make sure the user submits these together but make it look like 2 different elements on the same page.
You could use a tab-menu to switch between the child and parent but both should be filled in before submitting. Some inspiration even though you don't need to fill in multiple tabs here. Just make sure it's easy for the user to see that he needs to fill in both tabs.
Another option could be to have the child form collapse when finished/closed like a drop-down menu with an expand arrow button incase you want to edit it again. And the same with a parent box below it. Something that looks a little like this.
They could both be closed at the loading of the page so the user sees both boxes.
I'm using Primefaces 6.1 Dialog Framework. I'm wondering if there's a way to use a general growl for nested dialogs.
I could use a growl in one of the child dialogs but it displays the messages inside the boundaries of the iframe and not on the top-right corner of the window.
Here's an example:
main.xhtml > dialog1.xhtml > dialog2.xhtml
So, I'm in main, then I open dialog1 to view some data and then dialog2, which is kind of a tiny CRUD page.
When there's an error in this last page, I want to display the error message on the top-right corner of the WINDOW (not the iframe), just like it would do in the main page.
I don't know if it's a bug/issue or I'm just dumb, but I'm running out of ideas. Is there a way to accomplish this?
Thanks in advance!
(I can't provide the code now, but if it's really neccesary i'd edit this a put a simple example).
I have created menu and its child links like
About
contact us
portfolio
our location
I have used menu block to display sub menu only when about in click and display sub menus in another layer.
Now my requirement is when i click on any sub menu in parent menu then the parent menu should be active. To achieve this task i searched a lot off and found menu position module for this purpose. I have configured and specify page path in Restricted to certain pages, but now it is now working. What i have mistake or any other solution for this problem. Please let me know the right solution.
<?php
$block = module_invoke('menu_block', 'block_view', '1');
print render($block['content']);
?>
I am adding this code below the topbar menu. but inside the menubar wrapper.
If my understanding clear then you will need this menu - Menu Position https://www.drupal.org/project/menu_position
This module allows for the creation of rules that will dynamically add the current page into the menu system at the requested spots.
If you dont want to use this module then you will need to append menu-id in the menu link's li and then through jquery / js will need to add certain classes to parent menu items.
Actually there is no requirement to use any module for this situation. What i have done to achieve it. I just modified template.php of zurb foundation theme. i have copied the code(foreach loop code) from here and added to the template.php file as mentioned in the page and added the css like below:
#main-menu li.active-trail a,
#main-menu li a.active, #main-menu li a:hover {
background:#fec325;
/* IE6-9 */
}
and that's it. i have achieve what i want. I hope anybody who is looking same kind of problem can find this solution useful for this kind of requirement.
I have a search dialog that I am popping up and filling with jquery templates. After they make a selection I set a value on the current page. As such I don't need hashTags or anything like that, I just need a pop-up dialog that I can open and close programatically. I am currently opening the dialog with
$.mobile.changePage(dialog, { transition: "slide", changeHash: false });
and closing it with
dialog.dialog('close');
However, in certain cases (when the page is navigated to), closing the dialog refreshes the current page.
Is there a better way to interact with this?
Update:
I think I figured out what is going on. So for some reason, jquery mobile usually keeps 2 pages loaded on the DOM - one of which is invisible, you can verify this by running $('[data-role=page]') in the console. One page is the page you're on, the other is the page that you initially navigated to. Not quite sure why they choose to do that, but there you have it.
So they treat dialogs as a page navigation with a different transition even if the dialog is already in the DOM. Therefore, if you go directly to the page and then trigger a dialog, modifying the current page and closing it works fine - because the original page is always loaded in the DOM. However if you go to another page, than navigate to the page that triggers the dialog, and THEN trigger the dialog it destroys the current page so that the pages in the DOM are the initial one and the dialog. In that case it reloads that dialog-launching page entirely and you never get a chance to make any modifications.
Jeez. How do I interact with the jqm dialog widget directly?
You can try two other things. Both should work:
1 set DomChache
How about overriding JQM to keep the page your are firing the dialog from in the DOM? The docs say you can set data-dom-chache and override cleaning the page from the DOM.
If it only happens when you load this page in via AJAX (vs. loading it directly) you could make DOM-keeping dependend on your trigger page having data-page-external, assign DOM-chache="true" only when the dialog is openend and remove it again once the dialog is closed.
2 override JQM
I had the same problem you described and got it to work like this (requires hacking into JQM though...):
// inside transitionPages function
if ( !$(toPage).jqmData('internal-page')
{fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );}
}
My problem was that pagechanging to certain pages (same as dialog) caused the preceding page (where the dialog fired from) to be removed from the DOM, so I had a blank screen (when trying to go back). I added data-internal-page="true" to the pages, which should keep the preceding page intact and added the if-clause in JQM.
So now pageHide (and DOMcleanup) only fires, if I'm not going to a page labelled with data-internal-page="true"
Cheers!
I think I was having a similar problem. What I wanted to do was based on certain parameters, pop a dialog window on load (with that content on the same page), which they can close and view the page that loaded.
I could get it to pop on load using load, or the pageshow events, but when I clicked close that sent you back to the previous page in history, instead of just closing the dialog.
//target your 1st page content, here its id=success
//the modal content is in a page id=dialog and data-role="dialog"
$('#success').live('pageshow',function(){
window.setTimeout(function(){
$.mobile.changePage('#dialog','pop',false,false);
},1);
}
Its a hack, and just allows the page load to beat the dialog so it gets stuck in history. Then the default dialog close behavior for the dialog works as expected. Talk about a PITA, if they took a little more for the JQuery UI dialog it would have made things a ton easier.
And regarding your question: Have you looked at Jquery Mobile Actionsheet plugin
If you don't really require a page to be loaded, that should be ok.
Also helpful could be Cagintranet iPad popover, although you have to tweak the design to be fullscreen on mobile devices. If you require CSS/Jquery to do that let me know (I'm using this in a JQM plugin I'm writing)
Hope that helps.
I've been playing around with buttons in XUL. I discovered that when you put an image on a button it creates an image element inside that button, I know this, because I can style that image with the CSS selector 'button image'.
So, my question is what other implicit elements are there? I want to have a white menu arrow and I can't work out what its called.
They are called "anonymous nodes" and you can see them in DOM Inspector for example. If you prefer to inspect them programmatically, document.getAnonymousNodes() or document.getAnonymousElementByAttribute() will give you them ("normal" DOM methods won't, they ignore anonymous nodes). Anonymous nodes are usually created via XBL, e.g. the default XBL bindings for buttons can be found in chrome://global/content/bindings/button.xml (anonymous nodes are defined in the <content> tag). In Firefox 5 this corresponds to the directory chrome/toolkit/content/global/bindings/ in omni.jar - feel free to browse around in this directory (the bindings are assigned in chrome/toolkit/content/global/xul.css). When styling anonymous nodes keep in mind that the anonymous nodes will sometimes depend on the operating system (see <dialog> binding for an example, note the preprocessor directives choosing code parts based on operating system).