I have created grid using slick grid. Now as per my requirement I want to open a sub-grid on click of some element in the parent grid. To implement this I thought of adding a after the current element and dynamically create. But since slick grid update data and top of current row dynamically (as per viewport) the new div inserted show absurd behavior on scrolling at viewport.
var parent=s.parent().parent();
var top=parent.css("top");
top=parseInt(top)+parseInt("30");
parent.after("<div class='add'style='position:relative;height:50px;width:100%;top:"+top+"px ;background-color:green;margin-bottom:20px;'></div>");
var next=parent.nextAll();
next.each(function(index){
if(index !=0)
{
var top=next[index].style.top;
top=parseInt(top)+parseInt("50");
next[index].style.top=top+"px";
}`
Here s is the current element pointer after which I am inserting a div.
s.parent().parent() will return the pointer to row after which you want to insert element.
Then I increased the top of all row below that element. New element will be inserted properly but after scroll everything mixed up.
Related
I have a Vue3 app with vue-draggable and I have a list of sortable cards which possibly contain long text inside. To make dragging easier, I want to hide the text contained in the cards and only show their title when one is being dragged. This makes it easier to drop the card into the right position.
In order to achieve this, the elements which I want to hide inside of the cards while one is being dragged are given a CSS class hidden-while-dragging and the whole collection receives a class dragging while an item is being dragged. This is achieved by setting a boolean variable to the correct value upon receiving the events start and end and conditionally setting the class on the whole <draggable> element. Then I have this CSS rule:
.dragging .hidden-while-dragging {
display: none;
}
This works fine except for one case: if I drag an element and, upon dragging, the height of the parent container changes (due to the disappearing of the content inside of the cards), I am not able to drag the item: it instantly gets dropped in place, and no end event is emitted, so for example the collection keeps the class dragging.
Afterwards, I am able to drop the element once again: the issue doesn't occur this time, because no change in height occurs, and after I drop the element, everything goes back to "normal".
I made this repo in order to have a reproducible example: https://github.com/samul-1/vue-draggable-bug-demo
Here's a codepen as well: https://codepen.io/samul-11/pen/mdjKvZa try and drag the first or last element and you'll see the issue.
You can observe the height of the #app element changing when dragging an element. An interesting thing is that this only happens if dragging the first or third item in my example, not the second. So apparenly the issue is with elements at the edge of the parent.
Is this a bug with the library or is there a way around it?
I am adding the progress bar dynamically for running multiple parallel processes using jquery prepend under Div container. It's working fine. but, I want to keep 5 progress bar at a time will display. after that looks like replacing the first element.
I want to animate in such a way, the Existing element moves down effect and adding a new element on top.
I have tried to append slideDown('slow') and many other jquery method but doesn't work for me.
$ProgressBarContainer.prepend($row).slideDown('slow');
Here, $ProgressBarContainer is a container who holds all progress bars.
$row is the progress bar element prepending to container.
I want to animate the adding(prepending) process with a move down or scrolling down another siblings' elements.
What I have:
An html table which can be dynamically enlarged by clicking two buttons: to add row and column.
two one-row and one-column tables. One above and one to the left side of the table. These two tables are expanded simultaneously with the main table. When I add new row, left table ads new cell. When I add new column, top table ads new cell;
two mentioned tables are hidden.
What I need:
when I hover over a particular cell in main table, it(hovering) should trigger appearance of relevant cells in tables above and to the left. For example, if I hover over cell in row 2, column 2(of the main table) it should show cell 2 in top table and cell 2 in left table.
So I need somehow to connect selected cell with the same cells in other tables and show them on hover.
And I need to be able to move the pointer on the appeared cell to click it (it should not disappear when I move cursor from the main table to this cell)
The harder version of what I need supposes that hidden cells will not appear if only 1 row or column are left in the main table.
It will look like this:
Picture of the task
Since CSS allows to select on hover only elements that are inside one div or are siblings, I assume that this can be done only with JQuery.
I am using this code to show an entire hidden table on hover over the main table:
$('#my-table').hover(function() {
$('#dell-row').removeClass('hoverstate');
}, function() {
$('#dell-row').addClass('hoverstate');
});
Now I think that I need to replace #my-table with the selector of the cell in #my-table table and #dell-row with the selector of the corresponding cell in #dell-row table. Any ideas how I can do this?
I can not indicate static coordinates of the cells because the table is dynamically changing.
Please take a look at the working demo with all the html, css and JS code here.
I have a table using:
<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.widgets.min.js"></script>
The layout of the table looks like this:
When you click the blue edit button on the right the button should disappear and a green check and red X should appear. This allows the row to be edited. It enables the input fields for that row which are originally disabled:
The problem is that whenever I click the buttons that shows or hides the other buttons my table resizes to the left. The Modify row increases in width. Is there a way to stop the dynamic resizing of this Javascript table? I tried using Javascripts show/hide for the buttons and also using a CSS class called hiddenButtons which has display none and hiding the buttons that way but both attempts resized the table.
If you give each td in your final column that has the header "modify" a class and then give that class a defined width of your choice. This should stop happening.
The HTML/Browser is automatically stretching the TDs out to what it believes is even for the content within them. Adding or removing content from a td without a defined width will do this.
If you have a document full of absolute positioned items and you set a document click handler (document.onclick = handler). Is it possible to get all objects that share the mouse position? i.e. two div boxes overlapped, not only the top one
Use the following algorithm:
find out the x and y coordinates of mouse.
Use document.elementFromPoint, add returned element to array.
Hide that element using display:none
Go to 2 until returned element is document.body
Display all hidden elements.