Develop Reference

Toggling marginTop without making an element disappear

I've thrown together a cool little script that will make my search box appear using jQuery UI. However, there are links above the search box that must move up at the same speed as well. For this, the margin-top must be adjusted, but by toggling the margin-top, it seems it is disappearing.
Does anyone know how I can toggle the margin-top without making the links disappear AND keep the speed as close as possible to the other one?
$(document).ready(function() {
$('.pwcustomsearch').hide();
$("#pwcustomsearchlink").click(function () {
var effect = 'slide';
var options = { direction: 'down' };
var duration = 400;
$('.pwcustomsearch').toggle(effect, options, duration);
$('.social-media').toggle({"marginTop": "15px"});
})
});
Here is a fiddle:
http://jsfiddle.net/hcmLw/1030/

.toggle() is adding display:none as an inline style to your element, therefore it disappears.
Use .animate() instead to change the top margin.
See my updated fiddle here: http://jsfiddle.net/hcmLw/1032/
EDIT: Updated the fiddle again to make the toggling work properly.

MooTools Tween Stutter/Hiccup

I am doing a rather simple Tween animation using MooTools. The opening animation is perfectly smooth. But then I added the closing animation (opposite of the opening animation), but it seems to stutter/hiccup at the end almost every time.
I tried the following with no success:
Removed all HTML content from the expanding DIV
Passing the Bounce settings directly to the Set function instead of using the variable
Commented the #content animation to be sure there is only 1 animation running
Commented the addClass and removeClass actions
I can't figure out what's causing the problem. Maybe someone else can have a look…
I put the test-case online here: http://dev.dvrs.eu/mootools/
window.addEvent('domready', function() {
// Set initial Div heights
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
// Set Div heights on Window resize
window.addEvent('resize', function() {
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
});
var bounce = {
transition: Fx.Transitions.Back.easeOut,
duration: 500
};
$$('.button.closeMenu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 0);
$('content').set('tween', bounce);
$('content').tween('margin-left', 90);
});
$$('.button.menu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 300);
$('content').set('tween', bounce);
$('content').tween('margin-left', 390);
});
});
Fiddle with example here

The transition you are using goes over the values defined as final value in the .set(property, value);. So when opening the final width is 300px but the transition/effect goes over that and than soft back to the final value.
This works great when opening because width can be 310px or more and then return to 300px, but when with has a transition under the with 0px, it doesn't work so good. It actually works ok if the final width is 10px (check here), but that's not the effect you want.
So my suggestion is to fix it with CSS, or change the transition when closing the sidebar, or use another effect altogether.
Option 1: fiddle - same transition opening, no easeout closing
Option 2: fiddle - same effect as you have but played with CSS and hidded 10px of the sidemenu under the sidebar. (z-index:3; on #sideBar and left:80px;width: 10px; on #sideMenu. Also 10px as the final value for the tween.)
To check different transitions at Mootools demo's look here.

Fade in selected div and set it on top of the others

I need to create a menu with divs on top of each other and when a div is clicked, I want it to be on top of the others.
Something very similar to this but when clicked, I want it to fade in on top of the other divs.
Any Ideas?
Thanks.

Something like this maybe. May need tweaking to suit.
DEMO
$("div").click(function(){
$("div").css("zIndex",1);
$(this).fadeOut('slow', function() {
$(this).css("zIndex",100);
$(this).fadeIn('slow');
});
});​

Could user animate to animate the opacity when it is on top: http://jsfiddle.net/bingjie2680/f9j9a/120/
$("div").click(function(){
$("div").css("zIndex",1);
$(this).css({"zIndex":100, 'opacity':0.4}).animate({'opacity':1}, 1000);
});​

This will work and also support adding and removing boxes on the fly (as opposed to the other answers) because of event delegation:
$("#container").on("click", "div", function(e) {
$("#container div").css("z-index", 0);
$(this).css({ "z-index": 10, "opacity": 0.4 })
.fadeTo(400, 1);
});
Optionally add .not($(this)) to $("#container div") to avoid changing the z-index to 0 for the currently selected box. But because we change it back to 10 on the line after it is not really necessary. Could be useful to avoid bugs if the code gets more complex in the future though.
Try it out here:
http://jsfiddle.net/BWABk/

jQuery Resizing Object

I am trying to get this resizing object to work properly.
When MouseDown (holding), object resizes to 80px.
When release, I want the object to resize back to normal.
Problem:
As the object resizes from 100px to 80px on MouseDown, it may happen that the mouse is no more in the object itself, so releasing the mouse won't trigger the "resize back to normal" animation again.
That's why I tried to do a workaround with this:
if (global.mouseup) and ($('#myimage').width('80px'))
Complete code at:
http://jsfiddle.net/G8Ste/568/
Thanks for any help !

Bind a mouseup handler to the document that resizes the img back to normal:
$('#myimage').mousedown(function() {
var img = $(this);
img.stop().animate({
width: ['80px', 'swing'],
height: ['80px', 'swing'],
}, 50, 'swing');
$(document).one("mouseup", function(){
img.css({width:"",height:""});
});
});
Working demo: http://jsfiddle.net/G8Ste/569/
A couple of notes about your code.
You don't have a global variable defined, so you are getting an error there.
Instead of and, you must mean &&.
Edit: You can, of course, use the animation as you have in your original code. Demo here: http://jsfiddle.net/G8Ste/574/. The limitation of that is that you have to duplicate code, specifying the default width and height in the CSS and in the JavaScript. You can resolve that any number of ways, such as using the technique I describe in this answer, or using jQuery-UI's .switchClass() and related methods. Example using jQuery-UI:
$('#myimage').mousedown(function() {
var img = $(this);
img.stop().addClass("small", 50);
$(document).one("mouseup", function(){
img.stop().switchClass("small", "large", 150, function() {
img.removeClass("large", 1000);
});
});
});
Demo: http://jsfiddle.net/G8Ste/576/

Jquery slide to visibility hidden?

I want to achieve something like :
$("#left").hide('slide', {direction: 'right'}, 1000)
However I do not want the div to be hidden I want it to keep up space so I want have the visibility hidden like:
$("#left").css('visibility','hidden')
Yet still achieve the same effect as above.

This is what I'd do
$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible
This could be horrible, but it's the only way I could think of solving the problem :)

EXAMPLE: http://jsfiddle.net/skyrim/j2RWt/4
Try this:
var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
width: 0,
position: "absolute",
left: offset.left,
top: offset.top,
height: $content.outerHeight(),
backgroundColor: "White"
}).appendTo("body")
.animate({
width: $content.outerWidth()
}, 1000, function () {
$content.css('visibility', 'hidden');
$(this).remove();
});
EDIT
So, after learning what the actual need was (:p), this method basically place another div over the original element. I've tested it on IE...and I'll edit this with an update after I do further testing on other browsers!
EDIT
Only Chrome seems to be having an issue with getting the correct height.
Added a callback which removes the makes visibility hidden (as LEOPiC suggested) and removes the slideout div

You can do it in very simple way. There is really a nice tutorial here to animate in different direction. It will surely help you. try this
$('#left').animate({width: 'toggle'});
EXAMPLE : http://jsfiddle.net/2p3FK/2/
EDIT: One more solution, this is very simple to move the div out of window with left margin
$("#left").animate({marginLeft:'1000px'},'slow');
EXAMPLE : http://jsfiddle.net/2p3FK/1/