I'm using jQuery to hide and show rows in a table.
Here is my jsFiddle: http://jsfiddle.net/Nbf75/5/
Notice that when you click a question, the answer slides in but it squishes the question.
It doesn't do that if you set no animation, but I want an animation (not necessarily the preset slow animation, but any animation squishes it.)
So how do I get the animations to not squish the question?
Edit: This happens in Chrome but not Firefox, haven't tested in any other browsers yet
This is an artifact of how the rendering engine handles table cells. You can work around it by wrapping the answer (inside the td) in a div, and operating directly on that div. The td will follow suit (since it's automatically sized) and the effect is the same across all browsers.
See it in action.
Just use fadeOut and fadeIn instead of show and hide. You will achieve the desired affect without the squishing.
Example:
$('table tr td.question').toggle(function() {
$($(this).parent('tr').next('tr').children('.answer')).fadeOut('slow');
}, function() {
$($(this).parent('tr').next().children('.answer')).fadeIn('slow');
});
http://jsfiddle.net/Nbf75/10/
Related
I have a very long HTML page with 2000+ products. On old computers the page would freeze due to a lack on memory. If I change the CSS display to none to 50% of divs, the performance increases a lot.
So I wanted to have the display:block only when the div is onscreen.
I have tried to use the following script : http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/
I have updated the on method to bind but it still doesn't work.
Would there be an elegant way to create a css class that only appear when on screen ?
You should try the onScreen Plugin.
This is how you would initialize it:
$('.product-item').onScreen({
doIn: function() {
// Do something to the matched elements as they come in
$(this).addClass('visible');
},
doOut: function() {
// Do something to the matched elements as they get off scren
$(this).removeClass('visible');
}
});
But I would definitely consider loading the products through ajax while the user scrolls.
This is called lazyloading and is a common technique.
There are a lot of questions exactly like this and all of them answer the same - just add class and toggle it. Not in my case.
Scenario:
When my page scrolls, I duplicate the table's first column and attach it with position:fixed to the left of the browser which makes me see the headers when table is wide.
Original table has css with :hover like this:
table tr:hover td { background: red }
This is great as I can see the whole row highlighted when I hover it, but not so great that
if I hover the cloned table it highlights only this one column. I would like to force :hover state on original table by not adding any class.
What I have tried so far without any effect:
- .trigger('mouseover');
- .trigger('mouseenter');
- .trigger('hover');
- .hover()
- .mouseenter();
- .mouseover();
It's actually not possible to trigger a CSS pseudoclass from JQuery/Javascript as far as I know.There is little to no alternative other than working with JS/JQuery events, as you've been doing, and CSS classes.
You can force clicked state with document.getElementById("ElementID").click();
I'm using a drop-down-menu which I modified to use animations such as SlideOut and FadeIn using onmouseover and onmouseout.
The problem comes after hovering through all of the nested lists a few times, which results in the second nested list becoming cut off.
You can replicate the bug by moving from "nav 1" to "nav 2" and back again rapidly.
Link to jsFiddle
Screenshot of cut-off:
http://dl.dropbox.com/u/53879403/screenshot.png
Please and thank you for any advice / criticism.
Please see this fiddle: http://jsfiddle.net/SuRJ9/
The code I've changed:
function slideDown(toSlide) {
currentHover(toSlide);
$($(toSlide).children('ul')[0]).slideDown('medium',
function(){ $(this).css('overflow','visible') });
}
I've added resetting overflow to visible after finishing animation. overflow is set to hidden by jQuery in order to make sliding animation.
Also, please don't use onmouseout="slideUp(this)" and onmouseover="slideDown(this)", this is obtrusive JavaScript and is a bad technique. You should assign these events using jQuery.
$.fadeOut/In() apply certain styles before running the animation. These are remove when the animation completes.
Your fadeOutNav() is calling stop(true) , which if done while fadeOut() or fadeIn() are working, will leave the style's they have applied to the element. In this case overflow:hidden on the parent ul. You can remove the stop and let the effects bubble up, or insert a .css('overflow','') to your chain.
I asked a question yesterday on here and got some awsome help, but I need more help concerning more or less the same, only a bit different.
This is my old thread.
So ye, I made this and the idea is that you can customize the table to see it the way you want. for now its possible to drag the columns to change the order and its possible to order the columns on alphabet or high/low. Since I got help here, its now also possible to hide the columns.
Now I want to make the hiding process a bit more smooth, since its hard to see if something is hidden after a click if you use no animation. I use .fadeOut(200); now, but when the fading is done the column just 'jumps' to fill the gap, is it possible to animate this in some sort?
Edit: After thinking some more, I thought that I could just loop a -1px width untill the element's width is 1px and then just hide it, but for some reason that wont work, the table doesnt respond to .width(xxx); or .css('width', 'xxx');. It does change the value, but the td keeps the same width.
This is somewhat of a workaround, and there might be a better solution, but here it is anyway:
Animate the opacity to 0.0. Fadeout does the same, but it also sets display:none after completely fading out. It is the display:none that causes the adjacent column to jump and fill in the gap.
Animating will cause your hidden div to remain there. Now that it is no longer visible, animate its width to 0. This will cause the adjacent div to smoothly take over its place.
Once width is 0, set display:none
Here's a working sample I whipped up. Adjust accordingly to animate width: http://jsfiddle.net/x7BEv/8/
Here's how the magic happens:
$(document).ready(function(){
$('#button').click(function(){
$('#upper').animate({opacity:0.0},'slow').animate({height:'0px'},'slow',allDone);
});
});
function allDone()
{
$('#upper').hide();
}
I'm not sure how important the allDone() method is. You could probably do away with it.
you must use jqgrid
or just for sorting you can use tablesorter which is very easy to implement
I have a button that, when hovered over, shows a <span> that is otherwise hidden. What I'm trying to figure out is how to transition the button's expansion on :hover so it's more smooth. I tried using CSS3 transitions but couldn't quite get it down. Plus I don't know if that's the best solution anyway.
EDIT: I added some jQuery but must have something wrong. Here's the script I used, after reading a previous answer here (which I'll reference if I can find it again):
$('a:has(span)').hover(
function() { $('span', this).fadeIn(); },
function() { $('span', this).fadeOut(); },
);
I've created a Fiddle: http://jsfiddle.net/UYexr/. Can anyone help me out?
If I were you I would avoid using CSS3 simply because of its lack of support; given that I would probably stick to JS animation.
The best way I would see to do this is to make the span have display:inline-block; with a defined width. Then you can use a javascript animation library to animate the span's display.
Personally, I would go about using jQuery's animate method. Although there are plenty of js animation libraries...