I'm trying to build a content slider for a client that displays their last four posts. Right now it's just plain HTML but I'm having a problem.
The slider box needs to be 180px high with a scrollbar when necessary. My slider seems to work except it makes the slide boxes all as tall as the tallest box. That leaves short posts with a ton of blank space under them.
Anyone know a fix?
http://jsfiddle.net/insitedesignlab/kQDcb/1/
I've seen that Quovolver does this, but I'd love to know how
The basic problem is #slidesContainer needs to be dynamically resized in order for it's parent to know how long to scroll for. One way to solve the problem is to change your animate call to include a callback:
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
},null,null,
function(){
$('#slidesContainer').css('height', $(this).children(".slide:nth-child(" + parseInt((Math.ceil(-1*slideWidth*(-currentPosition) / $("#slideshow").width())) + 1) + ")").height() + "px");
}
);
There's probably a slightly better way to make that calculation, but this will work. You could alternatively hide all the other .slide divs that are not being displayed. Then #slidesContainer will auto-resize to only the visible (not display:none) slide.
I have updated your code here JS Fiddle. You need to remove the min-height property and set the background color to the slide div.
Related
This question is a duplicate of jQuery scrollRight?
I have a div with a lot of content (width-wise) and overflow:auto, so i have the scroll bar at the bottom. It starts scrolled fully to the left: is there a way to scroll it all the way over to the right, using jQuery/native JS?
Even if there's a way to do this in CSS (which would normally be preferable) i need to do it in JS, because some other stuff happens in the table first in JS (using the jquery plugin DataTables to be specific) in the dom ready block, so my code needs to run after that.
I thought this would be simple but i've not managed to google anything useful.
thanks! max
Here's how I did it - you might consider it a bit hacky.
In the sample below, "#test" is a div with 100px width and overflow: auto.
$("#test").css("overflow","none");
$("#test").css("width","none");
var width = $("#test").width();
$("#test").css("overflow","auto");
$("#test").css("width","100px");
$("#test").animate({scrollLeft: width}, 100);
Here I'm getting rid of the width and overflow CSS properties to work out what the true width of the content is. Then I'm putting the CSS properties back on and scrolling to that width.
Here's a JSFiddle: http://jsfiddle.net/dReFh/
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 div in which i have a button linked to a javascript function that will toggle a textarea. When the button is clicked the div size instantly changes. I tried adding transition effects to the div but there is no smooth change in size (height to be more specific).
My question is: is there any way in wich i can make the div to be resized smoothly?
use .animate() - http://api.jquery.com/animate/
If you can provide some code i'd be happy to explain this in greater detail.
I've coded a quick example for you - http://jsfiddle.net/ajthomascouk/eaBgT/
Don't just a height transition, use a scaley transform from 0 to 1. This should be smoother.
I realize there's already been several questions like this, but I think my case is a little different.
I have an div that I am absolutely positioning and floating on top of the page, and I'm setting an overlay behind it to grey out the rest of the page. I have it working okay until you scroll up and down the page.
The problem is, when the div appears, it is still populating with ajax data. So the height and width of the bg overlay has already been set, but once all the data loads into the floating div, it sometimes pushing the page down so the height increases. So, I can't calculate the height and width of the window or document because the floating div might not be fully loaded yet, and once it does, it pushes the screen down further, causing the bg overlay to not cover the whole page.
So for example, in the code it's going something like:
loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());
}
I verified this by adding an alert, so that by the time I've clicked the alert, the bg overlay was able to calculate the true page size, and it looks fine.
Sorry, if this sounds confusing but hopefully you get what I'm trying to achieve. I'm assuming this isn't too difficult, but I haven't been able to figure it out.
Any help would be appreciated, I'm using jquery.
Thanks
Overlay ;)
** update, setting position of all corners to 0 instead of using width/height 100% **
$("<div/>")
.css({
position:"fixed", // ze trick
background:"#000",
opacity:.5,
top:0,
bottom: 0,
left:0,
right: 0,
zIndex: 2999 // everything you want on top, gets higher z-index
})
.appendTo("body");
Or put the above css settings in a css stylesheet (opacity needs cross browser hacks).
$("#dark-overlay").show();
Here is the solution :
JQuery Show Loading Plugin
Don't try to invent the wheel !!!
Here is a demo :
Loading Demo
Now you just need to create a main container div for your page and just ask this simple plugin to do it for you.
Maybe you want to read the plugin source and find how it works...
I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
http://www.karenmillen.com/
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
Would the .slideDown() method work?
if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();
after that use $("#div_Id").slideDown('slow');
this will work
Check out slideToggle
Here's what i have so far:
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.
In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.