Solved

Need to get tabs to work in a mootools slider that i developed.

Posted on 2008-10-13
2
826 Views
Last Modified: 2013-11-11
I've constructed a slider which activates when a href is clicked by the user.  It slides in from the bottom of the page with slight animation.
I need to get a tab system working within this slider.  So far i've had no luck.

Interestingly the tabs will work outside of the slider but as soon as I place the tabs inside the slider div, they won't work.

Please take a look at the url i provided for a (kind of) working sample - you'll see what i want to achieve:
http://www.iselectmedia.com/development/mooSlide/

Ill attach code snippets.
/*********************  HTML FILE *******************/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="mint" language="javascript" type="text/javascript"></script>

<script src="mootools.js" language="javascript" type="text/ecmascript"></script>

<script src="mootabs1.2.js" type="text/javascript" charset="utf-8"></script>
 

<link rel="stylesheet" href="mootabs1.2.css" type="text/css" media="screen" title="no title" charset="utf-8" />

<link rel="stylesheet" href="style.css" type="text/css" />
 

</head>

<body>

<div id="content">

	<a title="" href="images/blank.gif" rev="mycontent" rel="designSlide">click</a>

	<div id="mycontent">

        <div id="myTabs">

            <ul class="mootabs_title">

                <li title="My Work">Tab 1</li>

                <li title="About Me">Tab 2</li>

            </ul>				

            <div id="My Work" class="mootabs_panel">

                <h1>Tab 1</h1>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit.					

            </div>                        

            <div id="About Me" class="mootabs_panel">

                <h1>Tab 2</h1>

                Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.					

            </div>        

        </div>

        <script type="text/javascript" charset="utf-8">

			window.addEvent('domready', init);

			function init() {

			myTabs1 = new mootabs('myTabs');

			}

		</script>

	</div>

<script src="mooSlideX.js" language="javascript" type="text/ecmascript"></script>

</body>

</html>

/*********************  END HTML FILE *******************/
 
 

/*********************  MOOTABS1.2.JS FILE *******************/

var mootabs = new Class({

	

	initialize: function(element, options) {

		this.options = Object.extend({

			width:				'95%',

			height:				'100px',

			changeTransition:	Fx.Transitions.Bounce.easeOut,

			duration:			1000,

			mouseOverClass:		'active',

			activateOnLoad:		'first',

			useAjax: 			false,

			ajaxUrl: 			'',

			ajaxOptions: 		{method:'get'},

			ajaxLoadingText: 	'Loading...'

		}, options || {});

		

		this.el = $(element);

		this.elid = element;

		

		this.el.setStyles({

			height: this.options.height,

			width: this.options.width

		});

		

		this.titles = $$('#' + this.elid + ' ul.mootabs_title li');

		this.panelHeight = this.el.getSize().size.y - (this.titles[0].getSize().size.y + 4);

		this.panels = $$('#' + this.elid + ' .mootabs_panel');
 

		

		this.panels.setStyle('height', this.panelHeight);

		

		this.titles.each(function(item) {

			item.addEvent('click', function(){

					item.removeClass(this.options.mouseOverClass);

					this.activate(item);

				}.bind(this)

			);

			

			item.addEvent('mouseover', function() {

				if(item != this.activeTitle)

				{

					item.addClass(this.options.mouseOverClass);

				}

			}.bind(this));

			

			item.addEvent('mouseout', function() {

				if(item != this.activeTitle)

				{

					item.removeClass(this.options.mouseOverClass);

				}

			}.bind(this));

		}.bind(this));

		

		

		if(this.options.activateOnLoad != 'none')

		{

			if(this.options.activateOnLoad == 'first')

			{

				this.activate(this.titles[0], true);

			}

			else

			{

				this.activate(this.options.activateOnLoad, true);	

			}

		}

	},

	

	activate: function(tab, skipAnim){

		if(! $defined(skipAnim))

		{

			skipAnim = false;

		}

		if($type(tab) == 'string') 

		{

			myTab = $$('#' + this.elid + ' ul li').filterByAttribute('title', '=', tab)[0];

			tab = myTab;

		}

		

		if($type(tab) == 'element')

		{

			var newTab = tab.getProperty('title');

			this.panels.removeClass('active');

			

			this.activePanel = this.panels.filterById(newTab)[0];

			

			this.activePanel.addClass('active');

			

			if(this.options.changeTransition != 'none' && skipAnim==false)

			{

				this.panels.filterById(newTab).setStyle('height', 0);

				var changeEffect = new Fx.Elements(this.panels.filterById(newTab), {duration: this.options.duration, transition: this.options.changeTransition});

				changeEffect.start({

					'0': {

						'height': [0, this.panelHeight]

					}

				});

			}

			

			this.titles.removeClass('active');

			

			tab.addClass('active');

			

			this.activeTitle = tab;

			

			if(this.options.useAjax)

			{

				this._getContent();

			}

		}

	},

	

	_getContent: function(){

		this.activePanel.setHTML(this.options.ajaxLoadingText);

		var newOptions = {update: this.activePanel.getProperty('id')};

		this.options.ajaxOptions = Object.extend(this.options.ajaxOptions, newOptions || {});

		var tabRequest = new Ajax(this.options.ajaxUrl + '?tab=' + this.activeTitle.getProperty('title'), this.options.ajaxOptions);

		tabRequest.request();

	},

	

	addTab: function(title, label, content){

		//the new title

		var newTitle = new Element('li', {

			'title': title

		});

		newTitle.appendText(label);

		this.titles.include(newTitle);

		$$('#' + this.elid + ' ul').adopt(newTitle);

		newTitle.addEvent('click', function() {

			this.activate(newTitle);

		}.bind(this));

		

		newTitle.addEvent('mouseover', function() {

			if(newTitle != this.activeTitle)

			{

				newTitle.addClass(this.options.mouseOverClass);

			}

		}.bind(this));

		newTitle.addEvent('mouseout', function() {

			if(newTitle != this.activeTitle)

			{

				newTitle.removeClass(this.options.mouseOverClass);

			}

		}.bind(this));

		//the new panel

		var newPanel = new Element('div', {

			'style': {'height': this.options.panelHeight},

			'id': title,

			'class': 'mootabs_panel'

		});

		if(!this.options.useAjax)

		{

			newPanel.setHTML(content);

		}

		this.panels.include(newPanel);

		this.el.adopt(newPanel);

	},

	

	removeTab: function(title){

		if(this.activeTitle.title == title)

		{

			this.activate(this.titles[0]);

		}

		$$('#' + this.elid + ' ul li').filterByAttribute('title', '=', title)[0].remove();

		

		$$('#' + this.elid + ' .mootabs_panel').filterById(title)[0].remove();

	},

	

	next: function(){

		var nextTab = this.activeTitle.getNext();

		if(!nextTab) {

			nextTab = this.titles[0];

		}

		this.activate(nextTab);

	},

	

	previous: function(){

		var previousTab = this.activeTitle.getPrevious();

		if(!previousTab) {

			previousTab = this.titles[this.titles.length - 1];

		}

		this.activate(previousTab);

	}

});

