Upon clicking on a textarea, I need it to change the height of the textarea to 60px and slide down at the same time so it all looks like one smooth animation.
Here's the JSFiddle: http://jsfiddle.net/MgcDU/6399/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
</div>
</div>
Thanks. :)
The method you need is called animate() and is well documented.
Now for your fiddle, I wrote the jQuery code that demonstration the animate method plus the focus() and blur() methods:
jQuery(document).ready(function ($){
var element = $('.well textarea');
var orig_height = element.height();
var new_height = 60;
// onfocus event handler
element.focus(function (){
$(this).animate({height: new_height + 'px'});
});
// onblur event handler
element.blur(function (){
$(this).animate({height: orig_height + 'px'});
});
});
Something like this?
$('#comment').click(function() {
$(this).css('height', '60px');
});
It works much better as an animate...
$("textarea").on('focus',function (e, ui) {
$(this).animate({
height: "60px"
}, 1500);
});
jsFiddle Demo
$('#comment').click(function () {
$(this).fadeIn(3000, function() {
$(this).css('height', '60px');
});
$(this).focusout(function() {
$(this).css('height', '20px');
});
});
Related
I'm having an issue with this jQuery that is blowing my mind. I've tried three different JS and jQuery functions people suggested online for accomplishing this and can't seem to get anything to work.
I'm trying to hide the class .arrow-up when .first is actually visible on the screen and hide the class .arrow-down when .last is visible on the screen.
Sounds simple enough, right?
Well the parent element has overflow: hidden on it (like most carousels–they really are from hell). Anyone know how to do this? I'd really appreciate any help, JS really isn't my strongest by any means...
Here's my current jQuery–
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=300"
}, 300);
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=300"
}, 300);
});
});
In this, .vid-list-container is the parent with overflow: hidden on it and .first and .last are both inside the container. The arrow classes are both outside of the container.
Built this pen for anyone who wants to play around with it.
http://codepen.io/seancrater/pen/waPNEW
Thanks!
This should work. Notice however that I used opacity:0, so the arrow can still be clicked. You need to change that!
function checkDownArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() != 0){
$('.arrow-up').css('opacity',1);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) >= $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',0);
}
},350);
}
function checkUpArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() == 0){
$('.arrow-up').css('opacity',0);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) < $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',1);
}
},350);
}
checkDownArrow();
checkUpArrow();
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=173"
}, 300);
checkDownArrow();
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=173"
}, 300);
checkUpArrow();
});
});
EDIT
Okay, I see you have a different problem... may I suggest using a different approach? Something like this.
HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="vid-item">
...
</div>
<div class="vid-item">
...
</div>
</div>
</div>
CSS:
.outer-wrapper {width:200px; height:150px; overflow:hidden;}
.inner-wrapper {height:auto; margin-top:0;}
.vid-item {width:200px; height:150px;}
JS:
var itemHeight = $('.vid-item').first().height();
var wrapperHeight = $('.inner-container').height();
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(itemHeight - margin > wrapperHeight) {
$('.inner-container').css('margin-top', (itemHeight-wrapperHeight) + 'px');
$('.arrow-down').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin-itemHeight) + 'px');
}
$('.arrow-up').removeClass('hidden');
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(margin + itemHeight >= 0) {
$('.inner-container').css('margin-top', '0');
$('.arrow-up').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin+itemHeight) + 'px');
}
$('.arrow-down').removeClass('hidden');
});
I have the below html
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<div id="vis"></div>
<style>li {position: relative;}</style>
On click I want to move the clicked item to the left 50px then slide it up then output how many list items are now visible in my div with the id vis.
If I do the below it counts 1 to many because the animation hasn't completed when I add the length see fiddle.
<script>
$("li").on("click", function () {
$(this).animate({
"left": "+=50px"
}).slideUp(300);
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
</script>
If I just do hide() I get the expected output in the vis div but don't get the animation I require. See Fiddle
<script>
$("li").on("click", function () {
$(this).hide();
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
</script>
and if I try a callback, I get a similar result to my first attempt. See Fiddle
<script>
$("li").on("click", function () {
$(this).animate({
left: "+=50px",
}, 300, function() {
$(this).slideUp(300);
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
});
</script>
What is the best way to do this so that after you click an item it animates left, slides up then outputs the remaining visible list items?
slideUp has a complete() callback. http://api.jquery.com/slideup/
<script>
$("li").on("click", function () {
$(this).animate({
"left": "+=50px"
}).slideUp(300, function(){
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
});
</script>
And for completion... http://jsfiddle.net/fjqmj/4/
Try this :
While taking visible li, just filter the current one with .not(this). This may not be the best approach but it works for you.
$("li").on("click", function () {
$(this).animate({
"left": "+=50px"
}).slideUp(300);
var visNum = $('li:visible').not(this).length;
$('#vis').text(visNum);
});
Demo
this makes the back to top div appear when scrolling down 100 pixels, but if a person is already scrolled down and does a refresh, the page stays scrolled down, but the div is not shown.
<div id="gototopwrap">Back To Top</div>
<script>
$(function(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
});
</script>
i tried doing this, but it didn't work:
$(function myFunction(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
});
myFunction();
also tried it like this, and still nothing:
function myFunction(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
}
myFunction();
i'm already wrapping in document ready. i think the issue is that it's only listening for the the scroll and only acts on scroll.
Trigger the event which will fire your function
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
}).trigger("scroll");
Bind both events:
$(window).on('load scroll', function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
Something like this should work
$(function(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
if($(document).scrollTop() > 100)
{
$('#gototopwrap').toggle();
}
});
Hello I have two divs that fadeToggle with a timer as follows
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
Javascript to make it toggle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow");
$('#div2').fadeToggle("slow");
}
Here is fiddle link http://jsfiddle.net/BnYat/
My issue is that the second div shows up before the first div is done toggle and then causes a jump up to the top.
If there a way to create a smooth transition from one div to the next without the jump effect happening?
A simple solution is to put both div elements in a single container, and position them absolutely:
<div id="container">
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
</div>
#container div {
position: absolute;
}
Example fiddle
Alternatively, you could fade one out completely then fade the next in in the callback:
setInterval(ToggleDiv, 5000);
function ToggleDiv(){
$('#div1').fadeToggle("slow", function() {
$('#div2').fadeToggle("slow");
});
}
Example fiddle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow", function(){
$('#div2').fadeToggle("slow");
});
}
just use animate
$( "#div1" ).animate({
visibility:hidden
}, 5000, function() {
// Animation complete.
});
$( "#div2" ).animate({
visibility:visible
}, 5000, function() {
// Animation complete.
});
Try this
setInterval(ToggleDiv, 5000);
function ToggleDiv() {
var div = "#" + $('div:visible').attr('id');
var div2 = "#" + $('div:not(:visible)').attr('id');
$(div).fadeToggle("slow", function () {
$(div2).fadeToggle("slow");
});
}
DEMO
or
function ToggleDiv() {
if ($('#div1').is(':visible')) {
$('#div1').fadeToggle("slow", function () {
$('#div2').fadeToggle("slow");
});
} else {
$('#div2').fadeToggle("slow", function () {
$('#div1').fadeToggle("slow");
});
}
}
DEMO
I created a div that has the full height of it's content set to 500px. First 200px of the 500px is, lets say, a preview. So I set it's height to 200px and overflow: hidden. I then added this script:
<div class="stretcher">
<script type="text/javascript">
$('.stretcher').toggle(
function(){
$(this).animate({'height': '500px'}, 300);
},
function(){
$(this).animate({'height': '200px'}, 300);
}
);
</script>
That works but the problem is that I need the contents of the div to be clickable. However, with this script wherever I click it either expands the div or returns it back to the original 200px.
Any idea how I could do it? Maybe adding icons of arrow up and down or something.
The toggle() function used that way is deprecated and removed in newer versions of jQuery, use a flag instead :
$('.stretcher').on('click', function(e) {
if (e.target === this) {
var h = $(this).height() > 220;
$(this).animate({'height': ( h ? 200 : 500 ) }, 300);
}
});
Checking if the target equals this stops any problems when clicking other elements inside .strecher
Try this...
<div class="stretcher">
<div class="clickable"></div>
</div>
<script type="text/javascript">
$('.clickable').toggle(
function()
{
$(this).parent().animate({'height': '500px'}, 300);
},
function()
{
$(this).parent().animate({'height': '200px'}, 300);
}
);
</script>
You have an area called clickable and when you click that it animates the parent container div, but it won't do it when you click the div itself.
You could wrap your code in a function that has an exact match. As #adeneo points out. An example below using your existing code in this manner.
$('.stretcher').on('click', function(e) {
if (e.target === this) {
$('.stretcher').toggle(
function(){
$(this).animate({'height': '500px'}, 300);
},
function(){
$(this).animate({'height': '200px'}, 300);
}
);
}
});