I have an issue that I can't seem to resolve. Even though my current job does not call for integration, I have been doing a bit of it for a specific project.
BACKGROUND:
Basically, this is what I am currently working on: when I click on my fake button, it creates a box - more clicks, means more boxes which are created. However, the boxes need to be able to do one more thing than simply replicate - each one of them needs to allow me to drag and drop an image into them. So, if I click 5 times on the fake button, the 5 new boxes needs to allow me to drag and drop 5 different images. Currently, I have a box there by default (as a testing ground).
PROBLEM:
I cannot seem to duplicate the boxes correctly. I have tried several things, including switching classes to id's and what not to try and merge several pieces of coding together. Ultimately, I need to be able to place any images in the draggable boxes. 5 boxes, 5 images dragged into them etc.
NOTE 1:
I cannot use server-side coding, as I don't have access to the server. All of it has to be client side.
NOTE 2:
The images I bring in are from outside folders - from the desktop (dragged and dropped).
NOTE 3:
I watered down the code in the fiddle to only have the pieces of coding relevant to what I am attempting to do. However, the scripts there don't work within the fiddle, since I had to take them out of the environment. Though, they do work within the correct environment.
FIDDLE:
[My link] https://jsfiddle.net/t9dq3w28/10/
...
Related
I am trying to create a line connection on click an image icon, I have tried the same using the wires.html example. But it is not working. I am using react with mxGraph. How to implement this. Is there any way to achieve this.
mxEvent.addGestureListeners(
img,
mxUtils.bind(this, function(evt) {
mxConnectionHandler.prototype.isStartEvent = function(me) {
console.log("Here we have to start the line connection");
};
})
);
I have to start the line connection inside the bind event. Is there anyway to fix this. I have tried but none of them is working.
I really need help.
In the image Arrow Connection (Multiple points are not supported. Used for directly connecting source to target) is working properly. But need to implement Line Connection (Multiple points are supported. Starting from source we can click any where to create multiple points till the target connection).
Please check the below URL for example
Demo URL: http://jithin.com/javascript/examples/contexticons.html
Source Code URL: https://jsfiddle.net/fs1ox2kt/
In the Demo URL, when click on a cell 4 icons will be displaying (Delete, Resize, Move, Connect). I have replaced Delete with Line Connection and Resize with Arrow Connection. Please have a look.
I am not sure I understand your question correctly, so I am answering to some possible ones:
I found the hello world example very helpful for understanding how to write code which allows to create and modify nodes and connections using mxGraph.
Your tags suggest that you are using React. Interestingly, you are not mentioning Redux-Saga as library. If you are not using it yet, you might want to have a look at the concept of reducers.
Your question might also be about the specific behavior of a mxGraph line connection:
when I click on the line connection hover icon it does not start from the cell.
When looking at the workflow example, I do not see any hover icon when I want to draw a line or connection from a task box to another. I remember vividly that it took me a while to figure out that you have to click on the source box, hold, and drag onto the target box.
If your question is more about hover icons, you have already another (unanswered) question on that: adding connection handler on click hover icon not working mxGraph
EDIT: I finally understood that the icons in your figure are the hover icons, so there is a 5th interpretation of your question:
Problem description: The user clicks on the orange box with the microchip-icon then some pop-up menu (your hover-icons) appear, and then the user should choose a line type by clicking on on of the items. The endpoint of the respective line should still be the task box the user selected initially.
Solution sketch: Already in the initial onClick-event, you should populate a variable final_vertex with the coordinates of the box with the micro-chip icon containing the coordinates of the click, or the respective vertex - your box. When drawing the chosen connection, you have to make sure to choose this final_vertex as end-point, and the box with the lambda-icon as initial vertex. In other words, you need at least two events - the initial onClick and an onHoverItemClick. I am not too familiar with mxGraph, but I assume you cannot solve the issue with a single event-handler.
In Qualtrics, I would like to establish a relationship between two sliders (using the "Draggable Sliders" question type).
One slider would dynamically decrease the value of another slider by the same amount. The user should be able to adjust only the first slider, which would automatically adjust the second slider and its associated value (which should be displayed and updated with the dynamic adjustment).
Does anyone have a suggestion for the javascript necessary to establish this type of relationship between two sliders in Qualtrics?
Right - you could start with the custom sliders, but that won't dynamically update. It will only force a constant sum.
If you go to innovation exchange linked below you can download an example of survey that does this though.
You have to upload the survey to qualtrics, and the only way at least I'm familiar with this is to go into an existing survey and go to the advanced options. You'll find "Import Survey," which is what you want. Import that QSF file and you'll have a version of the slider to play with.
This is the link with more info and the qsf file.
http://www.qualtrics.com/innovation-exchange/dan-ariely-tradeoff-question/
Here's a link with a preview I just mocked up. Not pretty, but I'm sure you can toy with the css.
https://az1.qualtrics.com/jfe3/preview/SV_6lIzOgpiSm91X4F
I have a web form.
I have a group of about 20 images displayed on the page. I want the user to be able to drag five images into a holding area, and to be able to arrange their order.
On submit, I'd like the names of those images, and their order, to become part of the $_POST data.
I'd appreciate it if someone could point me to a working example of this functionality that I can reverse engineer, point me to an open source project that offers this functionality, or can provide the code to do this.
I am using PHP, with jquery and js
Thank you.
If already using JQuery, go for JQuery UI.
They have actions called DRAGGABLE and DROPPABLE which you apply to divs. It's a very elegant, easy to use setup.
Examples:
Look to the right for more examples
http://jqueryui.com/droppable/
As for posting, at submit time you can iterate through the DOM, find the images in the "holder div" and post that OR you can hook into the event that fires every time an item is 'dropped' and write that to a hidden or other form element what is in each box.
I currently have an app that has five components. On the left I have a radio button field and a grid below it, on the right I have a display field, chart, and another grid [top to bottom]. The radio buttons filter every other component by a certain date, and the left grid [when selected] will filter the right components by the selected object.
Currently the app does what is needed, but when I select a few radio buttons in a row OR select a few objects in the grid, the app will eventually totally disappear. I tried running the app externally and internally with a custom HTML app, but the problem does not go away.
Here is a picture of the app before anything crashes:
Interestingly, when I look through the chrome debugger and look at the Elements tab, I see there are lots of masks that have been created and not destroyed. Here is a picture of a slight piece of the HTML that looks fishy and occurs after I select a few objects from the left grid:
Every time I select a new object, one more mask will be added to the DOM. I don't know if this is what breaks my app, but it seems odd so it may be related?
I didn't include any code because I thought it should be some easy fix - plus, the code does exactly what it should [before it disappears]. Any help on how to fix an app that disappears would be great!
In itself a mask sticking around to be reused after data loaded successfully is not an indication of a problem. I see mask being created and not destroyed in a simpler app:
Perhaps what you experience is an issue of timing when elements load asynchronously.
I'm trying to make a page that allows users to select one shirt, one pair of pants, and a pair of shoes from an existing selection (horizontal scrollers for each group). The user then submits their selection and I receive an email of the users selection. Ideally the user should be able to see their complete selection either as an isolated element on the page or each scroller should focus on the chosen element.
I've been unsuccessful getting the selected element to display separately somewhere on the page.
As far as having three separate scrolling windows I was going to create three forms and put them in iframes, but it seems as though getting multiple forms to post with one submit button, and processing them is quite difficult.
I could scroll over all three groups simultaneously and this way keep it one form (shirts, pants, shoes) but this would be pretty ugly.
Here is a link to my scrolling form made from only one group. http://www.evan-livingston.com/test/list.php
I'm new to all of this, and I'll sacrifice some polish in order to get a working system.
What approach would be best to accomplish this system?
thanks in advance.
more elegant looking suggestion (using only client side programming)
use forms and create a table with each element as part of TD or inline list
on click--> highlight the image
on double click--> push/append it to a new div with info(link, name etc) about image and do the needful in the form of anchors and list tags
this new div can be displayed now or on a click of a submit button as a list of selected items. add an anchor to remove an item on click.
well there can be many ways to go about it. this is just one way and avoid the pain of using php.
since u asked about approaches: i prefer client side programming to php but thats purely based on my experience. use jquery to help u move around with js.