I'm trying to create an app that moves elements between two lists. When the element in the joblist gets clicked it has to open multiple times.
So when I click on: Open: 2 x. This elements has to move to the other list but also show up there twice.
I have no idea how to do this and where to start. I got it so far that you can click the element and it moves to the other list. But i don't know how to multiply it by the number.
$scope.toB = function(item) {
$scope.listB.push(item);
$scope.listA.splice($scope.listA.indexOf(item), 1);
};
$scope.toA = function(item) {
$scope.listA.push(item);
$scope.listB.splice($scope.listB.indexOf(item), 1);
};
My version on plunker
Here is an image that displays what I mean.
Based on your description, I made this:
http://plnkr.co/edit/K9SlyYkJLJjLm9QH0MqV?p=preview
so now when an item in the left list is clicked, it'll show up in the right list x times, where x is the item's id attribute. You can replicate the code to also clone items when clicked in the right list.
Was this anywhere near what you needed, or if not, can you explain your problem in a bit more detail?
Related
I am a bit new to coding. I have been working on a toggle tabs menu for a few days. I finally managed to create a toggle menu that allows the user to display different offers whenever they click on a button.
It worked absolutely fine yesterday. I decided to take an hour break from the screen and when I came back, the buttons functionality stopped working. The toggle function isnt working. When I click on a button, it does not display what it needs to display.
I have checked my CSS files and my index file, no changes there.
I am not sure what happened, as it was working perfectly fine before. I did not shut my computer down either. I have restarted etc and gone through my code, line by line... yet still, I am unable to find a problem.
FYI - I added some jquery to create a mobile drop down menu (i watched a tutorial). The jquery is added in the head section. The actual toggle menu is NOT made with jquery. Could it be an issue of overriding? I doubt it, as I mentioned that both were working fine yesterday.
Thank you so much for the help in advance!
This is where I have added the script tag:
External JS code:
// the buttons
const btns = document.querySelectorAll(".points-btn");
// the div article that covers the entire rewards section i.e the parent container
const about = document.querySelector(".toggle-container");
// the individual rewards tabs with the food description and images i.e rewards tabs div's
const tabs = document.querySelectorAll(".points-tab");
// e is to access my event object
about.addEventListener("click", function (e) {
const id = e.target.dataset.id; // this is to target the id that I have added in the html. Each button AND each div has a dataset ID which we need to retrieve using this method
// here I have set up an IF statement to say. If i am clicking on a button with the ID, I want to display a certain div with the images, description etc
//"if id matches" // the id alone container all the rewards section. I.e 25 points id, 50 points, 150 points, 200points and 400 points.
if (id) {
// remove active from other buttons - "for each button that does not have the id that matches, remove active"
//for each button - i.e. for every button, run this function
btns.forEach(function (btns) {
btns.classList.remove("active");
e.target.classList.add("active");
});
// hide the other reward tabs
tabs.forEach(function (tabs) {
tabs.classList.remove("active");
});
// display content with the matching id
const element = document.getElementById(id);
element.classList.add("active");
};
});
[A picture of the toggle tabs4
I am working with the vis.js timeline (http://visjs.org/docs/timeline/).
I want to achieve that it is not possible to have gaps between the elements.
If someone is removing an element between other elements the and adding a new element to the gap the new element should auto-fit into the gap.
If someone is updating the time (size) of an element by resizing, it should also auto fit to the next element.
I need an validation that all elements in all groups are filled between a given date range.
These are my editable options:
editable: {
add: true, // add new items by double tapping
updateTime: true, // drag items horizontally
updateGroup: false, // drag items from one group to another
remove: true, // delete an item by tapping the delete button top right
overrideItems: false // allow these options to override item.editable
},
It is not allowed to move the elements between the groups.
My first guess is to use the onMove function but I couldn't figure out how to find the previous and next element do adjust the start and end.
Maybe someone else had the same problem and found a solution.
I had a similar scenario in which dragging an element would rearrenge all the others and dragging an element to another group would make it snap just after the last element.
There is no easy option to set to do this. Basically you have to listen to these events and keep track of where are your elements in order to update it.
For example, in your first case what you have to do is:
Listen for onAdd() event
Search through the elements of that group where this new element will be created by looking at the start and end times.
Update this new item to have the start equals to the end of the previous element and have the end equals to the start of the next element.
Here's a simple JS Fiddle to get you started: http://jsfiddle.net/rj35mbvd/
In this fiddle, everytime you try to add an item, it is added between the two elements already present in the timeline.
Here is the good answer guys :
Use in options of stack: false + stackSubgroups: true and simply use the same subgroup by default, the elements will be displayed inline ;)
Check the <script> at the end of this html page http://visjs.org/examples/timeline/groups/subgroups.html
I will share an advanced roadmap I am working on ;)
Best
I'm not understanding this cloning process... this is what's happening, there are four pictures, three clicks, first photo is the initial state.
In the third picture there are two boxes, that's fine, but rather than each box having one project name input and add task button, there are two in the first box, and normal in the second box. Click the button again and it becomes 3:2:1, next click it would be 4:3:2:1, etc... I don't want that. I just want boxes to be added with one piece per box.
code
function addProject() {
$(project).clone().appendTo(".projectPanel");
$(projectNameInput).clone().appendTo(".project");
$(addTaskButton).clone().appendTo(".project");
}
Your problem is your appendTo it appends the element to all elements in the set of matched elements so everything with the class "project". for more information on it try looking at the jquery appendTo documentation. to fix it try something like this
function addProject() {
var newProject=$(project).clone();
newProject.appendTo(".projectPanel");
$(projectNameInput).clone().appendTo(newProject);
$(addTaskButton).clone().appendTo(newProject);
}
using the return value of $(project).clone() allows you to grab only the new project rather than all of the projects that currently exist
So my scenario goes like this:
I have 3 kind on item to show in div. There are three buttons on top of div and when user click any of the button items corresponding to that items are shown.
Items comes from backend and I am getting all the items loaded on page load as I also need them some where else also within same context.
Currently I am following show hide approach for the same .What I want to know is can there be any other approach that can be better then this in terms of code optimisation. User can also edit /add./remove item?
Here is my fiddle
$(document).ready(function(){
console.log($('.toggleItems'));
$('.toggleItems').click(function(){
$('.containers').hide();
var identifier = $(this).data('identifier');
console.log(identifier);
$('#'+identifier).show();
});
})
First order by items then use accordion jquery
I'm using the 0.3 version of the jQuery jCarousel script to display three carousels on the webpage I'm working on. Those three carousels work just fine.
The trouble is : you can't use them properly using the keyboard.
If you tab through the page, the focus goes to the first link of the first item in the carousel, even if this item is not visible ! (For example : click on a "next" link in one of the carousels, then use the tab key to browse : the focus will go to a link which is not visible inside of the carousel).
If you keep using the "tab" key, the focus will successively go to all the links of all the items in the carousel.
Instead of that : the focus should go to the first link of the first visible item ; then, if the last link of the last visible item is reached, then the focus should go out of the carousel (the next link outside of it, in fact).
A solution could be to use tabindex... but some parts of the page are shared with other pages of the website, so I just can't use tabindex in all the links of all my pages...
Instead of that, I had tried things like this :
$("#carousel-editos li a").focusin(function () {
$("#carousel-editos li.jcarousel-item-first .post-title a").focus();
return false;
});
but then it prevents any further use of the "tab" key...
I hope this is clear... Thanx for any help !
I think you need a combination of the answers that you've already provided. It seems like you should be able to use Javascript to dynamically set tabindex attributes on the HTML that you need to be tabbable (heh, new word). I'm thinking of something like this:
On page load, find all visible items in the carousel. Use jQuery to set the tabindex property for each item that you want in the tab cycle.
Assign tabindex properties to all other links on the page that you want to cycle through.
Add some jQuery to modify the tabindex attributes when the user changes the items in the carousel (click the next/prev buttons).
It would be much easier to help you if you made a simplified example in jsFiddle.
On the carousel createEnd and scrollEnd functions you can reset the contents of .jCarousel so that only the visible carousel items are "tabbable". I have done that in my code as follows:
var bannerSlider_scrollEnd = function(event, carousel) {
var $carousel = carousel.element(),
$items = carousel.items(),
$bannerContent,
$visibleItemsContent = carousel.visible().find('.bannerContent');
$items.each(function (index) {
$bannerContent = $(this).find('.bannerContent');
disableTabbing($bannerContent);
});
reenableTabbing($visibleItemsContent);
$visibleItemsContent.find(':focusable').eq(0).focus();
};
The disableTabbing($container) and reenableTabbing($container) lines refer to helper functions I coded into my site which basically find all :focusable elements in a given container and set the tabindex to "-1", then "0" respectively.
After this processes, users will be left tabbing only through visible carousel items instead of all carousel items.