/*********************  END MOOTABS1.2.JS FILE *******************/
 
 

/*********************  MOOTABS1.2 CSS FILE *******************/

.mootabs_title {

	list-style-image: none;

	list-style-type: none;

	margin: 0px;

	padding: 0px;

	height: 24px;

}
 

.mootabs_title li {

	float: left;

	background-color: #000;

	padding: 2px 8px 2px 8px;

	margin-right: 2px;

	cursor: pointer;

	height: 18px;

	color:#fff;

	

}
 

.mootabs_title li.active {

	background-color: #aaa;

}
 

.mootabs_panel {

	display: none;

	background-color: #000;

	position: relative;

	width: 100%;

	top: 10px;

	clear: both;

	overflow: auto;

	

	

}
 

.mootabs_panel.active {

	background-color: #000;

	display: block;

}

/*********************  END MOOTABS1.2 CSS FILE *******************/
 
 

/*********************  MOOSLIDEX.JS FILE *******************/

window.addEvent('domready',function(){
 

	$$('a').each(function(x){

		y = x.getAttribute('rev');

	

		if(navigator.appVersion.indexOf('MSIE') != -1){

			if(y != ""){

				$(y).setStyle('visibility','hidden');

			}

		}else{

			if(y != null){

				$(y).setStyle('visibility','hidden');

			}

		}

	})

})
 

var xxx = new Array();
 

