Develop Reference

Slide Down to normal width?

I have a div box, with a lot of p tags in side, and it is getting very long.
So I added on the top of the box, a show more text.
The box have a height: 100px; overflow: hidden;, but then when someone click on show more, I would like it to slideDown the box, to get the normal height, which it would have had if height: 100px; was not set.
Any idea how to do this?
I tried the following: (Note, the box have class .show-limited-content and the show more have class .show-more)
$('.show-more').live("click", function() {
$('.show-more').live("click", function() {
$('.show-limited-content').slideDown("slow");
});
return false;
});

You could use the animate method.
It would look something like the following, depending on how your html is written:
$('.show-more').on("click", function() {
$('.show-limited-content').animate({
height: '500px'
}, 2000);
return false;
});
See this working example to see it in action.
If you need the height dynamically, just add
var curHeight = $('.show-limited-content').height();
$('.show-limited-content').css('height', 'auto');
var autoHeight = $('.show-limited-content').height();
$('.show-limited-content').height(curHeight);
above the event handler and change the animate css to
height: autoHeight
Here is another example.

.load() doesn't like my slider

I have a page with a slider showing posts from a category. When the user clicks "next category", the content goes left and the new content is loaded along with it's slider.
This .load() is making a request to the same page, with different parameters (don't really know if this is relevant to the question).
Problem is, the loaded slider doesn't work. You can see it here, click on the top right arrow and you'll see my problem.
This is the script I'm using:
function carousels(){
if ($("#projectos-carousel").length) {
$("#projectos-carousel").carouFredSel({
items: { visible: 5 },
circular: false,
infinite: false,
auto: false,
prev: { button : "#prev-proj" },
next: { button : "#next-proj" },
pagination : "#pager-proj",
});
}
}
...
$('.right-trigger').click(function () {
var toLoad = $(this).attr('href')+' #container';
$('#container').attr('id','to-go');
$('#to-go').css({'position': 'absolute'});
$('#wrapper').append('<div id="newcontainer"/>');
$('#newcontainer').load(toLoad, function () {
$('#newcontainer').append($('#container').children()).css({'position': 'absolute', 'left': '942px'});
$('#to-go, #newcontainer').animate({left:'-=937'},600, function () {
$('#to-go').remove();
});
$('#container').remove();
$('#newcontainer').attr('id','container');
searchform();
triggers();
carousels();
});
return false;
});
searchform() and triggers() functions work but not carousels(). I've already tried using setTimeout(); with carousels() in the last part of the code but it only works on this example, not where I really want to.
Thank you for your time!

It appears to work for me. One problem that I see in your code that will manifest itself as a bug in Internet Explorer is that you have a trailing comma on this line:
pagination : "#pager-proj",
Removing the comma may fix everything for you. Additionally, I would suggest wrapping all of your object properties in single or double quotes. For example, the previous line would become:
"pagination": "#pager-proj"

jCarousel next and prev button, disable?

Im using http://sorgalla.com/projects/jcarousel/ as a slider....
It shows one image at a time, and a total of four images... When displaying the first image, i dont want the prev arrow to be visible, and the same if im at number 4 image, i dont want the next arrow to be visible...
How do i do this?
I initialize the script like this:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});

You can use CSS to hide the arrows. Adding the disabled classes is handled by the plugin itself.
.jcarousel-prev-disabled, .jcarousel-next-disabled
{
visibility:hidden;
}
Demo: http://jsfiddle.net/ubanC/88/

You can cheat by using two below options:
Using CSS,you should override to set some below classes:
<style>
jcarousel-prev-disabled,
jcarousel-next-disabled,
jcarousel-prev-disabled-horizontal,
jcarousel-next-disabled-horizontal{
background-position:0 0;
}
</style>
Using Javascript, this solution is same as the first. We should remove the classes: disable for next and previous buttons:
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemFirstOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled");
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled-horizontal");
}
},
itemLastOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-next").removeClass("jcarousel-next-disabled");
$(".jcarousel-next").removeClass("jcarousel-next-disabled-horizontal");
}
}
});
});
</script>
P/S: I just try to read it's document and use Firebug(~Edit on the fly) to detect. If you could, you can try. It's fun.

Jquery Animated Tab - revert on mouseout

I'm trying to adapt Gaya Design's Animated Tabbed Content http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/ for a navigation menu. I want to have the background verting back to the first tab on mouseout but can't seem to get that working. Below is the Javascript for moving background function:
var TabbedContent = {
init: function() {
$(".tab_item").mouseover(function() {
var background = $(this).parent().find(".moving_bg");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 300
});
TabbedContent.slideContent($(this));
});
},
}
$(document).ready(function() {
TabbedContent.init();
});
And here is a link to what I'm trying to achieve. Link
Any help on how to get the background to revert to tab one on mouseout will be very much appreciated!
Thanks

What about triggeting the mouseover event of the first item:
$('.tabs').mouseout(function(){
$(this).find('.tab_item:first').mouseover();
});

Setting height of text area based on text inside of it using jQuery

I have a <textarea> element in my form that has this code attached to it:
$('#links').focusin(function() {
$('#links').animate({
height: '100px'
}, 300, function() {
// done
});
});
This works perfectly, when the text area gets focus it increases in height nicely to 100px. Now, I want it to shrink back down to a suitable size based on the text inside it when it loses focus. I wrote this:
$('#links').focusout(function() {
$('#links').animate({
height: 'auto'
}, 300, function() {
// done
});
});
But it doesn't work, it just stays at the same height (100px). Is there any way to do this?
Thanks. :)
Edit: To save some confusion, the even handler for $('#links').focusout works fine, that's the first thing I tested. So I assume it's a problem with the animation or the CSS property.

Try $( '#links' ).blur( function(){ ... } ) instead
http://api.jquery.com/blur/
Edit, your actual code:
$('#links').blur(function() {
$('#links').animate({
height: 'auto'
}, 300, function() {
// done
});
});
Some other notes.. You can use $( '#links' ).focus() instead of focusin, and also, once you're in the function, you can use $( this ).animate(), as a shortcut. Just little tips and whatnot.

This isn't quite the same as what you're doing, but quite similar: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

auto_height_link = $( '#links' ).css('height');
$('#links').focusin(function() {
$(this).animate({
height: '100px'
}, 300, function() {
// done
});
}).focusout(function() {
$(this).animate({
height: auto_height_link
}, 300, function() {
// done
});
});
but anyways the animate doesnt read the css value auto for height
i stumbled upon this http://www.unwrongest.com/projects/elastic/ which is what you need i guess

You can't use auto to animate in jQuery. You should set it to auto, then get the actual height (in px) and finaly animate it.
Take a look here