Develop Reference

Don't know how to use .toggle()

I have a logo, with the letter T and H and the letters animatie about 400px away from each other when clicked on the menu. When they have animated the navigation comes forward with an: eas-in, BUT when I click on the hamburger-menu again, I want the navigation to close with the same animation. I have tried different .toggle() functions, but I don't know how to make it work. This is how it looks right now, I just cant figure out how to toggle the menu.
Is there anyone that knows how to do this, or is there anyone that has any advice? much appreciated!
(this is the working code for the animation and the fade-in navigation)
$( "#myMenu" ).click(function() {
$( ".letterT" ).animate({
marginLeft: "-200px",
borderWidth: "10px"
}, 1000 );
});
$( "#myMenu" ).click(function() {
$( ".letterH" ).animate({
marginLeft: "400px",
position: "absolute",
borderWidth: "10px"
}, 1000 );
});
$( "#myMenu" ).click(function() {
$( "nav" ).fadeIn( 2000)
});
The code above works once. with 1 click, now I tried to use the .toggle() but when I do so it immediately hides my menu with an animation.. And I can't find the menubutton anymore.
(This is the not working code that I tried to use for the toggle)
$(function(){
$('#myMenu').toggle(function(){
$( ".letterT" ).animate({
marginLeft: "-200px",
}, 1000 );
$( ".letterH" ).animate({
marginLeft: "400px",
position: "absolute",
}, 1000 );
//the code above should start the animation,
//and below it should animate back when I click on the menu
}, function(){
$( ".letterT" ).animate({
marginLeft: "200px",
}, 1000 );
$( ".letterH" ).animate({
marginLeft: "-400px",
position: "absolute",
}, 1000 );
});
});

Note: You load three times the jQuery library. You only need it once.
What you are trying to do is the "old" way toggle() used to work. You can read in the API description:
This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements.
Because you are using a version of jQuery newer than 1.8, the toggle() function only shows/hides an element.
You have several options: you could use a plugin, but I like Dom's solution which is using a variable to keep track of the state.
Your JavaScript code would become:
var oddClick = true; // <-- The variable to keep track of the state
$("#myMenu").click(function () {
if (oddClick) {h
$(".letterT").animate({
marginLeft: "-200px",
borderWidth: "10px"
}, 1000);
$(".letterH").animate({
marginLeft: "400px",
position: "absolute",
borderWidth: "10px"
}, 1000);
$("nav").fadeIn(2000);
}
else { // We put it back as it was before.
$(".letterT").animate({
marginLeft: "0",
}, 1000 );
$(".letterH").animate({
marginLeft: "-0.3em",
position: "absolute",
}, 1000 );
$("nav").fadeOut(500);
}
oddClick = !oddClick; // We toggle the variable everytime the button is clicked.
});
I created a jsFiddle to show you: http://jsfiddle.net/grd7z1g8/1/

when to stop scrolling

Look at the demo below. On click of next i scroll it but i want to hide next when end has reached. How do i know when to stop scroll
http://jsfiddle.net/77kJp/2/
JS
$("span").click(function(){
$('span').after('<br />'+$( "div.demo" )[0].scrollWidth+'-'+$( "div.demo" ).scrollLeft() + '-'+$( "div.demo p" )[0].scrollWidth );
$( "div.demo" ).animate({
scrollLeft: $( "div.demo" ).scrollLeft() + 800
});
});
ps: 800 in demo is just for ease

run a function after animation complete like this
http://api.jquery.com/animate/
$('selector').animate(
{
right : "100px",
}, 500,
function() {
$('selector').hide(); // this will run after the animation is complete
}
);

You want to use the scroll() event listener. Whenever your demo div is scrolled, check its current position from the left, and if it's greater than a certain threshold, hide your span that says 'next'
Add this JS after your $("span").click() code:
var leftPos;
$(".demo").scroll(function(event){
leftPos = $(".demo").scrollLeft();
if(leftPos > 700){
$("span").hide();
}else{
$("span").show();
}
});

Use the callback function of animate
$("span").click(function(){
$('span').after('<br />'+$( "div.demo" )[0].scrollWidth+'-'+$( "div.demo" ).scrollLeft() + '-'+$( "div.demo p" )[0].scrollWidth );
$( "div.demo" ).animate({
scrollLeft: $( "div.demo" ).scrollLeft() + 800
},function() {
$('span').hide();
});
});

Jquery this not always selecting this

I have multiple divs, When the user clicks on the div, it simply animates some text on the div. The problem is that the correct div is selected some of the time, but some of the time it targets the incorrect div.
$( document ).ready(function() {
$('#SpinnerTrue').css('opacity', '0.0');
$( ".GameWrapper .spinnerWrapper" ).click(function() {
Slide(this, 40);
});
});
function Slide(id, Size)
{
var VidF = $(id).children("#SpinnerFalse");
var VidT = $(id).children("#SpinnerTrue");
var VidV = $(id).children(".LocalVal");
var amount = Size;
if($(VidV).val() == "true")
{
$( VidF ).animate({ "top": "+="+amount, 'opacity': '1.0'}, "fast" );
$( VidT ).animate({ "top": "+="+amount, 'opacity': '0' }, "fast" );
$( VidV ).val('false');
}
else
{
$( VidF ).animate({ "top": "-="+amount, 'opacity': '0' }, "fast" );
$( VidT ).animate({ "top": "-="+amount, 'opacity': '1.0' }, "fast" );
$( VidV ).val('true');
}
}

