GSAP Javascript if else statement woes - javascript

I'm building a basic online banking app with HTML, CSS, and JS.
So far I have the recent transaction screen and a simple animation for opening each individual transaction's description.
I used GSAP to create the animation, and jQuery for handling elements.
However, I have run into a problem getting the description window to close after it has been opened.
CODEPEN HERE, and here is the JS:
$(document).ready(function() {
$('.list li').click(function() {
var i = $(this).find('i');
var li = $(this);
var desc = $(this).next();
var tl = new TimelineMax({paused:false});
var open = false;
if (open === true) {
tl.to(i, .3, {rotation: 0})
.to(li, .3, {borderBottom: 'none', delay: -.2})
.to(desc, .3, {height: '0', padding: '0', delay: -.2});
open = false;
} else {
tl.to(i, .3, {rotation: 90})
.to(li, .3, {borderBottom: '2px solid #95a5a6', delay: -.2})
.to(desc, .3, {height: '55px', padding: '5px', delay: -.2});
open = true;
}
});
});
I use an if statement to decide which animation to play depending on if the description window is open or closed.
I am a designer learning to code, I will take any advice I can get.

You have the right idea, but var open = false; is in the wrong scope. The way it's written, open is defined as false every time the click handler is called, You want to put it in the parent scope: outside the click handler, before the click handler is ever called.
EDIT since you want to track the "open" state of each element, you need to create a closure for each element. You can do that using .each().
You can do this:
$(document).ready(function() {
$('.list li').each(function() {
var open = false; // <-- Put "open" here
$(this).click(function() {
var i = $(this).find('i');
var li = $(this);
var desc = $(this).next();
var tl = new TimelineMax({paused:false});
// get rid of "open" here
if (open === true) {
tl.to(i, .3, {rotation: 0})
.to(li, .3, {borderBottom: 'none', delay: -.2})
.to(desc, .3, {height: '0', padding: '0', delay: -.2});
open = false;
} else {
tl.to(i, .3, {rotation: 90})
.to(li, .3, {borderBottom: '2px solid #95a5a6', delay: -.2})
.to(desc, .3, {height: '55px', padding: '5px', delay: -.2});
open = true;
}
});
});
});

Related

Portfolio Issue with Isotope filter

