Develop Reference

Javascript Accordian

I have a simple accordion working, except for one thing. I would like to be able to re-click the same accordion item again, and be able to set height to '0'.
Currently, the open accordion item closes when I click a different accordion item, which is exactly what I want to do — but I also want the ability to re-click the open accordion item and have that one close, when clicked. See working example below:
https://codepen.io/celli/pen/BaNLJWb
// set heights to 0
gsap.set('.content', {
height: 0
});
// click function
$('.accordianItem').click(function() {
if ($('.accordianItem').hasClass('on')) {
gsap.to($('.content'), {
duration: .25,
height: 0
});
$('.accordianItem').removeClass('on');
}
gsap.to($(this).children('.content'), {
duration: .25,
height: "auto"
});
$(this).addClass('on');
});
What code can I add to add this extra functionality?

I have modified your code by adding another if that checks if the element clicked has 'on' class already. It should now work as you intended it to (hide when the user clicks on the already opened header).
// set heights to 0
gsap.set('.content', {height:0});
// click function
$('.accordianItem').click(function() {
if($(this).hasClass("on")){
gsap.to($('.content'), {duration:.25, height:0});
$('.accordianItem').removeClass('on');
}
else{
if ($('.accordianItem').hasClass('on')) {
gsap.to($('.content'), {duration:.25, height:0});
$('.accordianItem').removeClass('on');
}
gsap.to($(this).children('.content'), {duration:.25, height:"auto"});
$(this).addClass('on');
}
});

You can do this much more simply than how you're currently doing it:
// Create the animation that you need
const tl = gsap.timeline({paused: true});
tl.to('.content', {duration: 0.25, height:0});
// Set the timeline to its end state
tl.progress(1);
// Toggle the timeline's direction
$('.accordianItem').click(function() {
tl.reversed() ? tl.play() : tl.reverse();
});
Demo
I highly recommend checking out the GreenSock forums. They're super useful and you can get quick help from people who are experts in GSAP and web animation :)

Titanium Studio JavaScript - adding buttons to table views

Is it possible to add buttons to table views? I am trying to create a screen that resembles a settings screen on the iPhone.
I know you are able to add the little arrow that represents that the list has a child but what I'm specifically looking for is how to add a plus button to the right side of my table view.

You need to add a button to the row. That means you need to create a custom row. It's much simpler. Try the following
function createRow(){
var tableRow = Ti.UI.createTableViewRow({
hasChild : false,
width : '100%',
height : 55,
});
var addButton = Ti.UI.createButton({
title : '+',
width : 40,
height : 40,
right : '3%'
});
addButton.addEventListener('click', function(){
alert("Hey, you clicked + button");
});
tableRow.add(addButton);
return tableRow;
}
The above code creates a customized row. Hope it helps you.
Let me know if you have any questions.

Showing a div onmouseover for table row, and setting text and URL dynamically using row attributes

I'm working on a pricing comparison table, and wanted to display more information on each option in a different way.
When a user hovers their mouse over a row, I want the row to show more information on that feature. I now have this working using jQuery and a div.
$(document).ready(function() {
$('#row').mouseover(function() {
var $divOverlay = $('#divOverlay');
var bottomWidth = $(this).css('width');
var bottomHeight = $(this).css('height');
var rowPos = $(this).position();
bottomTop = rowPos.top;
bottomLeft = rowPos.left;
$divOverlay.css({
position: 'absolute',
top: bottomTop,
left: bottomLeft,
width: bottomWidth,
height: bottomHeight
});
$divOverlay.text($(this).closest('tr').attr('desc'));
$divOverlay.delay('100').fadeIn();
$(this).closest('tr').css({ opacity: 0.01 });
});
$('#divOverlay').mouseleave(function() {
var $divOverlay = $('#divOverlay');
$('#row').css({ opacity: 1 });
$divOverlay.fadeOut();
});
});
My problem now lies in that in some cases I want to include a link to a video, or another page (that opens in a new tab) - to provide the user with more information if needed. But the way I have this working, the link isn't rendered as html but shown as text instead. Would anyone know how else I could do this?
Full functional example:
http://jsfiddle.net/rMXAp/1/
Another idea I had was setting an onclick for the div, where the href is taken from the "desc_link" attribute (see non-header row in jsfiddle example), but I'm not sure yet on how I can set this with jQuery.
I think it was somthing similar to the following that I tried:
$divOverlay.setAttribute('onclick',$(this).closest('tr').attr('desc_link'));
Suggestions are appreciated!

Try using .html instead of .text - should do the trick :)

Slide boxes with margin-left check if overslided