Works for me....
Sample fiddle: http://jsfiddle.net/JbFe2/
My html, based on your js structure...
<div class="GameWrapper">
<div class="spinnerWrapper">
<div id="SpinnerFalse">FALSE</div>
<div id="SpinnerTrue">TRUE</div>
<div class="LocalVal">LocalVAL</div>
</div>
</div>

How do I prevent a javascript function from rendering before another function rendering?

Theoretically speaking let's say I have 3 javascript (jquery) functions that create visual effects. If I want one of them to render after the first two have been rendered, how can I do this?
Javascript:
<script type="text/javascript">
$(function() {
var transition = 'slow';
var target1 = $('#somediv');
var target2 = $('#second_div');
var target3 = $('#third_div');
target1.delay(5000).fadeIn();
target2.delay(target2Time).fadeIn();
target3.delay(target3Time).fadeIn();
});
</script>
<script type="text/javascript">
$.fn.teletype = function(opts){
var $this = this,
defaults = {
animDelay: 50
},
settings = $.extend(defaults, opts);
$.each(settings.text, function(i, letter){
setTimeout(function(){
$this.html($this.html() + letter);
}, settings.animDelay * i);
});
};
$(function(){
$('#second_div').teletype({
animDelay: 200,
text: 'Hello, this is your classmate!'
});
});
</script>
HTML:
<div id="somediv">Some Content</div>
<div id="second_div"></div>
<div id="third_div">Some third content</div>

I've made this demo. It demonstrates how to make one animation wait for two other animations to finish:
var anim1 = $( '#elem1' ).animate({ width: 200 }, 3000 );
var anim2 = $( '#elem2' ).animate({ width: 200 }, 2000 );
$.when( anim1, anim2 ).done(function () {
$( '#elem3' ).animate({ width: 200 }, 1000 );
});
Live demo: http://jsfiddle.net/m67Ua/
You can apply the same technique for your fading requirements:
var fade1 = $( '#img1' ).fadeIn( 3000 );
var fade2 = $( '#img2' ).fadeIn( 2000 );
$.when( fade1, fade2 ).done(function () {
$( '#img3' ).fadeIn( 1000 );
});
Live demo: http://jsfiddle.net/m67Ua/1/

Just as improvement, you can pass an array of animations
var array = new Array();
array.push( $( '#img1' ).fadeIn( 3000 ));
array.push( $( '#img2' ).fadeIn( 2000 ));
And then the trick is change from array to list arguments as expected by jquery, using the apply method
$.when.apply(this, array ).done(function () {
$( '#img3' ).fadeIn( 1000 );
});
Live demo:
http://jsfiddle.net/m67Ua/2/

i needed the callbacks and the done, so check this out:
$.when(
$('#container .item')
.animate({"opacity": "0"}, 1000,
function onCallbackForEach () {
console.log('callback on element called');
})
).done( function onFinally () {
console.log('done called');
});
which gives me access to handle the elements each after their animation (e.g. replace an old one with them), and aditionally having a single callback to do work after all of the animations have finished...

Setting z-index when using jQuery UI Draggable not working in Firefox 4

I have 2 draggable DIVs that that i want stacked depending on where in the parent DIV they are located. I tried to set z-index, while this works in IE 9, I cannot get it to work in Firefox 4.
Using Firebug I see that the dragged elements has z-index set to auto.
Full demo of what I want to accomplish at http://jsfiddle.net/a5jgm/6/
Thank you for your time
$( ".draggable" ).draggable({
// zIndex: 5,
start: function(event, ui) {
// console.log(this);
var zIndex = $(this).draggable( "option", "zIndex" );
$('#zindex').val(zIndex);
// $( this ).draggable( "option", "zIndex", 100 );
},
drag: function( event, ui ) {
var pos = $( "#"+this.id).position();
$( "#offset" ).val( ""+pos.left +" "+pos.top );
},
stop: function(event, ui){
console.log(this);
if(ui.offset.left > 220){
var currentz = parseInt( $('#zindex').val() )+1;
$( this ).draggable( "option", "zIndex", currentz);
$('#zindex').val(currentz);
console.log(' z index is: '+$(this).draggable( "option", "zIndex" ));
}
}
});
var i = 10;
$( ".draggable").each(function(){
i = i +1;
$( this ).draggable( "option", "zIndex", i );
});

Try setting the position attribute as well. Set it to relative, absolute etc whichever is appropriate as per your implementation. That might probably solve the issue.