Pseudo Elements and the rotating list - javascript

I refer to my previous question on JQuery Rotating List. You can view the post here.
JQuery Rotating List
My previous post was to make elements in my table list move horizontally. Applying td:first-child and referencing it to my jQuery script as a selector, it works.
But now I'm trying to make my table move vertically. I tried referencing it to tr:first-child but the script just doesn't seem to work.
If I were to change my (tr) to (td), table will be screwed as there are no (tr)'s to seperate the different items in my list. I wonder if there are any way around it.
Or else the other option is to use <li> which will require me to change a whole bulk of code.
Anyone who can offer some advice here will be greatly appreciated.

You mean moving rows of the table vertically, like in this jsfiddle? Or do you want to move individual table cells?

Related

Is it possible to add infinite scrolling to React Tool Box Table body?

I am using react-toolbox table component in my app(react-toolbox for material styles implementation). I need to add infinite scrolling pagination for the table body. I found some libraries which does this for me, some of those are react-infinite, react-infinite-scroller, But the problem is, to use any library I need to put table rows as children inside the their library component, but ract-toolbox table does not allow me to use any div's or special components inside, from the docs:
An element that represents a row in the Table. It should be place as a
direct descendant of Table and it should has TableCells children. It
receives extra properties from Table to decide if checkboxes should be
placed as a first column.
Actually there is a closed issue on their library but it does not solved my problem. Please help me to do this, or suggest me a suitable library (or) if there is any other way to infinite pagination with out using any library?
Any help would be appreciated.
Try to wrap a table inside a div and give a fixed height to that div also make overflow-y: scroll table will be rendered inside the div which will be scrollable and also of fixed height.
Then render this whole markup as children of react-infinite-scroller

How to animate other rows moving out of the way when reordering table rows?

Some of the tables in my web application can be reordered with drag and drop, using this code:
http://isocra.com/2007/07/dragging-and-dropping-table-rows-in-javascript/
This uses the standard JavaScript insertBefore method to move a table to a different DOM position, like this:
dragObject.parentNode.insertBefore(dragObject, currentRow.nextSibling);
It works fine, but the movement seems abrupt. I would like to update this so that as I drag a table row, the other rows animate to their new positions. This is the same effect that iOS has when you drag a table row in an editable table.
I thought this could be a job for jQuery, so I tweaked the code to change the standard insertBefore methods to jQuery's insertBefore functions, which I thought I could then animate:
jQuery(".dragging").insertBefore(currentRow.nextSibling)
But after playing with different animation options I realized that they could only animate the row that's moving, not the other rows around it.
Has anyone seen a solution for this -- basically simulating the iOS table reordering in HTML? I would prefer a solution that works with my existing table rows so I don't have to completely change my code, but I'll consider changing to a div-based markup if necessary.
Why not use jQuery sortable?
I think it will do what you are looking for.

jQuery UI sortable on dynamic width table possible?

Wondering if anyone can help with this.
I have a table with some fixed width boxes. In between these boxes (cells) are cells that stretch to the width required to fill the space in between.
Basically what I'm trying to do is make it so that the fixed width boxes are sortable using jQuery UI's sortable.
I've tried many things with jQuery UI sortable but just can't get the desired effect. As you can see from the JSFiddle demo below the cells are sortable, but end up going next to each other when dragged, as they fit into the empty 'spacer' cell.
Is there any way to fix this? So that the blocks can be dropped into the correct area? and prevent the table from 'jumping' around..?
I tried disabling the 'spacer' cells but could not really understand how its done :/
Just a note: It's vital that the table is able to expand to 100% width (like it does in the JSFiddle). I'm using a table as its the only stable way to get the blocks to space out nicely on a fluid width layout.
(The far right and left blocks need to be up against the end of the container)
JSFiddle: http://jsfiddle.net/JsJMH/
Any help would be really appreciated! Many thanks!
Answer: http://jsfiddle.net/morrison/JsJMH/13/
Notes:
Don't abuse td elements. Empty table cells are usually pointless. I moved the box inside the td.
I had to edit a CSS rule. Sometimes people don't notice that, so I thought I'd point it out.
This is very possible without using tables: http://jsfiddle.net/morrison/quneb/.

jQuery table row expand/collapse

I've got a table and it has rows that are collapsible when clicked on the table heading.
Problem is it doesn't seem to be very smooth, there's a lag and jump once I click on the header and when the content shows. Does anyone know how to fix this?
See example build ยป
Unfortunately, table rows does not animate (with jquery) - see this related question on SO: How to Use slideDown (or show) function on a table row?
Work-around will be to use div based layout or try out wrapping td content into divs and animating those divs - see this fiddle. Of course, you have to adjust the css.

jqGrid Column Sorting Issue

I have a jqGrid displaying the data in the table correctly and on gridComplete when the table loads, it applies some click functions to some icons in certain table cells on each row. When the table initially loads, all the functions work properly, but when I click a column header and sort a column in either asc or desc order, the table sorts the rows and then the click functions no longer work. Has anybody run into this issue using jqGrid before? I am using pagination with the table and when i go to the next page, the click functions work again until I sort a column. Any help would be greatly appreciated.
*I forgot to mention before that I also have a subgrid for each row that is collapsed and will expand when an arrow icon is clicked on at the beginning of the row.
Figured it out. When I created the table, I added a small div element that was hidden at the bottom of the main table div element that holds all the data. The small div slides up and down with setting options inside of it. When you sort the table, the jqgrid seems to sort the table and place it within the div inside of the main table. Since it probably doesn't specify what div to put the sorted data back into, it places it into both div elements. When i sorted the data and looked at the smaller div, the sorting recreated the table within the small div as well. So, I ended up with two tables, my original and the new one within the small div. This messed up my java scripts, because the references were all jacked up at that point. So, my solution was to remove the small div when sorting and then when the sorting finished, recreate the small div so the sorting function doesn't get confused. Also, Zikes, the gridComplete function does not run on sort for me. I put an alert statement within the gridComplete function and it shows when the table is loaded initially, but when you sort a column it never shows. I placed the alert at the very beginning of the function, so I know it wasn't running. Either the documentation you are looking at is incorrect or i have some sort of setting that disables the gridComplete function from running on sort. Thanks for the input.

Categories