I made a simple content/box slider which uses the following javascript:
$('#left').click(function () {
$('#videos').animate({
marginLeft: '-=800px'
}, 500);
});
$('#right').click(function () {
$('#videos').animate({
marginLeft: '+=800px'
}, 500);
});
Here is the demo: http://jsfiddle.net/tjset/2/
What I want to do and I can't figure out how to show and hide arrows(left and right box) as the all the boxes slided.
So I clicked 4 time to the LEFT and slided all the boxes! then hide "left" so that you can't give more -800px
What can I do?

What you can do is check after the animation completes to see if the margin-left property is smaller or larger than the bounds of the video <div>. If it is, depending on which navigation button was clicked, hide the appropriate navigation link.
Check out the code below:
$('#left').click(function () {
// reset the #right navigation button to show
$('#right').show();
$('#videos').animate({
marginLeft: '-=800px'
}, 500, 'linear', function(){
// grab the margin-left property
var mLeft = parseInt($('#videos').css('marginLeft'));
// store the width of the #video div
// invert the number since the margin left is a negative value
var videoWidth = $('#videos').width() * -1;
// if the left margin that is set is less than the videoWidth var,
// hide the #left navigation. Otherwise, keep it shown
if(mLeft < videoWidth){
$('#left').hide();
} else {
$('#left').show();
}
});
});
// do similar things if the right button is clicked
$('#right').click(function () {
$('#left').show();
$('#videos').animate({
marginLeft: '+=800px'
}, 500, 'linear', function(){
var mRight = parseInt($('#videos').css('marginLeft'));
if(mRight > 100){
$('#right').hide();
} else {
$('#right').show();
}
});
});
Check out the jsfiddle:
http://jsfiddle.net/dnVYW/1/

There are many jQuery plugins for this. First determine how many results there are, then determine how many you want visible, then use another variable to keep track with how many are hidden to the left and how many are hidden to the right. So...
var total = TOTAL_RESULTS;
var leftScrolled = 0;
var rightScrolled = total - 3; // minus 3, since you want 3 displayed at a time.
instead of using marginLeft I would wrap all of these inside of a wrapper and set the positions to absolute. Then animate using "left" property or "right". There's a lot of code required to do this, well not MUCH, but since there are many plugins, I think you'd be better off searching jquery.com for a plugin and look for examples on how to do this. marginLeft is just not the way to go, since it can cause many viewing problems depending on what version of browser you are using.

Storing width values before animation records post animation values

Its getting a bit late so excuse me if I am making a stupid mistake. For some reason the following code:
$(".myClass").each(function(){
widths[$(this).attr("id")] = $(this).width();
if ($(this).attr("id") != $(clickedExpand).attr("id"))
{
$(this).animate({
width: '10px'
});
}
});
The array is initialized as
var widths = new Array();
earlier in the code. For some reason, despite the fact that I am recording the the widths before the animation begins, I am getting post-animation values in the array. It seems as though the animation finishes and then the values get recorded. I have tried to take it out of the function and wrap it in another .each but I am getting the same result.
Any help is would be greatly appreciated!
entire code:
var slateWidths = {};
$(".slateExpand").click(function(){
var clickedExpand = $(this).closest(".slate");
$(".slate").each(function(){
slateWidths[$(this).attr("id")] = $(this).outerWidth();
if ($(this).attr("id") != $(clickedExpand).attr("id"))
{
$(this).animate({
width: '10px'
});
$(this).find($('.slateExpand')).hide();
}
});
$(this).text("Restore");
$(this).removeClass("slateExpand").addClass("slateRestore");
$(".slateRestore").on("click",function(){
$(".slate").each(function()
{
alert(slateWidths[$(this).attr("id")]);
//var width = slateWidths[$(this).attr("id")];
$(this).animate({
width: slateWidths[$(this).attr("id")]
});
});
});
});

// first of all save all widths for all .slate
var slateWidths = {};
$(".slate").each(function(){
slateWidths[$(this).attr("id")] = $(this).width();
});
$(".slateExpand").click(function(){
var $slate = $(this).closest('slate');
if($slate.hasClass('hidden')) {
$slate.animate({
width: slateWidths[$slate.attr('id')]
});
$(this).text("hide");
$slate.removeClass("hidden")
}else{
$slate.animate({
width: '10px'
});
$(this).text("Restore");
$slate.addClass("hidden")
}
});

Ok, if you come across a similar issue, there is an easy solution. The issue is that the click has not be unbound the event from the div despite the class change. As a result, it first reruns the code that records the widths. This causes the animation to not play since now the previous widths are the same as the current ones. To solve this, simply add
$("theDiv").unbind("click);
to remove the event handler. This will prevent the click event which is for the previous class from firing.