Skip to content

Instantly share code, notes, and snippets.

Created February 9, 2012 22:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/1783669 to your computer and use it in GitHub Desktop.
Save anonymous/1783669 to your computer and use it in GitHub Desktop.
Knowing how to put conditionals into JavaScript functions
$(function() {
/*
This is what I have so far. The first part makes sure that the basket is invisible and that the basket link fades in on page load.
The second part is where I'm having the trouble. I need the top margin of both basket and basketlink elements to change based on their current margin-top css value. e.g. when their values are at -180px, they should be changed to 0px on the click event.
As far as Dw is concerned, it's all syntactically correct, but I have absolutely no idea; I only started with JavaScript this morning =/
*/
var d=150;
$('#basket').each(function(){
$(this).stop().animate({
'opacity':'0'
},d+=150);
}
);
var d=150;
$('#basketlink input').each(function(){
$(this).stop().animate({
'opacity':'1'
},d+=150);
}
);
$(function stuff() {
var margin = $('#basketlink').css('margin-top');
alert(margin);
if ( margin == '-180px') {
function () {
$('input',$(this)).stop().animate({
'marginTop':'0px'
},200);
$('#basket').stop().animate({
'marginTop':'0px',
'opacity':'1'
},200);
});
} else {
function () {
$('input',$(this)).stop().animate({
'marginTop':'-180px'
},200);
$('#basket').stop().animate({
'marginTop':'-180px',
'opacity':'0'
},200);
});
}
});
);
$('#basketlink').click(stuff());
});
// JavaScript Document
// This is what I came up with over the last 2 hours. I'm pretty sure it's not as efficient as it could be, but it works well enough to do what I need it to!
// Script for tab animations, shopping basket behaviour
$(function(tabAnimations) {
var d=250;
// Make sure the basket is in fact invisible on page load
$('#basket').each(function(){
$(this).stop().animate({
'opacity':'0'
},d+=250);
}
);
var d=250;
// Make the basket tab fade in on page load
$('#basketlink input').each(function(){
$(this).stop().animate({
'opacity':'1'
},d+=250);
}
);
var d=250;
// Make the login tab fade in on page load
$('#basic-modal input').each(function(){
$(this).stop().animate({
'opacity':'1'
},d+=250);
}
);
$('#basketlink').click(
function () {
// Check to determine which class the basketlink element has (either hidden or shown)
if ($('#basketlink').hasClass('hidden')) {
// Uncomment the following line to test
// alert("now showing the basket");
// Removes the "hidden" class and adds the "shown" class to the basketlink element. This is required to perform the IF check
document.getElementById("basketlink").className = document.getElementById("basketlink").classList.remove('hidden');
document.getElementById("basketlink").className = 'shown';
// Animate the tab's movement to the "shown" state
$('input',$(this)).stop().animate({
'marginTop':'0px'
},200);
// Animate the basket's movement to the "hidden" state, show the basket
$('#basket').stop().animate({
'marginTop':'0px',
'opacity':'1'
},200
);
} else if ($('#basketlink').hasClass('shown')) {
// Uncomment the following line to test
// alert("now hiding the basket");
// Removes the "shown" class and adds the "hidden" class to the basketlink element. This is required to perform the IF check
document.getElementById("basketlink").className = document.getElementById("basketlink").classList.remove('shown');
document.getElementById("basketlink").className = 'hidden';
// Animate the tab's movement to the "hidden" state (basically resetting its position)
$('input',$('#basketlink')).stop().animate({
'marginTop':'-180px'
},200
);
// Animate the basket's movement to the "hidden" state (again, resetting its position)
$('#basket').stop().animate({
'marginTop':'-180px',
},200
);
// After the previous animation, quickly hide the basket to stop it being visible under the header
$('#basket').animate({
'opacity':'0'
},20
);
}// End check for hidden/shown state
});// close $('#basketlink').click()
});// close $(function(tabAnimations)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment