Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Feb 2007
    Posts
    3
    Member #
    14811
    I am having some problems with some JS code that does not work cross browsers

    Here is my code

    Code:
    <html>
    <head>
    	<link rel="STYLESHEET" type="text/css" href="../../include/css/tab.css">
    	<script src="../../include/js/tabpane.js" type="text/javascript"></script>
    </head>
    <body>
    <div name="objBody">
    	<div id="tabpane">
    		<div>
    			<h2>Contact</h2>
    			<div>
    				<br>THIS IS CONTACTS TEXT
    			</div>
    		</div>
    		<div>
    			<h2>Contact2</h2>
    			<div>
    				<br>THIS IS CONTACTS TEXT2222
    			</div>
    		</div>
    	</div>
    </div>
    	<script type="text/javascript">
    		var tp = new TabPane(document.getElementById("tabpane"));
    	</script>
    
    </body>
    </html>


    CSS
    Code:
    .tab_pane_holder {
    	width: 100%;
    	background-color: #336699;
    	font-family: verdana;
    	font-size: 8pt;
    	border-right: 1px solid black;
    	border-left: 1px solid black;
    	border-top: 1px solid black;
    }
    .tab_normal {
    	border-right: 1px solid black;
    	border-left: 1px solid white;
    	border-bottom: 1px solid black;
    	border-top: 1px solid white;
    	padding: 5px;
    	background-color: #5a7edc;
    	text-align: center;
    	/*width: 100px;*/
    	height: 10px;
    	color: white;
    }
    .tab_active {
    	border-right: 1px solid black;
    	border-left: 1px solid black;
    	border-top: 1px solid black;
    	background-color: white;
    	padding: 5px;
    	text-align: center;
    	/*width: 100px;*/
    	height: 10px;
    	color: black;
    }
    .tab_after_active {
    	border-right: 1px solid black;
    	border-left: 0px solid black;
    	border-top: 1px solid white;
    	border-bottom: 1px solid black;
    	background-color: #5a7edc;
    	padding: 5px;
    	text-align: center;
    	/*width: 100px;*/
    	height: 10px;
    	color: white;
    }
    .tab_before_active {
    	border-left: 1px solid white;
    	border-bottom: 1px solid black;
    	background-color: #5a7edc;
    	border-top: 1px solid white;
    	text-align: center;
    	padding: 5px;
    	/*width: 100px;*/
    	height: 10px;
    	color: white;
    }
    JS
    Code:
    function TabPane(el)
    {
    
    	var tmp = this;
    	this.element = el;
    	this.tabs = new Array();
    	this.divs = new Array();
    	this.selected = null;
    	for(var i = 0; i < el.childNodes.length; i++)
    	{
    		this.tabs[i] = this.element.childNodes[i].childNodes[0].innerHTML;
    	}
    	for(var i = 0; i < this.element.childNodes.length; i++)
    	{
    		this.divs[i] = this.element.childNodes[i];
    	}
    	for(var i = 0; i < this.element.childNodes.length; i++)
    	{
    		this.element.childNodes[i].removeChild(this.element.childNodes[i].childNodes[0]);
    	}
    	this.tabPane = document.createElement("div");
    	this.element.insertBefore(this.tabPane,this.element.childNodes[0]);
    	this.tabPane.className = "tab_pane_holder";
    	for(var i = 0; i < this.tabs.length; i++)
    	{
    		var x = this.tabs[i];
    		this.tabs[i] = document.createElement("span");
    		this.tabPane.appendChild(this.tabs[i]);
    		this.tabs[i].innerHTML = x;
    		this.tabs[i].className = "tab_normal";
    		this.tabs[i].style.cursor = "hand";
    		this.tabs[i].onselectstart = function()
    		{
    			return false;
    		}
    		this.tabs[i].onclick = function()
    		{
    			tmp.showPage(this);
    		}
    	}
    	for(var i = 0; i < this.divs.length; i++)
    	{
    		this.divs[i].style.display = "none";
    		this.divs[i].style.width = this.element.style.width;
    		this.divs[i].style.height = this.element.style.height;
    		this.divs[i].style.overflow = "auto";
    		this.divs[i].style.borderRight = "1px solid black";
    		this.divs[i].style.borderBottom = "1px solid black";
    		this.divs[i].style.borderLeft = "1px solid black";
    	}
    	this.showPage = function(el)
    	{
    		var x,y;
    		for(var i = 0; i < this.tabs.length; i++)
    		{
    			if(el == this.tabs[i])
    			{
    				x = i;
    			}
    		}
    		y = ((x-1) < 0)?0:(x-1);
    		for(var i = 0; i < this.tabs.length; i++)
    		{
    			this.tabs[i].className = "tab_normal";
    		}
    		this.tabs[y].className = (y == x)?"tab_active":"tab_before_active";
    		if(this.tabs[y+1])
    		{
    			this.tabs[y+1].className = (y == x)?"tab_after_active":"tab_active";
    		}
    		if(this.tabs[y+2])
    		{
    			this.tabs[y+2].className = (y == x)?this.tabs[y+2].className:"tab_after_active";
    		}
    		if(x == 0)
    		{
    			this.tabs[x].style.borderLeft = "0px solid black";
    		}
    		for(var i = 0; i < this.divs.length; i++)
    		{
    			var show = (i == x)?"block":"none";
    			this.divs[i].style.display = show;
    		}
    	}
    	this.showPage(this.tabs[0])
    }
    Attached Images Attached Images

  2.  

  3. #2
    Member JayWood's Avatar
    Join Date
    Oct 2010
    Location
    East Coast U.S.
    Posts
    55
    Member #
    24240
    If possible, I'd advise using the jQuery UI tabs, and style accordingly. Why reinvent the wheel? Plus I believe they're already cross browser compatible.

    jQuery UI Tabs
    Don't forget to Rep people if they've helped you, it's just the right thing to do.
    My Site - JJ's Webs
    My oDesk Profile - Hire me on oDesk
    My Themeforest Profile - Just for you TF people!

  4. #3
    Senior Member paintingtheweb's Avatar
    Join Date
    Jul 2007
    Location
    Las Vegas
    Posts
    128
    Member #
    15503
    while jquery ui tabs work, if all you're wanting to do is get tabs, it wouldn't be my first suggestion. jQuery UI is pretty heavy for doing something as simple as tabs. I would consult "the Google" as there are several different tutorials (especially for jquery) for simple tabulature (that's my new word.....I'm going to trademark it ).


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:35 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com