Develop Reference

Automatic drag an ".draggable" element

Is it possible to make an automatic drag (whitout mouse-drag) with jquery draggable?
I´m thinking:
Load elements from db using php.
Find element with jquery and move it to position stored in db.
JS
$(document).ready(function){
$('#element').draggable({
automatic move to position:
top: 22
left: 22
});
How else should i load my stored element positions?
I drag elements from one div to another.

Define the position of your element with css.
For example:
$(document).ready(function){
$('#element').draggable();
$('#element').css({'top': x, 'left' : y});
});
Take a look at this example
Hope it may helps you.

Jquery animate Slide left(extend) and slide down

I am not very familiar with jquery's animate and I need to create an element which upon click of another element, the element should slide from left to right(currently hides behind another element).
Then shows its full content(like a drop down menu) after extending fully from left to right. I tried doing it using transition effects but its is not that powerful(in terms of flexibilty/control)
Anyone knows a good way to do this? Thanks
[EDIT] hers a jsfiddle of what I am doing so far
$('#menu-btn').click(function(event) {
$('#whole').animate({
left: '100px'
},500,
function(){
left: '-100px'
});
});

I think you need something like:
$('#menu-btn').click(function(event) {
$('#whole').animate({
left: '100px'
},500,
function(){
$('#data').slideDown();
});
});
Slide down the whole instead if that is what you were thinking.
I updated the fiddle. You had .#whole instead of #whole which prevented that style.
EDIT:
See my forked fiddle for a nicer solution: http://jsfiddle.net/6ETK8/6/
Or using css transitions: http://jsfiddle.net/6ETK8/7/

I think you want to do two animations:
animate the element from left to right (slide to right)
animate the contents of the element, or a element inside the first element, from top to bottom (slide down).
animations should run one after the other, not in parallel.
Learn about .animate(). Then you can achieve this by starting the first animation (slide to right), and, in its complete handler, start the second animation (slide down).
By the way, it is possible, an relatively easy, to do this with transitions.

Problems with enlarging images on hover with JQuery

The bunch of code does seem to work, only thing is that the transition is not very smooth. Any Idea how to tweak up the code to make the effect more smooth? and also, when the image enlarges, all the content below and beside the image seems to be pushed away to make room for the enlargement, any idea how I can stop this and just make the image overlap the content around it on enlargement? Also, instead of inserting that code for each image every time I upload a new image and want that effect, how do I make the javascript code automatically apply to the new image instead of manually applying the javascript to it each time? Finally, how do I use this on videos/widgets instead of just images? (I’m using Dreamweaver CS5).
$("img").each(function() {
$.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
$(this).stop().animate({ height: $.data(this,'size').height*1.2,
width: $.data(this,'size').width*1.2 });
}, function() {
$(this).stop().animate({ height: $.data(this,'size').height,
width: $.data(this,'size').width });
});

If you want the image to overlap any surrounding elements upon resize you will have to play with the CSS to position the element either relative, absolute, or fixed, then set the z-index of the image to a value higher than the surrounding elements.

Sounds maybe like you should look into a jQuery Lightbox plugin. As for the specific issue with the enlarged image pushing your content around, it needs to be removed from the document flow (using position attribute)... but that's just the tip of an iceberg. There's a lot of moving parts to the task you're trying to achieve, that's why using an existing javascript plugin would be best - IMO, of course.
You might want to check out http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ and also http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts .

Combining revert with jQuery draggable/droppable

I'm using the drag and drop plugin with jQuery UI. I'd like to make it so that the draggable container can only be dragged and dropped on the container. In the demonstration:
http://jqueryui.com/demos/droppable/#revert
It has 2 options. One is to revert when it drags to the container, the second is to revert when it isn't dragged to the container.
Is there a way to combine these two? I don't want to be able to drag the #draggable container anywhere where there isn't a #droppable container.

As stated above, I found the solution by adding :
$('#draggable2').remove();
$('#draggable').draggable({ revert: true });

jQuery slide down toggle, impossible?

I want to do a slide down with jQuery, but I can't find it anywhere.
I do not want it to scale as it slides
I do want it to perform this action ( click slide ), but vertically down, not horizontally right.
UPDATE :
So here's the final functional code!
$(this).toggle(
"slide",
{
direction: 'up',
duration: 'slow',
easing: 'easeOutQuart'
}
);

Read the API-Docs: http://docs.jquery.com/UI/Effects/Slide
You can Slide in every direction using the direction-option.
Demo: http://www.jsfiddle.net/doktormolle/befbE/
(I set the width/height of the image inside the sliding element to 100%, so you can see, the image is not scaled, it's clipped, guess that's what you are looking for)

If you position the element absolutely in a container and attach it to the bottom (ie. position:absolute;bottom:0;) you can use the blind effect and it will slide down to the bottom from the top. See here

If you want it the make own ur you, can you use .animate() and you using css.
something like:
css:
#elm { width: 150px; height: 80px; position: absolute; left: -150px; }
script:
// let it animate
$('#elm').animate({ display: 'block', left: 0 }, 'fast');
else if you dont wanna make it on your own, use that jQuery UI 'slide' effect?

I know what you mean - the items inside the DIV or whatever you are animating look like they are squahsed, and then expand.
Maybe consider hiding the element behind another and either move the masking element up and out of the way or slide the hidden element down using .animate()?
jQuery .click .animate to move down, then back up
This may help.

You can easily achieve this with an inner container that has fixed dimentions.
See this live example. In the fiddle, the first div is without the inner container.
This way when the outer container animates (width/height) the inner container does not grow, simply reveals.

Consider your image of height 150px
First apply height="0"
Use animate to achieve slide down effect
<img src="http://www.google.com/images/nav_logo29.png" id="image_scale" width="200" height="0" />
<script>
$(document).ready(function(){
$("#image_scale").animate({height:"150px"},"5000");
});
</script>

Absolutely position the element you are wanting to slide in and out and use .animate() to change it's position. You can have it slide in from the top, bottom, left, right, on the diagonal or however you want with this method.