I'm borrowing some code from a David Walsh tutorial on animated delete with mootools.
When I use the Mootools FX.slide on a table row, it sort of collapses the row horizontally before sliding it up, which is not the desired effect.
There's a fiddle here if you'd like to take a look-- http://jsfiddle.net/gNvvT/
How can I make this effect a smooth slide vertically, rather than collapsing left, then up?
Thanks!
I'm afraid Fx.Slide can't work with table rows, but only with block elements.As Dimitar Christoff said to you.
I've modified your fiddle to get around this problem. From the code you posted, it seems you are quite practical with Mootools, so I just wrote some comments on the code. I'm sure you will get the trick.
http://jsfiddle.net/gNvvT/5/
Let me know if it works on your real world application!
Edit. There was some useless code I left from previous tests. I removed it and I updated the fiddle URL.
this is because TR are not real block style elements, it's display: table-row (iirc).
The Fx.Slide class actually has just 2 tricks it tries to employ to make it appear like it's dissolving, basically:
set overflow from visible to hidden, which - in the context of a TR, makes no sense.
(optional) it can wrap an element in a wrapper and then collapse that, but once again, the wrapper becomes the direct parent of the element and it's a div, which you cannot do in a table.
it then allows it to manipulate the height of the element and make it smaller etc.
the jump happens as it changes the display/overflow and it all goes funny after as it collapses the table.
you should consider an alternative way, like fade and when available, scale transform.
Related
I have a table with all the bells and whistles that react-table has to offer, but one of the requirements I have is to add infinite-scroll-like behaviour to the table and I saw the Virtual Rows example that certainly solves my problem. Unfortunately the styling is not as easy to implement as I thought.
I have a fork of the mentioned example where I am trying to make it work inside a smaller wrapper div... What I have works but is not good UX since the user cant see the position of the scroll until scroll horizontally to the right
See "working" example here
Ideally I will have the scroll bar outside next to the body of the table like the photoshoped image below
But all my attempts to make this work have fail.
I'm trying to create a UI that allows the user to take a set of window divs in the DOM and drag them around, sometimes appending divs as children of other divs and sometimes pulling those children out to a parent level. I have a working example but it is extremely touchy when you try to append a "uncle" div to a "nephew" div or vice versa. There is about a 1px leeway to nest the div, as you can see in this JSFiddle: http://jsfiddle.net/UdXr4/124/.
How can I "loosen" the sensitivity so it is not so quick to move on to the next sortable in the tree while clicking and dragging?
You probably need to look at snap, snapMode and snapTolerance. See the API here.
I was able to fix it to a large extent. Thanks to a suggestion by Ryan Niemeyer at Knockmeout.net, the problem was largely rectified by setting a min-height on the container div and adding a little padding to make sure there is a target at the drop zone. Here is the fiddle example: http://jsfiddle.net/UdXr4/130/ The only difference you'll see is the sort-fix class with padding and min-height and the sortable tags are classed as sort-fix.
We are making this template in our language, Persian, that is right-to-left (RTL). Template address
Now, all parts are RTL, except that the submenu that opens to the right side,
Question: What changes should be made to this css file of the template, so that submenu width will be the same as its menu width? Or: How can the submenu be made to open on the left side?
Be aware that am not talking about the text in the submenu (text is rtl now as you see in picture)
Just a thought off the top of my head ...
I suspect you would adjust this line:
width: 140px; /*width of sub menus*/
to reflect a narrower width for your needs.
If you need to do this dynamically, you may have to do some work with Javascript to check the text being applied, then adjust the class reference to a custom class reference ... OR ... apply the new width to the element directly ... once the drop down entries have been filled.
Ah, ok, I see now. The problem here is that with the particular component you are using, you cannot adjust it with only CSS. The reason why is that the Javascript completely rewrites your CSS for that portion of the menu every time a user hovers their mouse over it. You're going to have to do some adjustment inside the Javascript to solve this.
There are several ways to go about this, I'm only going to get into one of them.
One way to solve this is adjust how the menu is rewriting it's CSS on the fly for the submenu. In this case, you can have the Javascript write a negative value in for the "left:" CSS element attribute to have the submenu position itself to open as you're wanting. Note: With this solution, this may not work in older Internet Explorer browsers - I'm not sure if that's a concern here. However, it will work just fine in the modern browsers (at least the ones I've been poking about with).
Open up your copy of the ddsmoothmenu.js file, that's the little bugger that is causing all the problems here.
The change needs to be done in the
$curobj.hover(function(e){..})
function. Stay with me, I'll explain...
That function is calculating the starting left position of your submenu once the user positions their mouse over the main menu choice. Namely, this line here is the culprit:
var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w
As you can see, it is returning a '0' for you, which means it will anchor the left side of the submenu, forcing it to spill out to the right like it does now.
However, fear not!
Since you need the submenu to anchor on the right side and spill out to the left instead, we simply need to change this from assuming '0' to a formula with a little intelligence behind it.
What we need, is for the Javascript to find the correct position to anchor the submenu on the right. We do this by helping the routing understand what the "right side" of the "header" element is.
To find this, we simply take the width of the header, remove from that the left offset of the a-href tag that actually contains the header text (this is in case of any margins that exist - which this has some set in the CSS) and then remove the actual width of the submenu UL tag itself. Now as a sidenote, I wish I didn't have to use something so imprecise as assuming the header is the first child, but... eh... sometimes you work with what you got.
So comment out the line I mentioned above, and put this line in instead:
var menuleft=((header._dimensions.w-header.childNodes[0].offsetLeft)-header._dimensions.subulw);
And from what I see, it should open out towards the left as you were needing it to do in the first place.
Hope this answer helps more than my previous one.
I've searched high and low for a tutorial but I can't find one.
It is really a simple task that I see in lots of websites.
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text.
It really shouldnt be this hard cuz I see it in lots of websites.
I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow.
Any suggestions?
Try this:
http://jsfiddle.net/bryanjamesross/vsQFE/4/
The trick is that you will need individual container elements with overflow:hidden and set widths for each link, otherwise the whole container will scroll, instead of each link. In my example, I contained each <a> inside <li> tags that had set widths and overflow:hidden.
Then it's just a matter of hooking up the jQuery and animating correctly.
edited: fixed an animation bug, and made a the code a bit easier to follow
Just add this to your element
onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'
Did it help?
I've got a large table, where the user typically needs to scroll the page to find data. This makes it difficult to track columns/rows once the headers are no longer visible. I'd like to keep the headers visible while scrolling.
I've managed to get the first row (column headers) to stay visible (jsfiddle example), but am at a loss to do the same for the first column.
PS: I don't need an iframe solution (with extra scrolls), but one similar to what I have, but for the first column.
EDIT: I've done it: jsfiddle example
Using JS seems to be a bit overkill for this solution. Working with tables can be a pain in the neck, but there's a CSS property called position: fixed which could be used for this purpose. I've put together a demo which isn't 100% perfect when it comes to lining things up, but it demonstrates how to use it for your application.
DEMO: http://wecodesign.com/demos/stackoverflow-7433377.htm
For those interested, I fixed the flickering and the flipping, and the result is now perfect (for me). (jsfiddle example)