I have some javascript that is switching between 3 divs onclick of 1 of 3 tabs.
Here is my Javascript:
(function($){
$.fn.acidTabs = function(options) {
var settings = {
'style' : 'one'
};
options = $.extend( settings, options );
return this.each (function () {
var o = options;
container = this;
container.setAttribute("class",o.style);
var navitem = container.querySelector("li");
//store which tab we are on
var ident = navitem.id.split("_")[1];
navitem.parentNode.setAttribute("data-current",ident);
//set current tab with class of activetabheader
navitem.setAttribute("class","tabActiveHeader");
//hide two tab contents we don't need
var pages = container.querySelectorAll(".tabpage");
for (var i = 1; i < pages.length; i++) {
pages[i].style.display="none";
}
//this adds click event to tabs
var tabs = container.querySelectorAll("li");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick=displayPage;
}
});
// on click of one of tabs
function displayPage() {
var current = this.parentNode.getAttribute("data-current");
//remove class of activetabheader and hide old contents
document.getElementById("tabHeader_" + current).removeAttribute("class");
document.getElementById("tabpage_" + current).style.display="none";
var ident = this.id.split("_")[1];
//add class of activetabheader to new active tab and show contents
this.setAttribute("class","tabActiveHeader");
document.getElementById("tabpage_" + ident).style.display="block";
this.parentNode.setAttribute("data-current",ident);
}
};
})(jQuery);
I cant seem to modifiy this to accept fading effects. Or maybe there is a better way to do this?
I just need something I can use with .style.display="block" to create a fade in effect. Dont need a fade out. –
var current = this.parentNode.getAttribute("data-current");
//remove class of activetabheader and hide old contents
$('#tabHeader_' + current).removeClass('tabActiveHeader');
$('#tabpage_' + current).hide();
var ident = this.id.split("_")[1];
//add class of activetabheader to new active tab and show contents
$(this).addClass("tabActiveHeader");
$('#tabpage_' + ident).fadeIn();
this.parentNode.setAttribute("data-current",ident);
As a side note, I wouldn't use an attribute to track your current tab, you already have that with the tab that currently has the tabActiveHeader class on it. You are just duplicating a state flag that isn't necessary.
Marked as answer by foxjacobi on Apr 24, 2012 03:07 AM
$('li',container).hide().eq(1).show(); Although I would hide the tabs in CSS, and use the active tab class to override it to have it show so that all the tabs aren't first visible when the page first loads. Like: #containerid li { display:none;} #containerid
li.activetab { display:block;} Replacing containerid with the Id of your container, or better, put a class on your container(s), and replace #container with .containerclass. Also replace activetab with the class you are assigning to your active tab.
foxjacobi
Member
7 Points
10 Posts
Fade effect on .style.display=“block” action in Javascript
Apr 06, 2012 07:51 AM|LINK
I have some javascript that is switching between 3 divs onclick of 1 of 3 tabs.
Here is my Javascript:
(function($){ $.fn.acidTabs = function(options) { var settings = { 'style' : 'one' }; options = $.extend( settings, options ); return this.each (function () { var o = options; container = this; container.setAttribute("class",o.style); var navitem = container.querySelector("li"); //store which tab we are on var ident = navitem.id.split("_")[1]; navitem.parentNode.setAttribute("data-current",ident); //set current tab with class of activetabheader navitem.setAttribute("class","tabActiveHeader"); //hide two tab contents we don't need var pages = container.querySelectorAll(".tabpage"); for (var i = 1; i < pages.length; i++) { pages[i].style.display="none"; } //this adds click event to tabs var tabs = container.querySelectorAll("li"); for (var i = 0; i < tabs.length; i++) { tabs[i].onclick=displayPage; } }); // on click of one of tabs function displayPage() { var current = this.parentNode.getAttribute("data-current"); //remove class of activetabheader and hide old contents document.getElementById("tabHeader_" + current).removeAttribute("class"); document.getElementById("tabpage_" + current).style.display="none"; var ident = this.id.split("_")[1]; //add class of activetabheader to new active tab and show contents this.setAttribute("class","tabActiveHeader"); document.getElementById("tabpage_" + ident).style.display="block"; this.parentNode.setAttribute("data-current",ident); } }; })(jQuery);I cant seem to modifiy this to accept fading effects. Or maybe there is a better way to do this?
I just need something I can use with .style.display="block" to create a fade in effect. Dont need a fade out. –
Would love your help! Thank you.
Animation transition javascrip JQuery
bruce (sqlwo...
All-Star
37616 Points
5574 Posts
Re: Fade effect on .style.display=“block” action in Javascript
Apr 06, 2012 01:16 PM|LINK
see jquery's animate function for doing transitions.
foxjacobi
Member
7 Points
10 Posts
Re: Fade effect on .style.display=“block” action in Javascript
Apr 06, 2012 01:24 PM|LINK
wangping8271...
Member
738 Points
145 Posts
Re: Fade effect on .style.display=“block” action in Javascript
Apr 09, 2012 02:41 AM|LINK
hello,
JQuery tutorial below will show you how to make Fade Effect tabs
http://www.roseindia.net/ajax/jquery/fadeEffectTabs.shtml
This tabs(fxSlide: true) function having two attributes "fxFade" and "fxSpeed" if "fxFade" set "true" then it show fading of tab content and
"fxSpeed" is fading effect is set to "slow".
foxjacobi
Member
7 Points
10 Posts
Re: Fade effect on .style.display=“block” action in Javascript
Apr 09, 2012 06:35 AM|LINK
Thank you but that is too diffucult to re-apply to my design.
There has to be a very simple way to apply a fade to my code above??
foxjacobi
Member
7 Points
10 Posts
Re: Fade effect on .style.display=“block” action in Javascript
Apr 17, 2012 05:31 AM|LINK
No one has any hints or helpful comments?
Motley
Star
13789 Points
2449 Posts
MVP
Re: Fade effect on .style.display=“block” action in Javascript
Apr 23, 2012 07:38 PM|LINK
$("#tabpage_" + ident).fadeIn();Motley
Star
13789 Points
2449 Posts
MVP
Re: Fade effect on .style.display=“block” action in Javascript
Apr 23, 2012 07:49 PM|LINK
var current = this.parentNode.getAttribute("data-current"); //remove class of activetabheader and hide old contents $('#tabHeader_' + current).removeClass('tabActiveHeader'); $('#tabpage_' + current).hide(); var ident = this.id.split("_")[1]; //add class of activetabheader to new active tab and show contents $(this).addClass("tabActiveHeader"); $('#tabpage_' + ident).fadeIn(); this.parentNode.setAttribute("data-current",ident);As a side note, I wouldn't use an attribute to track your current tab, you already have that with the tab that currently has the tabActiveHeader class on it. You are just duplicating a state flag that isn't necessary.
foxjacobi
Member
7 Points
10 Posts
Re: Fade effect on .style.display=“block” action in Javascript
Apr 24, 2012 03:07 AM|LINK
OH you are the man! Thank you very much!!
The next question would be how to get the second tab to be the default tab instead of the first.
Motley
Star
13789 Points
2449 Posts
MVP
Re: Fade effect on .style.display=“block” action in Javascript
Apr 24, 2012 01:14 PM|LINK