This has been a nightmare. I bought a Wordpress template but the support is offering me no help. The issue is that when you click one of the list items that acts like a filter sometimes doesn't work properly when you go to the lightbox gallery (clicking the picture). The main problem I encounter is when the user tries to hover the section before it has charged the lightbox shows a mix of pictures and not only the pictures of the section that you are. So far the Javascript related code is this:
$(window).load(function(){
// Container
var $container = $('.isotope-container');
$container.isotope({
filter:'*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
// Isotope Button
$('#options li a').click(function(){
var n = jQuery.queue( $( 'class' )[ 0 ], 'fx' );
var selector = $(this).attr('data-filter');
$container.isotope({
filter:selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
var $optionSets = $('#options'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('#options');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
$('.foliobox').removeClass('active');
$container.isotope( 'on', 'layoutComplete', function() {
$('.foliobox').each(function(){
$this = $(this);
if($this.is(':visible')){
$this.addClass('active')
}
})
} )
});
});
I guess that this is isotope caller.
I can post the rest of the code that calls the lightbox. I guess as an idea what could be done is add a fake button in the top of the gallery with a z-index and hide it when the function is complete. Could you help me with that? I am not good at all at javascript.
Here is the website: http://donarnold.com.au/
Many thanks!

Cant find where I did not close my bracket. Uncaught SyntaxError: Unexpected end of input

My console is returning this error:
Uncaught SyntaxError: Unexpected end of input
I know what it means, but i can't find where i did not close correctly my bracket.
This is the URL of my website, http://bit.ly/KJz5pi
If anybody can solve it, i will be so much glad! Thanks.
--------- EDIT
I cut a big part of my code, and it's showing this error just in this small slice of code:
$("#slider-index").bxSlider({
delay: 3000,
speed: 5000,
pause: 1000,
controls: false,
auto: true,
pager: false,
adaptativeHeight: true,
adaptativeWidth: true,
mode: 'fade'
});
function persiana() {
$('.one').animate({
left: '-35px'
}, 1500, 'linear', function() {
$(this).css('left', '0');
persiana();
});
}
persiana();
and yet, I don't see the error, not even jshint.com finds it!
Took me little long to debug your code but I think I found where the problem is. Actually, the problem isn't with the code that you have shown us. The problem is somewhere else. You have missed to close two function. Look at the code below:
$(document).ready(function () {
$(".newsletter").colorbox({
iframe: true,
width: "500px",
height: "310px"
});
$(".mapa-site").colorbox({
iframe: true,
width: "600px",
height: "420px"
});
$(".webdesign").colorbox({
iframe: true,
width: "450px",
height: "300px"
});
$(".area-restrita").colorbox({
iframe: true,
width: "500px",
height: "300px"
});
var posicao = $(".menu ul li a.active").parents().position().left + ($(".menu ul li a.active").parents().width() / 2) - 10;
$(".bola").css({
left: posicao
});
$(".menu ul li a").click(function (e) {
e.preventDefault();
var _this = $(this);
var posicao = _this.parents().position().left + (_this.parents().width() / 2) - 10;
$(".bola").animate({
'left': posicao
}, 'slow');
$(".menu ul li a").removeClass('active');
$(this).addClass('active');
var dataSlider = _this.attr('data-slide-index');
var conteudoLi = $("#li_" + dataSlider).html();
novoLeft = dataSlider * 964 * -1;
if ($("#li_" + dataSlider).attr('data-height')) {
novoHeight = $("#li_" + dataSlider).attr('data-height');
} else {
novoHeight = $("#li_" + dataSlider).outerHeight();
}
$('.viewport').animate({
left: novoLeft
}, 'slow', 'swing');
$('#content').animate({
height: novoHeight
}, 'slow');
So, if you add two more lines after that code, your problem will be fixed.
}); //For $("menu ul li a").click(function) {
}); // For $(document).ready(function) {
Use this. Paste in your javascript. Presto. However, we can't hold your hand through it. Lint will find syntax and logic errors. Focus on the syntax error and don't get lost on the logic stuff. Just get your code working.
http://www.javascriptlint.com/online_lint.php

jquery incomplete animation on hover

I am working on a navigation system for my site. The idea is to display the content when the parent is hovered.
But, when content is hovered fast, the animation is incomplete and it stops in between.
The complete working and code is in the demo link below. Any suggestions on the changing the code will be helpful.
DEMO: http://jsfiddle.net/vaakash/yH9GE/
When the "two" arrows are hovered at the same time (move fast from one
arrow to another) they stop and are incomplete
The code I used is
$('.anpn-wrap').mouseenter(function(){
$wrap = $(this);
$txt = $(this).find('.anpn-text');
$cnt = $(this).find('.anpn-cnt');
$txt.hide();
$cnt.css({ 'opacity': 0, 'margin-top': '-50px', 'width': '200px' });
$wrap.stop().animate({ 'width': $cnt.outerWidth() });
$cnt.show().animate({ 'opacity': 1, 'margin': 0});
});
$('.anpn-wrap').mouseleave(function(){
$wrap = $(this);
$txt = $(this).find('.anpn-text');
$cnt = $(this).find('.anpn-cnt');
$cnt.show().stop().animate({ 'opacity': 0, 'margin-top': '-50px' }, function(){
$cnt.hide();
$wrap.stop().animate({ 'width': $txt.outerWidth() });
$txt.fadeIn();
});
});​
By not localizing $wrap, $txt and $cnt, they will be global, hence if a mousenter event occurs before an earlier mouseleave animation has finished, these vars will be overwritten and the callbacks in the first animation will address the other button's elements.
The solution is to declare $wrap, $txt and $cnt with var, in both handlers.
Try this:
$('.anpn-wrap').mouseenter(function() {
var $wrap = $(this).stop();
var $txt = $wrap.find('.anpn-text').hide();
var $cnt = $wrap.find('.anpn-cnt').css({
'opacity': 0,
'margin-top': '-50px',
'width': '200px'
}).show().animate({
'opacity': 1,
'margin': 0
});
$wrap.animate({
'width': $cnt.outerWidth()
});
}).mouseleave(function() {
var $wrap = $(this);
var $txt = $wrap.find('.anpn-text');
var $cnt = $wrap.find('.anpn-cnt').show().stop().animate({
'opacity': 0,
'margin-top': '-50px'
}, function() {
$cnt.hide();
$wrap.stop().animate({
'width': $txt.outerWidth()
});
$txt.fadeIn();
});
});
I don’t know what you want instead, but you can pass arguments to stop() to force-complete the animation.
stop(true, true)
See this version: http://jsfiddle.net/yH9GE/2/

javascript 'this' issue: programmatically hide jQuery spotlight

I'm trying to augment the (very nice) jQuery Spotlight plugin so that I can programmatically invoke the "hide" behavior.
I've moved the related code into a hide() function, and it works fine when invoked from within spotlight itself. But when I try to invoke it from outside of spotlight nothing happens. I've checked that spotlight.hide is in fact defined to type function, but invoking it seemingly does nothing.
(function($) {
$.fn.spotlight = function(options) {
var hide = function() {
alert('hiding...'); /* never gets invoked when called from outside spotlight */
if(settings.animate){
spotlight.animate({opacity: 0}, settings.speed, settings.easing, function(){
if(currentPos == 'static') element.css('position', 'static');
element.css('z-index', '1');
$(this).remove();
// Trigger the onHide callback
settings.onHide.call(this);
});
} else {
spotlight.css('opacity', '0');
if(currentPos == 'static') element.css('position', 'static');
element.css('z-index', '1');
$(this).remove();
// Trigger the onHide callback
settings.onHide.call(this);
}
};
// Default settings
settings = $.extend({}, {
opacity: .5,
speed: 400,
color: '#333',
animate: true,
easing: '',
exitEvent: 'click',
onShow: function(){},
onHide: function(){}
}, options);
// Do a compatibility check
if(!jQuery.support.opacity) return false;
if($('#spotlight').size() == 0){
// Add the overlay div
$('body').append('<div id="spotlight"></div>');
// Get our elements
var element = $(this);
var spotlight = $('#spotlight');
// Set the CSS styles
spotlight.css({
'position':'fixed',
'background':settings.color,
'opacity':'0',
'top':'0px',
'left':'0px',
'height':'100%',
'width':'100%',
'z-index':'9998'
});
// Set element CSS
var currentPos = element.css('position');
if(currentPos == 'static'){
element.css({'position':'relative', 'z-index':'9999'});
} else {
element.css('z-index', '9999');
}
// Fade in the spotlight
if(settings.animate){
spotlight.animate({opacity: settings.opacity}, settings.speed, settings.easing, function(){
// Trigger the onShow callback
settings.onShow.call(this);
});
} else {
spotlight.css('opacity', settings.opacity);
// Trigger the onShow callback
settings.onShow.call(this);
}
// Set up click to close
spotlight.live(settings.exitEvent, hide);
}
// Returns the jQuery object to allow for chainability.
return this;
};
})(jQuery);
I install it with:
var spotlight = $('#media-fragment').spotlight({
opacity: .5,
speed: 400,
color: '#333',
animate: false,
easing: '',
exitEvent: 'click',
onShow: function(){},
onHide: function(){}
});
And then to hide it I do:
spotlight.hide();
I'm pretty sure that there is a scope or this issue involved.
Update: full solution at https://gist.github.com/2910643.
Try changing:
var hide = function() {
to:
this.hide = function() {
var defines the scope of the function or variable within the parent scope, i.e. it's essentially protected. this on the otherhand will explicitly set it on the parent object, prototype, and make it publicly accessible.

Open an overlay while nextpage is loading

Trying to open an overlay (with JqueryTools) with loading message before the page changes, can't find how to use the href attribute of my trigger (i'm using a class .btn_menu for multiple button)
HTML
<div class='btn_menu'>
<a class='modalInput' rel='#loading' href="a_mailling.php"></a>
</div>
JS
$(function() {
var triggers = $(".btn_menu a").overlay({
expose: {
color: '#000',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false,
onBeforeLoad: function(){ //right ?
window.location = //need to get href attribute of clicked trigger
}
});
var buttons = $("#loading button").click(function(e) {
var yes = buttons.index(this) === 0;
});
});
I haven't use jQuery tools much, but you could structure it a little differently to cache each <a>.
$(function(){
$('.btn_menu a').each(function(){
var url=this.href;
$(this).overlay({
//other options
onBeforeLoad: function(){
//do something with url
}
});
});
});

Categories

Resources