I want to create multiple dashboards using using angular-gridster2 in angular 8. I have multiple tabs having gridster in each Tab. I am facing these issues for multiple tabs.
lets say that tab1 gridster has 3 items & tab2 gridster has 2 item
and i am at tab one initially when I move from tab1 to tab2 initially
it is not showing any item in gridster when I add one more item in
gridster of tab2 then i will all the 3 items of gridster of tab2.
Updating the display grid property of options is updating only the
last gridster item. I want to apply same options properties to all
the gridster present along multiple tabs.
You can see the gridster along multiple tab here
There are 2 problems I have found.
It looks like in the addItem() method, you are adding new item directly to 0 indexed gridster, if you want to keep gridsters separate you must pass the index of the gridster or a pointer in a way to the related gridster.
addItem(){
this.gridsters[0].... // change 0 with an index
}
I am not sure about this one, I am a bit rusty with Angular but it looks like you didn't separate the tab-contents. You might wanna add tab-content to each tab.
You might want to consider encapsulating your components, maybe use angular components. With the current way, your code can get really messy after a while and will be very hard to handle
Related
I'm using openlayers 4 and I have setup context menu in my application, but I want to be able to add and remove functions inside context menu dynamically.
I've checked their documentation at https://github.com/jonataswalker/ol-contextmenu and I found code for adding new function (although I'm looking for adding function as a submenu item rather than menu item) but I couldn't find how to remove specific server
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
Ive looked around a bit and not found anything so im not even sure if this is possible.
What I want to do is have a drop down list. Each list item is a specific type of a view for a list. Is it possible to add an icon at the end that when clicked will fire off a different action to just selecting the item?
So the user opens the drop down. They see View 1. At the end there is a pencil button image. If they select View 1 the list view changes. If they select the pencil it opens up the edit View dialog for that view.
Is this even possible using javascript/jQuery?
It won't be do-able with the standard select element, however it's definitely possible using divs and heavy Javascript/jQuery.
Something similar to how the jQuery plugin Chosen works - it hides the original select element and rebuilds it with divs, adding interaction with jQuery (obviously).
I'm trying to make a form where people can add or delete menus and options for those menus in order to generate a menu for a game. I need to be able to grab the value of the form data for each specific menu and the options for that menu, so my current idea is to have a variable put into the id of each menu and then a new variable into the id of each option. Each time they add a menu, that variable increases and each time they add an option for that menu, the variable specific to that menu increases. The problem is that if they add a ton of menus or options and then delete them, the number still increases and I could end up have menus and options with huge gaps between their id values.
Is there a way to do this with arrays? I'm not sure how much sense this is going to make if any, so let me rephrase:
Is there a way to make an array of elements?
I'm having a very hard time just trying to describe what I'm trying to do. Do any of you have AIM or another means of live chat?
Am not sure I understood correctly what that you are trying to do, but if I did this is my solution:
have jQuery .size() run every time someone deletes a menu or option, and then reassign the ID of each element with a .each() loop.
jQuery size() page
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