Im creating a web app that will need context menus when the user right clicks and have stumbled upon this one which i like very much. Im having a problem in that when i assign two div elements two different menus, the same menu appears for both. For example the code below creates two div elements, puts them onto the page and then assigns a seperate context menu for each of them.
this.leftDiv = document.createElement("div");
this.leftDiv.id = "Left_DIV";
document.body.appendChild(this.leftDiv);
$("#" + this.leftDiv.id).contextmenu(left_Options);
.........
this.rightDiv = document.createElement("div");
this.rightDiv.id = "Right_DIV";
document.body.appendChild(this.rightDiv);
$("#" + this.rightDiv.id).contextmenu(right_Options);
Now when the app is loaded in the browser, both of the divs have the left_Options menu system.
Would anyone be able to recommend a good javascript context menu that is easy to use?
Cheers.
Based on the site that you linked to, it looks as if one set of options is applied to all of the 'div' elements. It presumes that you want to have similar options for all of your context menus.
In order to customize each individual menu, you add an 'onShow' option that can run a function enable/disable some items. I'm not sure how flexible this is for completely different menus.
A quick search turned up this: http://www.trendskitchens.co.nz/jquery/contextmenu/ It claims to support multiple menus on a single page, so perhaps that's what you're looking for. I have not used it.
Related
I have a requirement where in I have to create a multi select drop down where the elements can be searchable and the count of selected items should be displayed upon selection.
I have found the partial part of the requirements at this link
But not sure how to make the drop down collapsible and expandable
Wire frame image as below
Has anyone come across and worked on such requirements?
Well it depends also a bit if you are using plain Javascript or if you are also using a Framework like Angular/vue/ember or so
here is one component that looks like it makes what you want
http://selectize.github.io/selectize.js/
I have been trying to build a multi-level vertical tabs with hidden content which gets visible by some jquery. It is working fine but with it has one problem.
Because of this code:
$(this).nextUntil("li.tabsclose").slideToggle();
When page loads for the first time, all the parent categories are shown but if you click on a category with some sub-categories, jquery hides everything until the next item with "tabsclose" class. Which is a problem because I have some Parent categories towards the end of the list.
Here is the jsfiddle: https://jsfiddle.net/ebf6cdpe/
Thank you very much for your help in advance!
SOLUTION:
After spending some considerable time on searching web, I have used if/else statement to be able to close parent tabs on re-click.
https://jsfiddle.net/ebf6cdpe/5/
This particular piece is causing all the Parent categories without subcategories to be hidden:
$('.subtabs').not(this).nextUntil(".subtabs").slideUp();
If you remove that, all the Parents without subcategories won't disappear permanently. However, there is still an issue with them temporarily disappearing when opening the subcategory.
You need to have a class that is applied to all your parents that you can use as a selector in this loop:
$(this).nextUntil("li.tabsclose").slideToggle();
I'm still not 100% sure this is the exact functionality you want, but here is an updated version:
https://jsfiddle.net/ebf6cdpe/1/
Whatever the case, you may be better off using nested lists for your subcategories. https://www.w3.org/wiki/HTML_lists
I'm trying to create a popup menu with some kind of navigation inside it. For this, I'd like to mimic the style of the UINavigationController on iOS. If you're not familiar with it, it creates a hierarchal menu with sliding pages, like this:
(source: apple.com)
I'd like to make something similar in HTML and JavaScript. The elements I'd like to take from iOS design are
the sliding animation that occurs when going between pages.
the back button that appears once navigation has occurred
I need something that doesn't involve page refreshes or moving between pages, but the menu only needs to be one level deep. Has anyone created this type of menu in JavaScript? I'd prefer vanilla JS, but it's not a requirement.
Build an hash from that menu, then iterate trough it like this.
At first you display the first level of the hash.
When the user clicks a link navigate in the hash at that position, fetch all it's children's and populate another instance of the menu behind the visible one.
Then it's a simple job of moving the new menu to a side so that it's visible.
And repeat...
As for the back button, you just fetch the parent of the current position i the hash...
I want to make some divs which I can select.
JSFIDDLE
I also want to shift select the divs and multiple dives should only be selected if the user press crontroll (like in a normal windows explorer).
How can I do that?
A few years back I tried to make my own tree viewer that allowed fancy selecting features and expanding using divs and CSS. I found it much easier to use the select tag, with the size attribute so it wasn't a dropdown, the multiple attribute to give me fancy selecting abilities, and option groups to denote parent child relationships. Is that an option for you?
You can use jQuery UI library to achieve this quickly and efficiently. It works with CTRL key but not sure about SHIFT key.
Here's the link: http://jqueryui.com/selectable/
I'm trying to create a product page layout that allows a customization of a product. Basically, a series of drop downs with each successive drop down populated with options based on what has been selected so far. So like this:
Drop down 1: Product Variant (user selects productvariationb, drop down 2 then is populated with options for productvariationb).
Drop down 2: Product color (user selected productvariationb in drop down 1, now that they select "brown" in drop down 2 the image should change to a brown version of productvariation b).
And so on, with the image changing (and options populating) each time according to what has been selected.
Can I do this with JS and does anyone know of a script similar that I can edit, or what functions of JS I need to look into to accomplish this?
Here I made you this : http://jsfiddle.net/moeishaa/H9fF2/
It is working with jQuery. Play with it and let me know if this helped :-)
I know it looks very static but you can render the drop-down on page load and populate the options object as well. I am sure you can find plug in and add-ons. This is a very short amount of code and can be customized.
I think the best resource for example code would be looking at some JavaScript or JQuery examples on creating expandable menus (more specifically ones that mimic folder structures). They usually operate by decorating an unordered list.
You could create a static unordered list and have the image change based on what item you are hovering over. Alternatively, you could use some AJAX to dynamically populate additional parts of the list as you hover over different levels. Both of those would most likely be easily accomplished with JQuery. Here's a page with some menu examples that might give you some ideas:
JQuery Navigation Menus