I need to draw overlays spanning one or more rows on YUI datatable/scrollingdatable based on the mouse activity ( drag and drop ).
I have no issues with drawing overlays on top of datatable.
But I want the overlays to be moving along with the rows when I scroll the datatable. As of now after drawing the overlays they remain static irrespective of the movement of the datatable scrollbar?
You can align your overlay to a specific dom element using the context property. It sounds like this is what you want to do. There is more information about this in the Overlay documentation.
Your code would look something like this:
var myOverlay = new YAHOO.widget.Overlay("myOverlay", {
context: ['cellId', 'tl', 'bl']
});
This would anchor the top left (tl) corner of the overlay to the bottom left (bl) corner of 'cellId', where 'cellId' is some element in the table row that you want to align with.
Related
I need to build an UI (HTML 5) with two main components: customized chart drawn in HTML 5 canvas; a table.
The gotcha is that the chart must be aligned with the table. If you horizontally scroll the table, the chart content will scroll too.
One important restriction is that the chart is very customized. I will not be able to use any existing chart component. I will have to code it myself plotting it on canvas.
I am struggling to figure out how to do it. How to trigger a repaint on the canvas during the scroll? How to know the corresponding coordinates on the canvas of the beginning of each table cell? How do I write the HTML/CSS of both components to ensure that the layout will not break on different screen sizes?
I am still planning the project and I am pretty open to use any framework/language.
I need some light here.
Can you help?
Thanks!
You can get the scroll position with jQuery scrollLeft() and set your canvas repaint function to jquery scroll() so that it's updated whenever the scroll position changes.
table = $('#container')
updatePosition = () => {
// Synchronize canvas here:
repaintCanvas(table.scrollLeft());
}
table.scroll(updatePosition);
Here is a demo JSFiddle: http://jsfiddle.net/4eg39bfm/5/
I need to drag and drop cells from one table to another table where i am using it to develop foreign key mapping dynamically for the SQL table
Where the table also can be dragged as well inside the window, the mapping and drawing line between two tables are working perfectly
But when i bring the tables close to each other and when i move the tables further after the intersection of the tables the line is not drawing between the tables, i got where the issue is from but i cant figure out, how to draw the lines between the tables while intersection
So the issue is something like lines drawing from left to right but not right to left it is taking as intersection
Example: http://jsfiddle.net/mohamedmusthafac/2ecsjomz/embedded/result/
Here is the minimal example fiddle
Example : http://jsfiddle.net/mohamedmusthafac/2ecsjomz/4/
If you drag left drag box across the right drag box then line will not draw
This is just a demo, you can drag the primary key from table 1 and drop it in Table 2 works perfectly, But same as reverse will not draw the lines from table 2 to table 1 and also if you drag the table intersect with the table 2 the lines will not draw
For better understanding:
It is drawing perfectly
But when we bring the table near to another table line is not drawing
The problem was very simple to debug in the end. Your problem starts here:
svgleft = Math.round(el1pos.left + el1W);
svgwidth = Math.round(el2pos.left - svgleft);
Once the boxes start overlapping, svgwidth becomes negative. An SVG with a negative width is an error and the SVG will not be rendered.
You are either going to have to prevent the boxes from overlapping, or change the code to allow for 'right' being to the left of 'left'.
I have two layers one on another top. First layers is background, second layer is flower. How I can know on what layer clicked.
If I clicked on background result it's good return first layer place where clicked:
If I clicked on flower result it's good return second layer place where clicked:
If I clicked on background near flower result it's bad return second layer place where clicked:
3.1 I get second layer because actually image is bigger, because image have transparent place:
For test use JSFiddle: http://jsfiddle.net/sbkhtvmo/1/
You could try creating a transparent SVG path layer that covers the flower and make that the flower click layer, then make everything else the background click layer.
Use clientX and clientY to get the position of the mouse in the window.You can also do that with jQuery offset to get the position.
jQuery example that I found useful on stackoverflow:
$(document).ready(function() {
$('imageElement').click(function(e) {
var offset = $(this).offset();
alert(e.clientX - offset.left);
alert(e.clientY - offset.top);
});
});
I would like to know,
how can I move a gridLine up/down dynamically with the mouse in d3.js ?
Thanks a lot :)
The way I have done this in the past is to add an extra horizontal or vertical line to your graph and mark it as hidden.
Then whenever an element is moused-over show the line, whenever the element is moused-out hide the line again. You would need to set the X and Y values of the line such that it matches the location of the element the cursor is hovering over.
This is similar to the way showing/hiding tooltips work: https://gist.github.com/biovisualize/1016860 except you would not use a div (you would use a line) and would not use the location of the mouse pointer (you would use the x and y of the element).
I am using Raphael to create lines between divisions in an organization chart (or flow chart), but I need to be able to actually click on the divisions and content behind it.
If I could make the canvas be behind the other elements, kind of like a background image, that would be idea. Is this possible?
I found a solution. Raphael makes an SVG canvas that is absolutely positioned in my case. Absolute positions act as layers, and so to be on top of that layer, my content had to be absolutely positioned as well.
If someone else has a better solution, I would be happy to hear it, though this is working fine.
What I do is create a layer of invisible (but clickable) shapes on top of the informational lines being rendered, which will act as the target area for the content below.
If your lower layers being target are being created in Raphael you can easily clone them, set the opacity to 0, and position that layer to the top. (See Sets Reference for a way to easily group the layers together.)
Example:
#el = #parent.paper.rect(x,y,w,h); //your existing lower layer shape definition
#elTrigger = #el.clone(); //clone your existing shape
#elTrigger.attr
fill: '#fff'
opacity: 0
cursor: 'pointer'
#elTrigger.click(someAction); //assign the function
If you're lower layer isn't being rendered by Raphael (just HTML) you could still do something similar, but it would require just creating new (transparent) shapes to sit on top of the approximate coordinate of the targets below.