gijsroge / tabtab.js Goto Github PK
View Code? Open in Web Editor NEWA simple, 60+fps, easy-to-use animated tabs plugin for jQuery.
Home Page: http://tabtab.be
License: MIT License
A simple, 60+fps, easy-to-use animated tabs plugin for jQuery.
Home Page: http://tabtab.be
License: MIT License
Its seems like that the height change after a second after all content is loaded.
In my test example is the content element (js-tabs-height) height 124 px;
And after everything is loaded and a second it change value to 145 px;
I checked with document ready.
$( document ).ready(function() {
console.log( "ready!" );
});
The "ready!" is listed before the change appears.
I think there is some process problems with outerHeight().
I fix it for now for me with get the outerHeight after all TabsElements are defined.
window.$ = window.jQuery = require('jquery');
import velocity from 'velocity';
import tabtab from 'tabtab.js';
class Tabular
{
constructor(){
}
}
export default Tabular;
Compile using browserify
In the setting is not specified - fixedHeight: false
This caused problems
Hi Gijsroge,
As mentioned it would be nice to have an option to set a time (in millisecond) that will auto rotate between the tabs :-) this would be very useful for a "dashboard" sort of projects.
cheers,
Tan
Can you provide some example markup on the github page? its hard to tell whats actual markup/css and whats been injected with the javascript. thank you
Hi there!!
Didn't know if this was still being maintained at all, but I have an issue on a client site that I need to get resolved as soon as possible. I built some accordions and such inside of Tabs on this page:
http://pns.creativefuse.org/services/dogs/
Not only does the tab height not flex to meet the needs of the content ( it is just defaulting to the height of the tallest tab as is evident when swapping between the Services and Surgeries tab ), but the tab height isn't flexing as accordions open and close. See attached.
Here are my settings for the tabs in question:
`$('.c-tabs').tabtab({
tabMenu: '.c-tabs__menu', // direct container of the tab menu items
tabContent: '.c-tabs__panels', // direct container of the tab content items
next: '.c-tabs__controls__next', // next slide trigger
prev: '.c-tabs__controls__prev', // previous slide trigger
startSlide: 1, // starting slide on pageload
arrows: false, // keyboard arrow navigation
dynamicHeight: true, // if true the height will dynamic and animated.
useAnimations: true, // disables animations.
easing: 'ease', // http://julian.com/research/velocity/#easing
speed: 450, // animation speed
slideDelay: 200, // delay the animation
perspective: 1200, // set 3D perspective
transformOrigin: 'center', // set the center point of the 3d animation
perspectiveOrigin: '50% 50%', // camera angle
translateY: 0, // animate along the Y axis (val: px or ‘slide’)
translateX: 1500, // animate along the X axis (val: px or ‘slide’)
scale: 1, // animate scale (val: 0-2)
rotateX: 0, // animate rotation (val: 0deg-360deg)
rotateY: 0, // animate Y acces rotation (val: 0deg-360deg)
skewY: 0, // animate Y skew (val: 0deg-360deg)
skewX: 0, // animate X skew (val: 0deg-360deg)
});`
Help would be much appreciated here :))
This cool plugin/demo/velocity.js implementation widgety thingy is cool and all but it talks about a css file that simply is not where it claims.
The link is dead.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.