I've tried to set the height to "auto" in the code below in order for the DIV to adapt its size based on the content. Unfortunately that doesn't work. (no issue if I set the height in px). Any idea why and how to fix this? Many thanks
Fiddle HERE.
JS
$("a").click(function () {
var page = $(this).data("page");
if ($('div:animated').id != page) {
var active = $(".fold.active");
// if there is visible fold element on page (user already clicked at least once on link)
if (active.length) {
active.animate({
width: "0"
}, 200)
.animate({
height: "0"
}, 200, function () {
// this happens after above animations are complete
$(this).removeClass("active");
})
// clicking for the first time
}
if (active.attr("id") != page) {
$("#" + page)
.addClass("active")
.animate({
height: "auto"
}, 1000, 'linear')
.animate({
width: "200px"
}, 400, 'linear')
}
}
});
you need to calculate the height for the jQuery animate() to take place
demo - http://jsfiddle.net/7hcsv5dn/
var el = $("#" + page)
autoHeight = el.height(),
$("#" + page)
.addClass("active")
.animate({
height: autoHeight
}, 1000, function () {
el.height('auto');
})
.animate({
width: "200px"
}, 400, 'linear')
Related
I am able to move the text around the div like I would like but I want it to be different colors and have different text/colors at different parts of the movement but it is only calling the final text and colors. The 'slow' part of the jQuery function seems to only be firing for the first part of the movement.
What am I doing wrong?
Fiddle here.
HTML:
<button id="button">Go!</button>
<br>
<br>
<br>
<br>
<div id="container">
<div id="demo">Hello World</div>
</div>
CSS:
#container {
width: 100%;
height: 400px;
}
JavaScript:
$(document).ready(function(){
$('#button').on('click', function(){
var divWidth = ($('#container').width());
var divHeight = ($('#container').height());
$('#demo').css('color', '#ffff00');
$('#demo').html("Going!");
$('#demo').animate({
'marginLeft' : '+=' + divWidth
}, ' slow');
$('#demo').html("Moving Down Now");
$('#demo').css('color', '#e31912');
$('#demo').animate({
'marginTop' : '+=' + divHeight
}, ' slow');
$('#demo').html("Moving Home Now");
$('#demo').css('color', '#00FFFF');
$('#demo').animate({
'marginLeft' : '-=' + divWidth,
'marginTop' : '-=' + divHeight,
}, ' slow');
$('#demo').html("I am home!");
$('#demo').css('color', '#ff0067');
});
});
.animate() is asynchronous. The animations appear in order because the animate function appends the animation to a queue. You can use the optional callback parameter of .animate() to avoid this.
(Demo)
$(document).ready(function(){
$('#button').on('click', function(){
var demo = $('#demo');
var divWidth = $('#container').width();
var divHeight = $('#container').height();
demo.css('color', '#ffff00').text("Going!").animate({
'marginLeft' : '+=' + divWidth
}, 'slow', function(){
demo.css('color','#e31912').text("Moving Down Now").animate({
'marginTop' : '+=' + divHeight
}, 'slow', function(){
demo.css('color', '#00FFFF').html("Moving Home Now").animate({
'marginLeft' : '-=' + divWidth,
'marginTop' : '-=' + divHeight,
}, 'slow', function(){
demo.css('color', '#ff0067').html("I am home!");
});
});
});
});
});
you need to wait until the animate script is finished:
`$('#demo').animate({
'marginLeft' : '+=' + divWidth
}, ' slow', function(){
....
});`
http://jsfiddle.net/xzzc4skq/1/
While animations are queued by default, changes made with the css() and html() methods do not wait for your animations to be complete. They are all executed immediately, without any delay, and all you see is the last setting.
Rather than nesting animations, I suggest that you chain them. Then use the "start" and "complete" callbacks to set HTML and CSS. The callbacks will be executed before and after each animation, respectively.
$(function() {
$('#button').on('click', function() {
var divWidth = 300,
divHeight = 100;
// stage #1
$('#demo').animate({
'marginLeft': '+=' + divWidth
}, {
duration: 'slow',
start: function() {
$(this).css('color', '#128800').html("Going!");
}
})
// stage #2
.animate({
'marginTop': '+=' + divHeight
}, {
duration: 'slow',
start: function() {
$(this).css('color', '#e31912').html("Moving Down Now");
}
})
// stage #3
.animate({
'marginLeft': '-=' + divWidth,
'marginTop': '-=' + divHeight,
}, {
duration: 'slow',
start: function() {
$(this).css('color', '#3cacac').html("Moving Home Now");
},
complete: function() {
$(this).css('color', '#ff0067').html("I am home!");
}
});
});
});
#container {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Go!</button>
<br>
<br>
<div id="container">
<div id="demo">Hello World</div>
</div>
So I'm working on my website, and I sill can't get a grasp of JavaScrip or how to really work with it.
I have a header that when shrinks (height wise), my aside menu's padding (padding-top that is) will adjust with.
When the user reaches the end of my webpage, the height of the header will adjust back, and so will my aside's padding-top with it.
So I'd like for my aside to move up and down, along with my header when it shrinks up and down in height.
This is what I have so far...
$(document).ready(function(){
var hh = $('header').height();
$('aside').css('padding-top', hh)
});
Without testing, this is what I thought of. It might work or at least nudge you in the right direction at least!
$(function() {
var shrinkHeight = 20,
originalHeaderHeight = $('header').outerHeight(),
originalAsidePaddingTop = parseInt($('aside').css('padding-top').slice(0, -2), 10);
$('body').scroll(function() {
var distanceScrolled = $(this).scrollTop();
if(distanceScrolled > 1) {
$('header').stop().animate({
height: (originalHeaderHeight - shrinkHeight) + 'px'
}, {duration: 200, queue: false});
$('aside').stop().animate({
paddingTop: (originalAsidePaddingTop - shrinkHeight) + 'px'
}, {duration: 200, queue: false});
}
else {
$('header').stop().animate({
height: originalHeaderHeight + 'px'
}, {duration: 200, queue: false});
$('aside').stop().animate({
paddingTop: originalAsidePaddingTop + 'px'
}, {duration: 200, queue: false});
}
});
});
http://jsfiddle.net/G5RP3/
I have made a div be a dialog through jQuery UI. It is empty at the moment, but what I want to do is make it slide from left to center, from outside the window. What it does instead, is it slides like a drawer is opened. I think I am close, but not sure how to do it.
JS
var speed = 2000;
$(document).ready(function () {
$('#loginmenu').dialog({
show: {
effect: 'slide',
direction: 'left',
speed: speed
},
hide: {
effect: 'slide',
direction: 'left',
speed: speed
},
modal: true
});
});
HTML
<div id="loginmenu"></div>
CSS
#loginmenu {
}
Here's a simple solution:
http://jsfiddle.net/MsS9z/1/
var speed = 2000;
$(document).ready(function () {
$('#loginmenu')
.on("dialogopen", function() {
var widget = $(this).dialog("widget");
var offset = widget.offset();
widget
.css("left", -widget.outerWidth() + "px")
.animate({ left: offset.left }, { duration: speed });
})
.dialog({
modal: true
});
});
When the dialog opens, this code will shift it outside of the screen, then animate the dialog back into place.
If you want to slide the dialog to the right on close, things get a bit more complicated:
http://jsfiddle.net/MsS9z/2/
var speed = 2000;
$(document).ready(function () {
$('#loginmenu')
.on("dialogopen", function() {
var widget = $(this).dialog("widget");
var offset = widget.offset();
widget
.css("left", -widget.outerWidth() + "px")
.animate({ left: offset.left }, { duration: speed });
})
.on("dialogbeforeclose", function() {
var dialog = $(this);
var widget = dialog.dialog("widget");
if (widget.data("dialog-closing") || widget.is(":animated")) {
widget.data("dialog-closing", false);
return true;
}
widget.data("dialog-closing", true);
var origOverflow = $("html").css("overflow-x");
$("html").css("overflow-x", "hidden");
widget.animate({ left: $(window).width() }, {
duration: speed,
complete: function() {
dialog.dialog("close");
$("html").css("overflow-x", origOverflow);
}
})
return false;
})
.dialog({
modal: true
});
});
Here we have to cancel the original dialog close, then trigger the animation, then allow the dialog to close normally. We also have to set the document's overflow-x to hidden so that the horizontal scrollbar doesn't appear.
I have 2 containers whose widths change. Inside them, I have clickable elements. When a container is clicked, it resizes in an animation. I want to make it so that when a clickable element is clicked, its container resizes and scrolls to the clicked element. Here's a fiddle that shows this: http://jsfiddle.net/w7H3M/1/
However, it scrolls to the wrong position because of the resizing. Here's the event handler for the click:
<div id=left>...</div>
<div id=right>...</div>
$('#left').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width()
}, 800);
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});
$('#right').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});
Effectively, it does not work correctly because of the animation. The offset of the node you want to show at the top of the screen will change when the div expands. To achieve what you want, you need to set the scrollTop property when the animation completes. You can achieve this using the complete handler of jQuery.animate(). I've forked your jsfiddle to show you it. The only problem is that the two animationw now play one after the other instead of simultaneously.
$(document).ready(function () {
// generate content
var str = '';
for (i = 1; i < 100; i++) {
str += '<p>' + x100(i) + '</p>';
}
$('#left').html(str);
$('#right').html(str);
// end generate content
$('#left').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width(),
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
});
$('#right').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
});
});
I want a div to expand to the right on click from its current width (400px) to a certain specified width. (The divs have photos as backgrounds so the end result width will be different in each case, but it will be about 1000px in most cases).
How can I do this with jquery/javascipt? Thanks
With a defined width:
$(".clickElement").click(function(){
if($(this).is(".open"))
{
$(this).animate({ width: 400}, 500);
}
else
{
$(this).animate({ width: 1000}, 500);
}
$(this).toggleClass("open");
});
Checking the width of the image (background): See this fiddle: http://jsfiddle.net/4ZfsD/2/
function toggle() {
if ($(this).is(".open")) {
$(this).animate({
width: 400
}, 500);
}
else {
$(this).animate({
width: $(this).data("width")
}, 500);
}
$(this).toggleClass("open");
}
$("#test").click(function() {
// No image width yet, we have to get it from the image
if (!$(this).data("width")) {
var img = new Image();
var _this = $(this);
img.onload = function() {
// Image is loaded, save the width and call the toggle function
_this.data("width", this.width);
toggle.call(_this);
}
img.src = $(this).css("backgroundImage").replace("url(\"", "").replace("\")", "");
} else { // We already got a width, just call toggle function
toggle.call(this);
}
});
CSS:
#test
{
width: 400px;
height: 400px;
background-image:url("http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg");
}
Using Jquery
<div id="box">Click me to grow</div>
<script>
$("#box").one( "click", function () {
$( this ).css( "width","+=200" );
});
</script>