Tabbing Blocks

stormlrd · May 23, 2006, 02:09:45 AM

Ok From what I understand Bloc is planning on tabbing blocks in the future What Im wondering does anyone have any suggestions for clearing up a browser issue between IE and FireFox on the following code.

Take a look at this link to my portal page, look at the top right hand block in IE where the tabbing works and in FF where it does not:

http://stormlrdsreality.co.uk/rhcforum/index.php

First of all I had to hardcode it as the body onload function caused issues trying to do it in a block.

Here is the basic code for it:

Code Select


//This is in the header
?>
		<STYLE>
<!--

.tabFrame
{
	BORDER: 0;
	HEIGHT: 210px;
	WIDTH: 98%;
	font:11px Verdana, Arial, Helvetica, sans-serif;
	margin:0px 0px;
	padding:0 0;
	border-top: solid  1px #5b3737;
        border-left: solid 1px #5b3737;
        border-right: solid  1px black;
        border-bottom: solid 1px black;
	}

.tabOff
{
	FONT-SIZE: 9px;
	font-weight:bold;
	TEXT-ALIGN: CENTER;
	 font-family: tahoma, helvetica, serif;
        color: #d1b4b6;
        background-color: #8a0000;
        border-top: solid  1px #590000;
        border-left: solid 1px #590000;
        border-right: solid  1px black;
        border-bottom: solid 1px black;
	HEIGHT: 18px;
	width: 35px;
	CURSOR: HAND;
}

.tabOn
{
	FONT-SIZE: 9px;
	font-weight:bold;
	TEXT-ALIGN: CENTER;
	 font-family: tahoma, helvetica, serif;
        color: #8a0000;
        background-color: #d1b4b6;
        border-top: solid  1px #5b3737;
        border-left: solid 1px #5b3737;
        border-right: solid  1px black;
        border-bottom: solid 1px black;
	HEIGHT: 20px;
	width: 35px;
	CURSOR: HAND;
	}

-->
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--
/*
	WebTabControl.html

	JavaScript/DHTML
	Microsoft Internet Explorer 6.0
	Copyright Ãƒâ€šÃ,Â© 2003 Steve Puri. All rights reserved.
	Steve Puri - stevepuri@yahoo.com
	06:57 14/07/2003
*/

/******** WebTabControl Configuration ********/


// Tab Name | URL | * (Default Selected Tab)
var tabs = new Array
(
	"Score|http://stormlrdsreality.co.uk/rhcforum/exp.php|*",
	"Gold|http://stormlrdsreality.co.uk/rhcforum/gold.php",
	"M-kills|http://stormlrdsreality.co.uk/rhcforum/mkills.php",
	"P-kills|http://stormlrdsreality.co.uk/rhcforum/pkills.php"
);

// Align Tab: LEFT, CENTER, RIGHT
var tabAlign = "RIGHT";

/*********************************************/

function tabOnClick(ID)
{
	var oElement = null;

	for (var i = 0; i < tabs.length; i++)
	{
		oElement = document.getElementById(i);
		oElement.className = "tabOff";
	}

	oElement = document.getElementById(ID);
	oElement.className = "tabOn";

	var tab = tabs[ID].split("|");
	divTabFrame.innerHTML = "<IFRAME SRC="+tab[1]+" CLASS='tabFrame'></IFRAME>";

	document.body.focus();
}

function tabLoad()
{
	var HTML = "";

	HTML += "<P ALIGN="+tabAlign+">";
	for (var i = 0; i < tabs.length; i++)
	{
		var tab = tabs[i].split("|");
		HTML += "<INPUT TYPE='BUTTON' ID="+i+" CLASS='tabOff' VALUE="+tab[0]+" onClick='tabOnClick("+i+")'>&nbsp;";
	}

	divTabButtons.innerHTML = HTML;

	for (var i = 0; i < tabs.length; i++)
	{
		var tab = tabs[i].split("|");

		if (tab[2] == "*")
		{
			tabOnClick(i);
			
			break;			
		}
	}
}
//-->
</SCRIPT>
<?
echo '</head>
<body style="background-color:#360800; padding: 0px 0px 0px 0px;" onLoad="tabLoad()"><a name="top"></a>';



//this is below the right block div before the function call:
echo '<table width="' ,$context['TPortal']['rightbar_width']-15, 'px" cellpadding="0" cellspacing="0px" border="0" align="center" class="tborder">
			  <tr><td class="titlebg">Questor\'s Gate - Top 10</td></tr>
<tr><td align="center">
<DIV ID="divTabButtons"></DIV>
<DIV ID="divTabFrame"></DIV>
</td></TR>
</table>';

Thanks in advance for any ideas to fix this issue.

Storm $:-\$

IchBin · May 23, 2006, 02:32:26 AM

When loading it in Firefox I get a lot of errors in the debug screen. I'm no code guru, but IMO I think you need to stick to the standards as much as possible. Firefox adheres to standards more so than IE hence the reason some websites just don't look the same. Some people just don't care to stick to the standards as much. If you install the developers extension for firefox you can see all the errors by clicking a little exclamation icon.

stormlrd · May 23, 2006, 02:34:42 AM

Thanks Inchbin, you dont by chance have that list open do you, that you could copy and paste. And Whats the developers extension link

bloc · May 23, 2006, 08:24:19 AM

Its essentially a IE specific function it seems..why not use a similar code which also works in both FF and Opera?

http://dynamicdrive.com/dynamicindex17/tabcontent.htm

stormlrd · May 23, 2006, 12:42:23 PM

Slick bro, the one i used was an iframed setup but no biggy I'll take a few minutes this morning and swap them out.

PS thanks for the that link i bookmarked that site looks like alot of good stuff there.

Maybe we should start a topic somewhere for sharing peoples script sites Ive got some good ones as well.

stormlrd · May 23, 2006, 01:25:42 PM

Thanks Bloc worked like a charm

http://stormlrdsreality.co.uk/rhcforum/index.php

I just created a php page with all the code on it and than created a phpblock and called it.

G6Cad · May 23, 2006, 01:48:16 PM

That theme is really over the top of all the themes you have done so far Stormrld

Looks really fine, love the deep red colors

stormlrd · May 23, 2006, 01:57:34 PM

Quote from: G6 on May 23, 2006, 01:48:16 PM
That theme is really over the top of all the themes you have done so far Stormrld
Looks really fine, love the deep red colors

Thanks G6, the gfx are from RaXavier69 He did an outstanding job, We did this one together where I coded it and he did images for it. Its still got some things to finish like the buttons but Its very impressive. He gonna let me use it for my game theme as well which is sweet.

Recent

User

Stats

Members

Stats

Users Online

Tabbing Blocks

stormlrd

IchBin

stormlrd

bloc

stormlrd

stormlrd

G6Cad

stormlrd

This website is proudly hosted on Crocweb Cloud Website Hosting.