skip to main
|
skip to sidebar
Profile
Last Posts
Last Comments
info
My Facebook
Me On Twitter
Edit ▼
Fan page Tutorial
Adeel Mughal
Create Your Badge
Facebook Page
Followers
Followers
Browse more categories
backgrounds
Button Menu
Colour picker
FAQ
FBML
help center
IFRAME and HTML
Java Scripts
Latest Codes
Privacy
Slideshow
tabs
Tutorial
Tutorials
Video Tutorials
Facebook Fan Page Tutorials With All Latest Codes
Specially Designed about Facebook Fan Page, Every Tutorial about Facebook Page Iframe ,Fbml and Html you can Found there
Wall
Color Picker
Install FBML
Tutorial
FAQ
More tabs
Edit
Edit
Edit
Edit
Top Animated Menu tabs For Facebook page
<!-- FanPageTutorials.blogspot.com/ --><style> h3 { margin-bottom: 10px; margin-top: 20px; } .accordion { } .accordion .header { border: 1px solid #444; background-color: #333; color: #fff; font-weight: bold; padding: 5px 10px; font-size: 12px; cursor: pointer; } .accordion .expanded { border: 1px solid #777; background-color: #555; } .accordion .section { border: 1px solid #777; background-color: #fdffbd; overflow: hidden; } .accordion .section p { padding: 10px; font-family: Arial; font-size: 12px; text-align: justify; margin: 0; } .slider { width: 480px; } .slider a.sliderNext, .slider a.sliderPrev { border: none; text-decoration: none; float: left; display: block; height: 25px; width: 14px; } .slider a.sliderNext { margin-top: 24px; margin-left: 5px; background: url(http://weavora.com/blog/fx-images/next.png) no-repeat 0 0; } .slider a.sliderPrev { margin-top: 25px; margin-right: 5px; background: url(http://weavora.com/blog/fx-images/prev.png) no-repeat 0 0; } .slider a.sliderNext.inactive { background: url(http://weavora.com/blog/fx-images/next_inactive.png) no-repeat 0 0; } .slider a.sliderPrev.inactive { background: url(http://weavora.com/blog/fx-images/prev_inactive.png) no-repeat 0 0; } .slider .clear { float: none; clear: both; } .slider .sliderImage { border: 2px solid #ccc; float: left; margin: 0 3px 0 3px; line-height: 0; } .slider .sliderImage:hover, .slider .sliderImageCurrent { border-color: #519dd0; } .slider .sliderImage img{ border: none; } .sliderWindow { overflow: hidden; width: 440px; float: left; } .slider .sliderImagesContainer { width: 10000px; } .bigImage { width: 480px; text-align: center; } </style><br /> <div id="app" onclick="appObserver.init();" onkeypress="appObserver.init();" onmousedown="appObserver.init();"><br /> <!--<p><a href="#" onclick="return appObserver.init();">Init accordion</a></p>--><br /> <div class="accordion" id="accordion"><div class="header expanded">Home</div><div class="section"><p>Fbmlmaker.blogspot.com</p></div><br /> <div class="header">Codes</div><div class="section" style="display: none"><p>Fbmlmaker.blogspot.com</p><br /> </div><br /> <div class="header">Tutorials</div><div class="section" style="display: none"><p>Fbmlmaker.blogspot.com</p><br /> </div></div><br /> <script> var appObserver = { isInited: false, init: function() { if (!appObserver.isInited) { (new fx(document.getElementById('accordion'))).accordion(); (new fx(document.getElementById('slider'))).slider( { onclick: function(next, prev) { (new fx(document.getElementById('bigImage_' + prev))).fadeIn( function() { // document.getElementById('bigImage_' + next).setStyle('display','block'); (new fx(document.getElementById('bigImage_' + next))).fadeOut(); } ) } } ); appObserver.isInited = true; } } }; </script><br /> <script> var utils = { hasClass: function(element, className) { return element.getClassName().match(new RegExp('(\\s|^)'+className+'(\\s|$)')); }, addClass: function(element, className) { if (!utils.hasClass(element,className)) element.setClassName(element.getClassName() + " " + className); }, removeClass: function(element, className) { if (utils.hasClass(element,className)) { var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); element.setClassName(element.getClassName().replace(reg,' ')); } }, findByClass: function(className, rootElement) { var root = rootElement || document.getRootElement(); var elements = []; var child = root.getChildNodes(); for(var i = 0; i < child.length; i++) { if (utils.hasClass(child[i], className)) { elements.push(child[i]); } else { elements = elements.concat(utils.findByClass(className, child[i])); } } return elements; } }; function fx(element) { // make this instance visible in private functions var self = this; this.element = element; // set default slide direction this.direction = fx.VERTICAL; /** * Slide down * * @param duration integer slide down duration * @param callback function callback for slide down ending * @return fx */ this.slideDown = function(duration, callback) { slide('down', duration, callback); return this; }; /** * Slide up * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.slideUp = function(duration, callback) { slide('up', duration, callback); return this; }; /** * Slide toggle * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.slideToggle = function(duration, callback) { if (this.element.getStyle('display') == 'none' || this.element.getClientHeight() == 0 || this.element.getClientWidth() == 0) return this.slideDown(duration, callback); else return this.slideUp(duration, callback); }; /** * Fade in * * @param duration integer slide down duration * @param callback function callback for slide down ending * @return fx */ this.fadeIn = function(duration, callback) { fade('in', duration, callback); return this; }; /** * Fade out * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.fadeOut = function(duration, callback) { fade('out', duration, callback); return this; }; /** * Fade toggle * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.fadeToggle = function(duration, callback) { if (this.element.getStyle('display') == 'none' || this.element.getClientHeight() == 0 || this.element.getClientWidth() == 0) return this.fadeOut(duration, callback); else return this.fadeIn(duration, callback); }; /** * Set slide direction * * @param direction fx.HORIZONTAL, fx.VERTICAL or fx.DIAGONAL * @return fx */ this.direction = function(direction) { if (direction == fx.HORIZONTAL || direction == fx.VERTICAL || direction == fx.DIAGONAL) this.direction = direction; return this; }; this.accordion = function(params) { // extend default options var options = { header: 'header', section: 'section', expanded: 'expanded' }; if (params) for(var key in params) options[key] = params[key]; // find all headers and section var headers = utils.findByClass(options.header, this.element); var sections = utils.findByClass(options.section, this.element); // now we should walk through header and bind click action to them var index = 0; for(var i = 0; i < headers.length; i++) { headers[i].addEventListener('click', function(event){ var targetSection = event.target.getTabIndex(); // hide open section for(var index = 0; index < sections.length; index++) { if (index != targetSection) { (new fx(sections[index])).slideUp(); utils.removeClass(headers[index], options.expanded); } } // open target section (new fx(sections[targetSection])).slideToggle(function(a, b){ if (!utils.hasClass(headers[targetSection], options.expanded)) utils.addClass(headers[targetSection], options.expanded); else utils.removeClass(headers[targetSection], options.expanded); }); }); headers[i].setTabIndex(i); sections[i].setTabIndex(i); } }; this.slider = function(params) { // extend default options var options = { prev: 'sliderPrev', next: 'sliderNext', image: 'sliderImage', imageContainer: 'sliderImagesContainer', imageCurrent: 'sliderImageCurrent', inactive: 'inactive', imageLeftMargin: 6, onclick: null }; if (params) for(var key in params) options[key] = params[key]; var imageContainer = utils.findByClass(options.imageContainer, this.element)[0]; // find all images var images = utils.findByClass(options.image, imageContainer); // set up default position var currentPosition = 0; // calculate positions' offsets var positionOffsets = []; for(var position = 0; position < images.length; position++) { if (position == 0) { positionOffsets[position] = 0; } else { positionOffsets[position] = positionOffsets[position - 1]; positionOffsets[position] -= images[position].getOffsetWidth(); positionOffsets[position] -= options.imageLeftMargin; } } // find next and prev buttons var next = utils.findByClass(options.next, this.element); var prev = utils.findByClass(options.prev, this.element); // bind next navigation if (next.length) { next[0].addEventListener('click', function(event){ if (currentPosition < images.length - 4) { currentPosition++; (new fx(imageContainer)).move(positionOffsets[currentPosition]); } if (currentPosition == 0) { utils.addClass(prev[0], options.inactive); } else { utils.removeClass(prev[0], options.inactive); } if (currentPosition >= images.length - 4) { utils.addClass(next[0], options.inactive); } else { utils.removeClass(next[0], options.inactive); } }); } // bind previous navigation if (prev.length) { prev[0].addEventListener('click', function(event){ if (currentPosition > 0) { currentPosition--; (new fx(imageContainer)).move(positionOffsets[currentPosition]); } if (currentPosition == 0) { utils.addClass(prev[0], options.inactive); } else { utils.removeClass(prev[0], options.inactive); } if (currentPosition >= images.length - 4) { utils.addClass(next[0], options.inactive); } else { utils.removeClass(next[0], options.inactive); } }); } // bind item onclick callback for(var i = 0; i < images.length; i++) { images[i].setTabIndex(i).addEventListener('click', function(event){ var currentImage = utils.findByClass(options.imageCurrent, self.element)[0]; utils.removeClass(currentImage, options.imageCurrent); var target = (utils.removeClass(event.target, options.image)) ? event.target : event.target.getParentNode(); utils.addClass(target, options.imageCurrent); if (options.onclick) options.onclick.apply(target, [target.getTabIndex(), currentImage.getTabIndex()]); }); } }; this.move = function(step, duration, callback) { if (!duration) { duration = fx.NORMAL; // set default duration } else if (typeof duration == "function") { callback = duration; duration = fx.NORMAL; // set default duration } else if (duration != parseInt(duration) || Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <= 0) { duration = fx.NORMAL; // set default duration } else { duration = Math.abs(parseInt(duration)); } var animationObject = Animation(self.element); animationObject.duration(duration); animationObject.to('marginLeft', step); // set slide ending callback if (typeof callback == "function") animationObject .checkpoint(1, callback); animationObject.ease().blind().go(); }; /** * Slide animation * * @private * * @param type could by up or down * @param duration integer slide up duration * @param callback function callback for slide up ending * */ function slide(type, duration, callback) { // check duration and callback if (!duration) { duration = fx.NORMAL; // set default duration } else if (typeof duration == "function") { callback = duration; duration = fx.NORMAL; // set default duration } else if (duration != parseInt(duration) || Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <= 0) { duration = fx.NORMAL; // set default duration } else { duration = Math.abs(parseInt(duration)); } var animationObject = Animation(self.element); // first of all we need to show or hide element if (type == 'down') animationObject.show(); else animationObject.hide(); // set slide direction if (self.direction == fx.DIAGONAL) animationObject .to('width', (type == 'down') ? 'auto': 0) .to('height', (type == 'down') ? 'auto': 0); else if (self.direction == fx.HORIZONTAL) animationObject .to('width', (type == 'down') ? 'auto': 0); else animationObject .to('height', (type == 'down') ? 'auto': 0); if (type == 'down') { if (self.direction == fx.DIAGONAL) animationObject .from('width', 0) .from('height', 0); else if (self.direction == fx.HORIZONTAL) animationObject .from('width', 0); else animationObject .from('height', 0); } animationObject.duration(duration); // set slide ending callback if (typeof callback == "function") animationObject .checkpoint(1, callback); animationObject.blind().go(); } /** * Fade animation * * @private * * @param type could by in or out * @param duration integer slide up duration * @param callback function callback for slide up ending * */ function fade(type, duration, callback) { // check duration and callback if (!duration) { duration = fx.NORMAL; // set default duration } else if (typeof duration == "function") { callback = duration; duration = fx.NORMAL; // set default duration } else if (duration != parseInt(duration) || Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <= 0) { duration = fx.NORMAL; // set default duration } else { duration = Math.abs(parseInt(duration)); } var animationObject = Animation(self.element); // first of all we need to show or hide element // and set initial opacity if (type == 'out') { animationObject.show().from('opacity', 0); } else { animationObject.hide().from('opacity', 1); } // set fade animation animationObject .to('opacity', (type == 'out') ? 1 : 0); animationObject.duration(duration); // set slide ending callback if (typeof callback == "function") animationObject .checkpoint(1, callback); animationObject.blind().go(); } this._debug = function(msg) { (new Dialog()).showMessage('Debug', msg, 'Close'); } }; // duration constants fx.SLOW = 800; fx.NORMAL = 500; // default fx.FAST = 200; // direction constants fx.HORIZONTAL = 'horizontal'; fx.VERTICAL = 'vertical'; // default fx.DIAGONAL = 'diagonal'; </script><!-- FanPageTutorials.blogspot.com/ -->
Posts
backgrounds
Button Menu
Colour picker
FAQ
FBML
help center
IFRAME and HTML
Java Scripts
Latest Codes
Privacy
Slideshow
tabs
Tutorial
Tutorials
Video Tutorials
Online visitors