I'd like to use jquery masonry within a drop down menu, to organize the dynamic menu item blocks (images and text) in a complex drop down menu.
I'm having a couple of issues.
First of all, if I start with display:none then masonry doesn't do any position calculations. Since I'm using masonry with a drop down menu, I can't open the page with the drop down visible.
Secondly, the menu container has to be position:absolute so that the drop down opens Over the continuing page and doesn't push down the text below the menu. Masonry pushes the rest of the page down.
Thirdly, with IE 8 and 9 (didn't try 7 yet), when the I hide and show the dropdown, the blocks of items start off unorganized and then instantly switch to the organized masonry layout. It's the flash on every hide and show that I don't understand and can't get rid of.
Has anyone successfully used jquery masonry within a dropdown menu?
Thanks
According to the first issue, just use visibility:hidden and in hover event visibility: visible instead of display:none & display:block.
Related
I try to use column header menus and row context menus in my tabulator but nothing appear. Then I realize in the DOM that the menu is there but out of the window and at the top of the tree in the dom, it's the div with the class tabulator-menu.
The DOM, the div with smd take the whole page
I use Vuejs with Bootstrap 4.
How to make it appear at the right place ?
Thanks
The menu is appearing in exactly the correctly place in the DOM.
It is standard practice in a lot of context menu libraries to append the menu directly to the body rather than to the element that triggered it, this happens because menus are often long and overflow their containing element, by absolutely positioning the elements in the DOM the sit on top of these and prevent this being an issue.
It is hard to say without seeing an example, but it is likely a z-index issue that is causing the problem.
By default Tabulator menus have a z-index of 10,000 if you have anything with a z-index higher than this it will sit over the menu.
To resolve this you simply need to add a bit of CSS after you have imported the tablator style sheet, that changes the z-index to be higher than any others on your page:
.tabulator-menu{
z-index: 99999999;
}
I have a web application, in that application the head menus open when we move mouse on to that (I don't want to click on that head menus because clicking on that menus redirect the page to another page).
On mouse over it opens a menu list, I will be able to select the menu item but not able to hover on to the head menu so that a drop-down menu list can appear.
fire_event("onmouseover") is not working, it is only flashing that menu(element) but not opening the drop down menu list.
Can any one give me the solution How can I put hover on to any HTML element please.
Well, there is #hover method:
browser.element(:how => what).hover
And this could also help: How to find out which JavaScript events fired?
For some reason .hover doesn't work for me, but this one does:
browser.element(how: what).fire_event(:mouseover)
No idea why.
New to Orchard. I have been looking for some documentation on how the menus actually work. It appears that you can have hierarchical menus, but I cannot find any good information on this.
It took me a while to figure this out too. You can see how to create a navigational menu in this video (around 8:45, but i'd recommend watching the entire video).
Basically, you need to drag & drop an item below and to the right of another content item in order to make a nested menu item.
Yes, you can. Since 1.5 you can create hierarchical menus from Navigation admin screen. Hierarchy (and reordering) of items can easily be created by drag & drop.
Navigation screen is used to define your menus. In order to display a defined menu you need to put Menu Widget in the zone of your choice. When you create that widget you need to choose which menu is it going to display. Besides the choice of the menu, you can also choose some other optional parameters if you need to customize the display more (eg. display only certain level).
I've created a nav menu like in the screenshot below. It spans the entire width of the container and the left/right padding of each menu item is constant. This was easy to do by hardcoding the left/right padding in the CSS, but I want the paddings to be able to change as the site admin edits the menus.
Is there a way to do this with pure CSS (CSS3 is okay)?
This was easy enough to do with jQuery (I totaled up the width of the menu items and calculated the necessary padding). But I ran into some issues on some browsers due to our use of Google Web Fonts. On Chrome and Firefox 4 on Windows (not on Mac), the web font was not loaded at the time that my script ran, resulting in incorrect width measurements. I tried running the script in the jQuery's DOM ready event and in the Google Font API's active event. The active event worked in Chrome but in Firefox 4 it was often fired before the font had been applied.
Thanks in advance.
Here's a jsfiddle of a potential different solution.
Using that layout, and assuming the number of menu items is going to change, you call a recalculation method once a list item is added/removed. In this example provided, I've used YUI3 to do the DOM manipulation, but you could do that a number of ways. Note - I didn't test the javascript function, its "probably working pseudo code".
(You may need to make subtract a further 2% or so from the list item widths, if you're trying to deal with IE6/7)
Use jQuery's .load event as suggested by user thirtydot.
In SharePoint 2007, there's a top nav that the user can hover over, which reveals a dropdown menu of subitems. When they remove their mouse from the dropdown, it disappears, but only after a short delay. This can cause problems, as if people are trying to click a link on the page somewhere, but the nav menu hasn't hidden itself yet, they'll accidentally click it instead. This is compounded with the fact that the menu appearing in the first place is delayed as well, so right before they mouse over the link on the page they actually want to click, the menu will suddenly appear and intercept their click when they weren't meaning to.
I've poked at core.js at some suspect areas, but can't seem to nail it down. Any thoughts?
This is the normal behaviour of SharePoint. This control is the asp:Menu control of ASP.Net 2.0 and the only thing you can do is customized the MasterPage or the DefaultPage of your Site.
If you change the core.js file of "layouts" folder you'll lose Microsoft support, so take care about change any of the file from this folder.
I recommend that you modify the existent control or create a new one and put it in this position of the MasterPage.
This bit of CSS will fix it. I just had the same thing in sharepoint 2010 and this was all that was required to make the list disappear as soon as you roll off:
li.hover-off>ul
{
display:none;
}
The way it works is when you hover over an item in the nav it adds a css class called "hover" and as soon as your mouse leaves the area it changes the class to "hover-off" for 1 second before removing it completely. This CSS will hide the unordered list directly below the list item that has the class "hover-off" thus hiding the flyout as soon as your mouse leaves the parent.