$$('a').each(function(el){

	if(el.getAttribute('rel') == "designSlide"){

		

		// preload images

		a = new Image();

		lnk = el.getAttribute('href');

		a.src = lnk;

		xxx.push(a);

	

		el.addEvent('click',function(x){		

		// old container still existing? remove it

		if($('container2') != false){

			$('container2').remove();

		}

		

		//go

		bd = document.body;

		windowHeight = 0;

		windowWidth = 0;

		title = el.getAttribute('title');

		titleSplitPos = title.indexOf("::");

		titleHead = title.substring(0,titleSplitPos);

		lengthContent = title.length + titleSplitPos

		titleContent = title.substring(titleSplitPos+2,lengthContent);

		addContent = el.getAttribute('rev');

		
 

	

		if($(addContent) != false){

			addContentCont = $(addContent).innerHTML;

			$(addContent).setStyle('visibility','hidden');	

		}

	

		nav = navigator.appName;

		windowHeight = window.getScrollTop() + window.getHeight();

		var x = new Event(x).stop();

		var hrefSrc = el.getAttribute('href');

		var preloadPrev = new Image();

		preloadPrev.src = hrefSrc;

		var imgWidth = preloadPrev.width;

		var imgHeight = preloadPrev.height;	

		var space = imgHeight;

		var top = windowHeight - 152;

		

		// create a new div with the width of the screen

		var container = new Element('div', {

					'styles': 

					{

						'display': 'block',

						'visibility':'hidden',

						'width': '99%',

						'height': 'auto',

						'background':'#000',

						'border': '1px solid #AAA',

						'padding-bottom':'20px',

						'left':'5px',

						'margin':'0px',

						'position': 'absolute',

						'top': top + 'px',

						'cursor':'default',

						'color':'#fff'

					}

			  })

			  

		container.setAttribute('id','container2');

			  

			  image = new Element('img', {

			  	'styles':

				{

					'border': 'none',

					'display':'block',

					'visibility': 'hidden',

					'float':'left',

					//'background': '#000 url(images/loading.gif) center center no-repeat',

					'margin-top':'20px',

					'margin-left':'20px',

					'height':'auto',

					'width': 'auto',

					'src': hrefSrc,

					'z-index':'1000'

				}			

			})

			

			  div = new Element('div', {

			    'styles':

				{

						'float':'left',

						'width':'95%',

						'height':'auto',

						'display':'block',

						'margin-top':'10px',

						'margin-left':'-15px'

		

				}

			})

			

			off = new Element('img', {

			  'styles':

			  	{

			  			'position':'absolute',

						'top':'10px',

						'right':'10px',

						'padding':'0px',

						'width':'33px',

						'height':'11px',

						'cursor':'pointer'//added this for functionality

						

						

				}

			

			})		

			  off.src="images/close.jpg";

			 off.addEvent('click',function(){

			 	  	 container.effect('opacity',{duration: 700, transition: Fx.Transitions.linear, wait:true}).start(0.9,0).chain(function(){

					 // var h = container.getStyle('height');																															  					//  image.remove();

					//  container.effect('height',{duration: 700, transition: Fx.Transitions.linear, wait:true}).start(h,0).chain(function(){

					  container.remove();

					  $('overlayed').effect('opacity',{duration: 300, transition: Fx.Transitions.linear, wait:true}).start(0.5,0);

					  $('overlayed').remove();

					 })

			 })

			  

			 div.setAttribute('id','info');			

			

			 if($(addContent) != false){

			 div.innerHTML = "<h1>" + titleHead + "</h1><p>" + titleContent + "</p>" + "<p>" + addContentCont + "</p>";

			 }else{

			 div.innerHTML = "<h1>" + titleHead + "</h1><p>" + titleContent + "</p>";

			 }

			 

			 // add overlay

			 /*winH = window.getScrollHeight();

			 winW = window.getScrollWidth();

			 overlayed = new Element('div', {

	          'styles':

			  {

				  	'width':winW,

					'height':winH,

					'position':'absolute',

					'background-color':'#000',

					'visibility':'hidden',

					'top':'0px'

					

			  }

			  })

			  overlayed.setAttribute('id','overlayed');			

			  overlayed.injectInside(document.body);*/

			  

			  image.src = preloadPrev.src;

			  

			  //overlayed.effect('opacity',{ duration: 200, transition:Fx.Transitions.linear, wait:true }).start(0,0.7);

			  container.injectInside(bd);

			  image.injectInside(container);

			  image.effect('opacity',{duration: 1200, transition: Fx.Transitions.linear, wait:true}).start(0,1);

		  	  container.effect('opacity',{duration: 0, transition: Fx.Transitions.linear, wait:true}).start(0,0.9);

			  container.effect('top',{duration: 500, transition: Fx.Transitions.Back.easeOut, wait:false}).start(windowHeight,top);

			  div.injectAfter(image);

			  div.effect('opacity',{duration: 0, transition: Fx.Transitions.linear, wait:true}).start(0,1);

			  off.injectInside(div);

			  //container.makeDraggable();

			 return false;

		})

	}

})

/*********************  END MOOSLIDEX.JS FILE *******************/

Open in new window

0
Comment
Question by:l_mcnamara
2 Comments
 
LVL 7

Assisted Solution

by:mltsy
mltsy earned 20 total points
ID: 22711350
Looks like you got it working in the bottomSlide directory.  Did you figure out what the problem was?
0
 
LVL 1

Accepted Solution

by:
l_mcnamara earned 0 total points
ID: 22716828
Yes i did.
Thanks.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now