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 :)

intro.js steps and tooltip position works fine, except when "back" is pressed

I have set up an intro of a web page using the steps and setoptions functionality, and it works fine except when the user presses back.
The two issues I find are:
scrolltoelement works fine going forward, but the tooltip goes partly off screen when going backwards
the element selected in the first step is the entire page, so I use an "onafterchange" callback to reset the tooltip top and right offset. This works fine, except it appears to be ignored (or overwritten) when the back key is pressed
The javascript is:
var introProfile = introJs();
introProfile.setOptions({
tooltipPosition : 'top',
steps: [
{
element: '#intro_step1',
intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
position: 'top'
}, {
element: '#intro_step2',
intro: 'Your profile contains important information which is important to complete so that...',
position: 'bottom'
},
{
element: '#intro_step3',
intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
position: 'top'
},
{
element: '#intro_step4',
intro: 'Click here to add a photograph of yourself.',
position: 'top'
},
{
element: '#intro_step5',
intro: 'Your photograph will appear when your profile matches a ...',
position: 'top'
},
{
element: '#intro_step6',
intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
position: 'top'
}
]
});
introProfile.oncomplete(function() {
;
});
introProfile.onexit(function(){
;
});
introProfile.onchange(function(targetElement) {
; //add change bits here
});
introProfile.onafterchange(function(targetElement) {
console.log(targetElement.id);
switch (targetElement.id){
case "intro_step1":
$('.introjs-tooltip').css({top:'80px',left:'200px'});
}
});
introProfile.onbeforechange(function(targetElement) {
; // add change bits here
});
introProfile.start();
All I am doing in the HTML is setting the element id for intro_step1 to intro_step6
You can see the fiddle here: https://jsfiddle.net/brianlmerritt/3ocyuu65/10/
Any idea why "back" functionality is different from forward?

The problem was you wanted to change the position of the tooltip for the 1st step by using -
$('.introjs-tooltip').css({top:'80px',left:'200px'});
This was added in the "onafterchange" function -
introProfile.onafterchange(function(targetElement) {
console.log(targetElement.id);
switch (targetElement.id){
case "intro_step1":
$('.introjs-tooltip').css({top:'80px',left:'200px'});
}
});
Now this function was as expected called when you initialised the introjs - meaning after the position was changed by the introjs and then was overridden by your positions in the "onafterchange" function
But in case of when you hit back this function was called after the position was changed by introjs. So to fix this i used "setTimeout"
setTimeout(function(){
$('.introjs-tooltip').css({top:'80px',left:'200px'});
},600)
So now your positions are now overridden for the tooltip
Note: Your code would have worked if the poition changes for the tooltip was completed first and then the "onafterchange" function was called.
Fiddle: https://jsfiddle.net/kushal812/3ocyuu65/11/
Let me know if you find a better way!!

Really IntroJS is showing some errors when using the Back button. Here is the solution using Ionic with the Typescript Framework:
export class HomePage {
introApp = introJs.introJs(); //Declared the IntroJS
...
this.intro(); // Call the method
...
intro() { this.introApp.setOptions({...})} //Set the options in IntroJS
//Bug Correction
this.introApp.onafterchange(function(targetElement) {
console.log(targetElement.id);
switch (targetElement.id){
case "b1":
setTimeout(function(){
var element = document.getElementsByClassName('introjs-tooltip');
var boxArrow = document.getElementsByClassName('introjs-arrow top');
var numberLayer = document.getElementsByClassName('introjs-helperNumberLayer');
element.item(0).setAttribute("style", "top:210px;");
boxArrow.item(0).setAttribute("style", "display: block");
numberLayer.item(0).setAttribute("style", "left: 0; top:0;");
},600)
}
});

My code gets disrupted when you hover over a dropdown list item

I've made a full width menu container that drops down when you hover the button "Content Overview" (pink button on the top right).
In the container I have a WordPress categories Widget with a dropdown.
The problem is that when you click and open the dropdown list, and you hover over a list item, the menu container closes immediately.
http://www.webmotus.com/
I have no clue what causes this, other than when you hover a category list item, it disrupts the code and closes the container.
I made a Fiddle to showcase the code & HTML working http://jsfiddle.net/62erLe6y/
var upTimer = false ,
downTimer = false ,
isHover = false ;
$(".carbsanity-custom-menu-trigger,
.carbsanity-custom-menu-container").hover(function(){
isHover = true;
clearTimeout(upTimer);
downTimer = setTimeout(function(){
if(isHover)
$(".carbsanity-custom-menu-container").slideDown(500);
},500);
},function(){
isHover = false;
clearTimeout(downTimer);
upTimer = setTimeout(function(){
$(".carbsanity-custom-menu-container").slideUp(500);
},100);
});
Can someone advice me on how to change my code so that it doesn't close my menu container?
Thank you :-)

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.

qTip change text of specific tooltip after for each

I have an html page with some inputs and textareas.
I want them to have qTip with different texts.
Here is my attempt
First I add a qTip to every element,
$('input, textarea').each(function() {
$(this).qtip(
{
content : 'generated', //this is for debug
position : {
my : 'center left',
at : 'center right',
adjust : {
x : 90
}
}
});
});
and then I'm trying to change an qTip text like this
$("#firstName").qtip('option', 'content.text', 'adwd');
but it is not working.
I tried this
$("#lastName").qtip({
content : 'text text'
});
which is working fine but it overrides the position

This code working for me:
$("#firstName").qtip('option', 'content.text', 'new tooltip content')
If you have to change it on an event (eg over or similar) try using this code:
// make sure you target a specific tip
var qapi = $('#firstName').data('qtip'),
newtip = 'new tooltip content'
qapi.options.content.text = newtip; // update content stored in options
qapi.elements.content.text(newtip); // update visible tooltip content
qapi.redraw(); // redraw to adjust tooltip borders
The code update only a specific option and leave the others as are.
Demo: http://jsfiddle.net/IrvinDominin/L7fs5/